:root{color-scheme:dark;--os-bg:#071219;--os-text:#e5efeb;--os-dim:#91a6a5;--os-ink:#8adac7;--os-line:#8adac733;--paper:color-mix(in srgb,var(--os-bg) 82%,transparent)}html[data-theme=light]{color-scheme:light;--os-bg:#f4f4ed;--os-text:#142927;--os-dim:#4e6560;--os-ink:#146655;--os-line:#14665544}*{box-sizing:border-box}body{margin:0;color:var(--os-text);background:transparent;font:14px/1.55 system-ui,sans-serif}main{max-width:1560px;margin:auto;padding:40px 30px}a{color:inherit}button,select,input{font:inherit;color:inherit}button,select{border:1px solid var(--os-line);background:var(--paper);padding:8px 12px;cursor:pointer;border-radius:0}button:hover,button[aria-pressed=true]{color:var(--os-ink);border-color:var(--os-ink)}:focus-visible{outline:2px solid var(--os-ink);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--os-ink);color:var(--os-bg);font-weight:650;min-width:90px}button,a,input,select{touch-action:manipulation}.mast{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;gap:20px}.eyebrow,.library,.register,.transport,.bezel,.context,.instrument header,.hint,.geometry-tools,.edition-note{font-family:ui-monospace,SFMono-Regular,monospace}.eyebrow{font-size:10px;letter-spacing:.13em;text-decoration:none;color:var(--os-ink)}h1{font:normal clamp(44px,5vw,76px)/1.05 Georgia,serif;letter-spacing:-.05em;margin:14px 0}h1 em{font-weight:normal;color:var(--os-ink)}.mast p{color:var(--os-dim);margin:0}.library{font-size:11px}.console{border:1px solid var(--os-line);background:var(--paper)}.transport{display:flex;gap:8px;padding:12px;align-items:center;border-bottom:1px solid var(--os-line);font-size:12px;flex-wrap:wrap}#chapters{flex:1 1 270px;max-width:450px;min-width:0}#position{flex:1 1 120px;min-width:70px;accent-color:var(--os-ink)}#clock{white-space:nowrap;font-size:10px;font-variant-numeric:tabular-nums}.register{display:flex;justify-content:space-between;gap:12px;padding:9px 18px;font-size:10px;letter-spacing:.06em;color:var(--os-ink)}.narrative{padding:14px 24px;border-bottom:1px solid var(--os-line);height:128px;overflow:auto;scrollbar-width:thin}.narrative p{font:clamp(18px,2vw,25px)/1.5 Georgia,serif;margin:0;max-width:1050px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;min-height:400px}.instrument{min-width:0;display:flex;flex-direction:column}.instrument header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;min-height:43px;border-bottom:1px solid var(--os-line);font-size:10px}.instrument h2{font-size:11px;font-weight:normal;margin:0}.drawing{position:relative;display:flex;justify-content:center;min-height:200px;flex:1}#grid{display:block;width:100%;height:100%;max-height:580px;min-height:200px;object-fit:contain;touch-action:pan-y}#grid.interactive{cursor:grab}.device{position:absolute;right:14px;bottom:10px;display:flex;align-items:end;gap:8px;text-decoration:none;font:9px ui-monospace,monospace;padding:5px;background:var(--os-bg);border:1px solid var(--os-line)}.device canvas{width:58px;height:58px}.expression{display:flex;justify-content:center;align-items:center;white-space:nowrap;font:clamp(15px,2.2vw,27px)/1.2 Georgia,serif;padding:4px}.expression button{font:inherit;background:none;border-color:transparent;padding:8px 5px;color:var(--os-ink);text-decoration:underline;text-underline-offset:5px}.expression button:hover{border-color:var(--os-ink)}.geometry-tools{display:flex;justify-content:center;align-items:center;gap:10px;font-size:9px;flex-wrap:wrap}.geometry-tools button{padding:4px 7px}.hint{text-align:center;font-size:10px;color:var(--os-dim);margin:8px 8px 14px}.instrument-footer{display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--os-line);font:8px/1.4 ui-monospace,monospace;letter-spacing:.06em;padding:9px 14px;color:var(--os-dim)}.context{border-left:1px solid var(--os-line);padding:22px 20px;font-size:11px;display:flex;flex-direction:column;gap:14px;background:color-mix(in srgb,var(--os-bg) 40%,transparent)}.context h3{font:normal 21px/1.4 Georgia,serif;margin:0}.context p{color:var(--os-dim);margin:0}.context dl{border-block:1px solid var(--os-line);padding:12px 0;margin:0}.context dt{font-size:9px;text-transform:uppercase;color:var(--os-dim);margin-top:10px}.context dd{margin:3px 0}.context a{font-size:10px}.bezel{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--os-line);font-size:9px}.bezel>div{display:flex;gap:6px;flex-wrap:wrap}.bezel button,.bezel select{font-size:10px;padding:7px 10px}#ticker{display:flex;gap:8px;padding:10px;overflow:auto;scrollbar-width:thin;border-top:1px solid var(--os-line);font:10px ui-monospace,monospace}#ticker button{flex:none;white-space:nowrap}.edition-note{font-size:11px;color:var(--os-dim);padding:18px 0}.edition-note p{margin:0 0 8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}dialog{color:var(--os-text);background:var(--os-bg);border:1px solid var(--os-ink);max-width:min(620px,92vw);max-height:85svh;overflow:auto;padding:25px}dialog::backdrop{background:#000a}dialog h2{font:normal 28px Georgia,serif}dialog input{display:block;width:100%;padding:10px;background:transparent;border:1px solid var(--os-line);margin:10px 0}#share-code{width:190px;height:190px;display:block;margin:15px auto}#scan-video{width:100%;max-height:230px}.remote .narrative,.remote .device,.remote #share,.remote .mast,.remote .context{display:none}.remote .workspace{grid-template-columns:1fr}.remote main{padding-top:20px}.remote #grid{max-height:70svh}.visuals-off:not(.zero-state) #grid{visibility:hidden}.console:is(:fullscreen,.screen-takeover){display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;background:var(--os-bg);border:0}.console.screen-takeover{position:fixed;inset:0;height:100svh;z-index:2147483000}.console:is(:fullscreen,.screen-takeover) .workspace{flex:1;min-height:230px}.console:is(:fullscreen,.screen-takeover) .drawing{height:0;min-height:180px}.console:is(:fullscreen,.screen-takeover) #grid{height:100%;max-height:none}.console:is(:fullscreen,.screen-takeover) .narrative{height:110px;flex:none}.console:is(:fullscreen,.screen-takeover) #ticker{min-height:51px;flex:none}.takeover .mast,.takeover .edition-note{visibility:hidden}.console:is(:fullscreen,.screen-takeover) .context{overflow:auto}.remote .console:is(:fullscreen,.screen-takeover) .workspace{min-height:300px}
@media(max-width:850px){main{padding:25px 12px}.workspace{grid-template-columns:1fr}.context{display:none}.mast{margin-bottom:22px}.instrument header{padding:8px 12px}#grid{max-height:450px}.bezel>span{display:none}.bezel{justify-content:flex-end}.library{display:none}.device span{display:none}.narrative{height:118px;padding:14px 18px}}
@media(max-width:520px){.transport{gap:5px;padding:8px}#chapters{flex:1 1 180px;font-size:10px}#position{order:4;flex-basis:65%}#clock{order:5}.transport button{padding:8px}.register{font-size:8px;padding:8px}.narrative p{font-size:18px}#grid{max-height:350px}.expression{font-size:17px}.expression button{padding:8px 2px}.hint{font-size:9px}.geometry-tools{font-size:8px;gap:6px}.instrument-footer{font-size:7px}.device canvas{width:45px;height:45px}.device{right:8px;bottom:8px}.bezel{padding:8px}.bezel button,.bezel select{padding:7px}.console:is(:fullscreen,.screen-takeover) .narrative{height:90px}.console:is(:fullscreen,.screen-takeover) .workspace{min-height:270px}.console:is(:fullscreen,.screen-takeover) #grid{max-height:none}.console:is(:fullscreen,.screen-takeover) .drawing{min-height:150px}.instrument header{font-size:8px}.instrument h2{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.drawing{aspect-ratio:3/2;max-height:580px}#grid{position:absolute;inset:0;width:100%;height:100%;min-height:0}.console:is(:fullscreen,.screen-takeover) .drawing{aspect-ratio:auto;max-height:none;min-height:180px}.console:is(:fullscreen,.screen-takeover) #grid{min-height:0}.console:is(:fullscreen,.screen-takeover) .instrument{min-height:0}.console:is(:fullscreen,.screen-takeover) .workspace{flex:1 0 350px}.console:is(:fullscreen,.screen-takeover) .expression,.console:is(:fullscreen,.screen-takeover) .instrument-footer{flex:none}
@media(max-width:520px){.console:is(:fullscreen,.screen-takeover) .workspace{flex-basis:330px}}