:root{--paper:#f5f3ed;--ink:#272c29;--muted:#747974;--line:#d6d9d2;--card:#ffffff9c;--field:#fff;--hover:#fff;--soft-line:#00000018;--active:#e3e5de;--on-ink:#fff;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 system-ui,sans-serif}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}.topbar{padding:20px 4%;display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--line)}.brand{font-weight:700;font-size:20px;display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;background:var(--ink);color:var(--on-ink);width:32px;height:32px}.brand-sub{font-weight:400;color:var(--muted);font-size:14px}.topbar nav{display:flex;margin-left:auto;gap:5px}.nav-item{padding:8px 14px;font-size:14px;border-radius:4px}.nav-item.active{background:var(--active)}.demo-label{font-size:12px;color:var(--muted)}.workspace{max-width:1520px;padding:38px 4% 20px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:clamp(25px,3vw,42px);letter-spacing:-1.1px;font-weight:600;margin:5px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:600;color:var(--muted)}.session-line{display:flex;gap:22px;color:var(--muted);font-size:13px;margin:18px 0 24px}.axis-row{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;color:var(--muted);margin:0 0 8px}.matrix{display:grid;grid-template-columns:1fr 1fr;gap:16px}.quadrant{border:1px solid var(--line);border-top:4px solid var(--tone);padding:24px;background:var(--surface);min-height:240px}.q-A{--tone:#9e514b;--surface:#f6eeeb}.q-B{--tone:#557762;--surface:#eef3ec}.q-C{--tone:#aa8643;--surface:#f7f2e6}.q-D{--tone:#78828a;--surface:#edf0f1}.quadrant-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.quadrant-letter{font:600 20px/1 system-ui;color:var(--tone)}.quadrant-label{font-size:12px;color:var(--muted)}.quadrant h2{font-size:23px;margin:15px 0 21px;font-weight:600;letter-spacing:-.5px}.phrase-list{display:grid;gap:8px}.phrase{border:1px solid var(--soft-line);background:var(--card);display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:11px 13px;text-align:left;color:var(--ink);border-radius:3px}.phrase:hover{background:var(--hover);border-color:var(--tone)}.phrase strong{min-width:26px;text-align:center;color:var(--tone)}.quadrant-total{color:var(--muted);font-size:12px;margin-top:15px}.empty{color:var(--muted);font-size:14px}.page-footer{display:flex;justify-content:space-between;margin-top:21px;color:var(--muted);font-size:12px}.btn{border-radius:4px;font-size:13px;padding:10px 15px}.student-wrap{max-width:920px;margin:auto}.name-label{display:block;font-size:13px;margin:22px 0 6px}.form-control{max-width:320px;border:1px solid var(--line);padding:10px;background:var(--field);border-radius:4px}.task-panel{margin:28px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0}.task-panel .eyebrow{display:flex;justify-content:space-between}.task-panel h2{font-size:clamp(22px,3vw,32px);font-weight:500;margin:14px 0 0}.choose{display:flex;justify-content:space-between;background:transparent;border:0;border-top:1px solid var(--soft-line);width:100%;padding:15px 0 0;color:var(--tone);text-align:left}.quadrant.selected{outline:2px solid var(--tone);outline-offset:2px}.student-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0}#student-status{font-size:13px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:6px;padding:26px;width:min(460px,90vw);color:var(--ink);background:var(--paper)}dialog::backdrop{background:#17251b66}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{border:0;background:transparent;font-size:27px}dialog h2{font-size:24px;margin:16px 0 8px}dialog p{font-size:13px;color:var(--muted)}dialog ul{padding-left:22px;max-height:40vh;overflow:auto}dialog li{padding:5px}:focus-visible{outline:3px solid #3269a4;outline-offset:3px}body:fullscreen .topbar{display:none}body:fullscreen .workspace{max-width:none;padding-top:25px}body[data-view=board] .phrase{font-size:clamp(16px,1.4vw,22px)}@media(max-width:650px){.topbar{flex-wrap:wrap;padding:15px}.brand-sub,.demo-label{display:none}.topbar nav{width:100%;margin:0}.workspace{padding:25px 16px}.matrix{grid-template-columns:1fr}.axis-row{display:none}.quadrant{min-height:190px;padding:20px}.quadrant-label{font-size:11px}.page-heading{align-items:flex-start}.session-line{gap:12px;flex-wrap:wrap}.page-footer{gap:15px}.student-controls{flex-wrap:wrap}#student-status{order:3;width:100%}}

[hidden]{display:none!important}#student-status{margin:16px 0}.task-panel{min-width:0;border:0;border-top:1px solid var(--line);padding:20px 0;margin:24px 0}.task-panel legend{float:none;width:auto;padding:0 8px 0 0;font-size:clamp(19px,2.5vw,25px);font-weight:500}.task-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.task-choice{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border:1px solid var(--line);border-left:4px solid var(--tone);border-radius:4px;background:var(--surface);color:var(--ink)}.task-choice strong,.task-choice .quadrant-label{display:block}.task-choice:hover{border-color:var(--tone)}.task-choice.selected{outline:2px solid var(--tone);outline-offset:2px}.task-choice.selected strong::after{content:' ✓'}@media(max-width:650px){.task-choices{grid-template-columns:1fr}}

.account-panel{max-width:640px;margin-top:28px;padding:24px;border:1px solid var(--line);background:var(--card);border-radius:4px}.account-details{margin:0 0 24px}.account-details>div+div{margin-top:20px}.account-details dt{font-size:13px;color:var(--muted);font-weight:500}.account-details dd{margin:5px 0 0;overflow-wrap:anywhere}.account-note{font-size:13px;color:var(--muted);margin:24px 0 0}

.quiz-intro{color:var(--muted);margin:16px 0 28px;max-width:650px}.quiz-form{max-width:820px}.quiz-section{padding:24px;margin-bottom:18px;border:1px solid var(--line);border-radius:4px;background:var(--card)}.quiz-section h2{font-size:21px;margin:0 0 14px}.quiz-form .form-control{width:100%;max-width:none}.quiz-help{font-size:13px;color:var(--muted);margin:12px 0}.quiz-topic{display:flex;align-items:flex-end;gap:12px;margin:16px 0}.quiz-topic>div{flex:1;min-width:0}.quiz-topic label{display:block;font-size:13px;margin-bottom:6px}.quiz-actions{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin:24px 0}.quiz-actions>a{font-size:14px}.quiz-errors{max-width:820px;border:1px solid #9e514b;background:#f6eeeb;padding:16px;margin:20px 0}.quiz-errors ul{margin:0;padding-left:20px}.quiz-notice{padding:15px;border:1px solid #557762;background:#eef3ec;margin:20px 0}.quiz-title{font-size:20px;margin:20px 0 0}.topbar nav{flex-wrap:wrap}.btn-dark{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink)}.btn-outline-dark{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn:disabled{opacity:.5;cursor:default}@media(max-width:650px){.quiz-section{padding:18px}.quiz-topic{gap:8px}.quiz-topic .btn{padding:10px 8px}.nav-item{padding:8px 10px}}

.quiz-topic .quiz-answer-label{margin-top:12px}.quiz-solutions{max-width:820px;margin-top:24px;padding:20px;border:1px solid var(--line);background:var(--card)}.quiz-solutions summary{cursor:pointer}.quiz-solutions dl{margin:20px 0 0}.quiz-solutions dl>div+div{margin-top:16px}.quiz-solutions dt{font-weight:500}.quiz-solutions dd{font-size:13px;color:var(--muted);margin:4px 0 0}

:root[data-theme=dark]{--paper:#181d1b;--ink:#e8ece6;--muted:#a6afa7;--line:#424c45;--card:#252d28;--field:#202823;--hover:#313b34;--soft-line:#465249;--active:#354139;--on-ink:#18201b;color-scheme:dark}
[data-theme=dark] .q-A{--tone:#e59b91;--surface:#322624}
[data-theme=dark] .q-B{--tone:#9dc4a7;--surface:#243129}
[data-theme=dark] .q-C{--tone:#d8b66e;--surface:#332e21}
[data-theme=dark] .q-D{--tone:#b0bec8;--surface:#273036}
[data-theme=dark] .quiz-errors{border-color:#e59b91;background:#322624}
[data-theme=dark] .quiz-notice{border-color:#9dc4a7;background:#243129}
[data-theme=dark] :focus-visible{outline-color:#8cbbef}
.dialog-top button{color:var(--ink)}
.form-control{color:var(--ink)}
.form-control:focus{color:var(--ink);background:var(--field)}
.form-control::placeholder{color:var(--muted);opacity:1}
.theme-toolbar{display:flex;justify-content:flex-end;padding:12px 4% 0}
.login-panel{max-width:480px;margin:24px auto 48px;padding:36px;border:1px solid var(--line);border-radius:6px;background:var(--card)}.login-mark{width:44px;height:44px;font-size:25px;margin-bottom:28px}.login-panel h1{font-size:clamp(28px,4vw,36px)}.login-intro{color:var(--muted);margin:16px 0 28px}.login-panel .form-control{width:100%;max-width:none}.login-panel .login-submit{margin-top:24px}.login-error{color:var(--ink);border-left:3px solid #9e514b;padding:10px 14px;background:var(--paper)}.login-submit{width:100%;padding:13px}.login-student{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.login-student a{display:block;margin-top:6px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}@media(max-width:650px){.login-panel{margin:8px auto 24px;padding:24px}}
@media(max-width:650px){.theme-toolbar{padding:12px 16px 0}}

.quiz-library{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--line)}.quiz-library h2{font-size:26px;margin:6px 0}.quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}.quiz-card{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:6px;min-width:0}.quiz-card.is-active{border-color:var(--ink);box-shadow:inset 0 3px var(--ink)}.quiz-card h3{font-size:21px;margin:12px 0;overflow-wrap:anywhere}.quiz-card code,.quiz-share code{color:var(--ink);overflow-wrap:anywhere}.quiz-card-actions{display:flex;gap:10px;flex-wrap:wrap}.nickname-form{max-width:480px;margin:24px 0;padding:26px;background:var(--card);border:1px solid var(--line);border-radius:6px}.nickname-form .form-control{width:100%;max-width:none}.nickname-form .name-label:first-of-type{margin-top:0}.quiz-share{line-height:1.8;overflow-wrap:anywhere}.quiz-share a{text-decoration:underline}
