style.css

:root{--page:#f7f4eb;--ink:#474c40;--muted:#8b8d7e;--line:#dfdfd0;--paper:#f4edd5;--accent:#69745a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--page);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}button:hover{color:#263223}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #7b866b;outline-offset:5px}header{display:flex;align-items:center;height:76px;border-bottom:1px solid var(--line);padding:0 4vw;gap:24px;font-size:10px;letter-spacing:.15em}.wordmark{color:inherit;text-decoration:none;display:flex;gap:13px;align-items:center;font-size:11px}.wordmark:first-letter{font-family:Georgia,serif}.wordmark span{color:#a5a998}.study-label{margin-left:auto;color:var(--muted)}header button{font-size:11px;letter-spacing:.02em;border-left:1px solid var(--line);padding-left:24px}header button span{margin-left:12px}main{max-width:1540px;margin:0 auto;padding:32px 4vw 28px;display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:46px}.title-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 23px}.eyebrow{font-size:9px;letter-spacing:.19em;margin:0 0 9px;color:var(--muted)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.025em;font-size:36px;margin:0}.format{text-align:right;font-size:11px;letter-spacing:.12em;color:#717764}.format small{font-size:8px;letter-spacing:.15em;display:inline-block;margin-top:6px;color:var(--muted)}.stage{aspect-ratio:4/3;position:relative;width:100%;background:var(--paper);overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px #d9d4bf,0 12px 32px #363a2910}#scene,#figure{position:absolute;inset:0;width:100%;height:100%;display:block}#figure{pointer-events:none;opacity:.88}#loading{position:absolute;inset:0;display:grid;place-content:center;font:italic 18px Georgia,serif;color:#8d907e}#error{position:absolute;inset:0;padding:12%;place-content:center;background:var(--paper);font-size:16px;line-height:1.6}#error:not([hidden]){display:grid}.corner-mark{position:absolute;width:10px;height:10px;opacity:.3;pointer-events:none}.top-left{left:13px;top:13px;border-left:1px solid #7d8371;border-top:1px solid #7d8371}.bottom-right{right:13px;bottom:13px;border-right:1px solid #7d8371;border-bottom:1px solid #7d8371}.transport{display:flex;align-items:center;gap:18px;margin-top:16px;height:27px}.transport button{font-size:21px;min-width:24px}.transport input{flex:1}.transport output{font-variant-numeric:tabular-nums;font-size:10px;color:#7d8371;min-width:77px;text-align:right}.caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:13px;gap:10px}.caption span:first-child{font:italic 13px Georgia,serif}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-top:7px}.panel-heading h2{font-family:Georgia,serif;font-weight:400;font-size:21px;margin:0}.panel-heading button{font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.panel-intro{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 0 27px}fieldset{border:0;border-top:1px solid var(--line);margin:0 0 23px;padding:15px 0 0}legend{font-size:9px;text-transform:uppercase;letter-spacing:.15em;padding:0 10px 0 0;color:#828975}fieldset>label{font-size:11px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}fieldset output{font-variant-numeric:tabular-nums;font-size:10px;color:var(--muted)}input[type=range]{width:100%;height:3px;appearance:none;background:#d6d9cb;border-radius:2px;display:block;margin:0 0 20px;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px var(--page)}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--accent);border:0;border-radius:50%}.transport input[type=range]{margin:0}.layers label{justify-content:flex-start;gap:8px;margin:0 0 12px;cursor:pointer}.layers input{width:13px;height:13px;accent-color:var(--accent);margin:0}.actions{display:flex;flex-direction:column;gap:7px}.actions button{border:1px solid #d3d6c7;padding:10px 12px;display:flex;justify-content:space-between;font-size:10px}.actions button:hover{background:#eaece1}.hint{font-size:9px;color:var(--muted);margin-top:20px;display:flex;gap:5px;align-items:center}kbd{font:inherit;border:1px solid #d9ddcf;padding:2px 4px;border-radius:2px}.hint span{margin:0 4px}footer{padding:18px 4vw 26px;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:8px;letter-spacing:.14em;color:#919785}.focus-mode main{grid-template-columns:minmax(0,1fr);max-width:1130px}.focus-mode aside{display:none}.focus-mode .title-row{margin-bottom:15px}.focus-mode h1{font-size:26px}.focus-mode .eyebrow{display:none}.focus-mode .stage{max-height:calc(100vh - 240px);width:auto;max-width:100%;margin:0 auto}.focus-mode .study-label{display:none}.focus-mode header button{margin-left:auto}button:disabled{opacity:.5;cursor:wait}
@media(min-width:1500px){main{padding-top:38px}.stage{max-height:calc(100vh - 275px);width:auto;max-width:100%;margin:auto}.view{min-width:0}.title-row{margin-bottom:20px}}
@media(max-width:950px){main{grid-template-columns:minmax(0,1fr) 210px;gap:25px;padding:24px 3vw}.title-row{margin-bottom:17px}header{padding:0 3vw}h1{font-size:30px}.caption{flex-wrap:wrap}fieldset{margin-bottom:19px}fieldset>label{font-size:10px}}
@media(max-width:700px){header{height:60px;padding:0 20px}.study-label{display:none}header button{margin-left:auto}main{display:block;padding:24px 20px}.title-row{margin-bottom:18px}h1{font-size:30px}.eyebrow{font-size:8px}aside{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel-heading,.panel-intro,.actions,.hint{grid-column:1/-1}.panel-intro{margin:-18px 0 0}.layers{grid-column:1/-1}.actions{flex-direction:row}.actions button{flex:1}.hint{margin:0}.caption{font-size:9px}footer{gap:20px;line-height:1.7;padding:18px 20px}.focus-mode .stage{width:100%;max-height:none}.focus-mode main{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}