@font-face{font-family:DM;src:url('/sundrift/fonts/dm-sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:Instrument;src:url('/sundrift/fonts/instrument-serif.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#080f13;--paper:#f1eadb;--muted:#c6c7b8;--mint:#a9daca;--gold:#e5bc76;--rose:#e2aaa7;--line:#9d8454;--brass:linear-gradient(125deg,#f2d8a0,#af8b50 28%,#e7cb91 49%,#a98247 76%,#d8b777);--tint:#a9daca;--dock:200px;--pulse:0}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--ink);height:100%}body{margin:0;color:var(--paper);font:16px/1.5 DM,system-ui,sans-serif;height:100svh;height:100dvh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 70% 40%,#36564c,#182a2b 45%,#101522 85%)}
a{color:inherit}button,input,summary{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px dotted #ffe1a3;outline-offset:4px}
.skip{position:fixed;top:-100px;left:20px;z-index:20;background:var(--paper);color:var(--ink);padding:12px}.skip:focus{top:10px}
header{position:fixed;z-index:5;bottom:max(22px,env(safe-area-inset-bottom));left:30px}.studio{display:grid;place-items:center;width:48px;height:48px;color:#e5cd98;text-decoration:none;font:10px Georgia,serif;letter-spacing:.05em;border-radius:50%;border:1px solid #c0a0697a;background:radial-gradient(ellipse at 35% 20%,#9d865144,#12201edd 70%);box-shadow:inset 0 0 0 3px #080f13,inset 0 0 0 4px #ac925647,0 4px 12px #0006;transform:rotate(-8deg)}
main,.machine,.face{position:absolute;inset:0;pointer-events:none}main button,main summary,main input,main a{pointer-events:auto}.face{pointer-events:auto}
.intro{position:absolute;z-index:2;top:clamp(26px,5vh,60px);left:4%;pointer-events:none;color:#e5cf9e;text-shadow:0 2px 1px #060c10,0 3px 25px #080f13,0 0 60px #080f13}
.eyebrow{font:10px/1.5 monospace;text-transform:uppercase;letter-spacing:.22em;color:#d9c7a0}.eyebrow span{font-size:18px;vertical-align:-2px;margin-right:9px}h1{font:normal clamp(62px,7.2vw,108px)/1.05 Instrument,Georgia,serif;letter-spacing:-.025em;margin:12px 0 0;color:#eddbb4;background:linear-gradient(120deg,#fff0ca,#d5b27d 30%,#f8e9c6 52%,#bda478 73%,#f6dfb0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #090d0e)}.period{color:var(--gold)}.intro:after{content:'';display:block;width:74px;height:1px;margin-top:21px;background:linear-gradient(90deg,#ddc28a99,transparent)}.intro p{font:11px/1.6 DM,sans-serif;letter-spacing:.035em;color:#d0d0be;margin:12px 0 0}
.machine-top{position:absolute;top:50px;right:4%;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:9px/1.5 monospace;letter-spacing:.09em;color:#d5c398;text-shadow:0 1px 4px #000,0 0 18px #000}.power{display:flex;align-items:center;gap:9px;letter-spacing:0;color:var(--muted)}.power i{width:5px;height:5px;border-radius:50%;background:#bda77b;box-shadow:0 0 0 3px #bda77b20}.power i.on{background:var(--mint);box-shadow:0 0 12px #a9daca}#note-count{font-size:9px;color:var(--muted)}
#observatory,#painted-sky{position:absolute;inset:0;width:100%;height:100%}canvas{display:block;width:100%;height:100%}#orrery{touch-action:none;cursor:grab}#orrery:active{cursor:grabbing}.is-3d #painted-sky{visibility:hidden}
.scene-caption{position:absolute;bottom:calc(var(--dock) + 22px);left:50%;transform:translateX(-50%);width:max-content;max-width:95%;text-align:center;pointer-events:none;text-shadow:0 1px 4px #000,0 0 18px #000}.legend{display:flex;justify-content:center;gap:22px;font:9px monospace;letter-spacing:.14em;text-transform:uppercase;color:#d5d5c3}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:4px;height:4px;border-radius:50%;box-shadow:0 0 7px currentColor}.low{background:var(--mint)}.mid{background:var(--gold)}.high{background:var(--rose)}.instruction{margin:9px 0 0;font-size:12px;color:#eee3cc}#view-hint{font:9px/1.6 monospace;color:#c6ccbe;margin:7px 0 0}
/* Each control is a separate curved piece of glass, set in a machined brass rim. */
.instrument-glass{border:1px solid #b89d6594;border-top-color:#ead3a6bd;background:radial-gradient(ellipse at 8% 0%,#b2d4ba28,transparent 60%),radial-gradient(ellipse at 100% 80%,#ab81bc1b,transparent 65%),linear-gradient(130deg,#162c27e8,#0d1b20eb 55%,#1c2b27e8);box-shadow:inset 0 1px 1px #fff0cc44,inset 0 -2px 3px #000b,0 0 0 3px #9a7d4030,0 8px 24px #0007;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.console{position:absolute;z-index:4;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);width:840px;max-width:calc(100% - 180px);display:grid;grid-template-columns:200px 1fr;gap:16px 26px;pointer-events:none}.console>*{pointer-events:auto}
.transport{border-radius:62px 62px 35px 35px;display:flex;flex-direction:column;gap:4px;justify-content:center;padding:15px 14px 8px;position:relative}.transport:before{content:'';position:absolute;inset:4px;border:1px solid #dbc18833;border-radius:inherit;pointer-events:none}
.start{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:30px;border:1px solid #eed49f;color:#17231c;background:var(--brass);box-shadow:0 3px 0 #5c4528,inset 0 1px 0 #fff2c6;font-size:12px;font-weight:650;padding:8px 9px;text-shadow:0 1px #fff2c660}
#play-icon{position:relative;display:block;width:34px;height:21px;border:1px solid #594627;border-radius:14px;background:#24382d;box-shadow:inset 0 2px 6px #0009;font-size:0;flex-shrink:0}#play-icon:after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff5d8,#d9bf84 45%,#897047);box-shadow:0 1px 3px #0008;transition:transform .28s}.start[aria-pressed=true] #play-icon:after{transform:translateX(12px);background:radial-gradient(circle at 35% 25%,#e3ffed,#9bceb5 45%,#3e6b56)}
.shuffle{background:transparent;border:0;border-radius:24px;color:#e5d8bd;min-height:44px;font-size:11px;padding:4px 8px}.shuffle span{font:22px Georgia,serif;vertical-align:-2px;margin-right:9px;color:var(--gold)}
.settings{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:22px;min-width:0}fieldset{border:0;padding:0;margin:0;min-width:0}.sound-instrument{position:relative;border-radius:70px 70px 38px 38px;padding:30px 12px 14px;min-width:0}.sound-instrument legend{position:absolute;top:13px;left:0;right:0;width:100%;text-align:center;font:9px monospace;letter-spacing:.2em;text-transform:uppercase;color:#e7d6b6}
.sounds{display:flex;gap:4px;justify-content:center}.sounds button{position:relative;flex:1;min-width:44px;min-height:70px;padding:34px 4px 4px;border:1px solid transparent;border-radius:35px;background:transparent;color:#d9d9c8;font-size:11px}.sounds button:before{content:'';position:absolute;top:9px;left:calc(50% - 9px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f1f7dd99,#567967 40%,#172620 75%);border:2px solid #c2a46b;box-shadow:0 0 0 2px #080f1399,inset 0 -3px 5px #0008,0 3px 6px #000}.sounds button[data-sound=felt]:before{background:radial-gradient(circle at 30% 25%,#f7dba999,#9a824c 40%,#2a2819 75%)}.sounds button[data-sound=dusk]:before{background:radial-gradient(circle at 30% 25%,#efc0d999,#976382 40%,#261a2e 75%)}.sounds button[aria-pressed=true]{color:#ffefcf;border-color:#d5bc8066;background:linear-gradient(120deg,#dfc89412,#9dceb519);box-shadow:inset 0 1px #edd8b425}.sounds button[aria-pressed=true]:before{box-shadow:0 0 0 2px #080f1399,0 0 18px var(--tint),inset 0 1px 4px #ffffff99}
.meter-instrument{position:relative;border-radius:65px 65px 38px 38px;padding:14px 16px 4px;min-width:0}.meter-instrument label{display:flex;flex-direction:column;align-items:center;gap:4px;color:#e7d6b6;font:9px monospace;letter-spacing:.15em;text-transform:uppercase;position:relative;z-index:1;pointer-events:none}.meter-instrument label>span{display:flex;gap:4px;align-items:baseline;font:22px Instrument,Georgia,serif;letter-spacing:0;color:#f7e6c1;height:29px;background:radial-gradient(ellipse,#152720 45%,#15272000 72%);text-shadow:0 1px 2px #080f13}.meter-instrument small{font:7px monospace}.meter-face{position:absolute;width:90px;height:55px;left:50%;top:29px;transform:translateX(-50%);border:1px solid #c8ab6755;border-bottom:0;border-radius:60px 60px 0 0;background:repeating-conic-gradient(from -90deg at 50% 100%,#c2a26588 0deg 1deg,transparent 1deg 18deg);mask-image:radial-gradient(ellipse at 50% 100%,transparent 42%,#000 44%);-webkit-mask-image:radial-gradient(ellipse at 50% 100%,transparent 42%,#000 44%);pointer-events:none}.meter-face i{display:block;position:absolute;left:calc(50% - 1px);bottom:0;width:2px;height:45px;transform-origin:bottom;transform:rotate(var(--reading));background:linear-gradient(#f4d9a2,#a4c4ae);transition:transform .18s;box-shadow:0 0 6px #e5bc76}
input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:44px;height:44px;margin:7px 0 0;background:transparent;cursor:pointer;position:relative;z-index:1}
input[type=range]::-webkit-slider-runnable-track{height:3px;border:1px solid #c0a16488;border-radius:5px;background:#112c25;box-shadow:0 1px #f9e0a533}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-10px;border:1px solid #ecd69f;border-radius:50%;background:repeating-conic-gradient(#66503944 0deg 5deg,transparent 5deg 20deg),radial-gradient(circle at 35% 25%,#f6deb0,#967445);box-shadow:0 3px 5px #000a,inset 0 0 0 3px #bd9e67}
input[type=range]::-moz-range-track{height:3px;background:#749c81;border:1px solid #a88c53;border-radius:5px}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:1px solid #ecd69f;border-radius:50%;background:var(--brass)}
.console-tools{grid-column:1/-1;display:flex;justify-content:center;gap:24px;position:relative}.console-tools>button,.view-modes button,#note-editor summary{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 13px;background:radial-gradient(ellipse,#142622da,#0c1b1588);color:#dfd1b1;border:1px solid #b3996255;border-radius:26px;font:10px/1.4 DM,sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px #e8d4a51a,0 3px 9px #0003;cursor:pointer;list-style:none}.console-tools span{font:18px Georgia,serif;color:var(--gold)}#note-editor summary::-webkit-details-marker{display:none}
button{transition:filter .2s,box-shadow .2s}button:hover,summary:hover{filter:brightness(1.16)}button:active{filter:brightness(1.25)}
/* One audio-clock value lights the rims. There is no separate UI animation loop. */
.console:after{content:'';position:absolute;inset:-14px -12px 47px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tint),transparent 68%),transparent 68%);z-index:-1;opacity:var(--pulse);pointer-events:none}.sounds{filter:drop-shadow(0 0 calc(var(--pulse)*5px) color-mix(in srgb,var(--tint),transparent 35%))}
.note-chart{position:absolute;bottom:calc(100% + 17px);left:50%;transform:translateX(-50%);width:550px;max-width:calc(100vw - 32px);max-height:calc(100svh - 125px);overflow:auto;padding:20px 24px;border-radius:45px 45px 24px 24px;overscroll-behavior:contain}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-heading h2{margin:0;font:30px Instrument,Georgia,serif;color:#eddbb4}.chart-heading button{min-width:44px;min-height:44px;flex:0 0 44px;border:1px solid #b99c6555;border-radius:50%;background:radial-gradient(circle at 30% 20%,#e5c68d22,#14241c);color:#e5c992;font:24px Georgia,serif}
.view-controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.view-controls button,.chart-actions button,.chart-actions a{min-height:44px;min-width:44px;padding:10px 14px;border:1px solid #b99c6566;border-radius:25px;background:linear-gradient(130deg,#65877322,#0e201f);color:#f0e1c3;font:12px/1.5 DM,sans-serif;text-decoration:none;text-align:center}.view-controls #inside{flex:1}.note-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:14px 0}.note-row legend{font:10px monospace;letter-spacing:.1em;text-transform:uppercase;color:#e1d0a7;margin-bottom:9px}.note-row .note{position:relative;inset:auto;transform:none;flex:0 0 44px;border:1px solid #a1a79770;border-radius:50%;background:radial-gradient(circle at 30% 20%,#5b725538,#0c201d);color:var(--paper);font:10px monospace;gap:1px;grid-template-rows:22px 12px}.note-row .note:before{width:7px;height:7px;align-self:end}.note-row .note[aria-pressed=true]{background:#334b3d;border-color:#cfb37b}.note-row .note[aria-pressed=true]:before{width:9px;height:9px;border:0;background:var(--note-color)}
.star-chart{width:500px;max-width:calc(100% - 28px);max-height:calc(100svh - 40px);padding:22px 32px 28px;border-radius:80px 80px 30px 30px;color:var(--paper);overscroll-behavior:contain;overflow:auto}.star-chart::backdrop{background:#030c1270;backdrop-filter:blur(5px)}.star-chart .eyebrow{padding-left:10px;font-size:9px}.chart-orbit{width:88px;height:88px;border:1px solid #d7bb7977;outline:1px solid #d7bb7933;outline-offset:7px;margin:6px auto 24px;border-radius:50%;display:grid;place-items:center;color:#f2cf8e;font:32px Georgia,serif;box-shadow:0 0 35px #a9daca15,inset 0 0 25px #a9daca15}.star-chart h2{font:40px/1.1 Instrument,Georgia,serif;color:#eddbb4;margin:0 0 20px}.star-chart p{font-size:14px;line-height:1.7;color:#dedcc9}.chart-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.chart-actions>*{flex:1 1 45%}.chart-actions a{flex-basis:100%}.chart-actions span{color:var(--gold);margin-right:6px}footer{margin-top:24px;padding-top:18px;border-top:1px solid #b9a57840;font:9px/1.8 monospace;color:#cbb891;display:flex;gap:20px;justify-content:space-between;text-shadow:0 1px #000}.fiction{font-style:normal}
.status:not(:empty){position:fixed;z-index:8;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#132722f5;border:1px solid #bb9f6966;border-radius:24px;padding:12px 20px;text-align:center;width:max-content;max-width:min(560px,90vw);font-size:12px;color:#f1dfb9;box-shadow:0 8px 24px #0008}.status:empty,#chart-status:empty{display:none}.star-chart #chart-status{color:#f1dfb9;font-size:13px}#copy-link{display:block;width:100%;min-height:44px;padding:12px;background:#142820;color:#f1efe6;border:1px solid #e5bc76;border-radius:20px;font-size:16px;margin:12px 0}.notice{position:fixed;z-index:30;top:20%;left:50%;transform:translateX(-50%);width:min(90%,520px);padding:22px;background:#15291ff5;border:1px solid var(--gold);border-radius:24px;pointer-events:auto}.notice a{display:inline-block;min-height:44px;padding:10px 4px}
/* The painted fallback occupies the same world, with real 44px note buttons. */
.dial{position:absolute;width:min(65vh,520px,90vw);aspect-ratio:1;left:50%;top:43%;transform:translate(-50%,-50%);isolation:isolate}.core{position:absolute;inset:50% auto auto 50%;width:19%;height:19%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #b9a36b;border-radius:50%;background:radial-gradient(circle at 30% 25%,#abbd9f,#4b6c60 42%,#122521 80%);box-shadow:0 0 36px #8ed0a948,inset 0 1px 2px #ede4b69a;padding:6px}.core-inner{height:100%;border:1px solid #bba76b55;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.core span{font:20px/1 Instrument,serif;color:#f6dfb1;letter-spacing:2px}.core i{height:1px;background:#baad7c77;width:24%;margin:4px}.core small{font:4px/1 monospace;letter-spacing:.5px;white-space:nowrap;color:#d7dfc7}.note{position:absolute;top:var(--y);left:var(--x);transform:translate(-50%,-50%);width:44px;height:44px;background:transparent;border:0;border-radius:50%;display:grid;place-items:center;padding:0;touch-action:manipulation;z-index:3}.note:before{content:'';width:11px;height:11px;border:1px solid #bca471;border-radius:50%;background:#142b28;transition:box-shadow .2s}.note[aria-pressed=true]:before{width:15px;height:15px;background:radial-gradient(circle at 30% 25%,#fff7dd,var(--note-color) 35%,#243f32);border:1px solid #dfc692;box-shadow:0 0 0 2px #70552c77,0 0 18px color-mix(in srgb,var(--note-color),transparent 25%)}.note.hit:before{box-shadow:0 0 0 5px color-mix(in srgb,var(--note-color),transparent 83%),0 0 24px var(--note-color)}.note:focus-visible{outline-offset:-4px}
body.observing .intro,body.observing .machine-top,body.observing .console,body.observing .scene-caption,body.observing header{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility 0s .6s}.intro,.machine-top,.console,.scene-caption,header{transition:opacity .6s,visibility 0s}
#cinema-ui{position:fixed;inset:0;z-index:5;pointer-events:none}.cinema-controls{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px;border-radius:32px;pointer-events:auto;transition:opacity 1s}.cinema-controls button{min-height:44px;white-space:nowrap;background:transparent;color:#eee4cf;border:0;border-radius:24px;padding:10px 17px;font-size:11px}.cinema-controls button:hover{background:#263c31}body.cinema-settled .cinema-controls{opacity:.42}body.cinema-settled .cinema-controls:hover,body.cinema-settled .cinema-controls:focus-within{opacity:1}
@media(min-width:701px) and (max-width:1100px){.console{max-width:calc(100% - 60px);width:760px;gap:14px;grid-template-columns:170px 1fr}.settings{gap:14px}.intro h1{font-size:78px}.intro p{max-width:180px}.studio{width:44px;height:44px}header{left:16px;bottom:20px}.console-tools{gap:10px}.machine-top{right:28px}.scene-caption{bottom:235px}}
@media(max-width:700px){
:root{--dock:244px}.intro{top:max(28px,env(safe-area-inset-top));left:24px}.eyebrow{font-size:8px;letter-spacing:.17em}.eyebrow span{font-size:13px;margin-right:5px}h1{font-size:66px;margin-top:7px}.intro p{font-size:10px;margin-top:7px;max-width:210px}.intro:after{margin-top:13px;width:52px}.machine-top{top:36px;right:20px;font-size:7px;gap:10px}.machine-top .serial{writing-mode:vertical-rl;letter-spacing:.18em}.machine-top .power{position:fixed;top:163px;left:26px;font-size:9px}.machine-top #note-count{display:none}
header{left:auto;right:19px;bottom:calc(var(--dock) + 34px)}.studio{width:44px;height:44px;font-size:9px}
.console{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 28px);max-width:430px;grid-template-columns:1fr;gap:5px;padding:14px 13px 8px;border:1px solid #d5b77c99;border-radius:38px 38px 25px 25px;background:radial-gradient(ellipse at 10% 0%,#a3cdb732,transparent 65%),linear-gradient(125deg,#1d342bdc,#0b1b20ef 70%,#3c314529);box-shadow:inset 0 1px #fff1cd55,inset 0 0 0 4px #18271f66,0 0 0 3px #b3935030,0 8px 24px #0008;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.console:after{inset:0}.transport{flex-direction:row;padding:0;gap:9px;border:0;background:none;box-shadow:none;backdrop-filter:none}.transport:before{display:none}.transport button{flex:1;min-height:45px}.start{font-size:12px}.shuffle{font-size:11px;border:1px solid #baa26b66;background:linear-gradient(145deg,#aab39b14,#162b2244)}.shuffle span{margin-right:4px}.settings{grid-template-columns:minmax(134px,1.5fr) 1fr 1fr;gap:8px}.sound-instrument,.meter-instrument{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0}.sound-instrument{padding:26px 0 0}.sound-instrument legend{top:8px;font-size:8px}.sounds{gap:1px}.sounds button{font-size:10px;min-width:44px;width:100%;min-height:61px;padding:31px 1px 3px}.sounds button:before{top:7px;width:16px;height:16px;left:calc(50% - 8px)}.meter-instrument{padding:8px 6px 0}.meter-instrument label{font-size:8px;gap:4px}.meter-instrument label>span{font-size:20px;height:27px}.meter-face{top:27px;width:64px;height:38px}.meter-face i{height:33px}input[type=range]{margin-top:3px;height:44px}
.console-tools{gap:3px;justify-content:space-between;border-top:1px solid #cab07933;padding-top:5px}.console-tools>button,.view-modes button,#note-editor summary{font-size:9px;gap:4px;padding:3px 7px;min-height:44px;border-color:transparent;background:none;box-shadow:none;white-space:nowrap}.console-tools span{font-size:15px}.scene-caption{bottom:calc(var(--dock) + 30px);max-width:260px}.legend{font-size:8px;gap:17px}.instruction{font-size:10px;max-width:220px;margin:7px auto 0}#view-hint{font-size:8px;max-width:225px;margin:6px auto 0}.dial{width:min(90vw,42svh);top:41%}.note-chart{bottom:calc(100% + 14px);max-height:calc(100svh - 110px);padding:17px 18px;border-radius:30px}.chart-heading h2{font-size:27px}.note-row{gap:4px}.view-controls{gap:6px}.view-controls button{font-size:11px;padding:9px 12px}.star-chart{padding:18px 24px 24px;border-radius:48px 48px 25px 25px}.star-chart h2{font-size:36px}.star-chart p{font-size:16px}.chart-orbit{width:62px;height:62px;font-size:26px;margin-bottom:24px}.chart-actions button,.chart-actions a{font-size:12px}.cinema-controls{width:calc(100% - 28px);gap:0;justify-content:center}.cinema-controls button{font-size:10px;padding:10px 10px}.status:not(:empty){top:200px;padding:10px 16px;font-size:12px}
}
@media(max-width:374px){.console{width:calc(100% - 20px);padding-left:10px;padding-right:10px}.settings{gap:4px}.sounds button{min-width:44px}h1{font-size:60px}.console-tools>button,.view-modes button,#note-editor summary{padding:3px 4px;font-size:9px}}
@media(max-height:690px) and (max-width:700px){:root{--dock:226px}.intro{top:20px}h1{font-size:50px}.intro p,.intro:after,.machine-top .power{display:none}.console{bottom:max(8px,env(safe-area-inset-bottom));padding-top:10px;gap:0}.scene-caption{bottom:calc(var(--dock) + 12px)}#view-hint{display:none}.dial{top:36%;width:min(82vw,43svh)}}
@media(max-height:560px) and (min-width:701px){:root{--dock:155px}.intro{top:20px}.intro h1{font-size:60px}.intro p,.intro:after,.machine-top{display:none}.console{bottom:8px;gap:5px}.transport{padding-top:8px;padding-bottom:3px}.sound-instrument{padding-top:24px;padding-bottom:4px}.sound-instrument legend{top:9px}.sounds button{min-height:60px}.meter-instrument{padding-top:9px}.meter-face{top:23px}.console-tools{gap:18px}.scene-caption{bottom:calc(var(--dock) + 10px)}#view-hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.console:after{display:none}.sounds{filter:none}}
/* Musical postcards live on the observatory's brass-rimmed glass. */
.card-entry{position:fixed;z-index:5;right:28px;top:155px;border-radius:28px;min-height:44px;padding:10px 18px;color:var(--paper);font-size:13px}
body.observing .card-entry{display:none}
#mail{position:fixed;inset:0;z-index:7;pointer-events:none}
.letter{position:absolute;bottom:108px;left:50%;transform:translateX(-50%);width:470px;max-width:calc(100% - 32px);max-height:calc(100dvh - 260px);overflow:auto;overscroll-behavior:contain;border-radius:48px 48px 24px 24px;padding:20px 26px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#b99c65 #112620}
.letter .eyebrow{font-size:9px;letter-spacing:.14em}.letter h2{font:36px/1.1 Instrument,Georgia,serif;color:#eddbb4;margin:8px 0 18px}.letter p{font-size:14px;line-height:1.65}
.card-tunes legend{font-size:14px;margin-bottom:10px}.card-tunes{display:flex;gap:6px;flex-wrap:wrap}
.card-tunes button,.mail-dock button:not(.start){border:1px solid #baa26b88;border-radius:24px;background:linear-gradient(130deg,#65877333,#0e201f);color:#f0e1c3;min-height:44px;padding:9px 12px;font-size:13px}
.card-tunes button[aria-pressed=true]{background:#395447;border-color:#f2d8a0;box-shadow:inset 0 0 0 2px #192c24;text-decoration:underline;text-underline-offset:4px}
.card-text-button{border:0;background:none;color:#e5bc76;min-height:44px;padding:8px 0;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.letter label{display:block;font-size:14px;margin-top:9px}.letter label span{float:right;font:11px/22px monospace;color:#c6c7b8}
#card-message,#card-link{display:block;width:100%;border:1px solid #b99c6588;background:#0b1b1dc9;border-radius:15px;color:#f1eadb;padding:12px;font:16px/1.5 DM,sans-serif;margin-top:8px;resize:vertical;min-height:48px}
#card-message::placeholder{color:#bbc5b5}textarea:focus-visible{outline:2px dotted #ffe1a3;outline-offset:3px}
.letter #card-privacy{font-size:12px;color:#c6c7b8;margin:12px 0 0}.letter #card-status{color:#e5bc76;font-size:13px;margin-bottom:0}.letter #card-status:empty{display:none}
.letter .card-dedication{font:24px/1.3 Instrument,Georgia,serif;color:#eddbb4;margin:12px 0}
#card-words{font:30px/1.35 Instrument,Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0;color:#f8efda}
#card-hint{color:#c6c7b8;margin-bottom:4px}
.mail-dock{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:10px;border-radius:40px;width:470px;max-width:calc(100% - 28px);pointer-events:auto}
.mail-dock button{flex:1;min-height:48px;white-space:nowrap}.mail-dock #card-action{flex:1.7}
body.mail-open .console,body.mail-open .scene-caption,body.mail-open .machine-top,body.mail-open header{visibility:hidden;pointer-events:none}
body.mail-open .intro p,body.mail-open .intro:after{display:none}
body.mail-open .intro h1{font-size:66px}
body.mail-open .intro .eyebrow{font-size:9px}
body.mail-open .status{display:none}
@media(max-width:700px){.card-entry{right:18px;top:180px;font-size:12px}body.mail-open .intro{top:24px;left:24px}body.mail-open .intro h1{font-size:54px}.letter{bottom:100px;padding:16px 20px;max-height:calc(100dvh - 238px);border-radius:35px 35px 22px 22px}.letter h2{font-size:32px}.letter .chart-heading{gap:5px}.letter .eyebrow{font-size:8px}.mail-dock{bottom:max(14px,env(safe-area-inset-bottom));padding:8px;gap:6px}.mail-dock button:not(.start){font-size:12px;padding:8px}.letter #card-words{font-size:28px}.letter #card-hint{font-size:16px}.card-tunes button{flex:1;font-size:12px;padding:8px;white-space:nowrap}}
@media(max-height:560px){.card-entry{top:20px;right:20px}.letter{left:auto;right:20px;transform:none;width:52%;bottom:90px;max-height:calc(100dvh - 106px)}.mail-dock{left:auto;right:20px;transform:none;width:52%;bottom:12px}.mail-open .intro{left:24px;top:26px}.mail-open .intro h1{font-size:48px}}

.note-chart .view-controls{position:sticky;top:0;z-index:5;padding:8px 0;background:#142723;border-radius:12px}
.star-chart .follow{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:22px}.rbs-social{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}.rbs-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #b99c6566;border-radius:50%;background:linear-gradient(130deg,#65877322,#0e201f);color:#f0e1c3}.rbs-social a:hover{border-color:var(--gold);color:#fff;box-shadow:0 0 14px #e5bc7640}.rbs-social svg{width:17px;height:17px}.star-chart footer a{color:inherit;text-underline-offset:3px}