:root { --clay:#e7e0d1;--copper:#ab412b;--blue:#25394d;--black:#272c2b;--paper:#e7e0d1;--ink:#272c2b;--ink-2:#505750;--accent:#ab412b;--font-display:Arial,Helvetica,sans-serif;--font-body:Arial,Helvetica,sans-serif;--font-mono:ui-monospace,monospace; }
body { background:var(--clay);color:var(--black); }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.workshop-header { position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:25px 36px;gap:25px; }
.maker-mark { display:flex;gap:13px;align-items:center;text-decoration:none;font:bold 23px/.85 Arial;letter-spacing:-1.2px;color:var(--black); }
.maker-mark>span:last-child { position:relative; }
.llc { display:block;font:8px/1.8 var(--font-mono);letter-spacing:1px;margin-top:6px; }
.dd-stamp { display:flex;font:76px/.8 Georgia;letter-spacing:-22px;padding-right:19px;transform:rotate(-10deg); }
.dd-stamp>span { color:var(--copper); }
.header-note { font:9px/1.8 var(--font-mono);letter-spacing:1.6px;margin:0 0 0 auto; }
.header-note span { opacity:.55; }
.header-tools { display:flex;gap:15px;margin-left:40px; }
.header-tools button,#reader-bar button { border:0;border-bottom:1px solid #272c2b66;background:none;color:var(--black);padding:8px 0;font:10px var(--font-mono); }
#load-note { font:12px var(--font-mono);padding:20px 36px; }
#reader-bar { display:flex;gap:20px;align-items:center;padding:20px 36px;border-bottom:1px solid #272c2b33; }
.document-view .hero h1 { font-size:clamp(3rem,6vw,5rem); }
body.in-workshop { height:100svh;overflow:hidden; }
.in-workshop .workshop-header { position:fixed;inset:0 0 auto;pointer-events:none; }
.in-workshop .workshop-header a,.in-workshop .workshop-header button { pointer-events:auto; }
.in-workshop #reader-bar,.in-workshop #main,.in-workshop #load-note { display:none; }
#spatial-app { position:fixed;inset:0;isolation:isolate; }
#world { position:absolute;inset:0;touch-action:none;cursor:grab; }
#world:active { cursor:grabbing; }
#world canvas { display:block;width:100%;height:100%; }
.grain { position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.2' d='M0 0h150v150H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply; }
.station-copy { position:absolute;left:6%;top:24%;width:35%;max-width:540px;pointer-events:none;transform-style:preserve-3d;transition:opacity .2s,filter .2s; }
.station-copy.changing { opacity:0;filter:blur(5px); }
.station-copy>* { pointer-events:auto; }
.station-eyebrow { display:flex;align-items:center;gap:12px;font:10px var(--font-mono);letter-spacing:1.5px;margin:0 0 26px; }
.station-eyebrow:before { content:'';width:24px;height:2px;background:var(--copper); }
.station-copy h1 { font:500 clamp(58px,6.7vw,108px)/.88 Arial,Helvetica,sans-serif;letter-spacing:-.075em;margin:0 0 24px;color:var(--black); }
.station-copy h1 em { font:italic 1.07em/.9 Georgia,'Times New Roman',serif;color:var(--copper);letter-spacing:-.065em; }
.station-copy .station-description { font:14px/1.7 Arial;max-width:320px;margin:0 0 23px;color:#454d46; }
.station-copy .station-footnote { font:9px/1.7 var(--font-mono);max-width:320px;color:#65685c;margin:20px 0 0; }
.station-link { display:inline-flex;gap:30px;align-items:center;border:0;border-bottom:1px solid var(--copper);padding:8px 0;background:none;text-decoration:none;font:12px var(--font-mono);color:var(--copper); }
.station-link:hover { color:var(--black); }
.station-facts { display:flex;gap:25px;padding-top:13px;margin-top:22px;border-top:1px solid #272c2b33;max-width:320px; }
.station-facts span { font:8px/1.8 var(--font-mono);letter-spacing:1px; }
.station-facts strong { display:block;font:26px/1.3 Georgia;letter-spacing:-1px; }
.object-tag { position:absolute;right:6%;bottom:25%;display:flex;flex-direction:column;border-left:1px solid #272c2b70;padding-left:18px;min-width:180px;transform:perspective(900px) rotateY(-10deg); }
.tag-index { font:8px var(--font-mono);letter-spacing:2px;color:#666b63; }
.tag-index b { font-weight:400; }
#object-name { font:italic 21px Georgia;margin:10px 0; }
#object-action { border:0;background:var(--black);color:var(--clay);padding:13px 15px;text-align:left;font:10px var(--font-mono);box-shadow:4px 4px 0 #9b9a8c; }
#object-action span { float:right;margin-left:24px; }
#object-action:active { transform:translate(3px,3px);box-shadow:1px 1px 0 #9b9a8c; }
.scene-tools { position:absolute;left:50%;bottom:22%;display:flex;align-items:center;gap:20px;font:8px var(--font-mono);letter-spacing:1px; }
.scene-tools button { border:0;background:none;font:9px var(--font-mono);color:#52584e;padding:10px; }
.station-rail { position:absolute;bottom:65px;left:6%;right:6%;display:grid;grid-template-columns:repeat(5,1fr);perspective:1200px; }
.station-rail button { border:0;border-top:1px solid #41493a55;border-bottom:1px solid #41493a55;border-right:1px solid #41493a33;color:var(--black);background:#e5dececc;position:relative;text-align:left;padding:18px 18px 17px;transform:rotateX(12deg);transform-origin:bottom;transition:transform .3s,background .3s; }
.station-rail button:first-child { border-left:1px solid #41493a33; }
.station-rail span { display:block;font:9px var(--font-mono);margin-bottom:8px;opacity:.6; }
.station-rail b { font:14px Arial;letter-spacing:-.3px; }
.station-rail i { position:absolute;right:15px;top:18px;font:15px Arial; }
.station-rail button[aria-current="step"] { background:var(--copper);color:#fff4de;transform:translateY(-8px) rotateX(0);box-shadow:0 8px 0 #783320; }
.station-rail button:hover:not([aria-current]) { background:#f2e9d8;transform:translateY(-5px); }
.workshop-footer { position:absolute;bottom:14px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;font:8px var(--font-mono);letter-spacing:1px; }
.workshop-footer>div { display:flex;gap:15px;align-items:center; }
.workshop-footer button { border:0;background:none;font:22px Arial;padding:6px;color:var(--black); }
.station-address { display:block;font:20px/1.5 Georgia;text-decoration:none;color:var(--copper); }
.station-description a { color:var(--copper); }
@media(min-width:1550px) { .station-copy { top:25%; } }
@media(max-height:760px) and (min-width:821px) { .station-copy { top:22%; } .station-copy h1 { font-size:70px; } .station-copy .station-description { font-size:12px; } .station-eyebrow { margin-bottom:18px; } .station-facts { margin-top:12px; } .object-tag { bottom:30%; } }
@media(max-width:1000px) { .header-note { display:none; } .header-tools { margin-left:auto; } .scene-tools>span { display:none; } .station-copy { width:42%;left:5%; } .station-copy h1 { font-size:68px; } }
@media(max-width:820px) { .workshop-header { padding:17px 20px; } .maker-mark { font-size:18px;gap:9px; } .dd-stamp { font-size:57px;letter-spacing:-17px;padding-right:15px; } .header-tools { gap:12px; } .header-tools button { font-size:8px; } .station-copy { top:110px;left:25px;width:calc(100% - 50px);max-width:none; } .station-eyebrow { margin-bottom:14px;font-size:8px; } .station-copy h1 { font-size:clamp(40px,9vw,68px);margin-bottom:13px;max-width:90%; } .station-copy h1 br { display:none; } .station-copy h1 br:after { content:' '; } .station-copy .station-description { font-size:12px;line-height:1.5;max-width:330px;margin-bottom:8px; } .station-facts,.station-footnote { display:none!important; } .station-link { font-size:10px;padding:7px 0; } .object-tag { bottom:185px;right:24px;min-width:155px;padding-left:12px; } #object-name { font-size:17px;margin:6px 0; } .tag-index { font-size:7px; } #object-action { padding:12px;font-size:9px; } .station-rail { bottom:66px;left:18px;right:18px; } .station-rail button { padding:12px 7px;min-height:70px; } .station-rail b { font-size:10px;line-height:1.15;display:block;max-width:60px; } .station-rail i { display:none; } .station-rail span { font-size:8px;margin-bottom:6px; } .workshop-footer { left:20px;right:20px;font-size:7px;bottom:12px; } .journey-label { display:none; } .scene-tools { bottom:143px;left:20px; } .station-address { font-size:17px; } }
@media(max-height:700px) and (max-width:820px) { .station-copy { top:95px; } .station-copy h1 { font-size:40px; } .station-copy .station-description { font-size:11px;max-width:280px; } .object-tag { bottom:165px; } .station-eyebrow { margin-bottom:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;scroll-behavior:auto!important; } }
/* Keep the reading plane above the station rail at laptop heights. */
@media(min-width:821px) { .station-copy { top:21%; } .station-copy h1 { font-size:clamp(48px,min(6.2vw,9vh),96px); } .station-copy .station-footnote { margin-top:12px;font-size:8px; } .station-facts { margin-top:15px;padding-top:10px; } .station-eyebrow { margin-bottom:20px; } .station-copy .station-description { margin-bottom:14px; } }

/* A quiet foreground keeps distant stations from crossing the reading plane. */
@media(min-width:821px) { #spatial-app:before { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#e7e0d1dd 0%,#e7e0d199 28%,transparent 49%);z-index:0; } #world { z-index:-1; } }
@media(max-height:570px) { .station-copy { top:100px;bottom:150px;overflow-y:auto;max-width:42%; } .station-copy h1 { font-size:36px; } .station-copy .station-description { font-size:11px; } .station-facts,.station-footnote { display:none!important; } }
/* Cipher observatory: crisp reading planes and a compact, local cryptography console. */
.grain { display:none; }
.station-copy.changing { filter:none; }
.station-facts,.station-footnote { display:none!important; }
.station-copy { top:20%; }
.station-copy h1 { font-size:clamp(48px,min(5.7vw,8.5vh),88px); }
.object-tag { bottom:24%;right:6%;max-width:250px;transform:none; }
#object-name { font-size:18px; }
.scene-tools { bottom:19%;left:auto;right:6%; }
.scene-tools>span { display:none; }
.cipher-console { position:absolute;left:6%;bottom:180px;width:34%;max-width:430px;z-index:3;border-top:1px solid #737c7180;padding-top:14px; }
.cipher-console>summary { font:10px var(--font-mono);letter-spacing:1px;cursor:pointer;list-style:none; }
.cipher-console>summary span { float:right;font-size:8px;opacity:.6; }
.cipher-console>summary::-webkit-details-marker { display:none; }
.cipher-controls { margin-top:14px; }
.cipher-controls>label { display:block;font:8px var(--font-mono);letter-spacing:1px;margin-bottom:8px; }
.message-row { display:flex;gap:6px; }
.message-row input { min-width:0;flex:1;padding:11px;border:1px solid #727a6f60;background:#f4efe5;color:#263b4c;font:12px var(--font-mono);border-radius:0; }
.message-row button { border:0;background:#263b4c;color:#f3ecde;padding:10px 15px;font:10px var(--font-mono);white-space:nowrap; }
.cipher-toolbar { display:flex;gap:14px;align-items:center;justify-content:space-between;margin:10px 0; }
.cipher-toolbar button { padding:8px 0;border:0;border-bottom:1px solid #737c7160;background:none;color:#263b4c;font:9px var(--font-mono); }
.quality-label { display:flex;align-items:center;gap:5px;font:8px var(--font-mono); }
.quality-label select { background:transparent;border:1px solid #737c7160;padding:5px;color:#263b4c;font:9px var(--font-mono); }
#cipher-status { display:block;min-height:14px;font:9px/1.5 var(--font-mono);color:#526252; }
.cipher-telemetry { display:flex;justify-content:space-between;gap:10px;font:7px/1.6 var(--font-mono);color:#657060;margin-top:8px; }
.cipher-explanation { position:relative;margin-top:8px;font:9px/1.5 var(--font-mono); }
.cipher-explanation>summary { cursor:pointer;color:#93412b; }
.cipher-explanation[open] { position:absolute;z-index:5;bottom:0;left:0;right:0;background:#f5eee0;border:1px solid #b4ad9f;padding:16px;box-shadow:0 10px 35px #0002;max-height:300px;overflow:auto; }
.cipher-explanation p { margin:10px 0 0;overflow-wrap:anywhere; }
.cipher-controls button:disabled { opacity:.5;cursor:wait; }
@media(min-width:821px) and (max-height:800px) { .station-copy { top:18%; }.station-copy h1 { font-size:clamp(42px,7.8vh,68px);margin-bottom:16px; }.station-copy .station-description { font-size:12px;line-height:1.5; }.station-eyebrow { margin-bottom:14px; }.cipher-console { bottom:165px; }.cipher-controls { margin-top:10px; }.cipher-console>summary { font-size:9px; } }
@media(max-width:1000px) and (min-width:821px) { .cipher-console { width:39%;left:5%; }.cipher-telemetry { flex-direction:column;gap:0; } }
@media(max-width:820px) { .station-copy { top:108px; }.station-copy h1 { font-size:42px; }.station-copy .station-description { font-size:12px; }.object-tag { display:none; }.cipher-console { left:20px;right:20px;width:auto;max-width:none;bottom:155px;background:#eee7d9ef;padding:14px;border:1px solid #9caa9570;backdrop-filter:blur(12px); }.cipher-console>summary { padding:4px 0;font-size:11px; }.cipher-console>summary:before { content:'＋ '; }.cipher-console[open]>summary:before { content:'− '; }.cipher-console>summary span { font-size:7px; }.cipher-console[open] { bottom:145px; }.cipher-toolbar button { min-height:40px; }.message-row input { font-size:16px; }.scene-tools { bottom:202px;right:20px; }.cipher-explanation[open] { bottom:0; }.cipher-console>summary { min-height:24px; }.cipher-telemetry { font-size:7px; } }
@media(max-height:650px) and (min-width:821px) { .station-copy { top:95px;width:35%; }.station-copy h1 { font-size:38px; }.station-copy .station-description { font-size:11px; }.cipher-console { left:46%;bottom:160px;width:45%;max-width:500px;background:#e7e0d1f0;padding:12px; }.object-tag { display:none; } }
/* The observatory after hours. Tokens also cover the long-form reading view. */
:root[data-theme="dark"] { --clay:#0d141c;--copper:#f3ac81;--blue:#9dbacf;--black:#e5eaf0;--paper:#0d141c;--paper-raised:#17232e;--ink:#e5eaf0;--ink-2:#b8c6d2;--muted:#9dacb9;--line:#344754;--line-strong:#596b79;--accent:#f3ac81;--accent-hover:#ffd1b5;--accent-ink:#20160f;--focus:#efba82;color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }
[data-theme="dark"] .station-copy .station-description,[data-theme="dark"] .station-description { color:#bdcbd6; }
[data-theme="dark"] .tag-index,[data-theme="dark"] .scene-tools button,[data-theme="dark"] .cipher-telemetry { color:#93a9b9; }
[data-theme="dark"] #object-action { background:#e3c69c;color:#18212b;box-shadow:4px 4px 0 #566472; }
[data-theme="dark"] .station-rail button { background:#162431dc;border-color:#50637070; }
[data-theme="dark"] .station-rail button[aria-current="step"] { background:#bf7950;color:#fff8ed;box-shadow:0 8px 0 #774b35; }
[data-theme="dark"] .station-rail button:hover:not([aria-current]) { background:#273b4d; }
[data-theme="dark"] .cipher-console { border-color:#536a7a; }
[data-theme="dark"] .message-row input { background:#162431;color:#e5eaf0;border-color:#536a7a; }
[data-theme="dark"] .message-row button { background:#d8bc94;color:#172431; }
[data-theme="dark"] .cipher-toolbar button,[data-theme="dark"] .quality-label select { color:#d9e2ea;border-color:#536a7a; }
[data-theme="dark"] .quality-label select { background:#162431; }
[data-theme="dark"] #cipher-status { color:#b7cdbb; }
[data-theme="dark"] .cipher-explanation>summary { color:#f3ac81; }
[data-theme="dark"] .cipher-explanation[open] { background:#162431;border-color:#536a7a;color:#d9e2ea; }
[data-theme="dark"] .header-tools button,[data-theme="dark"] #reader-bar,[data-theme="dark"] #reader-bar button { border-color:#536a7a; }
[data-theme="dark"] .object-tag { border-color:#536a7a; }
.secret-notice { position:absolute;top:107px;left:50%;transform:translateX(-50%);max-width:min(620px,90vw);z-index:8;display:flex;align-items:center;gap:18px;padding:12px 17px;background:var(--paper-raised,#f3ebdb);border:1px solid var(--copper);box-shadow:0 5px 25px #0002;font:11px/1.5 var(--font-mono);color:var(--ink); }
.secret-notice button { flex-shrink:0;border:0;background:transparent;color:var(--copper);font:10px var(--font-mono);padding:8px; }
@media(min-width:821px) { [data-theme="dark"] #spatial-app:before { background:linear-gradient(90deg,#0d141cee 0%,#0d141c99 28%,transparent 49%); } }
@media(max-width:820px) { .header-tools { gap:10px; }.header-tools button { font-size:8px;min-height:36px; }.maker-mark { font-size:16px; }.dd-stamp { font-size:48px; }.header-tools { margin-left:0; }[data-theme="dark"] .cipher-console { background:#13202eee; }.secret-notice { top:auto;bottom:220px;width:calc(100% - 40px);max-width:none;flex-direction:column;gap:4px;text-align:center;font-size:10px; } }
@media(max-width:390px) { .workshop-header { gap:10px;padding-inline:14px; }.header-tools { gap:7px; }.header-tools button { font-size:7px; }.llc { font-size:7px; } }
@media(max-height:650px) and (min-width:821px) { [data-theme="dark"] .cipher-console { background:#13202ef0; }.secret-notice { top:85px;font-size:9px;padding:6px 12px; } }
/* Data lenses: the same ciphertext, three inspectable spatial representations. */
.data-lens { position:absolute;right:6%;top:125px;width:43%;max-width:620px;z-index:4;color:var(--ink); }
.lens-heading { display:flex;justify-content:space-between;font:8px var(--font-mono);letter-spacing:2px;opacity:.7;margin-bottom:12px; }
.lens-tabs { display:flex;border-bottom:1px solid var(--ink-2);gap:6px; }
.lens-tabs button { flex:1;border:0;background:transparent;color:var(--ink-2);padding:10px 6px;font:11px var(--font-mono);border-bottom:2px solid transparent; }
.lens-tabs button[aria-pressed="true"] { color:var(--copper);border-color:var(--copper); }
#lens-description { font:10px/1.6 var(--font-mono);max-width:570px;margin:12px 0 8px; }
.lens-paging { display:flex;gap:12px;align-items:center;font:9px var(--font-mono); }
.lens-paging button,.data-readout button { background:transparent;border:1px solid var(--ink-2);color:var(--ink);padding:5px 10px; }
.lens-paging button:disabled { opacity:.3;cursor:default; }
.data-readout { display:flex;align-items:center;gap:8px;margin-top:9px; }
#data-inspector { flex:1;font:9px/1.5 var(--font-mono);min-height:28px; }
.cipher-telemetry { flex-direction:column;gap:3px; }
.object-tag { display:none; }
.scene-tools { bottom:175px; }
@media(min-width:821px) and (max-height:800px){.data-lens { top:110px;width:43%; }.lens-heading { display:none; }#lens-description { font-size:9px; }.data-readout { margin-top:5px; }.lens-tabs button { padding:7px 3px; }}
@media(max-width:820px){
 .data-lens { top:auto;bottom:213px;left:20px;right:20px;width:auto;max-width:none;background:var(--paper);padding:10px 12px;border:1px solid var(--ink-2); }
 .lens-heading { display:none; }.lens-tabs button { font-size:9px;padding:7px 2px; }
 #lens-description { font-size:8px;line-height:1.45;margin:7px 0; }.lens-paging { font-size:8px; }.lens-paging button,.data-readout button { padding:4px 10px;min-height:28px; }
 #data-inspector { font-size:8px;min-height:24px; }.data-readout { margin-top:6px; }
 .cipher-console[open] { z-index:6;max-height:52svh;overflow:auto; }.scene-tools { bottom:410px; }
 .station-copy .station-description { max-width:340px; }.station-copy h1 { font-size:36px; }
}
@media(max-height:650px) and (min-width:821px){.data-lens { top:100px; }#lens-description { max-height:44px;overflow:auto; }.data-readout { margin-top:3px; }.cipher-console { bottom:145px; }.scene-tools { bottom:145px; }}
/* Explicit layers keep Safari's WebGL compositor beneath the reading controls. */
#world { z-index:0; }
#spatial-app:before { z-index:1; }
.station-copy,.station-rail,.workshop-footer,.scene-tools { z-index:2; }
.station-copy { transform-style:flat; }
.data-lens,.cipher-console,.station-copy,.workshop-footer { -webkit-transform:translateZ(0); }
#lens-guide>summary { display:none; }
@media(max-width:820px){#lens-guide>summary { display:block;cursor:pointer;font:8px var(--font-mono);padding:8px 0;color:var(--copper); }#lens-guide>summary:after { content:' ＋'; }#lens-guide[open]>summary:after { content:' −'; }.data-lens { padding:8px 10px; }.scene-tools { bottom:365px; }}