:root{--night:#122d36;--ink:#243b3e;--paper:#faf4e5;--gold:#e7b66b;--green:#285f58}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 system-ui,sans-serif}header{background:var(--night);color:white;display:flex;align-items:center;justify-content:space-between;padding:20px max(5vw,18px);gap:20px}.brand{color:inherit;text-decoration:none;display:flex;gap:14px;align-items:center;font:20px Georgia,serif;letter-spacing:2px}.brand:first-letter{font-size:40px}small{display:block;font:11px system-ui;letter-spacing:3px;margin-top:8px}.tools{display:flex;gap:10px}button,.button{cursor:pointer;border:1px solid #aac0b8;background:transparent;color:inherit;border-radius:4px;padding:12px 18px;font:600 15px system-ui;text-decoration:none;display:inline-block}button:hover,.button:hover{background:#e7b66b;color:#122d36}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b65a1b;outline-offset:4px}.primary{background:var(--gold);color:var(--night);border:0}.hero{background:var(--night);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:30px 6vw 65px;gap:30px}.hero h1{font:clamp(42px,5vw,76px)/1.06 Georgia,serif;max-width:650px;margin:18px 0}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:700;color:#a45e24}.hero .eyebrow{color:var(--gold)}.hero p{max-width:550px;color:#d4e0dc}.hero svg{width:100%;max-height:440px}.intro,.room,.success{max-width:1180px;margin:auto;padding:40px 24px}.intro h2,h2{font:34px/1.2 Georgia,serif}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.steps strong{font:25px Georgia;display:block}.steps p{font-size:16px}.route{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.route button{padding:8px 12px;min-width:40px}.route .active{background:var(--night);color:white}.route .done{background:var(--green);color:white}.progress{height:7px;background:#dfd9ca;margin:16px 0}.progress div{height:100%;background:var(--green)}.roomhead{display:flex;justify-content:space-between;align-items:center;gap:20px}.room h1{font:clamp(32px,4vw,48px) Georgia;margin:10px 0}.scene{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin:25px 0}.art{background:var(--night);border-radius:120px 120px 6px 6px;padding:18px;overflow:hidden}.art svg{width:100%;height:240px}.art figcaption{color:#d4e0dc;text-align:center;font-size:13px}.story{font:23px/1.5 Georgia}.note{background:#e8efe8;border-left:4px solid var(--green);padding:12px 18px;font-size:15px}.workbench{display:grid;grid-template-columns:1fr 1.05fr;gap:32px}.clues{padding:0;list-style:none}.clues li{margin:12px 0;padding:16px 20px;border:1px solid #d7cfbd;background:#fffcf3;display:flex;gap:18px}.clues b{color:#9b6025}form{background:#eee5d1;border:1px solid #d7cfbd;padding:24px}label{display:block;font-size:15px;font-weight:650;margin-bottom:14px}input,textarea,select{display:block;width:100%;padding:12px;border:1px solid #a7a594;border-radius:3px;background:#fffdf7;color:var(--ink);font:17px system-ui;margin-top:6px}textarea{min-height:82px;resize:vertical}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feedback{font-weight:650;min-height:28px;margin:14px 0;color:#873a1d}.feedback.good{color:#245a38}footer{text-align:center;font-size:13px;padding:35px;color:#526664}dialog{max-width:1000px;width:94%;max-height:90vh;border:0;background:var(--paper);padding:30px;color:var(--ink)}dialog::backdrop{background:#0a202bcc}.close{float:right}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:9px;border:1px solid #cfc8b8;text-align:left}.tablewrap{overflow:auto}.pt{display:grid;grid-template-columns:repeat(18,minmax(48px,1fr));gap:3px;min-width:940px}.element{padding:6px;background:#e3dfcb;text-align:center;border:1px solid #bcc6bd;font-size:10px}.element strong{display:block;font-size:20px}.element.metal{background:#d5e7dc}.element.metalloid{background:#eddbb4}.element.nonmetal{background:#dbe7f0}.groupnum{text-align:center;font-size:11px}.success{text-align:center;max-width:900px}.success h1{font:58px Georgia}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;padding:10px;z-index:20}.printonly{display:none}@media(max-width:760px){header{align-items:flex-start;flex-direction:column}.tools{flex-wrap:wrap}.hero,.scene,.workbench,.steps{grid-template-columns:1fr}.hero{padding:25px 24px 40px}.hero svg{max-height:300px}.scene{gap:10px}.art{margin:0}.roomhead{align-items:flex-start;flex-direction:column}.pair{grid-template-columns:1fr}.room{padding:24px 18px}.brand{font-size:16px}dialog{padding:20px}.story{font-size:21px}}@media print{header,footer,.route,.tools,button,.hero,.art{display:none!important}dialog{position:static;display:block;width:100%;max-height:none;padding:0}body{background:white;font-size:12px}table{font-size:10px}tr{break-inside:avoid}.printonly{display:block}}
[hidden]{display:none!important}.workbench>*{min-width:0}select{max-width:100%}.success svg{max-width:520px;width:100%}
@media print{body:has(dialog[open]) main{display:none}dialog:not([open]){display:none!important}dialog[open]{position:static;display:block;max-height:none;overflow:visible}.tablewrap{overflow:visible}}

/* Complete classroom table: family fill, classification stripe, physical-state outline. */
dialog:has(.pt){max-width:1480px;width:97%}.pt{grid-template-columns:24px repeat(18,minmax(56px,1fr));min-width:1120px;gap:4px;grid-template-rows:auto repeat(7,auto) 16px auto auto}.element{border:2px solid #66716d;border-bottom:5px solid #ff00ff;display:flex;flex-direction:column;justify-content:center;line-height:1.3;min-height:111px;color:#122d36;padding:5px 2px;background:white}.element.metalloid{border-bottom-color:#d79bff}.element.nonmetal{border-bottom-color:#00cccc}.element.phase-gas{outline:3px solid #00c000;outline-offset:-3px}.element.phase-liquid{outline:3px solid #058dc7;outline-offset:-3px}.element strong{font-size:25px}.elname{font-size:9px;overflow-wrap:anywhere}.eltype,.elphase{font-size:9px}.periodnum,.series-label,.series-slot{align-self:center;text-align:center;font-size:11px}.series-slot{border:1px dashed #738888;padding:10px 2px}.color-key{display:flex;flex-wrap:wrap;gap:9px 18px;font-size:13px}.color-key span{display:flex;align-items:center;gap:6px}.color-key i{width:20px;height:20px;border:1px solid #66716d;display:inline-block}.key-gas{border-bottom:3px solid #00c000}.key-liquid{border-bottom:3px solid #058dc7}.reference-source{font-size:12px}@media print{.pt{min-width:0;grid-template-columns:18px repeat(18,1fr)}.element{min-height:65px;font-size:7px}.element strong{font-size:16px}.elname,.eltype,.elphase{font-size:6px}}


.reading-label{margin:0;font-size:12px;font-weight:500}.reading-label select{margin-top:2px;padding:8px;font-size:14px;width:auto}.tools{align-items:center}@media(max-width:760px){.reading-label select{max-width:170px}}
form label small{letter-spacing:0;font-size:14px;line-height:1.4}