:root{color-scheme:dark;--bg:#071b25;--panel:#102e39;--line:#365961;--ink:#ebf5f3;--muted:#b4ced0;--mint:#a1efdd;--gold:#ffd695}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 12% 10%,#164350,var(--bg) 65%);color:var(--ink);font:1rem/1.42 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:var(--mint)}button,input{font:inherit}button{min-height:44px;border:1px solid #577a83;border-radius:8px;background:#153641;color:var(--ink);padding:8px 13px;cursor:pointer}button:hover:not(:disabled){background:#26505a}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#2d5952;border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint);text-decoration:underline;text-underline-offset:4px}.primary{background:var(--mint);color:#082931;border-color:var(--mint);font-weight:750}.primary:hover:not(:disabled){background:#c7fff0}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.top{height:52px;padding:6px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:7px;align-items:center;font-weight:750;font-size:1.25rem;text-decoration:none;color:var(--ink)}.brand span{color:var(--mint);margin-left:-7px}.top nav{display:flex;gap:24px;font-size:.875rem}.top nav a{text-decoration:none}.skip{position:absolute;top:-70px;padding:10px;background:var(--mint);color:var(--bg);z-index:10}.skip:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}main{max-width:1190px;margin:auto;padding:14px 24px 10px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.eyebrow{color:var(--mint);font-size:.75rem;font-weight:650;letter-spacing:.1em;margin:0 0 4px}h1{margin:0;font-size:2.3rem;line-height:1.12;letter-spacing:-.035em}h1 em{font-family:Georgia,serif;color:var(--gold);font-weight:400}.heading p:last-child{color:var(--muted);margin:5px 0 0}.count{font-size:.875rem;color:var(--gold);white-space:nowrap;border:1px solid var(--line);padding:9px 13px;border-radius:30px}.bench{background:#0b232d;border:1px solid var(--line);border-radius:14px;overflow:hidden}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px}.viewer{padding:12px 16px;border-right:1px solid var(--line);min-width:0}.view-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px;font-size:.875rem}.view-head span{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}.drop-wrap{height:clamp(230px,calc(100svh - 370px),445px);position:relative;border-radius:8px;background:radial-gradient(ellipse,#1b414b,#081b26 75%);overflow:hidden}#drop{display:block;width:100%;height:100%;cursor:crosshair;touch-action:manipulation}.view-state,.view-cue{position:absolute;bottom:10px;font-size:.75rem;background:#0b2530ed;color:var(--ink);padding:5px 8px;border:1px solid #42646e;border-radius:6px;pointer-events:none}.view-state{left:10px}.view-cue{right:10px;color:var(--gold)}.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.modes button{font-size:.875rem;padding:7px 4px}#mode-note{color:var(--muted);font-size:.875rem;line-height:1.35;min-height:38px;margin:8px 0}.view-actions{display:flex;flex-wrap:wrap;gap:8px}.view-actions button{font-size:.875rem;flex:1}.notebook{padding:18px;min-width:0}h2{font-size:1.22rem;line-height:1.2;margin:0 0 8px}.notebook p{font-size:.9375rem;color:var(--muted);margin:7px 0 15px}.notebook .small{font-size:.875rem}.notebook .eyebrow{font-size:.75rem;color:var(--mint)}.guide-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px}.guide-heading h2{font-size:.875rem;margin:0}.guide-heading span{font-size:.75rem;color:var(--gold)}#guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.guide-slot{display:flex;align-items:center;justify-content:center;min-height:57px;border:1px dashed #42646e;border-radius:9px;color:#93b3ba;background:#0a202b;font-size:.875rem}.guide-slot.found{border-style:solid;flex-direction:column;padding:4px;gap:1px;color:var(--ink);font-size:.75rem}.guide-slot canvas{width:45px;height:36px}.notebook #status{font-size:.875rem;line-height:1.4;margin:12px 0 0}.inspect-head{display:flex;justify-content:space-between;align-items:center}.inspect-head button{min-height:36px;width:36px;padding:0;font-size:1.3rem}#closeup{display:block;width:100%;height:145px;background:#122e37;border:1px solid var(--line);border-radius:8px;margin:8px 0 12px}.fiction{display:block;font-size:.75rem;color:var(--muted);margin-bottom:12px}#tag{width:100%;font-size:.875rem}#inspection #trait{font-size:.875rem;margin-bottom:8px}#completion a{display:block;font-size:.875rem;margin-top:14px}#new-drop{width:100%;font-size:.875rem}#inspect-marker{margin-top:10px;width:100%;font-size:.875rem}.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 10px;margin-top:4px;color:var(--muted);font-size:.875rem}.footer button{border:0;background:transparent;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;min-height:36px;padding:5px}#share-status:empty,#load-status:empty{display:none}#share-status,#load-status{font-size:.875rem;margin:6px 0}#share-url{width:100%;padding:8px}dialog{width:calc(100% - 28px);max-width:600px;max-height:85svh;background:var(--panel);color:var(--ink);border:1px solid #66878c;border-radius:14px;padding:24px}dialog::backdrop{background:#020a0ddb}dialog h2{font-size:1.5rem}dialog p{color:var(--muted)}.close{float:right;width:44px;padding:0;font-size:1.5rem}
@media(min-width:781px) and (max-height:750px){main{padding-top:10px}.heading p:last-child{display:none}.heading{margin-bottom:10px}h1{font-size:2rem}.viewer{padding:9px 12px}.drop-wrap{height:clamp(190px,calc(100svh - 350px),345px)}.notebook{padding:12px 16px}.notebook p{font-size:.875rem;margin-bottom:10px}.notebook .small{font-size:.8rem}.guide-heading{margin-top:12px}.guide-slot{min-height:44px}.guide-slot canvas{height:28px}.modes{margin-top:7px}#mode-note{font-size:.8rem;min-height:34px;margin-block:6px}.view-actions button{min-height:38px}.footer{font-size:.75rem}.footer button{font-size:.75rem}#closeup{height:100px;margin-block:5px 8px}.fiction{margin-bottom:7px}#inspection h2{font-size:1.1rem}#inspection~.guide-heading{margin-top:10px}.notebook #status{font-size:.8rem}}
@media(max-width:780px){.top{height:48px;padding:6px 12px}.brand{font-size:1.1rem}.top nav{gap:15px}main{padding:10px 12px}.heading{align-items:center;gap:8px;margin-bottom:10px}.eyebrow{font-size:.65rem;letter-spacing:.07em}h1{font-size:1.8rem}.heading p:last-child{font-size:.875rem;margin-top:4px}.count{font-size:.75rem;padding:6px 8px}.workspace{grid-template-columns:1fr}.viewer{padding:9px;border-right:0;border-bottom:1px solid var(--line)}.view-head{font-size:.875rem}.view-head span{font-size:.65rem}.drop-wrap{height:clamp(215px,30svh,310px)}.view-state,.view-cue{font-size:.65rem;bottom:7px}.view-state{left:7px}.view-cue{right:7px}.modes{gap:5px;margin-top:7px}.modes button{font-size:.8rem;line-height:1.2;min-height:44px;padding:5px 3px}#mode-note{font-size:.8rem;min-height:44px;margin-block:6px}.view-actions{gap:6px}.view-actions button{font-size:.8rem;padding:7px 5px}.notebook{padding:11px}#welcome h2{font-size:1rem}#welcome .eyebrow,#welcome .small{display:none}#welcome p{font-size:.875rem;margin:4px 0 8px}.guide-heading{margin:8px 0}#guide{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.guide-slot{min-height:38px}.guide-slot.found{font-size:.6rem}.guide-slot canvas{width:30px;height:27px}.notebook #status{font-size:.8rem;margin-top:9px}.footer{justify-content:center;font-size:.75rem}.footer>span{width:100%;text-align:center}.footer button{font-size:.75rem}#inspection{display:grid;grid-template-columns:95px 1fr;gap:3px 10px}.inspect-head{grid-column:1/-1}#closeup{grid-column:1;grid-row:2/5;width:95px;height:105px;margin:0}#creature-name{grid-column:2;font-size:1rem;margin-bottom:0}#inspection #trait{grid-column:2;margin:0;font-size:.8rem}.fiction{grid-column:2;margin:0;font-size:.65rem}#tag{grid-column:1/-1;margin-top:6px}#completion h2{font-size:1.2rem}#completion p{font-size:.875rem}#completion a{margin-top:8px}}
@media(max-width:360px){main{padding-inline:8px}h1{font-size:1.55rem}.heading p:last-child{font-size:.8rem}.heading .eyebrow{font-size:.6rem}.view-head span{font-size:.6rem}.drop-wrap{height:210px}.modes button{font-size:.75rem}.guide-slot.found{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.notebook #mode-note{margin-top:0}.notebook .view-actions{margin-bottom:17px}.drop-wrap.inspecting #drop,.drop-wrap.inspecting .view-state,.drop-wrap.inspecting .view-cue{visibility:hidden}.drop-wrap #inspection:not([hidden]){position:absolute;inset:0;z-index:2;background:#102e39;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:36px auto auto auto 44px;gap:7px 18px;padding:14px 20px;align-content:center}.drop-wrap .inspect-head{grid-column:1/-1}.drop-wrap #closeup{grid-column:1;grid-row:2/6;height:100%;min-height:150px;margin:0}.drop-wrap #creature-name{grid-column:2;align-self:end;font-size:1.4rem}.drop-wrap #trait{grid-column:2;margin:0;align-self:center;font-size:1rem}.drop-wrap .fiction{grid-column:2;margin:0;font-size:.75rem}.drop-wrap #tag{grid-column:2;align-self:end}.drop-wrap{height:clamp(285px,calc(100svh - 265px),480px)}#welcome{margin-top:14px}#welcome .small{margin-bottom:10px}
@media(min-width:781px) and (max-height:750px){.drop-wrap{height:clamp(260px,calc(100svh - 250px),420px)}.notebook .view-actions{margin-bottom:12px}#welcome h2{font-size:1.1rem}#welcome .small{display:none}.notebook .view-actions button{min-height:44px}.drop-wrap #trait{font-size:.9375rem}}
@media(max-width:780px){.drop-wrap{height:clamp(215px,29svh,290px)}.notebook .view-actions{margin-bottom:8px}#welcome{margin-top:8px}#welcome h2{display:none}.notebook #mode-note{min-height:0;margin-bottom:8px}.drop-wrap #inspection:not([hidden]){padding:8px 10px;grid-template-columns:95px minmax(0,1fr);grid-template-rows:30px auto auto auto 44px;gap:4px 10px}.drop-wrap #closeup{grid-row:2/5;min-height:80px;height:100%;width:95px}.drop-wrap #creature-name{font-size:1rem;margin:0}.drop-wrap #trait{font-size:.8rem}.drop-wrap .fiction{font-size:.65rem}.drop-wrap #tag{grid-column:1/-1}.modes button{font-size:.875rem}.notebook #status{margin-top:7px}.notebook .guide-heading{margin-top:8px}}
@media(max-width:360px){.drop-wrap{height:215px}.modes button{font-size:.8rem}}

.drop-wrap.inspecting{overflow:auto}.drop-wrap #inspection:not([hidden]){bottom:auto;min-height:100%;align-content:start;grid-template-rows:36px auto auto auto minmax(44px,auto)}
@media(max-width:780px){.drop-wrap #inspection:not([hidden]){grid-template-rows:30px auto auto auto minmax(44px,auto)}}

.heading{flex-wrap:wrap}.heading>div{min-width:0}h1{overflow-wrap:anywhere}.top{height:auto;min-height:52px;flex-wrap:wrap;gap:6px}.modes button{min-width:0;overflow-wrap:anywhere}.guide-slot{min-width:0;overflow-wrap:anywhere}
@media(max-width:780px){.top{min-height:48px}.heading>div{flex:1 1 180px}}

/* Detective cases keep the original exploration available as a warm-up. */
.activities{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 10px}.activities button{font-size:.875rem}.activities span{font-size:.8rem;color:var(--muted);margin-left:auto}
body.detective .workspace{grid-template-columns:minmax(0,1fr) 370px}body.detective .notebook{padding:12px 16px}body.detective .drop-wrap{height:clamp(320px,calc(100svh - 318px),480px)}
body.detective .notebook .view-actions{margin-bottom:12px}#case-panel .case-clue{color:var(--ink);font-size:1rem;line-height:1.45}#case-panel h2{font-size:1.2rem}#case-help{font-size:.82rem}#candidates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}#candidates button{padding:5px 0;min-height:44px}#candidates button.visited{border-bottom:3px solid var(--mint)}#candidates button[aria-pressed=true]{background:#2d5952}#chosen{color:var(--gold);font-weight:600}#hint-text{padding:8px 10px;background:#193d45;border-left:3px solid var(--gold);font-size:.875rem}
#evidence{padding:0;border:0;margin:10px 0}#evidence legend{font-size:.85rem;color:var(--muted);margin-bottom:6px}#evidence-options{display:grid;gap:6px}#evidence label{display:flex;gap:9px;align-items:center;min-height:44px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:.85rem;cursor:pointer}#evidence label:has(input:checked){border-color:var(--mint);background:#21483f}#evidence input{accent-color:var(--mint);flex-shrink:0;width:17px;height:17px}#check-evidence,#next-case,#new-cases{width:100%;font-size:.9rem}#worked{margin-top:12px;font-size:.82rem;color:var(--muted)}#worked summary{cursor:pointer;min-height:32px;padding-top:6px}#worked button{font-size:.85rem}#case-outcome{margin-top:10px;padding:12px;border:1px solid #618c78;border-radius:8px;background:#173b35}#case-outcome h3{margin:0 0 7px;font-size:1.1rem}#case-outcome p{font-size:.875rem}#case-outcome a{display:block;font-size:.875rem;margin-top:12px}
body.detective .drop-wrap #inspection:not([hidden]){grid-template-rows:36px auto auto auto auto auto;align-content:center}body.detective .drop-wrap #closeup{grid-row:2/7;height:230px;min-height:180px}body.detective .drop-wrap #describe{grid-column:2;font-size:.8rem}body.detective .drop-wrap #tag{grid-row:6}body.detective .drop-wrap #trait{font-size:.9rem}body.detective #count{white-space:normal}#lab-link{line-height:1.5}
@media(min-width:781px) and (max-height:780px){body.detective .notebook{max-height:calc(100svh - 230px);min-height:370px;overflow-y:auto;scrollbar-gutter:stable}body.detective #case-help{margin-bottom:8px}body.detective .heading{margin-bottom:7px}body.detective .activities{margin-bottom:7px}body.detective #mode-note{font-size:.75rem}body.detective .drop-wrap #closeup{height:210px}}
@media(max-width:780px){.activities span{width:100%;margin:0}.activities button{flex:1}body.detective .workspace{grid-template-columns:1fr}body.detective .notebook{padding:12px}body.detective .drop-wrap{height:305px}body.detective .drop-wrap #inspection:not([hidden]){grid-template-columns:minmax(120px,1fr) minmax(0,1fr);padding:8px;gap:5px 9px;align-content:start}body.detective .drop-wrap #closeup{grid-row:2/5;width:100%;height:170px;min-height:160px}body.detective .drop-wrap #describe,body.detective .drop-wrap #tag{grid-column:1/-1}body.detective .drop-wrap #describe{grid-row:5}body.detective .drop-wrap #tag{grid-row:6;margin:0}body.detective .drop-wrap #creature-name{font-size:1.05rem}body.detective .drop-wrap #trait{font-size:.8rem}body.detective .drop-wrap .fiction{font-size:.65rem}.activities{margin-bottom:10px}}

@media(min-width:781px){body.detective .drop-wrap{height:clamp(250px,calc(100svh - 380px),440px)}body.detective .notebook{max-height:calc(100svh - 275px);min-height:370px;overflow-y:auto;scrollbar-gutter:stable}}

@media(max-width:780px){body.detective .drop-wrap{height:345px}}

body.detective .notebook{scrollbar-width:thin;scrollbar-color:#769b9c #102e39}
@media(min-width:781px) and (max-height:750px){body.detective #case-help{display:none}body.detective #case-title{margin-bottom:7px}}