@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex/IBMPlexSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* THESIS: One product grammar; composition follows the task.
   OWN-WORLD: Neutral dark surfaces, Plex typography, purposeful controls, open groups.
   STORY: Choose an area, find the task, act with a clear way back.
   FIRST VIEWPORT: Stable navigation, compact context, useful working content.
   FORM: User-specified public top navigation and app rail; no concept lottery. */
:root {
  color-scheme: light;
  --vn-bg: #f4f5f2; --vn-surface: #fff; --vn-soft: #e9ede7;
  --vn-text: #202820; --vn-muted: #536052; --vn-line: #cbd2c8;
  --vn-control: #83907f; --vn-accent: #292929; --vn-on-accent: #fff;
  --vn-active: #e3e3e3; --vn-focus: #96591a; --vn-danger: #a52b32;
  --vn-warning: #80531b; --vn-success: #285c41;
  --vn-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vn-mono: "IBM Plex Mono", ui-monospace, monospace;
  --vn-s1: .25rem; --vn-s2: .5rem; --vn-s3: .75rem; --vn-s4: 1rem;
  --vn-s6: 1.5rem; --vn-s8: 2rem; --vn-s12: 3rem; --vn-s16: 4rem;
  --vn-radius: .375rem; --vn-rail: 14rem; --vn-top: 4.5rem;
  --vn-content: 74rem; --vn-duration: 140ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --vn-bg: #181818; --vn-surface: #222222; --vn-soft: #2b2b2b;
  --vn-text: #eeeeee; --vn-muted: #b5b5b5; --vn-line: #484848;
  --vn-control: #858585; --vn-accent: #dedede; --vn-on-accent: #181818;
  --vn-active: #303030; --vn-focus: #efbd75; --vn-danger: #ffadb2;
  --vn-warning: #edc187; --vn-success: #a1d5af;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vn-bg: #181818; --vn-surface: #222222; --vn-soft: #2b2b2b;
    --vn-text: #eeeeee; --vn-muted: #b5b5b5; --vn-line: #484848;
    --vn-control: #858585; --vn-accent: #dedede; --vn-on-accent: #181818;
    --vn-active: #303030; --vn-focus: #efbd75; --vn-danger: #ffadb2;
    --vn-warning: #edc187; --vn-success: #a1d5af;
  }
}
:root {
  --ak-paper: var(--vn-bg); --ak-canvas: var(--vn-surface); --ak-panel: var(--vn-surface);
  --ak-panel-muted: var(--vn-soft); --ak-ink: var(--vn-text); --ak-ink-soft: var(--vn-text);
  --ak-muted: var(--vn-muted); --ak-muted-strong: var(--vn-muted);
  --ak-line: var(--vn-line); --ak-line-strong: var(--vn-control);
  --ak-blue: var(--vn-accent); --ak-blue-dark: var(--vn-accent); --ak-blue-soft: var(--vn-active);
  --ak-orange: var(--vn-focus); --ak-orange-dark: var(--vn-warning); --ak-orange-soft: var(--vn-soft);
  --ak-success: var(--vn-success); --ak-success-soft: var(--vn-soft); --ak-danger: var(--vn-danger);
  --ak-body: var(--vn-font); --ak-display: var(--vn-font); --ak-mono: var(--vn-mono);
}
* { box-sizing: border-box; }
html { background: var(--vn-bg); color: var(--vn-text); font-family: var(--vn-font); scroll-padding-block: var(--vn-s8); }
body { margin: 0; min-height: 100dvh; background: var(--vn-bg); color: var(--vn-text); font-size: 1rem; line-height: 1.6; }
[hidden] { display: none !important; }
a { color: var(--vn-accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea, select { font: inherit; }
button, summary, select { cursor: pointer; }
button, input, select { min-height: 2.75rem; }
textarea, input, select { background: var(--vn-surface); color: var(--vn-text); border: 1px solid var(--vn-control); border-radius: var(--vn-radius); padding: var(--vn-s3); max-width: 100%; }
textarea { width: 100%; }
input::placeholder, textarea::placeholder { color: var(--vn-muted); opacity: 1; }
button { border: 1px solid var(--vn-control); border-radius: var(--vn-radius); background: var(--vn-surface); color: var(--vn-text); padding: var(--vn-s2) var(--vn-s4); }
button:disabled { cursor: not-allowed; opacity: .65; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--vn-focus); outline-offset: 3px; }
:where(h1,h2,h3) { font-family: var(--vn-font); text-wrap: balance; color: var(--vn-text); letter-spacing: -.025em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 3.4vw, 3.25rem); margin: 0 0 var(--vn-s6); font-weight: 650; }
h2 { font-size: 1.5rem; margin: var(--vn-s8) 0 var(--vn-s4); }
h3 { font-size: 1.125rem; }
p { max-width: 70ch; }
.vn-muted, .lead, .page-heading > p, .account-heading > p { color: var(--vn-muted); }
.section-label { font: inherit; font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--vn-muted); }
.vn-app { display: block; padding-left: var(--vn-rail); }
.vn-app main, .vn-app .dashboard-layout, .vn-app .admin-layout, .vn-app .service-layout, .vn-app .study-prep-layout { width: 100%; max-width: var(--vn-content); margin: 0 auto; padding: var(--vn-s12) clamp(1.25rem, 4vw, 3.5rem) var(--vn-s16); min-width: 0; }
.vn-rail { position: fixed; inset: 0 auto 0 0; width: var(--vn-rail); padding: var(--vn-s8) var(--vn-s4); display: flex; flex-direction: column;  background: var(--vn-surface); }
.vn-brand { font-size: 1.25rem; font-weight: 700; color: var(--vn-text); text-decoration: none; letter-spacing: -.035em; display: inline-flex; align-items: center; gap: var(--vn-s3); min-height: 2.75rem; }
.vn-brand img { width: 2rem; height: 2rem; }
.vn-rail nav { display: grid; gap: var(--vn-s2); margin-top: var(--vn-s12); }
.vn-nav-link { display: flex; align-items: center; min-height: 2.75rem; padding: var(--vn-s3) var(--vn-s4); text-decoration: none; color: var(--vn-muted); border-radius: var(--vn-radius); }
.vn-nav-link[aria-current="page"] { color: var(--vn-text); background: var(--vn-active); font-weight: 650; }
.vn-nav-link:hover { background: var(--vn-soft); color: var(--vn-text); }
.vn-rail-foot { margin-top: auto; padding-top: var(--vn-s8); }
.vn-theme { display: flex; align-items: center; gap: var(--vn-s3); font-size: .875rem; color: var(--vn-muted); }
.vn-theme select { font-size: .875rem; padding: var(--vn-s2); }
.vn-rail-foot .vn-theme { display: grid; gap: var(--vn-s2); }
.vn-topbar { min-height: var(--vn-top); display: flex; align-items: center; justify-content: space-between; gap: var(--vn-s4); padding: var(--vn-s4) clamp(1.25rem, 4vw, 3.5rem);  }
.vn-topbar-actions { display: flex; gap: var(--vn-s4); align-items: center; }
.vn-topbar .vn-brand { display: none; }
.vn-bottom { display: none; }
.vn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vn-s2); font-size: .875rem; margin-bottom: var(--vn-s8); color: var(--vn-muted); }
.vn-local-nav { display: flex; flex-wrap: wrap; gap: var(--vn-s6);  margin-block: var(--vn-s8); }
.vn-local-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; padding-bottom: var(--vn-s3); text-decoration: none; color: var(--vn-muted); }
.vn-local-nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--vn-accent); color: var(--vn-text); font-weight: 650; }
.vn-list { list-style: none; padding: 0; margin: var(--vn-s6) 0;  }
.vn-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--vn-s6); padding: var(--vn-s6) 0;  }
.vn-row h2,.vn-row h3,.vn-row p { margin: 0; }
.vn-row p { margin-top: var(--vn-s2); color: var(--vn-muted); }
.vn-row a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.vn-code { font-family: var(--vn-mono); color: var(--vn-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.vn-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 1fr); gap: var(--vn-s12); align-items: start; }
.vn-aside {  padding-top: var(--vn-s6); }
.vn-aside h2 { margin-top: 0; }
.vn-callout { background: var(--vn-soft); padding: var(--vn-s6); margin-block: var(--vn-s6); border-radius: var(--vn-radius); }
.vn-callout p { margin: 0; }
.vn-empty { padding-block: var(--vn-s8); color: var(--vn-muted); }
.vn-status { color: var(--vn-muted); font-size: .875rem; }
.vn-practice {  margin-top: var(--vn-s8); padding-top: var(--vn-s6); }
.vn-practice > summary { font-size: 1.125rem; font-weight: 650; padding-block: var(--vn-s3); }
.vn-practice[open] > summary { margin-bottom: var(--vn-s6); }
.vn-filter { display: flex; gap: var(--vn-s3); align-items: center; margin-block: var(--vn-s6); flex-wrap: wrap; }
.vn-admin-queue { list-style: none; padding: 0; }
.vn-admin-queue li { padding-block: var(--vn-s4);  }
.vn-public-header { max-width: var(--vn-content); margin: auto; padding: var(--vn-s6); display: flex; align-items: center; justify-content: space-between; gap: var(--vn-s6);  }
.vn-public-header nav { display: flex; flex-wrap: wrap; gap: var(--vn-s6); }
.vn-public-header nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--vn-text); text-decoration: none; }
.vn-public main { max-width: var(--vn-content); margin: auto; padding: var(--vn-s16) var(--vn-s6); }
.vn-public-intro { max-width: 52rem; margin-bottom: var(--vn-s16); }
.vn-public-intro h1 { font-size: clamp(2.4rem,5vw,4.25rem); }
.vn-public-intro .primary-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--vn-s3) var(--vn-s6); font-weight: 600; text-decoration: none; }
.vn-area { display: grid; grid-template-columns: 1fr 2fr auto; align-items: start; gap: var(--vn-s8); padding-block: var(--vn-s8);  }
.vn-area h2, .vn-area p { margin: 0; }
.vn-area a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.vn-footer {  padding: var(--vn-s6); color: var(--vn-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--vn-s4); font-size: .875rem; }
.skip-link { position: fixed; left: var(--vn-s4); top: var(--vn-s4); transform: translateY(-200%); z-index: 100; background: var(--vn-surface); padding: var(--vn-s3); }
.skip-link:focus { transform: translateY(0); }
/* Existing controls inherit the same semantic system during migration. */
.primary-button,.primary-link { background: var(--vn-accent); border-color: var(--vn-accent); color: var(--vn-on-accent); border-radius: var(--vn-radius); }
.primary-button:hover,.primary-link:hover { background: var(--vn-accent); filter: brightness(.94); }
.secondary-button,.settings-section,.auth-panel,.resource-card,.study-runtime-activity,.study-runtime-assessment,.confirmation-dialog,.profile-menu { background: var(--vn-surface); color: var(--vn-text); border-color: var(--vn-line); box-shadow: none; border-radius: var(--vn-radius); }
.resource-list { display: block;  }
.resource-card { border: 0;  padding: var(--vn-s6) 0; background: transparent; }
.resource-card h3 { margin-top: 0; }
.study-runtime-activity { padding: var(--vn-s6); margin-top: var(--vn-s4); }
.study-runtime-assessment { padding: var(--vn-s4); }
.study-runtime-activity h3 { margin-top: 0; }
.study-runtime-details summary { min-height: 2.75rem; padding-block: var(--vn-s3); }
.study-runtime-solution-text,pre,code { background: var(--vn-soft); color: var(--vn-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.study-runtime-action { display: flex; gap: var(--vn-s4); align-items: center; flex-wrap: wrap; }
.study-assessment-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(10rem, .5fr); gap: var(--vn-s4); margin-block: var(--vn-s4); }
fieldset { border: 1px solid var(--vn-line); min-width: 0; }
.form-message,.study-runtime-evidence,.study-runtime-meta { background: var(--vn-soft); color: var(--vn-text); border-color: var(--vn-line); }
.form-message[data-kind="error"],.field-error { color: var(--vn-danger); }
.admin-table th,.admin-table td { background: transparent; color: var(--vn-text); border-color: var(--vn-line); }
.admin-table-wrap { overflow-x: auto; }
.vn-app :where(.page-heading,.account-heading) { margin-bottom: var(--vn-s8); }
@media (max-width: 760px) {
  .vn-app { padding: 0 0 calc(5rem + env(safe-area-inset-bottom)); }
  .vn-rail { display: none; }
  .vn-topbar { padding: var(--vn-s4); }
  .vn-topbar .vn-brand { display: inline-flex; }
  .vn-topbar-location { display: none; }
  .vn-bottom { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--vn-surface);  padding: var(--vn-s2) var(--vn-s2) calc(var(--vn-s2) + env(safe-area-inset-bottom)); }
  .vn-bottom a { padding: var(--vn-s2); justify-content: center; font-size: .875rem; }
  .vn-app main,.vn-app .dashboard-layout,.vn-app .admin-layout,.vn-app .service-layout,.vn-app .study-prep-layout { padding: var(--vn-s8) var(--vn-s4); }
  .vn-split { grid-template-columns: minmax(0,1fr); gap: var(--vn-s8); }
  .vn-row { grid-template-columns: minmax(0,1fr); gap: var(--vn-s3); }
  .vn-local-nav { gap: var(--vn-s4); }
  .vn-public-header { flex-wrap: wrap; padding: var(--vn-s4); gap: var(--vn-s3); }
  .vn-public-header nav { gap: var(--vn-s4); }
  .vn-public main { padding: var(--vn-s12) var(--vn-s4); }
  .vn-area { grid-template-columns: minmax(0,1fr); gap: var(--vn-s4); }
  .vn-public-intro { margin-bottom: var(--vn-s12); }
  .study-assessment-row { grid-template-columns: minmax(0,1fr); }
  .vn-topbar-actions { gap: var(--vn-s2); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

.skip-link { color: var(--vn-text); }
.vn-app main { display: block; }
.vn-app main > header:first-child h1, .vn-app .account-heading h1, .vn-app .service-layout h1 { font-size: clamp(2rem,3.4vw,3.25rem); }
.vn-callout h2 { margin-top: 0; }
.vn-admin-panel { margin-top: var(--vn-s6); }
@media (min-width: 761px) { .vn-topbar-actions > a:not(.vn-feedback-link) { display: none; } }
@media (max-width: 760px) { html { scroll-padding-bottom: 6rem; } .vn-app main { padding-bottom: var(--vn-s12); } }

/* Completed baseline review: compact tasks and one desktop appearance control. */
.vn-home-areas { grid-template-columns: repeat(2,minmax(0,1fr)); }
.vn-app .service-layout > h1 { margin-bottom: var(--vn-s4); }
.vn-app .service-layout > .lead { margin-top: 0; margin-bottom: var(--vn-s8); }
.vn-app #admin-content > .vn-local-nav { margin-top: 0; }
.app-footer { background: var(--vn-surface); color: var(--vn-muted);  }
.app-footer .brand { color: var(--vn-text); }
.app-footer-links a,.app-footer-links a:hover { color: var(--vn-accent); }
@media (min-width: 761px) { .vn-app > .vn-footer .vn-theme { display: none; } }
@media (max-width: 760px) { .vn-home-areas { grid-template-columns: minmax(0,1fr); } }

/* Mono is reserved for short identifiers and actual code, never learning prose. */
pre, code, kbd, samp { font-family: var(--vn-mono); }
.study-runtime-solution-text { font-family: var(--vn-font); }
.form-message[data-kind="error"] { background: var(--vn-soft); }

/* Product acceptance: hierarchy uses spacing; borders belong to controls and data. */
.vn-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.vn-nav-link { gap: .75rem; }
.vn-rail-head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.vn-rail-toggle { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; min-width: 2.75rem; border: 0; background: transparent; }
.vn-rail-toggle:hover { background: var(--vn-soft); }
.vn-brand-compact { display: none; }
.vn-bottom .vn-icon,.vn-topbar-actions .vn-icon { display: none; }
.vn-app .resource-card,.vn-app .resource-list { border: 0; }
.vn-row + .vn-row { margin-top: .5rem; }
.vn-row a:hover,.resource-card a:hover { color: var(--vn-text); text-decoration-thickness: 2px; }
.vn-local-nav a { border: 0; }
.vn-app #appearance { scroll-margin-top: 2rem; }
.vn-app #appearance .vn-theme { max-width: 24rem; justify-content: space-between; }
@media (min-width: 761px) {
  :root[data-rail="compact"] { --vn-rail: 5rem; }
  [data-rail="compact"] .vn-rail { padding-inline: .5rem; }
  [data-rail="compact"] .vn-rail-head { flex-direction: column; }
  [data-rail="compact"] .vn-brand-full,[data-rail="compact"] .vn-rail .vn-nav-label { display: none; }
  [data-rail="compact"] .vn-brand-compact { display: inline; }
  [data-rail="compact"] .vn-rail .vn-nav-link { justify-content: center; padding-inline: .5rem; }
  [data-rail="compact"] .vn-rail-toggle svg { transform: rotate(180deg); }
}

.vn-app .empty-state { border: 0; padding: 1rem 0; border-radius: 0; color: var(--vn-muted); }

.vn-app .settings-section { border: 0; border-radius: 0; background: transparent; padding: 0; margin-block: 2.5rem; }

/* Page footer follows long content and rests at the viewport bottom on short pages. */
body.vn-app, body.vn-public { display: flex; flex-direction: column; }
.vn-app > main, .vn-public > main { flex: 1 0 auto; width: 100%; }
.vn-public-header { width: 100%; margin-block: 0; }
.vn-footer { margin-top: auto; align-items: center; }
.vn-footer-identity { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.vn-footer a { color: inherit; display: inline-flex; align-items: center; min-height: 2.75rem; }
.vn-calendar .calendar-directory-section,.vn-calendar .calendar-directory-list,.vn-calendar .calendar-directory-list > li,.vn-calendar .calendar-directory-icon { border: 0; }
.vn-calendar .ak-page { padding-top: 2.5rem; }
.vn-calendar .ak-page-title { font: 600 clamp(2rem,3.4vw,3.25rem)/1.2 var(--vn-font); letter-spacing: -.025em; }
.vn-calendar .ak-page-lead { color: var(--vn-muted); }
.vn-calendar .calendar-directory-list a { padding-inline: .75rem; border-radius: var(--vn-radius); }
.vn-calendar .calendar-directory-list a:hover { background: var(--vn-soft); }

.vn-calendar .calendar-facts,.vn-calendar .calendar-facts > div,.vn-calendar .calendar-section { border: 0; }

.vn-die { width: 9rem; height: 9rem; font-size: 7rem; line-height: 1; display: grid; place-content: center; margin-block: 2rem; background: var(--vn-surface); color: var(--vn-text); border: 2px solid var(--vn-control); }
#feedback-form { max-width: 42rem; display: grid; gap: .75rem; }
#archive-document { max-width: 70ch; }
#archive-document img { max-width: 100%; height: auto; }
#archive-document pre { overflow-x: auto; padding: 1rem; }
@media(max-width:760px) { .vn-topbar-actions { gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .vn-topbar-actions .vn-nav-link { padding: .5rem; font-size: .875rem; } }

.vn-feedback-link .vn-icon { display: block; }

.vn-topbar .vn-brand { flex-shrink: 0; white-space: nowrap; }