:root{color-scheme:dark;--bg:#0a1822;--panel:#122b35;--line:#41606a;--ink:#edf4f0;--muted:#b8ccd0;--mint:#9be5d6;--gold:#ffc478}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font:1rem/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:radial-gradient(ellipse at 10% 0,#183d43,transparent 65%),var(--bg)}button,input{font:inherit}button{min-height:44px;padding:8px 13px;border:1px solid #5b7b84;border-radius:8px;background:#193843;color:var(--ink);cursor:pointer}button:hover:not(:disabled){background:#28515a}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}a{color:var(--mint);text-underline-offset:4px}.primary{background:var(--gold);border-color:var(--gold);color:#242416;font-weight:700}.primary:hover:not(:disabled){background:#ffe1ac}.skip{position:absolute;top:-100px;z-index:20;background:var(--mint);color:var(--bg);padding:10px}.skip:focus{top:0}.top{min-height:56px;border-bottom:1px solid var(--line);padding:8px max(20px,calc((100vw - 1270px)/2));display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:1.2rem;font-weight:750;text-decoration:none}.top nav{display:flex;align-items:center;gap:24px;font-size:.875rem}.top nav button{font-size:.875rem;min-height:36px;padding:5px 10px;background:transparent}main{max-width:1310px;margin:auto;padding:17px 20px 25px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.eyebrow{font-size:.75rem;letter-spacing:.12em;color:var(--mint);margin:0 0 5px;font-weight:650}h1{font-size:2.25rem;line-height:1.1;letter-spacing:-.025em;margin:0}h1 em{font-family:Georgia,serif;color:var(--gold);font-weight:400}.heading button{font-size:.875rem}.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.cases button{display:flex;gap:10px;align-items:center;font-size:.9375rem;text-align:left;background:#0d2630}.cases button b{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid #789087;border-radius:50%;font-size:.8125rem;color:var(--gold)}.cases button[aria-current]{border-color:var(--gold);background:#304138}.cases .done{font-size:.75rem;color:var(--mint);margin-left:auto}#game{border:1px solid var(--line);border-radius:14px;background:#0d222d;overflow:hidden}.case-heading{display:flex;align-items:start;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}.case-heading h2{font-size:1.5rem;line-height:1.2;margin:0 0 5px}.case-heading p:not(.eyebrow){color:var(--muted);font-size:.9375rem;margin:0}.badge{font-size:.75rem;white-space:nowrap;border:1px solid #6b817e;padding:3px 7px;border-radius:5px;color:#d9e4d5}.workbench{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}.specimen,.spectrum{padding:13px 16px;min-width:0}.specimen{border-right:1px solid var(--line)}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.panel-label h3{margin:0;font-size:1rem;font-weight:650}.panel-label span{font-size:.75rem;color:var(--muted)}.panel-label button{font-size:.875rem;min-height:32px;padding:3px 10px}.specimen-view{height:clamp(190px,calc(100svh - 490px),290px);position:relative;background:#101923;border:1px solid #537078;border-radius:10px;overflow:hidden}.specimen-view canvas,#spots{position:absolute;inset:0;width:100%;height:100%}.spot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:46px;height:46px;padding:0;background:#152833c9;color:#fff2d7;border:2px solid #b7ccc6;font-weight:750;box-shadow:0 0 0 5px #06131b55}.spot[aria-pressed=true]{border-color:var(--gold);background:#544634;box-shadow:0 0 0 10px #ffbe6340}.spot.kept:after{content:'✓';position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;background:var(--mint);color:#12312b;font-size:.75rem;display:grid;place-items:center}.view-note{position:absolute;bottom:6px;left:8px;right:8px;width:fit-content;max-width:calc(100% - 16px);font-size:.75rem;color:#bacbc9;background:#071922e8;padding:2px 6px;pointer-events:none}.scan-row{display:flex;align-items:center;gap:12px;margin-top:10px}.scan-row button{flex-shrink:0;font-size:.875rem}.scan-row span{font-size:.875rem;color:var(--gold)}.sampling-note{font-size:.875rem;color:var(--muted);margin:9px 0 0}.chart-wrap{height:clamp(200px,calc(100svh - 490px),290px);position:relative;background:#091b24;border:1px solid #537078;border-radius:10px}.chart-wrap canvas{width:100%;height:100%;display:block}#chart-empty{position:absolute;inset:0;display:grid;align-content:center;justify-content:center;margin:0;text-align:center;color:var(--muted);pointer-events:none;font-size:1rem}#chart-empty strong{font-size:1.2rem;color:var(--gold);margin-top:6px}#spectrum-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px}.chart-note{font-size:.75rem;color:var(--muted)}#wide{font-size:.875rem;color:var(--mint)}#description{padding:9px 12px;border-left:3px solid var(--mint);background:#1c3740;font-size:.9375rem}.next-step{margin:0;padding:11px 18px;background:#314239;color:#f5ddaf;font-size:.9375rem;border-block:1px solid var(--line)}.evidence-area{display:grid;grid-template-columns:1.05fr 1fr}.references,.decision{padding:16px 18px;min-width:0}.references{border-right:1px solid var(--line)}.ref-cards{display:flex;gap:8px}.ref{flex:1;border:1px solid #556e72;border-radius:8px;background:#142f38;padding:10px;min-width:0}.ref strong{display:block;color:var(--gold);font-size:1rem}.ref .name{font-size:.875rem;color:var(--muted)}.ref p{font-size:.875rem;margin:6px 0 0}.ref span.line-name{font-size:.75rem;color:var(--muted)}.small{font-size:.875rem;color:var(--muted);margin:10px 0 0}.decision h3{font-size:1rem;margin:0 0 10px}.choices{display:flex;gap:7px;margin-bottom:11px}.choices button{flex:1;font-size:.875rem}.choices button[aria-pressed=true]{background:#485044;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.choices.long{flex-direction:column}.choices.long button{text-align:left}.decision>#check{font-size:.9375rem}.decision #feedback{border-top:1px solid var(--line);margin-top:15px;padding-top:13px}.decision #feedback-title{font-size:1.125rem;color:var(--gold)}#feedback-copy{font-size:.9375rem;margin:0}#feedback-meta{margin-bottom:12px}.bottom{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:18px;font-size:.875rem}.bottom button{font-size:.875rem;background:transparent;border:0;padding-left:0;text-decoration:underline;text-underline-offset:4px}#finish{padding:20px;border:1px solid var(--mint);border-radius:12px;margin-top:15px;background:#163832}#finish h2{margin:0;font-size:1.4rem}#finish p{color:var(--muted)}#load-status:empty{display:none}dialog{max-width:600px;width:calc(100% - 24px);max-height:85svh;overflow:auto;background:#17333d;color:var(--ink);border:1px solid #78968e;border-radius:14px;padding:24px}dialog::backdrop{background:#031219dc}dialog h2{line-height:1.2;margin-top:5px}dialog p,dialog li{color:var(--muted)}dialog li{margin-block:10px}.close{float:right;font-size:1.5rem;width:44px;padding:0}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}h1,h2,h3,p,button,a{overflow-wrap:break-word}
@media(max-width:850px){.workbench,.evidence-area{grid-template-columns:1fr 1fr}.specimen,.spectrum{padding:11px}.case-heading{flex-wrap:wrap}.specimen-view,.chart-wrap{height:220px}.scan-row{flex-wrap:wrap;gap:5px}.ref-cards{flex-wrap:wrap}.ref{min-width:90px}.cases button{font-size:.875rem;padding:8px}.panel-label{flex-wrap:wrap}.references,.decision{padding:12px}.badge{font-size:.75rem}}
@media(max-width:620px){main{padding:12px 10px}.top{padding:9px 12px}.top nav{gap:13px}.brand{font-size:1.05rem}.top nav a,.top nav button{font-size:.8125rem}.top nav button{padding:4px 7px}.heading{gap:8px;margin-bottom:12px;align-items:end}h1{font-size:1.8rem}.heading .eyebrow{font-size:.75rem;letter-spacing:.055em}.heading button{font-size:.8125rem;padding:6px 9px}.cases{gap:5px}.cases button{flex-direction:column;align-items:start;gap:5px;font-size:.8125rem;line-height:1.25}.cases .done{margin-left:0}.case-heading{padding:12px;gap:8px}.case-heading h2{font-size:1.25rem}.case-heading p:not(.eyebrow){font-size:.875rem}.workbench,.evidence-area{grid-template-columns:1fr}.specimen,.references{border-right:0;border-bottom:1px solid var(--line)}.specimen-view{height:170px}.chart-wrap{height:215px}.panel-label{flex-wrap:nowrap}.panel-label h3{font-size:.9375rem}.scan-row{flex-wrap:nowrap}.sampling-note{font-size:.8125rem}.spectrum{padding-top:10px}.view-note{font-size:.75rem}.next-step{padding:10px 12px;font-size:.875rem}.references .panel-label{flex-wrap:wrap}.ref{padding:9px;min-width:80px}.ref strong{font-size:.9375rem}.ref p{font-size:.8125rem}.ref .name{font-size:.8125rem}.ref .line-name{font-size:.75rem}.small{font-size:.875rem}.choices button{min-height:44px}.bottom{font-size:.875rem;gap:10px 18px}}
.large-text .workbench,.large-text .evidence-area{grid-template-columns:1fr}.large-text .heading,.large-text .case-heading,.large-text .panel-label,.large-text .scan-row{flex-wrap:wrap}.large-text .cases{grid-template-columns:1fr}.large-text .cases button{flex-direction:row}.large-text .ref-cards{flex-wrap:wrap}.large-text .ref{min-width:140px}.large-text .choices{flex-wrap:wrap}.large-text .choices button{flex-basis:100%}.large-text .specimen-view{height:240px}.large-text .chart-wrap{height:300px}.large-text .view-note{font-size:.75rem}.large-text .references,.large-text .specimen{border-right:0}.large-text .badge{white-space:normal}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Keep the evidence close to the controls on short laptops and phones. */
.case-heading{padding-block:12px}#case-number{display:none}
@media(min-width:851px) and (max-height:850px){.specimen-view,.chart-wrap{height:200px}.references,.decision{padding-block:12px}.ref{padding:8px}.ref p{margin-top:3px}.next-step{padding-block:8px}.case-heading h2{font-size:1.25rem}.case-heading{padding-block:10px}.heading{margin-bottom:12px}.cases{margin-bottom:10px}}
@media(max-width:620px){.cases button{flex-direction:row;align-items:center}.cases button b{width:21px;height:21px;font-size:.75rem}.cases button .done{display:none}.specimen-view{height:130px}.chart-wrap{height:205px}.sampling-note{margin-top:6px}.case-heading{gap:6px}.references{padding-top:10px}.ref-cards{gap:6px}.ref p{margin-top:3px}.next-step{padding-block:8px}}
@media(max-width:360px){.top{gap:8px;min-height:50px}.top nav{gap:8px}.top nav a,.top nav button{font-size:.75rem}.brand{font-size:.94rem;gap:7px}.brand img{width:25px;height:25px}h1{font-size:1.6rem}.heading{align-items:center}.heading button{font-size:.8125rem;padding-inline:8px}.eyebrow{letter-spacing:.04em}.cases button{font-size:.8125rem;gap:6px;padding:7px 6px}.cases button b{width:20px;height:20px}.case-heading h2{font-size:1.125rem}.panel-label span{font-size:.75rem}.scan-row button{padding:7px 10px}.ref{padding:8px}.specimen-view{height:125px}}
.large-text .specimen-view{height:240px}.large-text .chart-wrap{height:300px}
