@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/newsreader-latin.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('/fonts/newsreader-latin-italic.woff2') format('woff2')}
:root{font-family:'DM Sans',system-ui,sans-serif;color-scheme:dark;--bg:#0b0c16;--surface:#181821;--raised:#242231;--text:#f6f1e9;--muted:#bbb4c5;--line:#ffffff27;--accent:#ec8b75;--accent-ink:#251b25;--iris:#ab9bda;--glow-alpha:.12}
[data-theme=light]{color-scheme:light;--bg:#f4f0e9;--surface:#fffcf8;--raised:#ebe5e6;--text:#251f2b;--muted:#625a69;--line:#251f2b2b;--accent:#a23956;--accent-ink:#fff9f4;--iris:#4c58aa}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);transition:background .3s,color .3s}body:before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 29% 40%,rgba(171,155,218,var(--glow-alpha)),transparent 48%),radial-gradient(circle at 88% 10%,rgba(236,139,117,calc(var(--glow-alpha)*.65)),transparent 43%);pointer-events:none;z-index:-1}body[data-ambience=still]:before{opacity:0}body[data-ambience=artwork]:before{background:radial-gradient(circle at 22% 42%,rgba(236,139,117,var(--glow-alpha)),transparent 50%),radial-gradient(circle at 88% 18%,rgba(123,174,177,calc(var(--glow-alpha)*.9)),transparent 44%)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}:focus-visible{outline:2px solid var(--iris);outline-offset:4px}[hidden]{display:none!important}.skip-link{position:absolute;left:10px;top:-70px;padding:12px;background:var(--accent);color:var(--accent-ink);z-index:30}.skip-link:focus{top:10px}
.app-header{height:78px;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.08em;white-space:nowrap}.brand img{border-radius:9px}.brand-dot{color:var(--accent)}.app-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:.19em;color:var(--accent)}.app-label{color:var(--muted);margin-right:auto}.header-actions{display:flex;align-items:center;gap:12px}.header-actions button,.header-actions a{border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--text);padding:9px 14px;font-size:11px;font-weight:700}.header-actions a:hover,.header-actions button:hover{border-color:var(--iris)}
.app-layout{max-width:1510px;margin:auto;padding:50px clamp(18px,4vw,58px) 95px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,.7fr);gap:24px 30px}.page-intro{grid-column:1/-1;margin-bottom:12px}.page-intro h1,.connection-panel h2,.ambience-panel h2,.drop-panel h2,dialog h2{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.05em}.page-intro h1{font-size:clamp(56px,7vw,100px);line-height:1;margin:16px 0 10px}.page-intro p{max-width:650px;color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.player-shell,.side-panel>section{border:1px solid var(--line);background:var(--surface);border-radius:16px;box-shadow:0 20px 70px #0002}.player-shell{padding:14px;min-width:0;align-self:start}.player-stage{position:relative;aspect-ratio:16/9;background:#090b14;border-radius:10px;overflow:hidden;display:grid;place-items:center;isolation:isolate}.player-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,#6d5770 0%,#25203c 40%,#0a0b17 82%);opacity:.45;z-index:-1}.player-stage video,.player-stage audio{width:100%;height:100%;object-fit:contain;background:#050506}.player-stage audio{padding:80px 8%;background:radial-gradient(circle at 50% 30%,#54445e,#13131d 65%)}.empty-stage{text-align:center;color:#f4eae4}.empty-window{width:136px;height:136px;border:5px solid #d7a7ac;border-radius:35px;display:grid;place-items:center;margin:0 auto 24px;transform:rotate(-8deg);box-shadow:0 0 0 12px #ffffff0a,18px 24px 50px #070812ad;background:linear-gradient(145deg,#b398c8,#e7ab96 62%,#c67c83)}.empty-window span{font-size:44px;color:#32263b;transform:rotate(8deg)}.empty-stage p{font-family:'Newsreader',Georgia,serif;font-size:30px;margin:0 0 6px}.empty-stage>span{font-size:11px;color:#d4c6d2}.player-stage.is-mini{position:fixed;inset:auto 20px 20px auto;width:min(440px,calc(100vw - 40px));aspect-ratio:16/9;z-index:20;box-shadow:0 20px 70px #000b;border:1px solid #ffffff5c}.close-mini{position:absolute;z-index:2;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:1px solid #ffffff80;background:#0a0b16d9;color:#fff;font-size:20px;line-height:1}
.player-details{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:20px 9px 17px;border-bottom:1px solid var(--line)}.player-details h2{font-family:'Newsreader',Georgia,serif;font-size:clamp(25px,3vw,39px);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:9px 0 4px;overflow-wrap:anywhere}.player-details p{font-size:11px;color:var(--muted);margin:0}.local-badge{border:1px solid var(--line);padding:7px 9px;border-radius:99px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.09em;white-space:nowrap}.player-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:17px 8px 8px}.player-actions>button,.pick-button,.speed-select,.subtitle-picker{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--raised);color:var(--text);padding:12px 13px;font-size:11px;font-weight:700;min-height:42px}.player-actions>button:not(:disabled):hover,.subtitle-picker:hover{border-color:var(--iris)}.pick-button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);cursor:pointer}.pick-button:hover{filter:brightness(1.08)}.pick-button input,.subtitle-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.speed-select{gap:7px;padding:0 8px 0 12px}.speed-select select{background:transparent;color:var(--text);border:0;padding:9px 4px;font-size:11px}.speed-select option{color:#1a1a1a}.secondary-actions{display:flex;align-items:center;gap:13px;padding:5px 8px 8px;color:var(--muted);font-size:10px}.subtitle-picker{padding:7px 11px;min-height:0;cursor:pointer}.subtitle-picker:has(input:disabled){opacity:.45;cursor:not-allowed}.player-status{padding:0 9px;color:var(--muted);font-size:11px;min-height:1.5em}.resume-panel{margin:15px 8px 0;padding:12px 15px;border-radius:9px;background:color-mix(in srgb,var(--iris) 18%,var(--surface));display:flex;align-items:center;justify-content:space-between;gap:13px}.resume-panel p{margin:0;font-size:12px}.resume-panel div{display:flex;gap:6px}.resume-panel button{border:1px solid var(--iris);background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;font-size:11px;font-weight:700}.resume-panel button:first-child{background:var(--iris);color:#181525}
.side-panel{display:flex;flex-direction:column;gap:12px}.side-panel>section{padding:23px}.drop-panel{border-style:dashed!important;transition:border-color .2s,background .2s}.drop-panel.is-dragging{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 13%,var(--surface))}.drop-icon{font-size:29px;color:var(--accent)}.drop-panel h2,.connection-panel h2,.ambience-panel h2{font-size:30px;line-height:1.05;margin:10px 0 8px}.drop-panel p,.connection-panel p,.ambience-panel p{font-size:11px;color:var(--muted);line-height:1.6;margin:0}.connection-panel{background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--iris) 14%,var(--surface)))!important}.connection-panel h2 em{color:var(--accent)}.connection-panel button{margin-top:18px;border:1px solid var(--iris);border-radius:8px;background:transparent;color:var(--text);font-size:11px;font-weight:700;padding:10px 12px}.connection-panel button:hover{background:var(--raised)}.ambience-options{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0}.ambience-options button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:8px 10px;font-size:10px;font-weight:700}.ambience-options button.is-active{color:var(--text);border-color:var(--iris);background:var(--raised)}.intensity-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;margin-bottom:14px}.intensity-label input{width:80px;accent-color:var(--iris)}.intensity-label output{min-width:30px;text-align:right}
dialog{max-width:min(520px,calc(100vw - 32px));border:1px solid var(--iris);border-radius:17px;background:var(--surface);color:var(--text);padding:30px;box-shadow:0 30px 90px #0009}dialog::backdrop{background:#090812b9;backdrop-filter:blur(5px)}dialog h2{font-size:40px;line-height:1.06;margin:13px 0}dialog p,dialog li{color:var(--muted);font-size:13px;line-height:1.6}dialog ol{padding-left:22px}.dialog-note{border-top:1px solid var(--line);padding-top:14px}dialog button{background:var(--accent);border:0;color:var(--accent-ink);border-radius:9px;padding:11px 18px;font-size:12px;font-weight:700}footer{padding:30px clamp(18px,4vw,58px);border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
@media(max-width:950px){.app-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.app-label{display:none}.header-actions{margin-left:auto}}
@media(max-width:700px){.app-header{height:68px}.header-actions a{display:none}.app-layout{padding-top:32px}.side-panel{display:flex}.player-details{display:block}.local-badge{display:inline-flex;margin-top:12px}.player-actions>button,.pick-button,.speed-select{flex:1 1 auto}.resume-panel{display:block}.resume-panel div{margin-top:9px}.secondary-actions{flex-wrap:wrap}.page-intro h1{font-size:62px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}body:before{opacity:.3}}
.pick-button,.subtitle-picker{position:relative;overflow:hidden}
.pick-button input,.subtitle-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:auto;cursor:pointer}
.pick-button:focus-within,.subtitle-picker:focus-within{outline:2px solid var(--iris);outline-offset:4px}
body[data-ambience=artwork]:before{background:radial-gradient(circle at 24% 40%,rgba(var(--art-rgb, 123,174,177),var(--glow-alpha)),transparent 50%),radial-gradient(circle at 88% 18%,rgba(171,155,218,calc(var(--glow-alpha)*.65)),transparent 44%)}
.empty-stage button{display:block;margin:20px auto 0;padding:11px 17px;border:0;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700}
.empty-stage button:hover{filter:brightness(1.08)}
@media(max-width:700px){.player-stage{width:100%;height:265px;aspect-ratio:auto}.empty-stage{max-width:100%}.empty-window{width:92px;height:92px;border-radius:27px;margin-bottom:16px;border-width:4px}.empty-window span{font-size:32px}.empty-stage p{font-size:23px;padding:0 12px}.empty-stage button{margin-top:14px}}
.diagnostics{margin:0 8px 8px;border-top:1px solid var(--line);padding:12px 2px;color:var(--muted);font-size:11px}.diagnostics summary{cursor:pointer;color:var(--text);font-weight:700}.diagnostics dl{display:flex;flex-wrap:wrap;gap:10px 25px;margin:14px 0 8px}.diagnostics dt{color:var(--muted);font-size:10px}.diagnostics dd{margin:4px 0 0;color:var(--text);font-weight:700}.diagnostics p{margin:8px 0 0;line-height:1.5}