@font-face{font-family:Madefor;src:url(wixt-lat.woff2)format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Madefor;src:url(wixt-cyr.woff2)format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:MadeforD;src:url(wixd-lat.woff2)format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:MadeforD;src:url(wixd-cyr.woff2)format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root {
  --bg:#f3f6fb; --surf:#fff; --surf2:#f2f6fd;
  --tx:#0f1a2e; --mut:#52627d; --fade:#5c6c88;
  --line:#e4eaf4; --line2:#d2dcec;
  --pri:#24675b; --pri-d:#174c43; --pri-soft:#e4efe8; --on-pri:#fff;
  --ok:#1b7048; --ok-soft:#e3f1e9; --bad:#ad3224; --bad-soft:#fae7e3; --warn:#865704;
  --r:16px; --r-sm:12px; --sh-sm:0 1px 2px rgba(15,26,46,.05); --sh:0 10px 30px rgba(15,26,46,.10),0 2px 6px rgba(15,26,46,.05);
  --ff:Madefor,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --ff-serif:MadeforD,Madefor,system-ui,sans-serif;
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:var(--ff); color:var(--tx); background:var(--bg); color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#070c17; --surf:#0f1726; --surf2:#141e32;
  --tx:#e8eefb; --mut:#a2afc8; --fade:#94a3c0;
  --line:#1b2538; --line2:#27344b;
  --pri:#83d4b5; --pri-d:#ace6cf; --pri-soft:#12362b; --on-pri:#061b12;
  --ok:#4ed39a; --ok-soft:#0d2a20; --bad:#ef8a76; --bad-soft:#2d1512; --warn:#ebc570;
  --sh-sm:0 1px 2px rgba(0,0,0,.35); --sh:0 14px 34px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  color-scheme:dark;
}
*  { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { margin: 0; min-width: 320px; line-height: 1.65; background: var(--bg); }
button, input, select, textarea  { font: inherit; }
button, a  { touch-action: manipulation; }
a  { color: var(--pri); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible  {
  outline: 3px solid var(--line2); outline-offset: 3px;
}
.skip-link  { position: fixed; left: 1rem; top: -5rem; z-index: 20; background:var(--surf); padding: .7rem 1rem; }
.skip-link:focus  { top: 1rem; }
.notification-link  { order: 2; margin-left: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--tx); background:var(--surf); flex-shrink: 0; }
.notification-link[hidden]  { display: none; }
.notification-link svg  { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.main-nav [data-nav]  { position: relative; }
.notification-badge  { position: absolute; top: 0; right: 2px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 12px; background: var(--bad-soft); color: var(--on-pri); font: 700 11px/20px system-ui,sans-serif; text-align: center; box-shadow: 0 0 0 2px white; }
.notification-card  { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background:var(--surf); margin-bottom: 16px; overflow-wrap: anywhere; }
.notification-card.unread  { border-left: 5px solid var(--pri); background: var(--surf2); }
.notification-card h2  { font-size: clamp(22px,3vw,30px); margin: 10px 0; }
.notification-card time  { color: var(--mut); font-size: 13px; }
.site-header  { min-height: 78px; padding: 0 max(4vw, 20px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 44px; background: var(--surf); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.brand  { color: var(--tx); font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: 2px; text-decoration: none; }
.brand small  { display: block; color: var(--pri); font-size: 10px; letter-spacing: 3px; margin-top: 5px; }
.main-nav  { display: flex; gap: 28px; align-self: stretch; }
.main-nav a  { display: flex; align-items: center; color: var(--mut); text-decoration: none; border-bottom: 3px solid transparent; }
.main-nav a.current  { color: var(--pri); border-bottom-color: var(--pri); font-weight: 650; }
.app-shell  { max-width: 1320px; min-height: calc(100vh - 150px); margin: auto; padding: 42px max(4vw, 20px) 80px; }
.site-footer  { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; padding: 24px max(4vw, 20px); color: var(--mut); font-size: 13px; }
.loading-card, .error-card  { background: var(--surf); border: 1px solid var(--line); padding: 28px; border-radius: 8px; }
.eyebrow  { color: var(--mut); font-size: 11px; letter-spacing: 1.8px; font-weight: 750; text-transform: uppercase; }
h1, h2  { font-family:var(--ff); font-weight: 400; line-height: 1.12; }
h1  { font-size: clamp(45px, 7vw, 82px); letter-spacing: -2.5px; margin: 12px 0 20px; }
h2  { font-size: clamp(28px, 3.5vw, 42px); margin: 12px 0 20px; }
h3  { line-height: 1.3; }
.lead  { max-width: 760px; font-size: 19px; color: var(--mut); }
.hero  { padding: 38px 0 58px; border-bottom: 1px solid var(--line); } .actions  { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.button  { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--surf); color: var(--pri); text-decoration: none; cursor: pointer; }
.button:hover  { background: var(--pri-soft); }
.button.primary  { color:var(--on-pri); background: var(--pri); border-color: var(--pri); }
.button.primary:hover  { background: var(--pri); }
.button:disabled  { opacity: .55; cursor: not-allowed; }
.stats  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); margin: 42px 0; }
.stat  { background: var(--surf); padding: 24px; }
.stat strong  { display: block; font: 36px/1 Madefor, sans-serif; color: var(--pri); }
.stat span  { color: var(--mut); font-size: 13px; }
.card  { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surf); color: inherit; text-decoration: none; }
.card:hover  { border-color: var(--line2); box-shadow: var(--sh); }
.card h3  { margin: 8px 0; }
.card p  { color: var(--mut); font-size: 14px; margin-bottom: 0; }
.grammar-sections  { display: grid; gap: 24px; margin: 28px 0; }
.grammar-section h2  { margin: 12px 0; overflow-wrap: anywhere; }
.grammar-section .comparison-shortcuts  { margin-top: 22px; }
.pill  { display: inline-block; padding: 3px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--mut); font-size: 12px; }
.theory-layout  { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
.theory-nav  { align-self: start; position: sticky; top: 110px; border-right: 1px solid var(--line); padding-right: 24px; }
.theory-nav p  { color: var(--mut); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.theory-nav a  { display: block; padding: 9px 11px; color: var(--mut); text-decoration: none; font-size: 14px; border-left: 3px solid transparent; }
.theory-nav a.active  { color: var(--pri); background: var(--pri-soft); border-left-color: var(--pri); font-weight: 650; }
.theory-content  { min-width: 0; }
.theory-content article  { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: clamp(22px, 4vw, 54px); }
.tense-map  { margin: 0 calc(-1 * min(3vw, 32px)) 40px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line2); border-radius: 10px; background: linear-gradient(145deg, var(--surf) 0%, var(--surf2) 100%); box-shadow: var(--sh); }
.tense-map-intro  { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 24px; }
.tense-map-intro h2  { margin: 6px 0 0; padding: 0; border: 0; }
.tense-map-intro p  { max-width: 490px; margin: 0; color: var(--mut); font-size: 14px; }
.map-shell  { position: relative; overflow: hidden; border: 1px solid var(--line2); border-radius: 8px; background: var(--surf); }
.map-toolbar  { min-height: 62px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surf); position: relative; z-index: 4; }
.map-zoom-group  { display: flex; align-items: center; }
.map-zoom-group .button  { border-radius: 0; margin-left: -1px; }
.map-zoom-group .button:first-child  { border-radius: 5px 0 0 5px; margin-left: 0; }
.map-zoom-group .button:last-child  { border-radius: 0 5px 5px 0; }
.map-icon-button  { width: 42px; padding-left: 0; padding-right: 0; font-size: 20px; }
.map-scale  { width: 58px; align-self: stretch; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surf2); color: var(--mut); font-size: 12px; }
.map-toolbar-hint  { margin-left: auto; color: var(--mut); font-size: 12px; }
.map-viewport  { height: 720px; position: relative; overflow: hidden; touch-action: none; background-color: var(--surf2); background-image: radial-gradient(#cfd3dc 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
.map-viewport.is-panning  { cursor: grabbing; }
.tense-map-grid  { display: grid; grid-template-columns: 120px repeat(4, 390px); grid-template-rows: 74px repeat(3, 310px); gap: 10px; }
.map-canvas  { width: 1720px; padding: 18px; transform-origin: 0 0; will-change: transform; user-select: none; }
.map-corner, .aspect-head, .time-head  { display: flex; align-items: center; justify-content: center; text-align: center; }
.map-corner  { flex-direction: column; color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.aspect-head  { border-bottom: 2px solid var(--line2); color: var(--pri); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .9px; }
.time-head  { border-radius: 7px; color:var(--on-pri); background: var(--pri); font: 24px Madefor, sans-serif; writing-mode: vertical-rl; transform: rotate(180deg); }
.tense-cell  { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 19px; border: 1px solid var(--line2); border-radius: 7px; background: var(--surf); color: var(--tx); text-align: left; transition: box-shadow .15s ease, border-color .15s ease; }
.tense-cell:hover  { border-color: var(--pri); box-shadow: 0 8px 18px rgba(34,42,61,.11); }
.tense-cell-top  { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.tense-cell strong  { color: var(--pri); font: 23px/1.15 Madefor, sans-serif; }
.tense-cell code  { flex: 0 0 auto; color: var(--tx); background: var(--surf2); font-size: 12px; }
.tense-focus  { color: var(--tx); font-size: 15px; font-weight: 650; }
.tense-uses  { display: grid; gap: 2px; color: var(--mut); font-size: 13px; line-height: 1.35; }
.tense-uses b  { margin-bottom: 2px; color: var(--tx); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tense-markers  { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 12px; line-height: 1.4; }
.tense-cell em  { color: var(--tx); font: 16px/1.35 Madefor, sans-serif; }
.tense-cell.past  { border-top: 3px solid var(--line2); }
.tense-cell.present  { border-top: 3px solid var(--line2); }
.tense-cell.future  { border-top: 3px solid var(--line2); }
.map-detail  { position: absolute; z-index: 6; top: 78px; right: 16px; width: min(410px, calc(100% - 32px)); max-height: calc(100% - 94px); overflow: auto; padding: 28px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surf); box-shadow: 0 18px 50px rgba(25,34,58,.24); }
.map-detail[hidden]  { display: none; }
.map-detail-close  { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--mut); font-size: 28px; }
.map-detail h3  { margin: 9px 42px 12px 0; color: var(--pri); font: 34px/1.12 Madefor, sans-serif; }
.map-detail h4  { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .7px; }
.map-detail-formula  { display: inline-block; padding: 6px 9px; background: var(--pri-soft); color: var(--tx); }
.map-detail-focus  { color: var(--tx); font-weight: 650; }
.map-detail-example  { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--pri); font: 17px/1.4 Madefor, sans-serif; background: var(--surf2); }
.map-detail-markers  { display: flex; flex-wrap: wrap; gap: 6px; }
.map-detail-markers span  { padding: 3px 8px; border-radius: 3px; background: var(--surf2); color: var(--mut); font-size: 12px; }
.map-detail-trap  { padding: 12px; border-left: 3px solid var(--line2); background: var(--surf2); color: var(--tx); font-size: 13px; }
.map-shell:fullscreen  { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: var(--bg); }
.map-shell:fullscreen .map-toolbar  { min-height: 70px; }
.map-shell:fullscreen .map-viewport  { height: calc(100vh - 70px); }
.map-shell:fullscreen .map-detail  { top: 86px; max-height: calc(100vh - 102px); }
.map-note  { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 13px; }
.theory-content article h1  { font-size: clamp(36px, 5vw, 58px); }
.theory-content article h2  { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 42px; }
.theory-content article h3  { margin-top: 32px; }
.theory-content table  { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.theory-content th, .theory-content td  { border: 1px solid var(--line); padding: 10px; vertical-align: top; text-align: left; }
.theory-content th  { background: var(--pri-soft); }
.theory-content blockquote  { margin: 24px 0; padding: 12px 20px; border-left: 4px solid var(--pri); background: var(--surf2); }
.theory-content code  { background: var(--surf2); padding: 2px 5px; border-radius: 3px; }
.theory-content pre  { overflow: auto; background: var(--surf2); padding: 16px; }
.filters  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px; background: var(--surf); border: 1px solid var(--line); border-radius: 8px; }
.field label, .field > span  { display: block; color: var(--mut); font-size: 13px; margin-bottom: 6px; }
.field select, .field input, .answer-input, .answer-area  { width: 100%; min-height: 45px; border: 1px solid var(--line2); border-radius: 5px; background:var(--surf); padding: 10px 12px; color: var(--tx); }
.filter-summary  { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.filter-summary strong  { color: var(--pri); }
.filter-summary small  { display: block; margin-top: 6px; color: var(--mut); }
.practice-tenses  { grid-column: 1 / -1; min-width: 0; border: 0; margin: 0 0 8px; padding: 0; }
.practice-tenses > legend  { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.tense-actions  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tense-options  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tense-group  { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background:var(--surf); }
.tense-group legend  { font-weight: 700; padding: 0 5px; color: var(--pri); }
.tense-group label, .tense-extra  { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; font-size: 14px; }
.tense-group label:has(input:checked)  { color: var(--pri); font-weight: 600; }
.practice-tenses input  { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--pri); }
.tense-extra  { margin-top: 12px; }
@media (max-width: 760px) { .tense-options  { grid-template-columns: 1fr; } }
.session  { max-width: 900px; margin: auto; }
.session-top  { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; color: var(--mut); font-size: 13px; }
.progress  { height: 5px; background: var(--surf2); margin-bottom: 26px; }
.progress span  { display: block; height: 100%; background: var(--pri); transition: width .2s ease; }
.exercise-card  { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: clamp(22px, 4vw, 42px); box-shadow: var(--sh); }
.exercise-meta  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.prompt  { font: clamp(22px, 3vw, 30px)/1.55 Madefor, sans-serif; white-space: pre-wrap; }
.blank-token  { color: var(--pri); padding: 0 4px; }
.blank-list  { display: grid; gap: 14px; margin: 24px 0; }
.verb-only-note  { margin: 18px 0; padding: 10px 14px; border-left: 3px solid var(--pri); background: var(--pri-soft); color: var(--mut); font-size: 14px; }
.choice-list  { display: grid; gap: 10px; border: 0; padding: 0; margin: 24px 0; }
.choice-list label  { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.choice-list label:has(input:checked)  { background: var(--pri-soft); border-color: var(--pri); }
.feedback  { margin-top: 22px; padding: 18px; border-left: 4px solid var(--ok); background: var(--ok-soft); }
.feedback.wrong  { border-left-color: var(--bad); background: var(--bad-soft); }
.feedback h3  { margin-top: 0; color: var(--ok); }
.feedback.wrong h3  { color: var(--bad); }
.feedback details  { margin-top: 12px; }
.feedback ul  { margin-bottom: 0; }
.rule-links  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.history  { margin-top: 30px; }
.empty  { padding: 38px; text-align: center; background: var(--surf); border: 1px solid var(--line); border-radius: 8px; }
.noscript  { margin: 20px; padding: 20px; background: var(--bad-soft); }

@media (max-width: 820px) {
  .site-header  { min-height: 68px; flex-wrap: wrap; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
  .main-nav  { display: none; width: 100%; height: auto; order: 3; }
  .main-nav.open  { display: flex; }
  .main-nav a  { padding: 7px 0; }
  .theory-layout  { display: block; }
  .theory-nav  { position: static; border-right: 0; padding: 0; display: flex; overflow-x: auto; margin-bottom: 22px; }
  .theory-nav p  { display: none; }
  .theory-nav a  { flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; }
  .theory-nav a.active  { border-left: 0; border-bottom-color: var(--pri); }
  .tense-map-intro  { display: block; }
  .tense-map-intro p  { margin-top: 12px; }
  .map-toolbar-hint  { display: none; }
  .map-viewport  { height: 640px; }
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .filters  { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .app-shell  { padding-top: 24px; }
  .main-nav  { justify-content: space-between; gap: 9px; font-size: 13px; }
  .stats  { grid-template-columns: 1fr; }
  .filter-summary  { align-items: stretch; flex-direction: column; }
  .site-footer  { flex-direction: column; }
  .tense-map  { margin-left: -8px; margin-right: -8px; padding: 18px 12px; }
  .map-toolbar  { align-items: stretch; }
  .map-toolbar > .button:first-child  { flex: 1 1 100%; }
  .map-toolbar .button  { font-size: 13px; padding: 8px 10px; }
  .map-detail  { top: 126px; right: 8px; width: calc(100% - 16px); max-height: calc(100% - 134px); padding: 22px; }
}

@media (prefers-reduced-motion: reduce) { html  { scroll-behavior: auto; } }

/* Syntax direction — the approved NOEON learning-space design. */


body  { padding-bottom: 86px; color: var(--tx); background: var(--surf); line-height: 1.55; }
.demo-strip  { padding: 5px 16px; color: var(--mut); background: var(--surf2); text-align: center; font-size: 10px; letter-spacing: .45px; }
.site-header  { min-height: 72px; max-width: 960px; margin: auto; padding: 14px 24px; border: 0; background: var(--surf); gap: 16px; }
.brand  { display: flex; align-items: baseline; gap: 6px; color: var(--tx); font-size: 21px; letter-spacing: -.6px; }
.brand strong  { font-weight: 800; }
.brand small  { display: inline; margin: 0; color: var(--mut); font-size: 16px; font-weight: 500; letter-spacing: -.5px; }
.brand-mark  { align-self: center; display: grid; place-items: center; width: 28px; height: 28px; margin-right: 2px; border-radius: 8px 2px 8px 2px; color: var(--on-pri); background: var(--pri); font-size: 16px; font-weight: 800; }
.main-nav  { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 5px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surf); backdrop-filter: blur(14px); }
.main-nav a  { flex: 1; max-width: 155px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; color: var(--mut); text-decoration: none; font-size: 12px; }
.main-nav a.current  { color: var(--tx); background: var(--pri-soft); font-weight: 700; }
.main-nav svg  { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.app-shell  { max-width: 960px; min-height: calc(100vh - 130px); padding: 18px 24px 58px; }
.site-footer  { max-width: 900px; margin: 0 auto 12px; padding: 18px 24px; border: 0; }
.eyebrow  { color: var(--mut); font-size: 12px; letter-spacing: .35px; text-transform: none; }
h1, h2, h3  { font-family:var(--ff); }
h1  { font-size: clamp(36px, 6vw, 56px); font-weight: 750; line-height: 1.08; letter-spacing: -2px; }
h2  { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.7px; }
.button  { min-height: 44px; border-radius: 12px; border-color: var(--line2); color: var(--pri-d); font-weight: 700; }
.button:hover  { background: var(--pri-soft); }
.button.primary  { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.button.primary:hover  { background: var(--pri-d); }

.direction-hero  { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; margin: 16px 0 38px; }
.chapter-label  { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.direction-hero h1  { margin: 18px 0; font-size: clamp(43px, 6vw, 58px); font-weight: 750; line-height: 1.04; letter-spacing: -2.2px; }
.direction-hero em  { padding: 0 8px 3px; border-radius: 5px; color: var(--tx); background: var(--pri-soft); font-style: normal; font-weight: inherit; }
.hero-copy > p  { max-width: 360px; color: var(--mut); font-size: 16px; }
.grammar-art  { min-height: 215px; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px; border: 1px solid var(--line2); border-radius: 18px; background: var(--surf2); }
.art-caption  { color: var(--mut); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.word-pieces  { display: grid; grid-template-columns: 36px 62px 1fr 12px; gap: 7px; align-items: center; margin: 24px 0 12px; }
.piece  { font-size: 21px; font-weight: 700; line-height: 1.8; text-align: center; }
.subject-piece  { border: 1px solid var(--line2); border-radius: 8px 8px 3px 3px; background: var(--surf); transform: rotate(-5deg); }
.verb-piece  { border: 1px solid var(--line2); border-radius: 8px; background: var(--pri-soft); transform: translateY(-8px); }
.ending-piece  { border: 1px solid var(--pri); border-radius: 3px 8px 8px 8px; color: var(--on-pri); background: var(--pri); transform: rotate(3deg); }
.period  { color: var(--pri); font-size: 33px; }
.art-lines  { display: grid; grid-template-columns: 36px 62px 1fr 12px; gap: 7px; color: var(--mut); font-size: 10px; text-align: center; }
.art-lines span  { padding-top: 8px; border-top: 1px solid var(--line2); }
.art-foot  { margin-top: 26px; letter-spacing: .2px; }
.section-heading  { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2  { margin: 0; font-size: 23px; }
.section-heading > span  { color: var(--mut); font-size: 12px; }
.section-heading.compact  { margin: 0; }
.today-grid  { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; }
.learning-session  { padding: 27px; border-radius: 20px; color: var(--on-pri); background: var(--pri); }
.learning-session .eyebrow, .learning-session p  { color: var(--mut); }
.session-number  { margin: 16px 0 4px; color: var(--warn); font-size: 76px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -5px; line-height: 1; }
.learning-session h2  { margin: 0 0 10px; }
.session-button  { width: 100%; margin-top: 18px; border-color: var(--pri-soft); color: var(--tx); background: var(--pri-soft); }
.day-progress  { margin: 0 0 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surf); }
.day-progress .progress  { margin: 14px 0 10px; }
.subtle  { color: var(--mut); font-size: 12px; }
.quick-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-grid a  { padding: 17px; border-radius: 13px; color: var(--tx); background: var(--pri-soft); text-decoration: none; font-size: 13px; font-weight: 700; }
.quick-grid a:nth-child(2), .quick-grid a:nth-child(3)  { background: var(--surf2); }
.quick-grid a span  { display: block; margin-bottom: 7px; font-size: 21px; font-weight: 500; }
.library-link  { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--tx); text-decoration: none; }
.library-link small  { display: block; margin-top: 3px; color: var(--mut); font-weight: 400; }

.theory-layout  { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
.theory-nav  { top: 94px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surf); }
.theory-nav p  { margin: 4px 10px 10px; color: var(--mut); }
.theory-nav a  { margin: 3px 0; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--mut); }
.theory-nav a.active  { border: 0; color: var(--tx); background: var(--pri-soft); }
.theory-content article  { padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-top: 4px solid var(--pri); border-radius: 18px; box-shadow: 0 1px 2px rgba(31,64,55,.04); }
.theory-content article h1  { font-size: clamp(34px, 5vw, 50px); }
.theory-content article h2  { border-color: var(--line); }
.theory-content th  { background: var(--pri-soft); }
.theory-content blockquote  { border-color: var(--pri); background: var(--surf2); }

.tense-map  { margin: 0 0 28px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, var(--surf), var(--surf2)); box-shadow: none; }
.tense-map-intro  { align-items: start; }
.tense-map-intro h2  { color: var(--tx); }
.map-shell  { border-color: var(--line2); border-radius: 16px; }
.map-toolbar  { min-height: 64px; gap: 8px; background: var(--surf); }
.map-toolbar .button  { border-radius: 10px; }
.map-zoom-group .button:first-child  { border-radius: 10px 0 0 10px; }
.map-zoom-group .button:last-child  { border-radius: 0 10px 10px 0; }
.map-scale  { border-color: var(--line); background: var(--surf2); }
.map-viewport  { height: 720px; background-color: var(--surf2); background-image: radial-gradient(#b9cbbd 1px, transparent 1px); }
.aspect-head  { border-color: var(--line2); color: var(--pri); }
.time-head  { border-radius: 10px 3px 10px 3px; background: var(--pri); font-family:var(--ff); font-weight: 700; }
.tense-cell  { border-color: var(--line2); border-radius: 14px; background: var(--surf); box-shadow: 0 3px 12px rgba(31,64,55,.05); }
.tense-cell:hover  { border-color: var(--pri); box-shadow: 0 10px 24px rgba(31,64,55,.14); transform: translateY(-2px); }
.tense-cell strong  { color: var(--pri-d); font-family:var(--ff); font-weight: 750; }
.tense-cell code  { border-radius: 7px; color: var(--tx); background: var(--pri-soft); }
.tense-cell.present  { border-top-color: var(--line2); }
.tense-cell.past  { border-top-color: var(--line2); }
.tense-cell.future  { border-top-color: var(--line2); }
.tense-markers  { border-color: var(--line); }
.map-detail  { border-color: var(--line2); border-radius: 16px; background: var(--surf); }
.map-detail h3  { color: var(--pri-d); font-family:var(--ff); font-weight: 750; }
.map-detail-formula, .map-detail-markers span  { color: var(--tx); background: var(--pri-soft); }
.map-detail-example  { border-color: var(--pri); background: var(--surf2); font-family:var(--ff); }
.map-detail-trap  { border-color: var(--line2); background: var(--surf2); }
.map-shell:fullscreen  { background: var(--surf); }

.filters, .exercise-card, .empty, .profile-card  { border-color: var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(31,64,55,.05); }
.filters  { background: var(--surf); }
.field select, .field input, .answer-input, .answer-area  { border-radius: 12px; border-color: var(--line2); }
.choice-list label  { border-radius: 12px; }
.feedback  { border-radius: 0 12px 12px 0; }
.profile-card  { display: grid; grid-template-columns: 58px 1fr; gap: 12px 18px; padding: 28px; border: 1px solid var(--line); border-top: 4px solid var(--pri); }
.profile-avatar  { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px 4px 14px 4px; color: var(--on-pri); background: var(--pri); font-size: 24px; font-weight: 800; }
.profile-card h2, .profile-card p  { margin: 0 0 5px; }
.profile-row, .profile-card > .subtle  { grid-column: 1 / -1; }
.profile-row  { padding: 18px 0; border-bottom: 1px solid var(--line); }
.profile-row p  { color: var(--mut); }

@media (min-width: 1000px) {
  body  { padding-left: 185px; padding-bottom: 0; }
  .main-nav  { top: 0; right: auto; width: 185px; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 114px 14px 25px; border-top: 0; border-right: 1px solid var(--line); background: var(--surf); }
  .main-nav::before  { content: "ВАШЕ ПРОСТРАНСТВО"; position: absolute; top: 72px; left: 24px; color: var(--mut); font-size: 9px; letter-spacing: 1.2px; }
  .main-nav a  { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: 11px; padding: 14px 12px; font-size: 14px; }
}

@media (max-width: 820px) {
  .site-header  { min-height: 62px; padding: 12px 18px; }
  .main-nav  { width: auto; height: auto; }
  .theory-nav  { display: flex; padding: 5px; border-radius: 13px; }
  .theory-nav a  { border: 0; }
  .theory-nav a.active  { border: 0; }
}

@media (max-width: 760px) {
  .app-shell  { padding: 12px 16px 36px; }
  .direction-hero  { grid-template-columns: 1fr; gap: 14px; margin: 10px 0 28px; }
  .direction-hero h1  { font-size: 43px; letter-spacing: -1.7px; }
  .grammar-art  { min-height: 155px; padding: 18px 20px; }
  .word-pieces  { margin: 17px 0 5px; grid-template-columns: 38px 64px 1fr 12px; }
  .art-lines  { grid-template-columns: 38px 64px 1fr 12px; }
  .art-foot  { margin-top: 15px; }
  .today-grid  { grid-template-columns: 1fr; gap: 14px; }
  .session-number  { font-size: 64px; }
  .main-nav a  { min-height: 55px; font-size: 11px; }
  .site-footer  { padding-bottom: 20px; }
}

@media (max-width: 520px) {
  .brand small  { font-size: 15px; }
  .quick-grid a  { padding: 15px; }
  .tense-map  { margin-left: 0; margin-right: 0; border-radius: 16px; }
  .map-toolbar > .button:first-child  { flex-basis: 100%; }
  .map-toolbar [data-map-action="reset"]  { display: none; }
  .map-viewport  { height: 610px; }
}

.feedback.pending  { background: var(--surf); border-color: var(--line2); color: var(--bad); }

.rule-dialog  { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--tx); background: var(--surf); box-shadow: 0 20px 80px #0003; overflow: hidden; }
.rule-dialog::backdrop  { background: var(--pri); backdrop-filter: blur(3px); }
.rule-dialog-header  { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rule-dialog-header h2  { margin: 0; font-size: 22px; }
.rule-dialog-header button  { flex-shrink: 0; }
.rule-dialog-content  { max-height: calc(100dvh - 122px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; }
.rule-dialog-content h1, .rule-dialog-content h2  { font-size: 26px; line-height: 1.2; }
.rule-dialog-content article > :first-child  { margin-top: 0; }
@media (max-width: 600px) { .rule-dialog-header  { padding: 12px 16px; } .rule-dialog-content  { padding: 18px 16px; } }

.account-demo  { padding: 12px 16px; border-radius: 12px; background: var(--surf); color: var(--bad); font-size: 14px; }
.account-title { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.account-title h1  { margin-bottom: 6px; }
.account-title p  { margin-top: 0; color: var(--mut); }
.account-section  { margin: 28px 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.account-stats  { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 24px 0; }
.account-stats strong  { display: block; font-size: 32px; color: var(--pri); }
.account-stats span  { display: block; color: var(--mut); font-size: 14px; }
.student-card  { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.student-card small, .student-card span  { display: block; margin-top: 6px; }
.student-card small  { color: var(--mut); }
.invite-panel  { margin-top: 24px; }
.invite-panel summary  { cursor: pointer; font-weight: 700; }
.invite-link  { width: 100%; padding: 12px; }
.account-login  { max-width: 560px; margin: 20px auto; }
.account-login .field, .invite-panel .field  { margin-bottom: 18px; }
.account-login [role="alert"]  { color: var(--bad); }
.demo-accounts  { margin: 28px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.demo-accounts .button  { margin: 4px; }
@media (max-width: 600px) { .account-section  { padding: 16px; } .account-stats  { gap: 12px; } .account-stats strong  { font-size: 26px; } }

.practice-levels  { grid-column: 1 / -1; border: 0; padding: 0; margin: 4px 0 12px; min-width: 0; }
.practice-levels legend  { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.level-options  { display: flex; gap: 10px; flex-wrap: wrap; }
.level-options label  { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background:var(--surf); cursor: pointer; }
.level-options label:has(input:checked)  { color: var(--pri); border-color: var(--pri); font-weight: 700; }
.level-options input  { width: 18px; height: 18px; accent-color: var(--pri); }
.assignment-title  { grid-column: 1 / -1; }

/* Home-screen iPhone layout: keep controls above the system gesture area. */

@media (max-width: 999px) {
  html  { scroll-padding-bottom: calc(130px + var(--app-safe-bottom)); }
  body  { min-height: 100svh; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(110px + var(--app-safe-bottom)); }
  .site-header  { top: env(safe-area-inset-top, 0px); }
  .main-nav  { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + var(--app-safe-bottom)); padding: 6px; gap: 4px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 6px 24px rgba(31,64,55,.13); }
  .main-nav a  { min-width: 0; min-height: 54px; padding: 7px 3px; gap: 3px; font-size: 11px; }
  .app-shell  { min-height: calc(100svh - 210px); padding-bottom: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  input, select, textarea  { font-size: 16px; scroll-margin-top: 100px; scroll-margin-bottom: 150px; }
  .account-title > *, .student-card > *  { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .demo-strip  { display: none; }
  .site-header  { min-height: 60px; padding: 12px 16px; }
  .app-shell h1  { font-size: clamp(32px, 8.5vw, 40px); letter-spacing: -1.2px; }
  .account-login  { margin: 12px auto; }
  #account-login-form, #join-form  { display: grid; gap: 12px; }
  #account-login-form .field, #join-form .field  { margin-bottom: 0; }
  #account-login-form .button, #join-form .button  { width: 100%; min-height: 48px; }
  .account-login .field label  { font-size: 14px; }
  .account-stats  { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .account-stats span  { font-size: 12px; overflow-wrap: anywhere; }
  .filters  { padding: 16px; }
  .filter-summary .button  { width: 100%; }
  .level-options  { gap: 8px; }
  .level-options label  { flex: 1 0 25%; justify-content: center; padding: 12px; }
  .rule-dialog  { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--app-safe-bottom) - 24px); }
  .rule-dialog-content  { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--app-safe-bottom) - 100px); }
}

#account-error:empty, #join-error:empty, #practice-error:empty  { display: none; }
@media (max-width: 600px) {
  .field input, .field select, .answer-input, .answer-area  { font-size: 16px; }
}

/* Map workspace: the dialog lives in the browser top layer, outside page columns. */
.map-fullscreen-dialog  { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surf2); color: var(--tx); overflow: hidden; }
.map-fullscreen-dialog::backdrop  { background: var(--surf2); }
.map-fullscreen-dialog:fullscreen  { width: 100vw; height: 100vh; }
.map-shell  { display: flex; flex-direction: column; }
.map-shell.is-expanded  { width: 100%; height: 100%; border: 0; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.map-toolbar  { flex: 0 0 auto; }
.map-toolbar .button  { min-height: 44px; }
.map-navigator  { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surf); border-bottom: 1px solid var(--line); }
.map-time-tabs  { display: flex; gap: 4px; }
.map-time-tabs button  { padding: 10px 14px; min-height: 44px; border: 1px solid transparent; border-radius: 10px; background: var(--surf2); color: var(--tx); font: inherit; font-size: 14px; cursor: pointer; }
.map-time-tabs button[aria-pressed="true"]  { background: var(--pri); color: var(--on-pri); }
.map-jump-label  { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); }
.map-jump  { width: 235px; min-height: 44px; padding: 8px 12px; font-size: 16px; }
.map-workspace  { position: relative; display: flex; min-height: 0; flex: 1; }
.map-workspace .map-viewport  { flex: 1; min-width: 0; height: clamp(400px, 70vh, 720px); }
.is-expanded .map-workspace .map-viewport  { height: 100%; }
.map-workspace .map-detail  { position: relative; inset: auto; flex: 0 0 min(390px, 43%); width: auto; max-height: none; min-height: 0; margin: 0; padding: 22px; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
.map-workspace .map-detail[hidden]  { display: none; }
.map-detail-nav  { display: flex; align-items: center; gap: 14px; margin-right: 44px; }
.map-detail-nav .button  { min-width: 44px; min-height: 44px; padding: 7px; }
.map-detail-close  { top: 22px; right: 16px; min-width: 44px; min-height: 44px; cursor: pointer; border-radius: 10px; background: var(--surf2); color: var(--tx); }
.map-detail h3  { font-size: 28px; }
.map-canvas .tense-cell  { cursor: pointer; }
.map-canvas .tense-cell[aria-current]  { outline: 4px solid var(--pri); outline-offset: 2px; }
.map-viewport:focus-visible  { outline: 3px solid var(--pri); outline-offset: -3px; }
@media (max-width: 900px) {
  .map-navigator  { flex-wrap: wrap; }
  .map-jump-label  { flex: 1; justify-content: space-between; }
  .map-jump  { flex: 1; max-width: 300px; }
  .map-toolbar-hint  { display: none; }
}
@media (max-width: 600px) {
  .map-toolbar  { gap: 6px; padding: 8px; flex-wrap: nowrap; }
  .map-toolbar > .button:first-child  { flex: 1 1 auto; }
  .map-toolbar .button  { padding: 8px; font-size: 12px; }
  .map-toolbar [data-map-action="fit"]  { max-width: 85px; }
  .map-icon-button  { width: 38px; }
  .map-scale  { width: 44px; font-size: 11px; }
  .map-navigator  { gap: 8px; padding: 8px; }
  .map-time-tabs  { width: 100%; }
  .map-time-tabs button  { flex: 1; padding: 8px 6px; font-size: 13px; }
  .map-jump-label  { width: 100%; }
  .map-jump  { max-width: none; min-width: 0; }
  .map-workspace .map-detail  { flex: 1; width: 100%; padding: 18px; border-left: 0; }
  .map-workspace:has(.map-detail:not([hidden])) .map-viewport  { display: none; }
  .map-shell:not(.is-expanded) .map-workspace:has(.map-detail:not([hidden]))  { height: 65vh; flex: auto; }
  .map-detail-close  { top: 18px; }
  .map-detail h3  { font-size: 26px; }
  .map-detail .button.primary  { width: 100%; white-space: normal; }
  .map-workspace .map-detail-formula  { white-space: normal; overflow-wrap: anywhere; }
}
.map-shell:not(.is-expanded) .map-workspace  { height: clamp(400px, 70vh, 720px); flex: none; }
.map-workspace .map-viewport  { height: 100%; }
@media (max-width: 600px) {
  .map-shell:not(.is-expanded) .map-workspace:has(.map-detail:not([hidden]))  { height: 65vh; }
}
.assignment-actions  { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.assignment-actions .assignment-message  { flex-basis: 100%; margin: 0; }
.assignment-items  { display: grid; gap: 12px; border: 0; padding: 14px 0; }
.assignment-items label  { display: flex; align-items: start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.assignment-items input  { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; }
[hidden]  { display: none !important; }
.comparison-shortcuts  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* Completed-work report: a quiet, responsive learning dashboard. */
.legacy-work {margin:10px 0;border:1px solid var(--line);border-radius:14px;padding:16px}.legacy-work>summary {cursor:pointer;display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}.legacy-work>summary span {color:var(--mut);font-size:.85rem}
.work-card {display:flex;align-items:center;gap:14px;margin:10px 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;color:var(--tx);text-decoration:none;background:var(--surf);transition:background .15s,border-color .15s}.work-card:hover {background:var(--surf);border-color:var(--line2)}.work-card:focus-visible {outline:3px solid var(--line2);outline-offset:3px}.work-card-main {flex:1;min-width:0}.work-card-main>strong {display:block;font-size:1rem;overflow-wrap:anywhere}.work-card-meta {display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:.8rem;color:var(--mut)}.work-card-status {font-size:.8rem;flex-shrink:0;color:var(--mut)}.work-card-arrow {color:var(--mut);font-size:1.25rem}.work-management {padding:18px 0}.report-review-toggle {padding:18px 0;font-weight:650;cursor:pointer;border-top:1px solid var(--line)}@media(max-width:600px){.work-card {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px}.work-card-main {grid-column:1;grid-row:1/3}.work-card-arrow {grid-column:2;grid-row:2;text-align:right}.work-card-status {grid-column:2;grid-row:1;font-size:.75rem}.work-card-meta {gap:3px 10px;font-size:.75rem}}
.practice-report>h1 {font-size:clamp(1.8rem,3.7vw,2.8rem);line-height:1.12;letter-spacing:-.035em}
.practice-report {max-width:1120px;margin:auto}.report-hero {display:grid;grid-template-columns:180px 1fr;gap:36px;align-items:center;padding:36px;border:1px solid var(--line2);border-radius:24px;background:linear-gradient(125deg,var(--surf2),var(--surf));margin:28px 0}.report-hero h2 {margin-top:0;font-size:clamp(1.5rem,3vw,2.2rem)}.report-orbit {width:172px;height:172px;border-radius:50%;background:conic-gradient(var(--pri) var(--result),var(--surf2) 0);display:grid;place-items:center}.report-orbit>span {width:144px;height:144px;border-radius:50%;background:var(--surf);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.6rem;font-weight:700;color:var(--tx)}.report-orbit small {font:400 .85rem/1.5 system-ui;color:var(--mut)}.report-metrics {display:flex;gap:28px;flex-wrap:wrap}.report-metrics div {display:flex;flex-direction:column}.report-metrics strong {font-size:1.8rem;color:var(--tx)}.report-metrics span,.report-topic-score span {font-size:.85rem;color:var(--mut)}.report-topic-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}.report-topic {padding:22px;border:1px solid var(--line2);border-radius:16px;background:var(--surf)}.report-topic h3 {margin:0 0 16px;font-size:1.1rem}.report-topic-score {display:flex;justify-content:space-between;align-items:center}.report-topic progress {display:block;width:100%;height:10px;accent-color:#24675b;margin:12px 0 20px}.report-rule {display:block;margin:8px 0;font-size:.9rem;overflow-wrap:anywhere}.report-review {margin-top:36px}.report-filters {display:flex;gap:8px;flex-wrap:wrap}.report-filters [aria-pressed=true] {background:var(--pri);color:var(--on-pri)}.report-answer {border:1px solid var(--line2);border-radius:14px;background:var(--surf);margin:12px 0;overflow:hidden}.report-answer summary {display:flex;gap:14px;align-items:baseline;padding:20px;cursor:pointer}.report-answer summary>span:last-child {min-width:0;overflow-wrap:anywhere}.report-answer-status {flex-shrink:0;font-weight:700}.is-wrong {color:var(--bad)}.is-correct {color:var(--mut)}.is-neutral {color:var(--mut)}.report-answer-body {padding:0 22px 22px;border-top:1px solid var(--line2)}.report-submitted {display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:var(--surf2);border-radius:10px;margin:16px 0;overflow-wrap:anywhere}.report-submitted span,.report-submitted small {font-size:.85rem;color:var(--mut)}.report-legacy {padding:18px 22px;border-left:4px solid var(--line2);background:var(--surf2)}.report-footer {display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.report-answer[hidden] {display:none}
@media(max-width:600px){.report-hero {grid-template-columns:1fr;gap:22px;padding:24px}.report-orbit {margin:auto;width:148px;height:148px}.report-orbit>span {width:124px;height:124px}.report-metrics {gap:20px}.report-metrics strong {font-size:1.5rem}.report-answer summary {padding:16px;gap:10px}.report-answer-body {padding:0 16px 18px}.report-filters .button {font-size:.85rem}.report-footer .button {width:100%;text-align:center}}

/* Keep intrinsic table, code and navigation widths inside their grid tracks. */
.app-shell, .theory-layout, .theory-content, .theory-nav  { min-width: 0; max-width: 100%; }
.table-wrap  { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.theory-content pre  { max-width: 100%; overflow-x: auto; }
.theory-content  { overflow-wrap: anywhere; }
.theory-content:is(h1,h2,h3,h4)  { scroll-margin-top: 100px; }
.theory-content article  { padding-bottom: 30vh; }
@media (max-width: 999px) { .main-nav  { max-width: calc(100% - 24px); } }

/* Practice controls stay within the reading line and above the app navigation. */
.inline-blank { display:inline-flex; position:relative; flex-wrap:wrap; align-items:baseline; gap:3px; max-width:100%; vertical-align:baseline; margin:2px 3px; font:inherit; }
.inline-blank .answer-input { width:12ch; min-width:min(12ch,100%); max-width:100%; padding:4px 5px; font:inherit; font-size:17px; line-height:1.4; }
.blank-number { font:600 10px/1 system-ui; color:var(--mut); }
.supplied-note,.field-correction { display:block; flex-basis:100%; font:12px/1.4 system-ui; white-space:normal; }
.field-correction { color:var(--bad); }
.field-correction[hidden] { display:none; }
.answer-input.answer-correct,.answer-area.answer-correct,.choice-list label.answer-correct { border:2px solid var(--ok); background:var(--ok-soft); }
.answer-input.answer-wrong,.answer-area.answer-wrong,.choice-list label.answer-wrong { border:2px solid var(--bad); background:var(--bad-soft); }
.answer-input:disabled,.answer-area:disabled { opacity:1; color:var(--tx); -webkit-text-fill-color:var(--tx); }
.feedback.pending h3 { color:var(--tx); }
.pause-dialog { width:min(440px,calc(100% - 32px)); border:1px solid var(--line); border-radius:20px; padding:24px; color:var(--tx); }
.pause-dialog::backdrop { background:var(--surf); }
#toast { position:fixed; z-index:100; left:50%; bottom:110px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:12px 18px; border-radius:14px; background:var(--tx); color:var(--on-pri); box-shadow:var(--sh); }
#toast[hidden] { display:none; }
.filters .filter-summary { position:sticky; bottom:20px; z-index:20; background:var(--surf); padding:12px; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh); }
.level-options label:has(input:disabled) { opacity:.5; }
@media(max-width:999px) {
  #answer-form > .actions { position:sticky; bottom:calc(90px + var(--app-safe-bottom)); z-index:20; background:var(--surf); padding:8px; border:1px solid var(--line); border-radius:14px; }
  .filters .filter-summary { bottom:calc(90px + var(--app-safe-bottom)); flex-wrap:wrap; }
  .session .prompt { font-size:20px; overflow-wrap:anywhere; }
}

.all-time-topic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:12px; margin:20px 0; }
.topic-cell { display:flex; flex-direction:column; gap:8px; text-align:left; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surf); color:var(--tx); cursor:pointer; }
.topic-cell span { font-size:24px; font-weight:700; }
.topic-cell small { color:var(--mut); }
.topic-cell[aria-pressed=true] { background:var(--pri-soft); border-color:var(--pri); }
.topic-error { border-bottom:1px solid var(--line); padding:16px 0; overflow-wrap:anywhere; }
#print-report { display:none; }
@page { size:A4; margin:12mm; }
@media print {
  html, body { background:#fff!important; color:#000!important; margin:0!important; padding:0!important; font:9pt/1.25 Arial,sans-serif!important; }
  body:has(#print-report) > :not(#print-report) { display:none!important; }
  .site-header,.main-nav,.site-footer,.demo-strip,#toast,button,.button,.report-filters,.report-footer,.report-print,.report-filter-empty,.work-management { display:none!important; }
  #print-report { display:block!important; width:100%; }
  .app-shell { max-width:none; min-height:0; margin:0; padding:0; }
  .practice-report { max-width:none; margin:0; }
  .practice-report h1 { font:700 17pt/1.2 Arial,sans-serif; margin:3mm 0; letter-spacing:0; }
  .practice-report h2 { font:700 11pt/1.2 Arial,sans-serif; margin:2mm 0; letter-spacing:0; }
  .practice-report p { margin:1.5mm 0; }
  .report-hero { display:block; padding:2mm 0; margin:2mm 0; border:0; border-radius:0; background:none; }
  .report-orbit,.report-topics,.report-review > .account-title,.rule-links,.report-legacy { display:none!important; }
  .report-metrics { gap:5mm; }
  .report-metrics strong { font:700 10pt Arial,sans-serif; }
  .report-metrics span { font:8pt Arial,sans-serif; }
  .report-review { margin:3mm 0; columns:2; column-gap:6mm; }
  .report-review > summary { column-span:all; font-weight:bold; margin-bottom:2mm; }
  .report-answer { break-inside:avoid; border:0; border-bottom:.2mm solid #bbb; border-radius:0; margin:0 0 2mm; overflow:visible; background:none; }
  .report-answer summary { display:block; padding:1mm 0; font-size:9pt; }
  .report-answer-status { display:inline; margin-right:1mm; }
  .report-answer-body { padding:0 0 1mm; border:0; font-size:8pt; }
  .report-submitted { display:block; background:none; border-radius:0; padding:0; margin:1mm 0; }
  .report-submitted span,.report-submitted small { font-size:7pt; display:inline; margin-right:1mm; }
  .report-answer .explanation { font-size:7.5pt; line-height:1.2; }
  .report-answer .explanation details { display:block; margin:1mm 0; }
  .report-answer .explanation ul { padding-left:3mm; margin:1mm 0; }
  .practice-report summary { list-style:none; }
  .practice-report summary::marker { content:""; }
  .practice-report summary::-webkit-details-marker { display:none; }
  .report-submitted strong { margin-right:1.5mm; }
  a { color:#000!important; text-decoration:none; }
  * { box-shadow:none!important; text-shadow:none!important; }
}

/* Shared NOEON screen chrome and controls. */
body { background:var(--bg); color:var(--tx); font-family:var(--ff); }
h1,h2,h3,h4,.screen-title { font-family:var(--ff-serif); }
button,input,select,textarea { font-family:var(--ff); }
input,select,textarea { color:var(--tx); background:var(--surf); border-color:var(--line2); }
input::placeholder,textarea::placeholder { color:var(--fade); opacity:1; }
input[type=checkbox],input[type=radio],progress { accent-color:var(--pri); }
[hidden] { display:none!important; }
.site-header { position:sticky; top:0; z-index:35; display:grid; grid-template-columns:88px minmax(0,1fr) 88px; width:100%; max-width:none; min-height:72px; padding:calc(10px + env(safe-area-inset-top)) 20px 10px; gap:8px; background:var(--bg); border-bottom:1px solid var(--line); }
.screen-title { grid-column:2; grid-row:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:23px; font-weight:700; letter-spacing:-.025em; }
.header-back { grid-column:1; grid-row:1; font-size:26px; color:var(--pri); }
.header-actions { justify-self:end; grid-column:3; grid-row:1; display:flex; align-items:center; gap:4px; }
.header-icon,.site-header .notification-link { display:flex; align-items:center; justify-content:center; position:relative; width:40px; height:40px; flex:none; padding:4px; margin:0; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--mut); text-decoration:none; cursor:pointer; }
.header-icon:hover,.site-header .notification-link:hover { color:var(--tx); background:var(--surf2); }
#theme-toggle { font-size:25px; }
.site-header .brand { grid-column:1 / 3; grid-row:1; }
.main-nav { background:var(--surf); border-color:var(--line); box-shadow:var(--sh-sm); }
.main-nav a { min-width:0; color:var(--mut); border-radius:var(--r-sm); }
.main-nav a.current { color:var(--pri); background:var(--pri-soft); }
.button { border-radius:var(--r-sm); background:var(--surf); color:var(--tx); border-color:var(--line2); box-shadow:var(--sh-sm); }
.button.primary { background:var(--pri); color:var(--on-pri); border-color:var(--pri); }
.button.primary:hover { background:var(--pri-d); color:var(--on-pri); }
.brand-mark,.profile-avatar { background:var(--pri); color:var(--on-pri); }
.theory-layout { grid-template-columns:minmax(0,1fr); }
.theory-nav { position:static; display:flex; flex-wrap:wrap; gap:4px; padding:5px; border:1px solid var(--line); background:var(--surf); }
.theory-nav a { flex:0 0 auto; padding:8px 11px; margin:0; border:0; color:var(--mut); white-space:nowrap; }
.theory-nav a.active { background:var(--pri-soft); color:var(--pri); }
.theme-options { display:flex; flex-wrap:wrap; gap:8px; border:0; margin:0; padding:0; }
.theme-options legend { margin-bottom:12px; color:var(--mut); }
.theme-options label { display:flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--surf); cursor:pointer; }
.theme-options label:has(:checked) { color:var(--pri); border-color:var(--pri); background:var(--pri-soft); }
.feedback,.answer-correct,.is-correct { color:var(--ok); }
.feedback { background:var(--ok-soft); border-color:var(--ok); }
.feedback.wrong,.answer-wrong,.is-wrong { color:var(--bad); }
.feedback.wrong { background:var(--bad-soft); border-color:var(--bad); }
.feedback.pending { background:var(--surf2); border-color:var(--warn); color:var(--tx); }
.notification-badge { background:var(--bad); color:var(--on-pri); }
#toast { background:var(--tx); color:var(--bg); }
#app > h1 { font-size:28px; margin-top:8px; }
#app > h1:first-child { display:none; }
@keyframes viewin { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.viewin { animation:viewin .22s ease-out; }
@media(prefers-reduced-motion:reduce) { .viewin { animation:none; } html { scroll-behavior:auto; } }
@media(max-width:999px) {
 .site-header { padding-left:12px; padding-right:12px; }
 .screen-title { font-size:21px; }
 .main-nav { left:12px; right:12px; width:auto; max-width:calc(100% - 24px); flex-direction:row; justify-content:space-around; }
 .main-nav a { flex:1 1 0; gap:3px; padding:7px 1px; font-size:10px; }
 .main-nav svg { width:21px; height:21px; }
 .theory-nav { flex-wrap:nowrap; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
 .theory-nav a { font-size:13px; }
}
@media(min-width:1000px) {
 .main-nav { left:0; right:auto; top:0; bottom:0; width:185px; max-width:185px; border-radius:0; border-right:1px solid var(--line); padding:98px 14px 20px; flex-direction:column; }
 .main-nav a { flex:none; width:100%; }
}
@media print { .header-actions,#screen-title,.header-back { display:none!important; } body { background:#fff!important; color:#000!important; } }

.learning-session,.learning-session .eyebrow,.learning-session p,.learning-session .session-number { color:var(--on-pri); }

@media print {
 :root,:root[data-theme="dark"] { --bg:#fff;--surf:#fff;--surf2:#fff;--tx:#000;--mut:#333;--fade:#333;--pri:#24675b;--pri-d:#174c43;--on-pri:#fff;--ok:#24675b;--bad:#923f31;--line:#bbb;--line2:#bbb; }
}
@media print { html { background:#fff!important; color-scheme:light!important; } }

.pwa-update {
  position: fixed; z-index: 1200; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 24px);
  padding: 12px 16px; border: 1px solid var(--line, #889488); border-radius: 16px;
  background: var(--surf); color: var(--tx); box-shadow: 0 6px 24px #0003;
}
.pwa-update button { color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; background: transparent; border: 0; padding: 6px; }

.session-top .session-title { margin:0; font-size:inherit; line-height:inherit; font-weight:inherit; letter-spacing:normal; }
.draft-conflict { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surf2); overflow-wrap:anywhere; }

.feedback .feedback-title { font-size:1.17em; line-height:1.3; margin:0 0 1em; font-weight:700; letter-spacing:normal; color:var(--ok); }
.feedback.wrong .feedback-title { color:var(--bad); }
#feedback .explanation { scroll-margin-top:calc(88px + env(safe-area-inset-top, 0px)); }
#feedback .feedback > .actions { position:sticky; bottom:16px; z-index:2; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surf); box-shadow:var(--sh-sm); }
@media (max-width:999px) {
  #feedback .feedback > .actions { bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Stable student columns independent of email length. */
.student-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.student-card > * { min-width:0; overflow-wrap:anywhere; }
.active-invite { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.active-invite small { display:block; }
.student-archive, .student-management { margin:20px 0; }
.student-management form { display:grid; gap:12px; margin:16px 0; max-width:440px; }
.student-manage-dialog { width:min(480px,calc(100% - 32px)); border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--surf); color:var(--tx); }
.student-manage-dialog::backdrop { background:#0008; }
@media(max-width:600px) { .student-card { grid-template-columns:minmax(0,1fr); } .active-invite { align-items:start; flex-wrap:wrap; } }

/* Today uses account summaries; the next action precedes supporting context. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.today-account { max-width:960px; margin:0 auto; }
.today-resume { padding:20px; border:1px solid var(--line2); border-radius:18px; background:var(--surf); margin:0 0 24px; }
.today-resume h2 { margin:8px 0; font-size:1.4rem; overflow-wrap:anywhere; }
.today-resume-progress { margin:10px 0 16px; color:var(--mut); }
.today-section { margin:24px 0; }
.today-section h2 { font-size:1.35rem; }
.today-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.today-topic { padding:16px; margin:12px 0; border:1px solid var(--line); border-radius:14px; background:var(--surf); }
.today-topic h3 { font-size:1.05rem; margin:0; }
.today-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.today-stats strong,.today-stats span { display:block; }
.today-stats strong { font-size:1.5rem; }.today-stats span { font-size:.85rem; color:var(--mut); overflow-wrap:anywhere; }
.today-guest { max-width:740px; margin:0 auto; }.today-guest h1 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.15; }
.today-guest .today-theory-link { display:inline-flex; padding:12px 18px; margin:0; }
.work-card-arrow { font-size:.875rem; line-height:1.4; color:var(--tx); text-decoration:underline; text-underline-offset:3px; }
.answer-input,.field .answer-input,.inline-blank .answer-input { width:12ch; min-width:min(12ch,100%); max-width:100%; box-sizing:border-box; justify-self:start; }
@supports(field-sizing:content) { .answer-input,.field .answer-input,.inline-blank .answer-input { field-sizing:content; width:auto; min-width:min(12ch,100%); max-width:100%; } }
@media(max-width:600px) { .today-resume { padding:16px; margin-bottom:20px; }.today-section { margin:20px 0; } }
.blank-list { grid-template-columns:minmax(0,1fr); min-width:0; }
.blank-list > .field { display:block; min-width:0; max-width:100%; }
.work-card-meta { overflow-wrap:anywhere; }
.inline-blank { min-width:0; max-width:calc(100% - 6px); }
/* A fixed intrinsic floor avoids percentage sizing against a shrink-to-fit inline parent. */
.inline-blank .answer-input { min-width:12ch; }

.assignment-preview { margin-block: 24px; }
.assignment-preview [hidden] { display: none; }
.assignment-preview-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-block: 14px; background: var(--surf); overflow-wrap: anywhere; }
.assignment-preview-meta { font-size: .9rem; color: var(--mut); }
.assignment-preview-prompt { white-space: pre-wrap; line-height: 1.65; }
.assignment-preview-instruction { font-weight: 600; }
.assignment-preview-card details { margin-top: 12px; }
.assignment-preview-card summary { cursor: pointer; }
.assignment-preview .field { max-width: 46rem; }
.assignment-preview .assignment-actions { align-items: stretch; }
@media (max-width: 600px) { .assignment-preview-card { padding: 14px; } .assignment-preview .assignment-actions > button { flex: 1 1 140px; white-space: normal; } }

/* Fixed assessment forms keep question order and postpone feedback until submission. */
.assessment-page { max-width:960px; margin:0 auto; }
.assessment-question { min-width:0; margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surf); }
.assessment-question legend { max-width:100%; padding:0 8px; font-weight:700; }
.assessment-question .prompt { font-size:1.1rem; line-height:1.65; overflow-wrap:anywhere; }
.assessment-question .choice-list label { display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.assessment-question details { margin-top:16px; }
.assessment-question .answer-input { width:100%; max-width:360px; }
.assessment-actions { margin:28px 0; padding:20px; border:1px solid var(--line); border-radius:18px; }
@media(max-width:600px) { .assessment-question { padding:16px; } }

.assessment-confirm { max-width:520px; width:calc(100% - 32px); padding:24px; border:1px solid var(--line); border-radius:18px; color:var(--tx); background:var(--surf); }
.assessment-confirm::backdrop { background:rgba(0,0,0,.5); }