:root{--inkwater:#06080d;--deep-current:#111927;--moon-milk:#e8edf0;--rain-glass:#79a6b5;--heather-pulse:#8f7ea6;--distant-ember:#c29b78;--muted-ink:#8e9aa5;--quiet-line:#e8edf021;--soft-line:#e8edf014;--panel:#0c121dd1;--font-display:"Bricolage Grotesque", "Arial Narrow", "Trebuchet MS", sans-serif;--font-body:"Atkinson Hyperlegible Next", "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:var(--inkwater);color:var(--moon-milk);font-family:var(--font-body);text-rendering:optimizelegibility;font-size:15px;line-height:1.4}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--rain-glass);outline-offset:4px}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:20;background:var(--moon-milk);color:var(--inkwater);border-radius:3px;padding:8px 12px;transition:transform .16s;position:fixed;top:10px;left:14px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app-shell{isolation:isolate;background:var(--inkwater);min-height:100dvh;position:relative;overflow:hidden}.app-shell:before{z-index:-2;content:"";pointer-events:none;background:radial-gradient(at 50% 40%,#19304638,#0000 52%),linear-gradient(145deg,#c29b7809,#0000 44%);position:absolute;inset:0}.field-layer{z-index:-1;position:absolute;inset:0;overflow:hidden}.resonance-canvas,.field-fallback{opacity:.95;width:100%;height:100%;display:block}.field-fallback{background:radial-gradient(at 50% 54%,#79a6b540 0%,#0000 38%),radial-gradient(at 25% 62%,#8f7ea633 0%,#0000 34%),radial-gradient(at 80% 34%,#c29b7826 0%,#0000 28%),linear-gradient(170deg,#06080d 5%,#0d1725 56%,#070b12 100%);animation:22s ease-in-out infinite alternate field-breathe}.field-fallback:after{opacity:.6;content:"";background:repeating-linear-gradient(7deg,#0000 0 15px,#79a6b50f 16px 17px,#0000 18px 31px);width:150%;height:46%;margin-top:32%;display:block;transform:rotate(-4deg)}.field-fog{opacity:.72;pointer-events:none;background:radial-gradient(at 50% 48%,#a1b5b814,#0000 30%),radial-gradient(at 22% 66%,#79a6b514,#0000 26%),linear-gradient(#06080d1f 25%,#06080d08 48%,#06080d33 100%);animation:34s ease-in-out infinite alternate fog-drift;position:absolute;inset:0}.field-vignette{pointer-events:none;background:radial-gradient(#0000 30%,#03050926 68%,#030509a8 100%);position:absolute;inset:0}.topbar{z-index:4;justify-content:space-between;align-items:center;width:100%;min-height:72px;padding:20px clamp(18px,4vw,54px) 10px;transition:opacity .26s,transform .26s,visibility .26s;display:flex;position:relative}.brand-lockup{align-items:center;gap:12px;display:flex}.brand-mark{background:#79a6b50f;border:1px solid #79a6b58c;border-radius:50%;grid-template-columns:repeat(3,4px);align-items:end;gap:3px;width:25px;height:25px;padding:5px 6px;display:grid}.brand-mark span{background:var(--rain-glass);border-radius:3px;width:3px;display:block}.brand-mark span:first-child{opacity:.7;height:7px}.brand-mark span:nth-child(2){height:12px}.brand-mark span:nth-child(3){opacity:.82;height:9px}.brand-name{font-family:var(--font-display);letter-spacing:-.035em;margin:0;font-size:19px;font-weight:600}.brand-subtitle{color:var(--muted-ink);letter-spacing:.035em;margin:1px 0 0;font-size:11px}.topbar-actions{align-items:center;gap:7px;display:flex}.sound-status{color:var(--muted-ink);font-family:var(--font-mono);letter-spacing:.07em;text-transform:uppercase;align-items:center;gap:7px;margin-right:7px;font-size:10px;display:flex}.status-dot{background:var(--muted-ink);border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 0 3px #8e9aa514}.status-playing .status-dot{background:#9bc5a2;box-shadow:0 0 0 3px #9bc5a21a}.status-loading .status-dot{background:var(--distant-ember);animation:1.4s ease-in-out infinite status-pulse}.status-interrupted .status-dot,.status-error .status-dot{background:var(--distant-ember)}.quiet-action,.icon-button{color:#aeb8bf;background:#070b123d;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:7px;min-height:38px;padding:0 11px;font-size:12px;transition:background .16s,border-color .16s,color .16s;display:inline-flex}.quiet-action:hover,.quiet-action.is-active,.icon-button:hover{border-color:var(--quiet-line);color:var(--moon-milk);background:#111927bf}.icon-button{width:40px;padding:0}.settings-trigger{margin-left:3px}.timer-control{position:relative}.timer-menu{z-index:8;border:1px solid var(--quiet-line);background:#0e1521f7;border-radius:5px;min-width:156px;padding:5px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 45px #00000052}.timer-menu button{color:#b9c2c9;text-align:left;background:0 0;border-radius:3px;justify-content:space-between;align-items:center;width:100%;min-height:36px;padding:0 10px;font-size:12px;display:flex}.timer-menu button:hover,.timer-menu button[aria-checked=true]{color:var(--moon-milk);background:#79a6b51f}.instrument-layout{flex-direction:column;align-items:center;min-height:calc(100dvh - 72px);padding:clamp(20px,7vh,80px) 18px 30px;display:flex;position:relative}.field-caption{pointer-events:none;align-self:flex-start;width:min(450px,40vw);margin-left:clamp(0px,5vw,78px)}.eyebrow{color:var(--rain-glass);font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:7px;margin:0 0 10px;font-size:10px;display:flex}.field-caption h1{color:#e8edf0ed;max-width:420px;font-family:var(--font-display);letter-spacing:-.055em;margin:0;font-size:clamp(30px,3.8vw,52px);font-weight:500;line-height:.98}.field-caption>p:last-child{color:var(--muted-ink);margin:14px 0 0;font-size:13px}.begin-button{color:var(--moon-milk);background:#080d15b8;border:1px solid #79a6b580;border-radius:4px;align-items:center;gap:12px;margin-top:clamp(35px,8vh,90px);padding:10px 17px 10px 10px;font-size:13px;transition:background .18s,transform .18s;display:flex;box-shadow:0 10px 50px #0000003d}.begin-button:hover{background:#11232edb;transform:translateY(-2px)}.begin-icon{background:var(--rain-glass);width:32px;height:32px;color:var(--inkwater);border-radius:50%;place-items:center;display:grid}.begin-meta{color:var(--muted-ink);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding-left:4px;font-size:9px}.instrument-dock{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(145deg,#111927ed,#080d15e3);border:1px solid #e8edf029;border-radius:7px;width:min(1030px,100% - 28px);margin-top:auto;padding:21px clamp(18px,3.6vw,38px) 17px;transition:opacity .26s,transform .26s,visibility .26s;position:relative;box-shadow:0 25px 85px #00000047,inset 0 1px #ffffff0d}.instrument-dock:before{content:"";background:linear-gradient(90deg,#0000,#79a6b573,#0000);height:1px;position:absolute;top:-1px;left:28px;right:28px}.dock-heading,.dock-footer{justify-content:space-between;align-items:center;display:flex}.dock-heading{margin-bottom:18px}.dock-heading h2{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:17px;font-weight:500}.dock-heading .eyebrow{margin-bottom:5px}.dock-readout{color:var(--muted-ink);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:7px;font-size:10px;display:flex}.dock-readout svg{color:var(--rain-glass)}.dials-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,3vw,44px);display:grid}.dial{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;place-items:center;width:min(100%,166px);margin:0 auto;display:grid;position:relative}.dial-face{background:conic-gradient(from 225deg, var(--dial-accent) 0 var(--dial-ratio), #e8edf012 var(--dial-ratio) 74%, transparent 74% 100%);border:1px solid #e8edf01c;border-radius:50%;position:absolute;inset:8%;transform:rotate(-45deg);box-shadow:inset 0 0 0 8px #04070c70,inset 0 1px 12px #ffffff0a,0 11px 30px #0000002e}.dial-face:before{content:"";border:1px solid #e8edf012;border-radius:50%;position:absolute;inset:13%}.dial-notch{background:var(--dial-accent);width:2px;height:18%;box-shadow:0 0 9px color-mix(in srgb, var(--dial-accent) 60%, transparent);border-radius:2px;position:absolute;top:7%;left:calc(50% - 1px)}.dial-core{background:radial-gradient(circle at 35% 28%,#ffffff1f,#ffffff05 40%,#0000004d);border:1px solid #e8edf014;border-radius:50%;position:absolute;inset:31%}.dial-label{z-index:1;color:var(--muted-ink);font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;align-self:end;margin-bottom:15px;font-size:10px;position:relative}.dial-value{z-index:1;color:var(--moon-milk);font-family:var(--font-display);letter-spacing:-.04em;text-align:center;align-self:start;margin-top:16px;font-size:clamp(16px,2vw,21px);font-weight:500;position:relative}.dial-input{z-index:2;opacity:0;cursor:ns-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.dial-input:focus-visible{opacity:.02;outline:2px solid var(--rain-glass);outline-offset:5px;border-radius:50%}.dial.is-disabled{opacity:.42}.dial.is-disabled .dial-input{cursor:not-allowed}.dial.is-dragging .dial-face{filter:brightness(1.18)}.dock-footer{border-top:1px solid var(--soft-line);gap:18px;margin-top:16px;padding-top:13px}.level-guidance{min-height:30px;color:var(--muted-ink);align-items:center;gap:8px;font-size:11px;display:flex}.level-guidance svg{color:var(--distant-ember);flex:none}.footer-actions{align-items:center;gap:14px;display:flex}.timer-readout{color:var(--distant-ember);font-family:var(--font-mono);letter-spacing:.08em;align-items:center;gap:8px;font-size:11px;display:inline-flex}.timer-line{background:currentColor;width:17px;height:1px}.timer-fading{animation:1.1s ease-in-out infinite status-pulse}.play-button,.overlay-play{background:var(--rain-glass);width:45px;height:45px;color:var(--inkwater);border:1px solid #79a6b5bf;border-radius:50%;place-items:center;transition:transform .16s,filter .16s;display:grid;box-shadow:0 5px 18px #79a6b526}.play-button:hover,.overlay-play:hover{filter:brightness(1.12);transform:scale(1.04)}.play-button:disabled{filter:grayscale(.8);opacity:.6}.settings-panel{z-index:9;border:1px solid var(--quiet-line);background:#0d141ff7;border-radius:6px;width:min(360px,100% - 28px);padding:22px;position:fixed;top:84px;right:clamp(14px,3vw,42px);box-shadow:0 22px 70px #0006}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.panel-heading h2{font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-size:22px;font-weight:500}.panel-heading .eyebrow{margin-bottom:6px}.setting-block{border-bottom:1px solid var(--soft-line);padding-bottom:19px}.setting-block h3{margin:0 0 3px;font-size:13px;font-weight:500}.setting-block p{color:var(--muted-ink);margin:0 0 14px;font-size:12px}.segmented-control{border:1px solid var(--soft-line);background:#00000026;border-radius:4px;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.segmented-control button{min-height:34px;color:var(--muted-ink);background:0 0;border-radius:3px;font-size:11px}.segmented-control button.is-selected{color:var(--moon-milk);background:#79a6b529}.setting-toggle{cursor:pointer;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;display:flex}.setting-toggle span{gap:3px;display:grid}.setting-toggle strong{font-size:13px;font-weight:500}.setting-toggle small{color:var(--muted-ink);font-size:11px}.setting-toggle input{width:42px;height:23px;accent-color:var(--rain-glass);margin:0}.settings-note{color:var(--muted-ink);gap:9px;padding-top:15px;font-size:11px;display:flex}.settings-note .status-dot{background:#9bc5a2;flex:none;margin-top:6px}.settings-note p{margin:0}.live-message{z-index:10;color:#d7c5b5;background:#111927f0;border:1px solid #c29b7852;border-radius:4px;align-items:center;gap:9px;max-width:min(460px,100% - 40px);padding:10px 11px;font-size:12px;transition:opacity .26s,transform .26s,visibility .26s;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 12px 45px #00000052}.live-message button{color:currentColor;background:0 0;place-items:center;padding:2px;display:grid}.quiet-timer{z-index:5;color:#e8edf08c;font-family:var(--font-mono);letter-spacing:.13em;font-size:11px;position:fixed;top:20px;right:clamp(18px,4vw,54px)}.controls-hidden .topbar,.controls-hidden .instrument-dock,.controls-hidden .settings-panel,.controls-hidden .live-message{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(8px)}.presentation-dim .field-layer{filter:saturate(.66)brightness(.67)}.presentation-dim .field-caption{opacity:.74}.presentation-black{background:#000}.presentation-black:before,.presentation-black .field-layer,.presentation-black .topbar,.presentation-black .instrument-layout,.presentation-black .settings-panel,.presentation-black .live-message{display:none}.presentation-black.black-revealed .black-overlay{visibility:visible;opacity:1;pointer-events:auto}.black-overlay{z-index:12;visibility:hidden;opacity:0;pointer-events:none;color:#e8edf0b8;background:#000000b8;justify-content:center;align-items:center;gap:14px;transition:opacity .22s,visibility .22s;display:flex;position:fixed;inset:0}.overlay-play{background:#79a6b5d4;border-color:#79a6b580;width:42px;height:42px}.overlay-level{align-items:center;gap:7px;display:flex}.overlay-level input{width:110px;accent-color:var(--rain-glass)}.overlay-timer{color:#e8edf0b3;font-family:var(--font-mono);font-size:12px}.overlay-show{color:#e8edf0c2;background:#ffffff0a;border:1px solid #e8edf029;border-radius:3px;min-height:38px;padding:0 12px;font-size:12px}.overlay-fullscreen{color:#e8edf0b3;background:0 0;border:1px solid #e8edf029;border-radius:3px;place-items:center;width:38px;height:38px;display:grid}@keyframes field-breathe{0%{transform:scale(1)translate(0,0)}to{transform:scale(1.04)translate(-1%,1%)}}@keyframes fog-drift{0%{transform:translate(-1.5%)scale(1.02)}to{transform:translate(1.5%,-1%)scale(1.06)}}@keyframes status-pulse{0%,to{opacity:.45}50%{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=860px){.topbar{align-items:flex-start}.brand-subtitle,.sound-status span:last-child{display:none}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;max-width:68%}.quiet-action:not(.presentation-action) span{display:none}.quiet-action{width:38px;padding:0}.timer-control .quiet-action span{display:inline}.presentation-action{width:auto;padding:0 8px}.presentation-action span{display:inline}.field-caption{width:55vw;margin-top:4vh}.instrument-dock{width:min(650px,100% - 8px)}}@media (width<=560px){.topbar{min-height:58px;padding:14px 14px 6px}.brand-name{font-size:17px}.brand-mark{width:23px;height:23px}.settings-trigger{margin-left:0}.instrument-layout{min-height:calc(100dvh - 106px);padding:18px 9px 14px}.field-caption{text-align:center;align-self:center;width:100%;margin:3vh 0 0}.field-caption .eyebrow{justify-content:center}.field-caption h1{max-width:310px;margin:0 auto;font-size:34px}.field-caption>p:last-child{margin-top:9px}.begin-button{margin-top:28px}.instrument-dock{border-radius:6px;width:100%;padding:16px 12px 12px}.dock-heading{margin-bottom:12px}.dock-heading h2{font-size:15px}.dock-heading .eyebrow{font-size:9px}.dials-row{gap:2px}.dial{max-width:130px}.dial-label{margin-bottom:11px;font-size:9px}.dial-value{margin-top:12px;font-size:16px}.dock-footer{align-items:flex-end}.level-guidance{max-width:70%;font-size:10px;line-height:1.25}.play-button{width:42px;height:42px}.footer-actions,.black-overlay{gap:9px}.overlay-level input{width:78px}.overlay-show{padding:0 8px;font-size:11px}}@media (width<=380px){.topbar-actions{gap:2px}.sound-status{margin-right:1px}.quiet-action,.icon-button{width:34px;min-height:34px}.timer-control .quiet-action{width:auto;padding:0 7px}.dial{max-width:112px}}