@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=Instrument+Serif&display=swap');

:root {
  color-scheme: dark;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  --bg: #151619; --rail: #1a1b1f; --surface: #202126; --raised: #2a2c31; --input: #18191d;
  --border: #36383f; --text: #f0f1f3; --muted: #b5b8c1;
  --accent: #9ab8ff; --primary: #315dcc; --accent-hover: #3b65cf; --on-accent: #f8faff;
  --selection: #2a3446; --mint: #add0a6; --rose: #f1b3bb;
  --header: 64px; --sidebar: 216px; --mono: ui-monospace, Consolas, monospace;
  --ease-out: cubic-bezier(.22,1,.36,1); --motion-fast: 160ms; --motion-enter: 280ms;
  --danger-bg: #52262d; --danger-hover: #692f38;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3; --rail: #f5f6f8; --surface: #fafbfd; --raised: #e9ecf0; --input: #f4f5f7;
  --border: #d8dce3; --text: #212630; --muted: #535d6e;
  --accent: #264fa7; --primary: #315dcc; --accent-hover: #254da9; --on-accent: #f8faff;
  --selection: #e4ebfa; --mint: #46663a; --rose: #963647;
  --danger-bg: #f7e1e3; --danger-hover: #f2cdd2;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body { margin: 0; min-width: 300px; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { letter-spacing: -.025em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.skip { position: fixed; z-index: 10; left: 12px; top: 12px; background: var(--primary); color: var(--on-accent); padding: 10px 16px; transform: translateY(-150%); }
.skip:focus { transform: none; }
.topbar { position: fixed; z-index: 5; inset: 0 0 auto; height: var(--header); display: flex; align-items: center; gap: 18px; padding: 0 25px 0 22px; background: var(--rail); border-bottom: 1px solid var(--border); }
.brand-wrap, .brand { display: flex; align-items: center; }
.brand { gap: 10px; font-weight: 700; letter-spacing: -.045em; font-size: 23px; white-space: nowrap; }
.brand-wrap { min-width: calc(var(--sidebar) - 22px); }
.location-label { display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid var(--border); color: var(--text); font-weight: 600; white-space: nowrap; }
.location-label a, .location-label svg { color: var(--muted); }
.location-label a:hover { color: var(--accent); }
.search-launch { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(35vw, 450px); min-height: 38px; padding: 0 10px 0 13px; background: var(--input); border: 1px solid var(--border); border-radius: 9px; color: var(--muted); text-align: left; font-size: 12px; }
.search-launch:hover { border-color: var(--accent); }
.search-launch svg { flex: none; }
.search-launch kbd { margin-left: auto; padding: 1px 6px 2px; border: 1px solid var(--border); border-radius: 4px; background: var(--raised); font-size: 11px; }
.avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); background: var(--raised); border: 1px solid var(--border); font-weight: 700; }
.sidebar { position: fixed; inset: var(--header) auto 0 0; z-index: 4; width: var(--sidebar); background: var(--rail); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 25px 12px 13px; }
.sidebar nav { display: grid; gap: 5px; }
.rail-link { position: relative; width: 100%; border: 0; display: flex; align-items: center; gap: 11px; padding: 11px; min-height: 44px; background: transparent; color: var(--muted); border-radius: 8px; text-align: left; white-space: nowrap; font-size: 13px; font-weight: 650; }
.rail-short { display: none; }
.rail-link svg { flex: none; }
.rail-link:hover { color: var(--text); background: var(--raised); }
.rail-link[aria-current] { background: var(--selection); color: var(--accent); }
.rail-link[aria-current]::before { content: ''; position: absolute; inset: 11px auto 11px 0; width: 3px; border-radius: 0 3px 3px 0; background: currentColor; }
.rail-bottom { margin-top: auto; }
.collapsed { --sidebar: 64px; }
.collapsed .brand-wrap { min-width: 173px; }
.collapsed .sidebar { padding-inline: 9px; }
.collapsed .rail-link { justify-content: center; padding-inline: 0; }
.collapsed .rail-link span { display: none; }
.main { margin: var(--header) 0 0 var(--sidebar); min-height: calc(100vh - var(--header)); background: var(--bg); }
.view-enter { animation: settle var(--motion-enter) var(--ease-out); }
@keyframes settle { from { opacity: .45; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wrap { width: min(100% - 76px, 1120px); margin: 0 auto; padding: 32px 0 64px; }
.dashboard { max-width: 1160px; padding-top: 32px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
.dashboard-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.dashboard-title h1 { font-size: clamp(29px, 4vw, 42px); line-height: 1.04; font-weight: 650; letter-spacing: -.045em; }
.dashboard-title p { margin-top: 6px; color: var(--muted); }
.dashboard-title .button { min-height: 40px; }
.dashboard-main { min-width: 0; }
.setup-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.setup-strip h2 { font-size: 17px; }
.setup-strip p { color: var(--muted); margin-top: 4px; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.desk-views { margin: 0 0 12px; }
.segments { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); }
.segments label { position: relative; cursor: pointer; }
.segments input { position: absolute; opacity: 0; }
.segments label span { display: grid; align-items: center; min-height: 34px; border: 1px solid transparent; border-radius: 5px; padding: 4px 10px; color: var(--muted); font-size: 13px; font-weight: 600; transition: background var(--motion-fast), color var(--motion-fast); }
.segments label:hover span { background: var(--raised); }
.segments input:checked + span { color: var(--text); background: var(--raised); border-color: var(--border); }
.segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.saved-filter { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.saved-filter input { flex: none; }
.setup-step { display: grid; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.setup-step progress { width: 100%; height: 8px; accent-color: var(--accent); }
#setup-form .dialog-intro { margin-bottom: 12px; }
#setup-form .dialog-list { max-height: min(34vh, 310px); }
.setup-field-label { margin: 16px 0 8px; font-weight: 600; }
.setup-review { list-style: none; padding: 0; margin: 0; max-height: 35vh; overflow: auto; }
.setup-review li { display: flex; align-items: center; gap: 9px; padding: 7px 1px; border-bottom: 1px solid var(--border); }
.setup-review svg { color: var(--mint); flex: none; }
.setup-error { margin-top: 6px; color: var(--rose); }
.setup-footer { justify-content: space-between; }
.setup-footer button:last-child { margin-left: auto; }
.study-slip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, .40fr); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; background: var(--surface); margin-bottom: 24px; }
.study-slip-summary { grid-template-columns: 1fr; }
.study-slip-copy { padding: 24px; }
.study-slip-copy h2 { font-size: clamp(23px, 3vw, 30px); line-height: 1.13; font-weight: 650; margin: 8px 0; overflow-wrap: anywhere; }
.study-slip-copy p { color: var(--muted); }
.study-slip-copy .slip-label { color: var(--accent); font-size: 13px; font-weight: 650; }
.study-slip .slip-action { background: var(--primary); color: var(--on-accent); margin-top: 16px; }
.study-slip .slip-action:hover { background: var(--accent-hover); }
.slip-spec { display: grid; align-content: center; gap: 8px; border-left: 1px dashed var(--border); padding: 16px; color: var(--muted); font-size: 13px; }
.slip-spec strong { font: 600 clamp(17px, 2.2vw, 25px)/1 var(--mono); color: var(--text); }
.view-enter .study-slip-copy { animation: settle 320ms var(--ease-out); }
.slip-action svg { transition: transform var(--motion-fast) var(--ease-out); }
.slip-action:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.course-register, .catalog-list, .study-ledger { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.register-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 16px; }
.register-header { display: grid; grid-template-columns: minmax(0, 1fr) 164px 94px; gap: 12px; padding: 10px 16px; border-radius: 11px 11px 0 0; background: var(--input); color: var(--muted); font-size: 12px; font-weight: 600; }
.register-header + .register-row, .register-row + .register-row, .catalog-card + .catalog-card { border-top: 1px solid var(--border); }
.register-row:focus-within, .register-row:hover { background: color-mix(in srgb, var(--surface) 75%, var(--raised)); }
.register-row:last-child { border-radius: 0 0 11px 11px; }
.register-row .register-activities { min-width: 164px; }
.register-row .register-actions { min-width: 94px; }
.subject-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 8px; color: var(--cover-ink); background: var(--cover); }
.subject-head .subject-mark { width: 56px; height: 56px; }
.register-activities, .register-actions { display: flex; align-items: center; gap: 8px; }
.activity-link, .grade-button { padding: 6px 8px; min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
.activity-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.activity-link:hover, .grade-button:hover { background: var(--raised); color: var(--text); }
.activity-link.activity-done svg { color: var(--mint); }
.grade-button { display: grid; justify-items: start; align-content: center; gap: 2px; }
.grade-button strong { font: 600 12px var(--mono); white-space: nowrap; color: var(--text); }
.study-ledger section { padding: 20px; }
.study-ledger section + section { border-top: 1px solid var(--border); }
.study-ledger h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.study-ledger h2 svg { color: var(--muted); flex: none; }
.study-ledger h3 { font-size: 15px; }
.study-ledger p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.study-ledger .button { margin-top: 12px; }
.ledger-progress { appearance: none; display: block; overflow: hidden; width: 100%; height: 6px; border: 0; border-radius: 4px; margin-top: 12px; background: var(--raised); }
.ledger-progress::-webkit-progress-bar { background: var(--raised); }
.ledger-progress::-webkit-progress-value { background: var(--accent); }
.ledger-progress::-moz-progress-bar { background: var(--accent); }
.session-summary { display: flex; align-items: center; gap: 10px; }
.session-date { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; }
.section-head, .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2 { font-size: 24px; line-height: 1.15; }
.section-head p, .page-head p { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.section-head p { font-size: 12px; }
.button, .icon-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 36px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.button svg, .icon-button svg { flex: none; }
.primary { background: var(--primary); color: var(--on-accent); }
.primary:hover { background: var(--accent-hover); }
.secondary, .icon-button { background: var(--raised); border-color: var(--border); }
.secondary:hover, .icon-button:hover, .quiet:hover { background: var(--selection); color: var(--accent); border-color: var(--border); }
.quiet { background: transparent; color: var(--muted); }
.danger { color: var(--rose); background: var(--danger-bg); border-color: color-mix(in srgb, var(--rose) 42%, var(--danger-bg)); }
.danger:hover { background: var(--danger-hover); border-color: var(--rose); }
.button, .icon-button, .activity-link, .rail-link { transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast) var(--ease-out); }
.button:active, .icon-button:active { transform: scale(.97); }
.icon-button { flex: none; padding: 0; width: 36px; height: 36px; }
.settings-stack { display: grid; gap: 15px; }
.dashboard .empty { margin-top: 0; }
.widget, .reading, .session, .empty { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; }
.course-meta h3 { font-size: 19px; line-height: 1.25; }
.course-meta h3 a:hover, .catalog-card h2 a:hover { color: var(--accent); }
.course-meta p { margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.course-meta p span { margin-left: 4px; font-family: var(--mono); }
.slate { --cover: #4c6275; --cover-ink: #edf1f6; }
.green { --cover: #386c60; --cover-ink: #e5f7f0; }
.blue { --cover: #385b88; --cover-ink: #edf2fb; }
.rose { --cover: #804754; --cover-ink: #f9e9ee; }
.gold { --cover: #685d39; --cover-ink: #fff2cd; }
.code { font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
.meter + .meter { margin-top: 10px; }
.meter > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 650; margin-bottom: 5px; }
.meter-status { display: inline-flex; align-items: center; gap: 4px; }
.meter-status:has(svg) { color: var(--mint); }
.meter-status.confirmed svg { animation: confirm-progress 230ms var(--ease-out); }
@keyframes confirm-progress { 0% { transform: scale(.82); } 50% { transform: scale(1.15); } 100% { transform: none; } }
.meter-track { height: 6px; background: var(--input); border-radius: 3px; overflow: hidden; }
.meter-track > span { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.meter-track > .filled { transform: scaleX(1); }
.widget { padding: 16px; }
.widget-head { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.widget-head h2 { font-size: 13px; letter-spacing: -.01em; }
.tile-icon { display: inline-grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--muted); background: var(--raised); }
.tile-icon.mint { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, var(--surface)); }
.widget-head .tile-icon { width: 22px; height: 25px; background: transparent; }
.widget h3 { font-size: 14px; }
.widget p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.widget .button { margin-top: 12px; }
.progress-stat { display: flex; align-items: baseline; gap: 9px; color: var(--muted); font-size: 12px; }
.progress-stat strong { font-size: 26px; color: var(--text); }

.internal { padding-top: 39px; }
.page-head { margin-bottom: 26px; }
.page-head h1, .subject-head h1 { font-size: clamp(29px, 4vw, 43px); font-weight: 700; line-height: 1.12; }
.filters { display: flex; align-items: end; gap: 11px; }
.catalog-scope { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.search-control { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.search-control:has(.search-field) { width: min(100%, 370px); }
.field { min-height: 42px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--text); }
.field:focus-within { border-color: var(--accent); }
.field input, .field select { min-width: 0; min-height: 40px; width: 100%; border: 0; color: var(--text); background: transparent; padding: 9px 12px; font-size: 13px; outline: none; }
.field input::placeholder, .form-label input::placeholder { color: var(--muted); opacity: 1; }
.field select { padding-right: 24px; }
.field option, .form-label option { background: var(--surface); }
.search-field { gap: 2px; width: min(100%, 370px); }
.search-field svg { flex: none; margin-left: 12px; color: var(--accent); }
.results-count { color: var(--muted); font-size: 12px; margin: 16px 0 12px; }
.catalog-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px auto; gap: 16px; align-items: center; padding: 12px 16px; }
.catalog-card h2 { font-size: 17px; margin: 0 0 4px; }
.catalog-card p { font-size: 13px; color: var(--muted); }
.catalog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.back-link { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-weight: 700; font-size: 12px; }
.subject-head { display: flex; align-items: center; gap: 16px; margin: 21px 0; }
.subject-head h1 { margin: 4px 0 3px; }
.subject-head p { color: var(--muted); font-size: 13px; }
.subject-head .button { margin-left: auto; }
.tabs { display: flex; gap: 5px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tabs a { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px 13px; color: var(--muted); font-size: 12px; font-weight: 700; }
.tabs a:hover, .tabs a[aria-current] { color: var(--accent); }
.tab-indicator { position: absolute; inset: auto 0 -1px; height: 2px; background: currentColor; transform-origin: left; pointer-events: none; }
.course-detail.tab-enter { animation: tab-content-in 260ms var(--ease-out); }
@keyframes tab-content-in { from { opacity: .4; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.course-detail.tab-enter[data-direction="back"] { animation-name: tab-content-back; }
@keyframes tab-content-back { from { opacity: .4; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.course-detail { display: grid; gap: 16px; grid-template-columns: minmax(0,1fr) 235px; align-items: start; }
.reading { padding: clamp(17px,4vw,27px); }
.mini-label { color: var(--accent); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.reading h2 { font-size: 22px; }
.reading p { color: var(--muted); line-height: 1.75; margin-top: 11px; max-width: 66ch; }
.reading-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 19px; }
.reading section + section { margin-top: 14px; }
.settings-stack { max-width: 640px; }
.settings-stack .button { margin-top: 13px; }
.empty { display: grid; justify-items: center; text-align: center; padding: 26px 20px; margin-top: 13px; }
.empty .tile-icon { width: 46px; height: 46px; margin-bottom: 10px; }
.empty h3 { font-size: 17px; }
.empty p { font-size: 13px; color: var(--muted); margin-top: 5px; }
.empty .button { margin-top: 13px; }
fieldset { border: 0; padding: 0; margin: 15px 0; }
legend { font-weight: 700; padding: 0; }
.answer-list { display: grid; gap: 7px; margin-top: 12px; }
.answer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); cursor: pointer; }
.answer:has(input:checked) { border-color: var(--accent); }
.answer.answer-correct { border-color: var(--mint); }
.answer.answer-incorrect { border-color: var(--rose); }
.answer svg { margin-left: auto; color: var(--mint); flex: none; }
input[type="checkbox"],input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.answer-feedback { margin: 0 0 13px; padding: 12px; border-radius: 8px; background: var(--raised); animation: settle var(--motion-enter) var(--ease-out); }
.answer-feedback.success strong { color: var(--mint); }
.answer-feedback.incorrect strong { color: var(--rose); }
.answer-feedback p { margin-top: 3px; }
.planner-list h2 { font-size: 20px; margin-bottom: 10px; }
.completed-heading { margin-top: 24px; }
.session { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 8px; }
.session h3 { font-size: 15px; }
.session p { color: var(--muted); margin-top: 4px; font-size: 12px; }
.session .session-focus { overflow-wrap: anywhere; }
.session-actions { display: flex; gap: 6px; margin-left: auto; }
.form-label { display: grid; gap: 7px; font-weight: 650; font-size: 12px; margin-top: 13px; min-width: 0; }
.form-label span { color: var(--muted); display: contents; }
.form-label input, .form-label select { display: block; width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text); font-weight: 500; }
.form-label [aria-invalid="true"] { border-color: var(--rose); }
.form-label .field-error { display: block; color: var(--rose); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.theme-options { margin: 0; }
.theme-options legend { font-size: 22px; letter-spacing: -.025em; }
.theme-options > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.theme-options .answer svg { color: var(--muted); margin: 0; }
dialog { width: min(95vw, 470px); max-height: min(88vh, 670px); overflow-y: auto; border-radius: 15px; padding: 17px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 16px 48px #0007; }
dialog[open] { animation: dialog-in 300ms var(--ease-out); }
dialog::backdrop { background: #080912ad; }
dialog[open]::backdrop { animation: fade-in var(--motion-enter) var(--ease-out); }
@keyframes dialog-in { from { opacity: .2; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.dialog-head h2 { font-size: 21px; }
.dialog-intro { color: var(--muted); font-size: 13px; line-height: 1.55; }
.motion-sample { margin: 20px 0; height: 9px; overflow: hidden; border-radius: 5px; background: var(--raised); }
.motion-sample span { display: block; width: 75%; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: left; }
dialog[open] .motion-sample span { animation: preview-fill 540ms var(--ease-out) 130ms backwards; }
@keyframes preview-fill { from { transform: scaleX(0); } }
dialog .search-control:has(.search-field), dialog .search-field, .search-control .search-field { width: 100%; }
.dialog-list { display: grid; margin: 10px 0; max-height: min(48vh,380px); overflow: auto; }
.dialog-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 6px; border-bottom: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.dialog-row:hover { background: var(--raised); }
.dialog-row > svg, .dialog-row > input { margin-left: auto; }
.dialog-row strong, .dialog-row small { display: block; }
.dialog-row strong { font-size: 13px; }
.dialog-row small { font-size: 11px; margin-top: 3px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }
.picker-actions { align-items: center; justify-content: space-between; }
#picker-count { color: var(--muted); font-size: 12px; }
.loading-line { display: block; width: min(48%, 195px); height: 14px; margin: 12px 0; background: var(--raised); border-radius: 4px; }
.loading-line.short { width: min(30%, 120px); }
.loading-courses { margin-top: 24px; }
.no-results { color: var(--muted); font-size: 13px; margin: 8px 0; }
.toast { position: fixed; z-index: 9; right: 17px; bottom: 17px; max-width: calc(100% - 34px); opacity: 0; transform: translateY(6px); pointer-events: none; padding: 11px 15px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 12px; box-shadow: 0 4px 14px #0003; transition: opacity .16s, transform .16s; }
.toast.on { opacity: 1; transform: none; }
@media (max-width: 1120px) {
  :root { --sidebar: 186px; }
  .wrap { width: calc(100% - 44px); }
  .dashboard-grid { gap: 16px; grid-template-columns: minmax(0,1fr) minmax(216px,.42fr); }
}
@media (max-width: 930px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .study-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-ledger section + section { border-top: 0; border-left: 1px solid var(--border); }
  .course-detail { grid-template-columns: minmax(0,1fr); }
  .course-detail .widget { max-width: 100%; }
}
@media (max-width: 760px) {
  .setup-strip { grid-template-columns: auto minmax(0, 1fr); }
  .setup-actions { grid-column: 1 / -1; }
  :root, .collapsed { --header: 57px; --sidebar: 0px; --bottom-nav: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { padding: 0 13px; gap: 9px; }
  .brand-wrap, .collapsed .brand-wrap { min-width: 0; gap: 7px; }
  .location-label { display: none; }
  .brand img { width: 29px; height: 29px; }
  .brand { font-size: 19px; gap: 6px; }
  .sidebar, .collapsed .sidebar { inset: auto 0 0; width: auto; min-height: var(--bottom-nav); border-right: 0; border-top: 1px solid var(--border); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .sidebar .rail-link { flex-direction: column; text-align: center; justify-content: center; gap: 4px; padding: 5px 2px; min-height: 52px; font-size: 11px; }
  .sidebar .rail-label, .sidebar .rail-bottom { display: none; }
  .sidebar .rail-link .rail-short { display: block; }
  .rail-link[aria-current]::before { inset: 0 32% auto; width: auto; height: 2px; border-radius: 0 0 3px 3px; }
  .main { padding-bottom: var(--bottom-nav); }
  html { scroll-padding: var(--header) 0 var(--bottom-nav); }
  .toast { bottom: calc(var(--bottom-nav) + 12px); }
  .search-launch { min-height: 35px; padding-inline: 9px; flex: 0 1 290px; width: auto; }
  .search-launch kbd { display: none; }
  .wrap { width: calc(100% - 32px); padding-top: 21px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; margin-bottom: 19px; }
}
@media (max-width: 530px) {
  .register-header { display: none; }
  .register-header + .register-row { border-top: 0; }
  .register-row .register-activities, .register-row .register-actions { min-width: 0; }
  .study-slip { grid-template-columns: 1fr; margin-bottom: 24px; }
  .study-slip-copy { padding: 16px; }
  .slip-spec { display: flex; flex-wrap: wrap; align-items: baseline; padding: 10px 16px; border-left: 0; border-top: 1px dashed var(--border); }
  .slip-spec strong { font-size: 16px; }
  .register-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; padding: 12px; }
  .register-activities { grid-column: 2 / -1; grid-row: 2; }
  .register-actions { grid-column: 3; grid-row: 1; }
  .grade-button, .activity-link { padding-inline: 4px; }
  .catalog-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .catalog-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .search-launch { flex: none; width: 36px; padding: 0; justify-content: center; }
  .search-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .avatar { width: 31px; height: 31px; }
  .course-meta h3 { font-size: 16px; }
  .course-meta p { font-size: 11px; }

  .section-head p { font-size: 11px; }
  .dashboard-title { align-items: flex-start; }
  .dashboard-title .button { min-height: 36px; padding-inline: 8px; }
  .filters { flex-wrap: wrap; }
  .filters .search-control { width: 100%; }
  .tabs { gap: 0; }
  .tabs a { flex: 1; padding-inline: 5px; gap: 4px; font-size: 11px; }
  .tabs svg { width: 15px; height: 15px; }
  .subject-head { gap: 9px; flex-wrap: wrap; }
  .subject-head h1 { font-size: 26px; overflow-wrap: anywhere; }
  .subject-head > div:nth-child(2) { flex: 1; min-width: 0; }
  .subject-head .button { margin-left: 0; }
  .session { flex-wrap: wrap; }
  .session-actions { margin-left: 44px; }
}
.public-page { background: #f1f3ee; }
.public-page .topbar { position: relative; width: min(100% - 48px, 1200px); margin-inline: auto; height: 76px; padding: 0; color: #192c25; background: transparent; border-color: #cbd5cc; }
.public-page .main { margin: 0; padding: 0; min-height: 0; background: transparent; color: #192c25; }
.public-page :focus-visible { outline-color: #24694d; }
.public-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.public-nav a:hover, .public-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.public-page .public-open { margin-left: auto; color: #192c25; border-color: #a7b8aa; min-height: 40px; }
.public-page .public-open:hover { background: #e0e9e0; }
.public-content { width: min(100% - 48px, 1200px); margin-inline: auto; }
.public-hero { isolation: isolate; position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 5vw, 76px); padding: 72px 0; }
.public-hero::before { content: ''; position: absolute; z-index: -1; inset: 24px 0 16px 46%; background: #dce8dd; clip-path: polygon(13% 0, 100% 0, 100% 81%, 0 100%); }
.public-copy h1 { font: 400 clamp(62px, 8.4vw, 126px)/.86 'Instrument Serif', Georgia, serif; letter-spacing: -.052em; margin: 18px 0 24px; }
.public-kicker { color: #3c6050; font-weight: 650; }
.public-copy > p:last-of-type { color: #40564b; max-width: 37ch; font-size: 17px; line-height: 1.58; }
.public-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.public-page .public-primary { background: #234f3d; color: #f5faf6; min-height: 44px; padding-inline: 16px; }
.public-page .public-primary:hover { background: #153e2e; }
.public-text-link { display: inline-flex; align-items: center; gap: 5px; color: #275844; font-weight: 650; }
.public-demo { margin: 18px 28px 18px 0; border: 1px solid #aabfb1; background: #f9faf5; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 32px #243f3020; }
.demo-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #e6eee5; border-bottom: 1px solid #c7d6ca; font-size: 13px; font-weight: 650; }
.demo-sheet { padding: clamp(20px, 3vw, 36px); }
.demo-spec { color: #3c6050; font-size: 13px; }
.demo-spec span { font: 600 12px var(--mono); margin-left: 5px; }
.demo-topic { margin: 12px 0 10px; font: 400 clamp(34px, 4.4vw, 60px)/.99 'Instrument Serif', Georgia, serif; }
.demo-sheet p:not([class]) { color: #40564b; line-height: 1.55; margin-bottom: 20px; }
.demo-index { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid #c7d6ca; padding: 12px 18px; }
.demo-index span { display: flex; align-items: center; gap: 6px; color: #3c6050; font-size: 12px; }
.public-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid #bfcfc2; padding: 28px 0 36px; }
.public-details h2 { font-size: 19px; margin-bottom: 8px; }
.public-details p { color: #40564b; line-height: 1.5; max-width: 33ch; }
.public-details a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #275844; font-weight: 650; }
.public-details a:hover { text-decoration: underline; }
.public-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #bfcfc2; padding: 18px 0 32px; }
.public-footer small { color: #40564b; }
.view-enter .public-demo { animation: demo-arrive 480ms var(--ease-out) 80ms both; }
@keyframes demo-arrive { from { opacity: .25; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .public-page .topbar, .public-content { width: calc(100% - 32px); }
  .public-page .topbar { height: 62px; }
  .public-nav { display: none; }
  .public-hero { grid-template-columns: 1fr; padding: 36px 0; gap: 22px; }
  .public-hero::before { inset: 44% 0 14px 8%; }
  .public-copy h1 { font-size: clamp(56px, 12vw, 84px); }
  .public-demo { margin: 0 12px 4px 0; }
  .public-details { grid-template-columns: 1fr; }
}
:root[data-motion="off"],
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="off"] dialog[open]::backdrop { animation: none; }