:root{--paper: #100d09;--paper-lit: #241d15;--paper-deep: #0a0806;--faceplate: #2b2219;--ink: #ede1c7;--ink-soft: #c0b092;--ink-faint: #998b71;--rule: #3f3325;--rule-soft: #2e2519;--spot: #d4744b;--spot-lit: #e08a63;--brass-ink: #cca460;--brass-lit: #cca460;--brass: #a8802f;--night: #070504;--night-lit: #17110d;--night-rule: #3a2b1f;--night-text: #ede1c7;--good: #93b277;--danger: #d96f50;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");--bg: var(--paper);--bg-raised: var(--paper-lit);--bg-inset: var(--paper-deep);--border: var(--rule);--text: var(--ink);--text-dim: var(--ink-faint);--accent: var(--spot);--accent-dim: var(--brass-ink);--radius: 0px;--display: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;--body: "Lora", Georgia, "Times New Roman", serif;--label: "Archivo Narrow", "Helvetica Neue Condensed", Arial, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:var(--grain);opacity:.035;mix-blend-mode:overlay;pointer-events:none;z-index:9999}.app{display:grid;grid-template-columns:296px 1fr;height:100%}.label-caps,.side-section h2,.rail-title,.rail-phase-label,.story-kicker,.story-beat h4,.tabbar button,.btn,.chip,.readout-chip,.story-sources summary{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em}.sidebar{background:var(--paper-lit);border-right:1px solid var(--rule);box-shadow:inset -16px 0 26px -20px #000c;padding:26px 24px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:26px}.brand{position:relative}.brand:after{content:"";display:block;margin-top:14px;border-top:2px solid var(--brass);border-bottom:1px solid var(--rule);height:3px}.brand h1{margin:0;font-family:var(--display);font-weight:700;font-size:40px;line-height:.95;letter-spacing:-.01em;color:var(--ink)}.brand h1 em{font-style:italic;font-weight:400;color:var(--spot)}.brand p{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);font-style:italic}.brand-credit{margin-top:9px;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}.slot-note{margin:10px 0 0;font-size:11.5px;line-height:1.55;font-style:italic;color:var(--ink-faint)}.side-section h2{font-size:10px;color:var(--ink-faint);margin:0 0 12px;display:flex;align-items:center;gap:10px;font-weight:600}.side-section h2:after{content:"";flex:1;border-bottom:1px solid var(--rule)}.upload-zone{border:1px dashed var(--rule);background:#ede1c709;padding:22px 16px;text-align:center;cursor:pointer;font-family:var(--label);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);transition:border-color .18s,background .18s,color .18s}.upload-zone:hover,.upload-zone.dragging{border-color:var(--spot);border-style:solid;background:#d4744b1a;color:var(--ink)}.upload-zone strong{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink);margin-bottom:3px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;padding:9px 16px;font-size:11px;font-weight:600;cursor:pointer;transition:background .16s,color .16s,border-color .16s}.btn:hover:not(:disabled){background:var(--ink);color:var(--paper-lit)}.btn:disabled{opacity:.38;cursor:default}.btn.primary{background:var(--spot);border-color:var(--spot);color:#f6ecd9}.btn.primary:hover:not(:disabled){background:var(--spot-lit);border-color:var(--spot-lit)}.btn.small{padding:6px 11px;font-size:10px}.btn.active{background:var(--ink);color:var(--paper-lit)}.btn.block{width:100%;text-align:left}.file-info{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--spot);padding:14px 16px;font-size:12.5px;box-shadow:2px 2px #00000073}.file-info .name{font-family:var(--display);font-size:16px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--rule-soft)}.file-info dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-family:var(--label);font-size:11.5px}.file-info dt{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.file-info dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.examples{margin-top:18px}.examples-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}.examples-head:after{content:"";flex:1;border-bottom:1px dotted var(--rule)}.example-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.example{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:#ede1c708;border:1px solid var(--rule-soft);color:var(--ink-soft);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.example:hover:not(:disabled){background:#ede1c712;border-color:var(--rule);color:var(--ink)}.example:focus-visible{outline:1px solid var(--brass-lit);outline-offset:2px}.example:disabled{cursor:default}.example:disabled:not(.active){opacity:.55}.example.active{background:#d4744b1c;border-color:#d4744b73;box-shadow:inset 3px 0 0 var(--spot);color:var(--ink)}.example-disc{flex:none;width:34px;height:34px;border-radius:50%;--label-ink: var(--spot);background:radial-gradient(circle at center,#0a0806 0 1.5px,var(--label-ink) 1.5px 8px,#0a0806 8px 9px,transparent 9px),repeating-radial-gradient(circle at center,#16110d 0,#16110d 1px,#2a2119 1px,#2a2119 2px);box-shadow:0 2px 6px #0000008c}.example-disc.tone-1{--label-ink: #c9b99a}.example-disc.tone-2{--label-ink: #6f8a93}.example-disc.spinning{animation:spin 1.8s linear infinite}.example-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.example-title{font-family:var(--display);font-size:14px;font-weight:600;line-height:1.2;color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.example-artist{font-family:var(--label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.example-time{font-family:var(--label);font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){.example-disc.spinning{animation:none}}.library-list{margin:0;padding:0;list-style:none}.library-list li{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule-soft);cursor:pointer;color:var(--ink-soft);font-size:12.5px;transition:background .15s,color .15s}.library-list li:hover{background:#ede1c70d;color:var(--ink)}.library-list li.active{background:#d4744b1c;color:var(--ink);box-shadow:inset 3px 0 0 var(--spot)}.library-list .lib-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-list .lib-meta{font-family:var(--label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}.concept-list{margin:0;padding:0;list-style:none;font-size:13px}.concept-list li{display:flex;align-items:baseline;gap:6px;padding:7px 0;color:var(--ink-soft);cursor:pointer;transition:color .15s}.concept-list li:after{content:"";flex:1;order:1;align-self:flex-end;margin-bottom:4px;border-bottom:1px dotted var(--rule)}.concept-list li>span:first-child{order:0}.concept-list .concept-go{order:2;color:var(--rule);font-size:15px;line-height:1}.concept-list li:hover,.concept-list li:hover .concept-go{color:var(--spot)}.concept-list li:hover:after{border-bottom-color:var(--spot)}.main{display:flex;flex-direction:column;min-width:0;height:100%;background:var(--paper)}.tabbar{display:flex;gap:0;padding:0 34px;background:var(--paper-lit);border-bottom:1px solid var(--rule);box-shadow:0 2px #00000059}.tabbar button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;color:var(--ink-faint);font-size:11px;font-weight:600;padding:18px 20px 15px;cursor:pointer;position:relative;transition:color .16s}.tabbar button:hover:not(:disabled){color:var(--ink)}.tabbar button:disabled{opacity:.3;cursor:default}.tabbar button.active{color:var(--spot)}.tabbar button.active:after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;border-bottom:3px solid var(--spot)}.tab-content{flex:1;overflow-y:auto;padding:34px 34px 40px;min-height:0}.tab-content.no-scroll{overflow:hidden;display:flex;flex-direction:column}.tab-content-inner{min-height:0}.placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.7}.placeholder b{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink)}.placeholder .disc{width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at center,var(--spot) 0 9px,#0a0806 9px 13px,transparent 13px),repeating-radial-gradient(circle at center,#1d1712 0,#1d1712 2px,#2b231b 2px,#2b231b 3px);box-shadow:0 8px 26px #0009;animation:spin 8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panel{background:var(--paper-lit);border:1px solid var(--rule);padding:24px 28px;margin-bottom:22px;box-shadow:3px 3px #0006}.panel h3{margin:0 0 6px;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.01em}.panel .sub{color:var(--ink-soft);font-size:13px;line-height:1.65;margin:0 0 16px;font-style:italic;max-width:68ch}.meta-chips{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}.chip{background:transparent;border:1px solid var(--rule);padding:5px 11px;font-size:10px;font-weight:500;color:var(--ink-faint)}.chip b{color:var(--ink);font-weight:700;letter-spacing:.06em}canvas.waveform{width:100%;height:132px;display:block;background:var(--paper-deep);border:1px solid var(--rule)}.compare-grid{display:grid;gap:22px}.listen-hints{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin:0;padding-left:20px;max-width:70ch}.listen-hints li{margin-bottom:10px}.listen-hints li::marker{color:var(--spot)}.listen-hints b{color:var(--ink);font-weight:600}.story-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:40px;align-items:start;max-width:1060px}.story-rail{position:sticky;top:0;padding-right:26px;border-right:1px solid var(--rule)}.rail-title{font-size:10px;font-weight:600;color:var(--ink);padding-bottom:10px;border-bottom:2px solid var(--brass)}.story-thesis{font-size:12.5px;line-height:1.7;color:var(--ink-soft);font-style:italic;margin:14px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--rule-soft)}.rail-phase{margin-bottom:16px}.rail-phase-label{font-size:9.5px;font-weight:700;color:var(--brass-ink);padding:0 0 7px}.rail-stage{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;width:100%;display:flex;align-items:baseline;gap:10px;padding:6px 0;cursor:pointer;text-align:left;color:var(--ink-soft);transition:color .15s}.rail-stage:hover{color:var(--spot)}.rail-stage.active{color:var(--ink)}.rail-glyph{width:20px;flex:none;text-align:center;font-family:var(--label);font-size:12px;color:var(--rule)}.rail-stage.active .rail-glyph,.rail-stage:hover .rail-glyph{color:var(--spot)}.rail-text{min-width:0}.rail-name{font-size:13px;line-height:1.3;font-family:var(--body)}.rail-stage.active .rail-name{font-weight:600}.story-read{background:var(--paper-lit);border:1px solid var(--rule);padding:0 0 34px;box-shadow:4px 4px #0006;animation:sheet-in .3s ease}@keyframes sheet-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.story-progress{height:3px;background:var(--paper-deep)}.story-progress-fill{height:100%;background:var(--spot);transition:width .4s ease}.story-header{display:flex;gap:22px;align-items:flex-start;padding:34px 44px 26px;border-bottom:1px solid var(--rule)}.story-header.kind-prologue,.story-header.kind-epilogue{background:#d4744b0f}.story-glyph{width:62px;height:62px;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:27px;color:var(--spot);border:1px solid var(--rule);background:var(--paper)}.story-kicker{font-size:9.5px;font-weight:600;color:var(--ink-faint);display:flex;align-items:center;gap:12px}.story-pill{padding:3px 10px;border:1px solid var(--spot);color:var(--spot);white-space:nowrap;letter-spacing:.14em}.story-header h2{margin:12px 0 6px;font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.005em}.story-sub{margin:0;color:var(--ink-soft);font-size:14px;font-style:italic;line-height:1.5}.story-beat{padding:26px 44px 0}.story-beat h4{font-size:9.5px;font-weight:700;color:var(--brass-ink);margin:0 0 12px;display:flex;align-items:center;gap:12px}.story-beat h4:after{content:"";flex:1;border-bottom:1px solid var(--rule-soft)}.story-beat p{margin:0 0 14px;font-size:15px;line-height:1.78;color:var(--ink);max-width:64ch}.beat-moment p{font-size:16.5px;line-height:1.72}.beat-moment p:first-of-type:first-letter{float:left;font-family:var(--display);font-size:62px;line-height:.82;font-weight:700;color:var(--spot);padding:6px 10px 0 0}.beat-hear,.beat-explore{margin:26px 44px 0;padding:20px 24px 22px;background:var(--paper);border-top:2px solid var(--spot);border-bottom:1px solid var(--rule)}.beat-explore{border-top-color:var(--good)}.beat-explore h4{color:var(--good)}.beat-hear p,.beat-explore p{font-size:14px;margin-bottom:14px}.story-question{margin:34px 44px 0;padding:26px 30px;background:var(--paper);border-left:4px solid var(--spot);font-family:var(--display);font-size:21px;font-style:italic;line-height:1.5;color:var(--ink)}.story-sources{margin:28px 44px 0}.story-sources summary{cursor:pointer;color:var(--ink-faint);font-size:9.5px;font-weight:600}.story-sources summary:hover{color:var(--spot)}.story-sources ul{margin:12px 0 0;padding-left:18px;font-size:12px;line-height:1.7}.story-sources li{margin-bottom:4px}.story-sources a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}.story-sources a:hover{color:var(--spot);border-bottom-color:var(--spot)}.story-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:34px 44px 0;padding-top:22px;border-top:1px solid var(--rule)}.story-end{font-size:13px;color:var(--ink-faint);font-style:italic}@media (max-width: 1040px){.story-layout{grid-template-columns:1fr}.story-rail{position:static;border-right:none;padding-right:0;padding-bottom:20px;border-bottom:1px solid var(--rule)}}.groove-toolbar{display:flex;gap:12px;align-items:center;padding:0 0 16px;flex-wrap:wrap}.groove-toolbar .spacer{flex:1}.room-page{height:100%}.room-page[hidden]{display:none}.room-content{display:flex;flex-direction:column;height:100%}.room-toolbar{gap:10px}.room-setting{padding:7px 11px;border:1px solid var(--rule);color:var(--ink-soft);font:600 10px var(--label);letter-spacing:.08em;text-transform:uppercase}.room-help{margin-left:auto;font-size:12px;color:var(--ink-faint)}.groove-toolbar label{font-family:var(--label);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px}.groove-toolbar input[type=range]{width:140px;accent-color:var(--spot)}.groove-toolbar .debug-toggle{gap:6px;cursor:pointer}.groove-toolbar .debug-toggle input{accent-color:var(--spot)}.groove-toolbar .env-toggle{display:inline-flex}.groove-toolbar .env-toggle .btn:last-child{border-left:none}.groove-toolbar .toolbar-control{display:inline-flex;align-items:center;gap:8px}.groove-toolbar .toolbar-label{font-family:var(--label);color:var(--ink-faint);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.groove-toolbar .acoustic-toggle{display:inline-flex}.groove-toolbar .acoustic-toggle .btn+.btn{border-left:none}.groove-wrap{flex:1;position:relative;min-height:0;border:1px solid var(--rule);padding:10px;background:var(--night);box-shadow:inset 0 0 0 1px var(--night-rule),4px 4px #00000080;overflow:hidden}.groove-loading{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:5;display:flex;align-items:center;justify-content:center;gap:28px;background:var(--grain),radial-gradient(circle at 50% 45%,#1d1510,var(--night) 70%);background-blend-mode:soft-light,normal;color:var(--night-text);transition:opacity .6s ease}.groove-loading.lifted{opacity:0;pointer-events:none}.loading-disc{flex:none;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at center,#0a0806 0 4px,var(--spot) 4px 30px,#0a0806 30px 34px,transparent 34px),repeating-radial-gradient(circle at center,#1a1410 0,#1a1410 2px,#2a2119 2px,#2a2119 3px);box-shadow:0 10px 30px #000000b3,inset 0 0 0 1px #ffffff0a;position:relative;animation:spin 1.8s linear infinite}.loading-disc:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40deg,rgba(255,236,210,.08) 60deg,transparent 80deg 220deg,rgba(255,236,210,.05) 240deg,transparent 260deg);animation:spin 1.8s linear infinite reverse}.loading-copy{display:flex;flex-direction:column;gap:8px;min-width:230px}.loading-copy b{font-family:var(--display);font-size:22px;font-weight:600;font-style:italic}.loading-kicker,.loading-note{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lit)}.loading-note{color:var(--ink-faint);letter-spacing:.08em}@media (prefers-reduced-motion: reduce){.loading-disc,.loading-disc:after{animation:none}}@media (max-width: 560px){.groove-loading{flex-direction:column;text-align:center}}.groove-panel{position:absolute;top:20px;right:20px;width:158px;background:var(--grain),linear-gradient(#1b140f,#130e0a);background-blend-mode:soft-light,normal;border:1px solid var(--night-rule);border-top:2px solid var(--brass);box-shadow:3px 3px #00000073;display:flex;flex-direction:column;max-height:calc(100% - 40px);color:var(--night-text)}.groove-panel.collapsed{width:auto}.panel-head{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:32px;padding:7px 12px;background:none;border:none;color:var(--brass-lit);font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}.panel-head:hover{color:var(--night-text)}.panel-head:focus-visible{outline:1px solid var(--brass-lit);outline-offset:-3px}.panel-caret{font-size:14px;line-height:1;font-weight:400}.panel-body{display:flex;flex-direction:column;gap:12px;padding:2px 12px 14px;overflow-y:auto;border-top:1px solid var(--night-rule)}.groove-panel h4{margin:8px 0 4px;font-family:var(--label);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-faint);display:flex;align-items:center;gap:6px}.groove-panel h4:after{content:"";flex:1;height:1px;background:var(--night-rule)}.groove-panel .panel-section{display:flex;flex-direction:column;gap:5px}.groove-panel .btn{border-color:var(--night-rule);color:var(--night-text);padding:5px 9px}.groove-panel .panel-index{display:flex;align-items:baseline;gap:6px}.groove-panel .panel-index .idx{width:16px;font-family:var(--display);font-style:italic;font-size:11px;letter-spacing:0;text-transform:none;color:var(--brass-lit)}.groove-panel .panel-index:hover .idx{color:inherit}.panel-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;align-self:flex-start;margin-top:2px;padding:3px 0;background:none;border:none;border-bottom:1px dotted var(--night-rule);font-family:var(--label);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);cursor:pointer}.panel-link:hover{color:var(--night-text);border-bottom-color:var(--brass)}@media (pointer: coarse){.groove-panel .btn,.panel-check,.panel-link{min-height:40px}.panel-head{min-height:44px}}@media (max-width: 760px){.groove-panel{top:12px;right:12px}.groove-hud{left:12px;right:12px;bottom:12px;max-width:none}}.groove-panel .btn:hover:not(:disabled){background:var(--night-text);color:var(--night)}.groove-panel .btn.active{background:var(--brass);border-color:var(--brass);color:#1a1409}.panel-check{display:flex;align-items:center;gap:8px;font-family:var(--label);font-size:11px;letter-spacing:.06em;color:var(--night-text);cursor:pointer}.panel-check input{accent-color:var(--brass)}.panel-slider{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--night-text)}.panel-slider input[type=range]{width:100%;accent-color:var(--brass)}.groove-hud{position:absolute;left:20px;bottom:20px;background:#17110de6;border:1px solid var(--night-rule);padding:14px 40px 14px 18px;font-size:12px;line-height:1.65;color:#d9cdb6db;max-width:430px}.groove-hud b{color:var(--night-text);font-weight:600}.hud-close{position:absolute;top:8px;right:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;color:#d9cdb680;font-size:13px;cursor:pointer;padding:2px 5px}.hud-close:hover{color:var(--night-text)}.hud-reopen{position:absolute;left:20px;bottom:20px;background:#17110de6;border-color:var(--night-rule);color:var(--night-text)}.hud-reopen:hover{background:var(--night-text);color:var(--night)}.readout-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.readout-chip{border:1px solid var(--night-rule);padding:3px 9px;font-size:9px;font-weight:500;color:#d9cdb6c7;font-variant-numeric:tabular-nums}.readout-chip b{color:var(--night-text)}.readout-chip.status-playing{border-color:var(--good)}.readout-chip.status-playing b{color:#9dbb8d}.readout-chip.status-paused{border-color:var(--brass)}.readout-chip.status-paused b{color:#d5ab5c}.scale-label{position:absolute;right:20px;bottom:20px;max-width:400px;background:#17110de6;border:1px solid var(--brass);padding:9px 14px;font-family:var(--label);font-size:10.5px;letter-spacing:.05em;line-height:1.5;color:#d5ab5c}.transport{display:flex;align-items:center;gap:18px;padding:15px 34px;background:linear-gradient(180deg,var(--faceplate),#1d1610);border-top:2px solid var(--brass);box-shadow:inset 0 1px #ede1c717;color:var(--night-text)}.transport .btn{border-color:var(--night-text);color:var(--night-text);min-width:92px}.transport .btn:hover:not(:disabled){background:var(--night-text);color:var(--night)}.transport .btn.primary{background:var(--spot);border-color:var(--spot);color:#f6ecd9}.transport .btn.primary:hover:not(:disabled){background:var(--spot-lit);border-color:var(--spot-lit)}.transport .time{font-family:var(--label);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.1em;color:#d9cdb6cc;min-width:96px}.transport input[type=range]{flex:1;accent-color:var(--brass)}.transport .volume{display:flex;align-items:center;gap:9px;font-size:13px}.transport .volume input[type=range]{width:108px;flex:none}.ab-switch{display:flex;border:1px solid var(--night-text)}.ab-switch button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:8px 16px;font-family:var(--label);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;background:transparent;color:#d9cdb6b8;cursor:pointer;transition:background .16s,color .16s}.ab-switch button:hover:not(:disabled){color:var(--night-text)}.ab-switch button.active{background:var(--night-text);color:var(--night)}.statusbar{position:fixed;top:18px;right:24px;z-index:30;display:flex;gap:10px;flex-direction:column;align-items:flex-end}.status{background:var(--paper-lit);border:1px solid var(--ink);padding:11px 16px;font-family:var(--label);font-size:11px;letter-spacing:.06em;display:flex;gap:12px;align-items:center;box-shadow:3px 3px #00000080}.status.error{border-color:var(--danger);color:var(--danger)}.status-body{display:flex;flex-direction:column;gap:8px;min-width:210px}.progress-track{height:4px;background:var(--paper-deep);border:1px solid var(--rule)}.progress-fill{height:100%;background:var(--spot);transition:width .3s ease}.spinner{width:13px;height:13px;border:2px solid var(--rule);border-top-color:var(--spot);border-radius:50%;animation:spin .85s linear infinite}.offline-notice{position:fixed;left:50%;bottom:96px;transform:translate(-50%);z-index:40;display:flex;align-items:flex-start;gap:16px;max-width:640px;padding:18px 22px;background:var(--paper-lit);border:1px solid var(--danger);border-left:4px solid var(--danger);box-shadow:5px 5px #0000008c}.offline-mark{font-size:21px;color:var(--danger);line-height:1.1}.offline-body{flex:1}.offline-body h4{margin:0 0 6px;font-family:var(--label);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--danger)}.offline-body p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-soft)}.offline-notice .btn{flex:none;align-self:center}input[type=range]{cursor:pointer}::selection{background:#d4744b4d;color:var(--ink)}*{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--paper)}*::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}.groove-panel::-webkit-scrollbar-thumb{background:var(--night-rule);border-color:transparent}.app{grid-template-columns:330px minmax(0,1fr)}.sidebar{position:relative;isolation:isolate;gap:18px;padding:22px 20px 34px;background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 12%,transparent 88%,rgba(0,0,0,.22)),repeating-linear-gradient(3deg,rgba(255,230,190,.018) 0 1px,transparent 1px 7px),#21170f;border-right:8px solid #0b0806;box-shadow:inset -1px 0 #cca4602e,12px 0 34px #00000047}.sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--grain);opacity:.045;mix-blend-mode:soft-light;pointer-events:none}.sidebar .brand{display:flex;align-items:center;gap:12px;padding:2px 4px 8px}.sidebar .brand:after{display:none}.brand-mark{width:43px;height:43px;flex:none;display:grid;place-items:center;border:1px solid rgba(204,164,96,.5);border-radius:50%;font-family:var(--display);font-size:23px;font-style:italic;color:var(--spot-lit);box-shadow:inset 0 0 0 4px #21170f,inset 0 0 0 5px #cca46040}.sidebar .brand h1{font-size:32px;line-height:1}.sidebar .brand p{margin:4px 0 0;font-size:11px;line-height:1.35;color:var(--ink-faint)}.now-spinning{position:relative;min-height:92px;display:grid;grid-template-columns:62px 1fr;align-items:center;gap:13px;padding:22px 14px 13px;color:#2b2117;background:linear-gradient(102deg,rgba(255,255,255,.18),transparent 42%),#c8b58f;border:1px solid #e0d1b3;border-radius:2px 5px 2px 3px;box-shadow:3px 5px #00000047;transform:rotate(-.35deg)}.now-spinning:after{content:"";position:absolute;right:18px;top:-5px;width:52px;height:12px;background:#e6d4ad8c;transform:rotate(2deg)}.hand-label{position:absolute;top:7px;left:13px;font-family:var(--label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6f5c42}.now-disc{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#130e0b 0 2px,#c66c48 2px 12px,#14100d 12px 13px,transparent 13px),repeating-radial-gradient(circle,#17120f 0,#17120f 1px,#30271f 1px,#30271f 2px);box-shadow:0 4px 9px #00000061}.now-disc.spinning{animation:spin 1.8s linear infinite}.now-copy{min-width:0;display:flex;flex-direction:column;gap:5px}.now-copy strong{font-family:var(--display);font-size:16px;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-copy span{font-size:10.5px;line-height:1.35;color:#6c5940;font-style:italic}.record-crate{position:relative;padding:12px 10px 17px;background:linear-gradient(95deg,#17100b,#2a1c12 48%,#18110c);border-left:5px solid #4b2f1b;border-right:5px solid #3c2718;border-bottom:10px solid #51331d;box-shadow:inset 0 -2px #25170f,0 6px 10px #00000047}.record-crate:after{content:"";position:absolute;left:-10px;right:-10px;bottom:-14px;height:5px;background:#2a1a10;box-shadow:0 3px 5px #0006}.crate-heading,.side-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 3px 9px}.crate-heading span,.side-title span{font-family:var(--display);font-size:14px;font-style:italic;color:var(--ink)}.crate-heading small,.side-title small{font-family:var(--label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.record-crate .example-list{gap:2px}.record-crate .example{min-height:56px;padding:7px 8px 7px 4px;border:none;border-bottom:1px solid rgba(204,164,96,.13);background:transparent;color:var(--ink-soft)}.record-crate .example:hover:not(:disabled){background:#ede1c70e;border-color:#cca46040;transform:translate(3px)}.record-crate .example.active{background:linear-gradient(90deg,#d4744b33,#d4744b0a);box-shadow:inset 2px 0 var(--spot);transform:translate(5px)}.record-crate .example-disc{width:38px;height:38px}.bring-your-own{padding:13px 13px 11px;background:#ede1c709;border:1px solid rgba(204,164,96,.22)}.upload-zone{min-height:60px;display:flex;align-items:center;gap:12px;padding:10px 12px;text-align:left;border:1px dashed rgba(204,164,96,.45);background:#0a080647}.upload-zone strong{font-size:14px;margin:0 0 2px}.upload-zone span:last-of-type{display:flex;flex-direction:column;font-size:9px;letter-spacing:.1em}.upload-plus{font-family:var(--display);font-size:30px;font-style:italic;color:var(--spot);line-height:1}.house-demo{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;display:flex;justify-content:space-between;padding:9px 1px 1px;background:none;border:none;color:var(--ink-faint);font-family:var(--body);font-size:10.5px;font-style:italic;cursor:pointer}.house-demo:hover:not(:disabled){color:var(--spot-lit)}.house-demo:disabled{opacity:.45;cursor:default}.recent-stack{padding:0 4px}.recent-stack .library-list li{padding:0;border:none}.recent-stack .library-list button{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;display:flex;align-items:baseline;gap:8px;padding:8px 10px;background:#2b2117;border:1px solid #443423;border-bottom-color:#17100b;color:var(--ink-soft);text-align:left;cursor:pointer}.recent-stack .library-list li:nth-child(2n) button{transform:translate(3px)}.recent-stack .library-list button:hover,.recent-stack .library-list button.active{color:var(--ink);border-left:3px solid var(--spot)}.story-letter{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(100% - 10px);align-self:center;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:12px 13px;background:#ded0b1;border:none;color:#2d2218;text-align:left;cursor:pointer;box-shadow:3px 4px #0000004d;transform:rotate(.45deg);transition:transform .16s,background .16s}.story-letter:hover{transform:rotate(0) translateY(-2px);background:#eadfc6}.story-letter>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.story-letter small{font-family:var(--label);font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:#78664b}.story-letter strong{font-family:var(--display);font-size:14px}.story-stamp{display:grid;place-items:center;width:39px;height:39px;border:1px solid #a4684f;border-radius:50%;font-family:var(--label);font-size:9px;color:#9b5740;transform:rotate(-8deg)}.letter-arrow{color:#9b5740;font-size:16px}.sidebar-signoff{padding:6px 8px 0;font-size:10.5px;line-height:1.55;font-style:italic;color:#7f705d}.room-welcome{position:absolute;left:20px;bottom:20px;max-width:310px;padding:15px 18px 14px;background:#ded0b1ed;border-left:3px solid var(--spot);color:#2d2218;box-shadow:4px 5px #00000052;pointer-events:none}.room-welcome span{display:block;margin-bottom:4px;font-family:var(--label);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8c654f}.room-welcome b{display:block;font-family:var(--display);font-size:18px}.room-welcome p{margin:5px 0 0;font-size:11px;font-style:italic;color:#725f49}.compare-page{max-width:1180px;margin:0 auto}.compare-intro{padding:8px 4px 25px;border-bottom:1px solid var(--rule)}.compare-kicker{font-family:var(--label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--spot-lit)}.compare-intro h2{max-width:760px;margin:7px 0 8px;font-family:var(--display);font-size:clamp(30px,4vw,52px);line-height:1.02;font-weight:500}.compare-intro p{max-width:68ch;margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.7}.waveform-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.waveform-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 14px;padding:22px;background:#1d1711;border:1px solid var(--rule);color:var(--ink);text-align:left;cursor:pointer;box-shadow:3px 4px #00000052;transition:border-color .16s,transform .16s,background .16s}.waveform-card:hover{transform:translateY(-2px);border-color:var(--ink-faint)}.waveform-card.active{border-color:var(--spot);background:#251912;box-shadow:inset 0 3px var(--spot),3px 4px #00000052}.waveform-number{font-family:var(--label);font-size:11px;letter-spacing:.14em;color:var(--spot)}.waveform-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.waveform-heading strong{font-family:var(--display);font-size:19px;font-weight:600}.waveform-heading small{font-family:var(--label);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}.waveform-card.active .waveform-heading small{color:var(--spot-lit)}.waveform-copy{grid-column:2;margin:5px 0 16px;font-size:11.5px;font-style:italic;color:var(--ink-soft)}.waveform-card canvas{grid-column:1 / -1;pointer-events:auto}.listening-note{display:grid;grid-template-columns:62px 1fr;gap:20px;max-width:820px;margin:28px 0 8px;padding:20px 22px;background:#ede1c709;border-top:1px solid var(--brass)}.note-mark{font-family:var(--display);font-size:35px;color:var(--brass-ink);opacity:.75}.listening-note h3{margin:0 0 6px;font-family:var(--display);font-size:20px}.listening-note p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.7}@media (max-width: 1040px){.app{grid-template-columns:270px minmax(0,1fr)}.sidebar{padding-inline:16px}.waveform-pair{grid-template-columns:1fr}.tabbar{padding-inline:16px}.tabbar button{padding-inline:13px}.transport{gap:8px;padding:12px 14px}.transport .btn{min-width:76px!important;padding-inline:10px}.ab-switch button{padding-inline:10px}.transport .time,.transport .volume{display:none}.transport>input[type=range]{min-width:48px}.room-welcome{max-width:245px;padding:12px 14px}.room-welcome b{font-size:16px}}