:root {
  --ink: #14251f;
  --muted: #5d6b66;
  --cream: #f5f1e8;
  --paper: #fffefa;
  --lime: #c9ef65;
  --green: #214d3e;
  --orange: #ff785a;
  --line: #dce2dc;
  --shadow: 0 24px 70px rgba(20, 37, 31, .13);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 8% 12%, rgba(201,239,101,.55), transparent 26rem), radial-gradient(circle at 92% 35%, rgba(255,120,90,.22), transparent 24rem); }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid rgba(20,37,31,.13); }
.brand { display: flex; align-items: center; gap: 15px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 60px; height: 42px; color: white; background: var(--green); border-radius: 50% 45% 52% 43%; font-weight: 900; letter-spacing: -.08em; transform: rotate(-3deg); }
.brand-name { font-weight: 750; letter-spacing: -.02em; }
main { min-height: calc(100vh - 142px); }
.login-layout { max-width: 1180px; margin: 0 auto; padding: clamp(70px, 10vw, 140px) 28px 90px; display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
h1,h2,p { margin-top: 0; }
h1 { max-width: 730px; margin-bottom: 24px; font-size: clamp(48px, 7vw, 90px); line-height: .96; letter-spacing: -.065em; }
h2 { margin-bottom: 12px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.045em; line-height: 1.05; }
.eyebrow,.kicker { margin-bottom: 16px; color: var(--green); font-size: 13px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.lead { max-width: 650px; color: var(--muted); font-size: clamp(19px, 2vw, 24px); }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.feature-row span,.count { padding: 8px 13px; background: rgba(255,255,255,.6); border: 1px solid rgba(20,37,31,.14); border-radius: 999px; font-size: 13px; font-weight: 650; }
.login-card { padding: clamp(30px, 4vw, 48px); background: var(--paper); border: 1px solid rgba(20,37,31,.1); border-radius: 8px 34px 8px 34px; box-shadow: var(--shadow); }
.login-card > p:not(.kicker) { color: var(--muted); }
form { margin-top: 30px; }
label { display: block; margin: 18px 0 7px; font-size: 14px; font-weight: 750; }
input { width: 100%; padding: 14px 15px; border: 1px solid #aab7b1; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; outline: none; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,77,62,.15); }
button { font: inherit; cursor: pointer; }
.primary { width: 100%; margin-top: 10px; padding: 14px 18px; border: 0; border-radius: 6px; color: white; background: var(--green); font-weight: 800; }
.primary:hover { background: #17382d; }
.link-button { padding: 8px 2px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); }
.error { min-height: 24px; margin: 10px 0 0; color: #a02f20; font-size: 14px; }
.dashboard { max-width: 1180px; margin: 0 auto; padding: 70px 28px 100px; }
.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.welcome h1 { margin-bottom: 15px; font-size: clamp(46px, 6vw, 76px); }
.welcome p { color: var(--muted); }
.progress-card { min-width: 170px; padding: 22px; background: var(--lime); border-radius: 30px 6px 30px 6px; }
.progress-card strong,.progress-card span { display: block; }
.progress-card strong { font-size: 25px; }
.progress-card span { font-size: 13px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 55px 0 24px; }
.section-heading h2 { margin: 0; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.lab-card { position: relative; min-height: 275px; padding: 30px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px 30px 8px 8px; box-shadow: 0 12px 35px rgba(20,37,31,.07); }
.lab-card::after { content: ""; position: absolute; right: -32px; bottom: -45px; width: 145px; height: 145px; background: var(--lime); border-radius: 50%; opacity: .65; }
.lab-meta { display: flex; gap: 8px; margin-bottom: 42px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.lab-card h3 { max-width: 390px; margin: 0 0 14px; font-size: 27px; line-height: 1.05; letter-spacing: -.035em; }
.lab-card p { max-width: 420px; color: var(--muted); }
.status { display: inline-block; margin-top: 15px; padding: 7px 12px; border-radius: 999px; background: #eef1ee; color: var(--green); font-size: 13px; font-weight: 800; }
.demo-note { display: flex; gap: 18px; margin-top: 28px; padding: 20px 23px; color: white; background: var(--green); border-radius: 6px; }
.demo-note span { opacity: .8; }
footer { padding: 20px 28px; text-align: center; color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }
@media (max-width: 780px) {
  .login-layout { grid-template-columns: 1fr; padding-top: 70px; }
  .intro h1 { font-size: 52px; }
  .welcome { align-items: start; flex-direction: column; }
  .demo-note { flex-direction: column; }
  .brand-name { display: none; }
}

/* KYH brand theme, based on the current official kyh.se color system. */
:root {
  --ink: #28221b;
  --muted: #755e60;
  --cream: #f7f1ed;
  --paper: #fff;
  --lime: #f1d3bf;
  --green: #2d807c;
  --orange: #c75000;
  --line: rgba(40,34,27,.18);
  --shadow: 0 24px 60px rgba(40,34,27,.16);
}
html { background: var(--cream); }
body { color: var(--ink); background: var(--cream); font-family: Roboto, Arial, Helvetica, sans-serif; }
body::before { display: none; }
.topbar { min-height: 92px; height: auto; color: #fff; background: var(--ink); border-bottom: 4px solid var(--orange); }
.brand img { display: block; width: 104px; height: 52px; object-fit: contain; }
.brand-divider { width: 1px; height: 35px; margin: 0 19px; background: rgba(255,255,255,.35); }
.brand-name { color: #fff; font-weight: 700; line-height: 1.15; }
.brand-name small { display: block; margin-top: 4px; color: rgba(255,255,255,.66); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
main { min-height: calc(100vh - 162px); }
h1 { line-height: .98; letter-spacing: -.055em; }
h2 { line-height: 1.05; letter-spacing: -.035em; }
.eyebrow,.kicker { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.login-layout { position: relative; max-width: 1280px; padding: clamp(72px,8vw,118px) 34px 82px; grid-template-columns: minmax(0,1.2fr) minmax(340px,.62fr); gap: clamp(58px,9vw,130px); }
.login-layout::before { content: ">"; position: absolute; z-index: 0; left: -9vw; top: 19%; color: rgba(199,80,0,.08); font-size: 36vw; font-weight: 900; line-height: .7; }
.intro,.login-card { position: relative; z-index: 1; }
.intro h1 { max-width: 790px; }
.lead { max-width: 715px; margin-bottom: 38px; color: var(--muted); }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; max-width: 800px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.value-grid article { min-height: 125px; display: flex; gap: 15px; padding: 22px 18px; background: rgba(247,241,237,.96); }
.value-grid strong { color: var(--orange); font-size: 12px; }
.value-grid span,.value-grid b { display: block; }
.value-grid b { margin-bottom: 5px; color: var(--ink); font-size: 14px; }
.value-grid span { color: var(--muted); font-size: 13px; }
.login-card { padding: 44px 42px 30px; background: #fff; border: 0; border-top: 8px solid var(--orange); border-radius: 0; box-shadow: 12px 12px 0 rgba(45,128,124,.18), var(--shadow); }
.login-card::after { display: none; }
.login-card > p:not(.kicker):not(.secure-note) { color: var(--muted); }
.demo-badge { position: absolute; right: 28px; top: 28px; padding: 6px 10px; color: #fff; background: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
form { margin-top: 26px; }
label { font-size: 13px; font-weight: 700; }
input { border: 1px solid var(--ink); border-radius: 0; color: var(--ink); }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,128,124,.22); }
.primary { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 15px 18px; border-radius: 0; background: var(--orange); font-weight: 700; }
.primary:hover { background: var(--ink); }
.primary:focus-visible,.link-button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.link-button { border-bottom-color: #fff; color: #fff; }
.error { color: #9f2e00; font-size: 13px; }
.secure-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.secure-note span { color: var(--green); }
.story-strip { padding: clamp(54px,7vw,85px) max(34px,calc((100vw - 1212px)/2)); color: #fff; background: var(--ink); }
.story-strip .kicker { color: #fa6400; }
.story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,9vw,130px); }
.story-copy h2 { max-width: 560px; margin: 0; }
.story-copy p { max-width: 580px; margin: 0; color: rgba(255,255,255,.72); font-size: 18px; }
.dashboard { max-width: 1212px; padding-top: 74px; }
.welcome { gap: 36px; padding-bottom: 52px; }
.welcome h1 { max-width: 810px; margin-bottom: 13px; }
.welcome p { color: var(--muted); font-size: 18px; }
.progress-card { min-width: 225px; padding: 24px; color: #fff; background: var(--ink); border-radius: 0; border-bottom: 6px solid var(--orange); }
.progress-card span,.progress-card strong,.progress-card small { display: block; }
.progress-card span { color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.progress-card strong { margin: 10px 0 7px; }
.progress-card strong i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: #5bce92; border-radius: 50%; }
.progress-card small { color: rgba(255,255,255,.68); }
.dashboard-values { display: grid; grid-template-columns: repeat(3,1fr); margin: 30px 0 62px; border: 1px solid var(--line); }
.dashboard-values div { min-height: 105px; padding: 22px; border-right: 1px solid var(--line); }
.dashboard-values div:last-child { border: 0; }
.dashboard-values span,.dashboard-values strong { display: block; }
.dashboard-values span { margin-bottom: 8px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-values strong { font-size: 16px; }
.section-heading { margin-top: 0; }
.count { padding: 7px 12px; color: #fff; background: var(--green); border: 0; border-radius: 0; font-size: 12px; font-weight: 700; }
.lab-card { min-height: 290px; background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: 8px 8px 0 rgba(199,80,0,.16); }
.lab-card::after { content: ">"; right: -11px; bottom: -45px; width: auto; height: auto; color: rgba(199,80,0,.12); background: transparent; border-radius: 0; font-size: 155px; font-weight: 900; opacity: 1; }
.lab-meta { margin-bottom: 45px; color: var(--orange); font-size: 11px; font-weight: 800; }
.lab-card h3 { max-width: 430px; font-size: 29px; }
.lab-card p { max-width: 480px; color: var(--muted); }
.status { padding: 7px 11px; color: #fff; background: var(--orange); border-radius: 0; font-size: 12px; font-weight: 700; }
.demo-note { display: grid; grid-template-columns: .55fr 1.45fr; gap: 28px; margin-top: 32px; padding: 25px; color: #fff; background: var(--ink); border-left: 8px solid var(--green); border-radius: 0; }
.demo-note span { color: rgba(255,255,255,.7); opacity: 1; }
footer { min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px clamp(24px,5vw,78px); color: rgba(255,255,255,.68); background: var(--ink); text-align: left; font-size: 11px; }
@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; padding-top: 68px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article { min-height: auto; }
  .login-card { max-width: 580px; }
  .story-copy { grid-template-columns: 1fr; }
  .dashboard-values { grid-template-columns: 1fr; }
  .dashboard-values div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 780px) {
  .brand-name { display: block; }
  .demo-note { display: grid; }
}
@media (max-width: 560px) {
  .topbar { min-height: 78px; padding-inline: 18px; }
  .brand img { width: 80px; }
  .brand-divider { margin-inline: 12px; }
  .login-layout { padding-inline: 20px; }
  .login-card { padding: 38px 24px 26px; }
  .demo-badge { right: 20px; top: 20px; }
  .dashboard { padding-inline: 20px; }
  .demo-note { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
}

/* Interactive pedagogy lab and catalogue */
.lab-card { display: flex; flex-direction: column; }
.lab-card > * { position: relative; z-index: 1; }
.lab-card .lab-meta { justify-content: space-between; }
.lab-card p { flex: 1; }
.lab-category { color: var(--muted); }
.lab-action,.quiz-action { align-self: flex-start; margin-top: 18px; padding: 10px 14px; border: 0; color: #fff; background: var(--orange); font-weight: 700; text-decoration: none; }
.lab-action:hover,.quiz-action:hover { background: var(--ink); }
.lab-action[disabled],.quiz-action[disabled] { cursor: default; color: var(--muted); background: #ede6e1; }
.lab-progress-line { height: 4px; margin-top: 18px; overflow: hidden; background: #eee4de; }
.lab-progress-line i { display: block; height: 100%; background: var(--green); }
.progress-0 { width: 0; }
.progress-25 { width: 25%; }
.progress-50 { width: 50%; }
.progress-75 { width: 75%; }
.progress-100 { width: 100%; }
.quiz-heading { margin-top: 70px; }
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; }
.quiz-card { padding: 28px; background: var(--ink); border-left: 8px solid var(--green); color: #fff; }
.quiz-card .lab-meta { margin-bottom: 28px; color: #f7aa77; }
.quiz-card h3 { margin: 0 0 10px; font-size: 27px; }
.quiz-card p { max-width: 650px; color: rgba(255,255,255,.72); }
.quiz-score { display: inline-block; margin-left: 12px; color: #94ddc8; font-weight: 700; }

.learning-view { max-width: 1280px; margin: 0 auto; padding: 38px 34px 100px; }
.view-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 58px; }
.back-button,.secondary-button { padding: 11px 14px; border: 1px solid var(--ink); color: var(--ink); background: transparent; font-weight: 700; }
.back-button:hover,.secondary-button:hover { color: #fff; background: var(--ink); }
.session-badge { padding: 7px 10px; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.learning-hero { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.learning-hero h1,.quiz-hero h1 { max-width: 880px; margin-bottom: 15px; font-size: clamp(48px,6vw,78px); }
.learning-hero > div > p:last-child,.quiz-hero > p:last-child { max-width: 760px; color: var(--muted); font-size: 18px; }
.lab-progress-summary { width: 140px; padding: 23px; color: #fff; background: var(--orange); text-align: right; }
.lab-progress-summary strong,.lab-progress-summary span { display: block; }
.lab-progress-summary strong { font-size: 39px; line-height: 1; }
.lab-progress-summary span { margin-top: 6px; font-size: 12px; text-transform: uppercase; }
.learning-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 32px; margin-top: 38px; align-items: start; }
.step-nav { position: sticky; top: 24px; padding: 26px 20px; color: #fff; background: var(--ink); }
.step-nav .kicker { color: #f7aa77; }
.step-nav button { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 16px 8px; border: 0; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.62); background: transparent; text-align: left; }
.step-nav button span { grid-row: 1 / span 2; color: #f7aa77; font-size: 12px; font-weight: 800; }
.step-nav button b { color: inherit; }
.step-nav button small { margin-top: 2px; color: inherit; }
.step-nav button.active { color: #fff; background: rgba(45,128,124,.3); }
.step-nav button.done span::after { content: " ✓"; color: #75d8b9; }
.studio-card { min-height: 610px; padding: 0 42px 42px; background: #fff; box-shadow: 9px 9px 0 rgba(199,80,0,.14); }
.studio-progress { height: 8px; margin: 0 -42px 40px; background: #eee5df; }
.studio-progress i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .25s ease; }
.studio-card form { margin: 0; }
.step-panel h2 { max-width: 720px; font-size: clamp(34px,4vw,50px); }
.step-intro { max-width: 720px; margin-bottom: 30px; color: var(--muted); font-size: 17px; }
.studio-card label,.studio-card legend { margin-top: 20px; color: var(--ink); font-size: 13px; font-weight: 800; }
.studio-card select,.studio-card textarea,.studio-card input[type="text"],.sentence-field input { width: 100%; padding: 14px; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; }
.studio-card select:focus,.studio-card textarea:focus,.studio-card input:focus { outline: 3px solid rgba(45,128,124,.25); outline-offset: 1px; }
.sentence-field { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--ink); }
.sentence-field span { padding: 14px; color: var(--muted); background: #f5efeb; font-size: 14px; }
.sentence-field input { border: 0; }
.learning-tip { margin-top: 24px; padding: 17px 18px; border-left: 6px solid var(--green); background: #edf5f3; color: var(--muted); }
.learning-tip strong { margin-right: 8px; color: var(--ink); }
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 28px; padding: 0; border: 0; }
.choice-grid legend { grid-column: 1 / -1; margin-bottom: 8px; }
.choice-card { position: relative; display: block; min-height: 130px; margin: 0 !important; padding: 17px; border: 1px solid var(--line); cursor: pointer; }
.choice-card:has(input:checked) { color: #fff; background: var(--green); border-color: var(--green); }
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card b,.choice-card small { display: block; }
.choice-card small { margin-top: 8px; color: inherit; font-weight: 400; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.learner-preview { padding: 30px; border: 1px solid var(--line); border-top: 7px solid var(--orange); background: var(--cream); }
.learner-preview > span { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.learner-preview h3 { margin: 22px 0 12px; font-size: 27px; }
.learner-preview p { color: var(--muted); font-size: 17px; }
.learner-preview div { margin-top: 25px; padding: 15px; color: #fff; background: var(--ink); }
.learner-preview b,.learner-preview small { display: block; }
.learner-preview small { margin-top: 5px; color: rgba(255,255,255,.7); }
.review-check { display: flex !important; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); }
.review-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); }
.form-message { min-height: 26px; margin: 20px 0 0; color: #9f2e00; font-weight: 700; }
.studio-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 8px; }
.primary.compact { width: auto; min-width: 210px; margin: 0; text-decoration: none; }
.completion-card { padding: 40px 12px 12px; text-align: center; }
.completion-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 25px; color: #fff; background: var(--green); border-radius: 50%; font-size: 32px; }
.completion-card p:not(.kicker) { max-width: 620px; margin-inline: auto; color: var(--muted); }
.completion-actions { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }

.quiz-hero { padding: 20px 0 45px; border-bottom: 1px solid var(--line); }
.quiz-form { max-width: 900px; margin: 38px auto 0; }
.quiz-question { margin-bottom: 18px; padding: 28px; background: #fff; border-left: 7px solid var(--orange); }
.quiz-question legend { width: 100%; margin-bottom: 18px; font-size: 20px; font-weight: 800; }
.quiz-option { display: flex; gap: 12px; align-items: flex-start; margin: 9px 0; padding: 13px; border: 1px solid var(--line); cursor: pointer; }
.quiz-option:has(input:checked) { border-color: var(--green); background: #edf5f3; }
.quiz-option input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--green); }
.quiz-feedback { margin-top: 15px; padding: 12px; color: var(--muted); background: var(--cream); }
.quiz-feedback.correct { border-left: 5px solid var(--green); }
.quiz-feedback.incorrect { border-left: 5px solid var(--orange); }
.quiz-result { max-width: 900px; margin: 24px auto 0; padding: 30px; color: #fff; background: var(--ink); border-bottom: 7px solid var(--green); }
.quiz-result strong { display: block; margin-bottom: 8px; font-size: 34px; }

@media (max-width: 900px) {
  .learning-grid { grid-template-columns: 1fr; }
  .step-nav { position: static; display: grid; grid-template-columns: repeat(2,1fr); }
  .step-nav .kicker { grid-column: 1 / -1; }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .learning-view { padding-inline: 18px; }
  .view-topline,.learning-hero,.completion-actions { align-items: flex-start; flex-direction: column; }
  .learning-hero { display: flex; }
  .lab-progress-summary { width: 100%; text-align: left; }
  .step-nav { grid-template-columns: 1fr; }
  .studio-card { padding: 0 20px 25px; }
  .studio-progress { margin-inline: -20px; }
  .sentence-field,.two-fields { grid-template-columns: 1fr; }
  .studio-actions { align-items: stretch; flex-direction: column-reverse; }
  .primary.compact { width: 100%; }
  .session-badge { display: none; }
}