:root{color-scheme:dark;--ink:#eaf1f5;--muted:#a9b9c5;--line:rgba(213,235,246,.16);--surface:rgba(8,18,28,.91);--accent:#99d6e1;--warm:#e9d9bc;font-family:"Clintware Sans","Segoe UI",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030a11;color:var(--ink)}
button,select,input{font:inherit}
button,a,select,input{outline-offset:3px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent)}
button{cursor:pointer;background:rgba(15,36,49,.78);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.72rem .95rem}
button:hover{border-color:rgba(153,214,225,.7);background:rgba(31,65,76,.88)}
a{color:var(--accent)}
.stage{position:relative;width:100%;height:100dvh;min-height:390px;overflow:hidden;background:radial-gradient(ellipse at 38% 44%,#163048,#030910 65%)}
#scenic-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent}
.screen-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,7,13,.68) 0%,rgba(2,9,15,.08) 52%,rgba(2,9,15,.22) 100%),linear-gradient(0deg,rgba(2,8,13,.86),transparent 33%)}
.brand{position:absolute;z-index:3;left:clamp(1.1rem,3vw,3rem);top:clamp(1.2rem,3vh,2.6rem);display:flex;align-items:center;gap:.75rem;letter-spacing:.17em;font-size:.72rem;font-weight:700;text-shadow:0 2px 14px #000}
.brand a{text-decoration:none;color:#fff;letter-spacing:.31em}
.brand-divider{opacity:.35}
.brand span:last-child{color:var(--accent)}
.playing{position:absolute;z-index:2;left:clamp(1.1rem,3vw,3rem);bottom:9rem;max-width:min(600px,calc(100% - 470px));text-shadow:0 2px 15px #0009;pointer-events:none}
.eyebrow{font-size:.63rem;letter-spacing:.24em;color:var(--accent);font-weight:800}
.playing h1{font-size:clamp(1.7rem,3.2vw,3.6rem);line-height:1.09;font-weight:560;letter-spacing:-.03em;margin:.5rem 0}
.playing p{font-size:clamp(.87rem,1.35vw,1.06rem);margin:.4rem 0 .7rem;color:#e7edef}
.credit-line{font-size:.75rem;letter-spacing:.03em;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;color:#bccbd3;pointer-events:auto}
.credit-line a{color:#f0e2c8}
.toolbar{position:absolute;z-index:3;left:clamp(1.1rem,3vw,3rem);right:430px;bottom:3.9rem;display:flex;gap:.42rem;overflow-x:auto;scrollbar-width:thin;padding:.5rem 0}
.toolbar button{white-space:nowrap;font-size:.78rem;padding:.72rem .88rem;backdrop-filter:blur(12px);background:rgba(5,18,28,.72)}
.toolbar button[aria-pressed=true]{background:#164455;color:#fff;border-color:var(--accent)}
.library-toggle{position:absolute;right:25px;top:19px;z-index:7;font-size:.75rem;letter-spacing:.03em;border-color:rgba(153,214,225,.45)}
.library{position:absolute;z-index:6;top:0;right:0;height:100%;width:min(405px,94vw);background:var(--surface);border-left:1px solid rgba(176,223,231,.23);box-shadow:-22px 0 70px rgba(0,0,0,.3);backdrop-filter:blur(32px);overflow:auto;overscroll-behavior:contain;padding:3.8rem 1.5rem 1.4rem;transition:transform .35s ease}
.library.closed{transform:translateX(102%);pointer-events:none;visibility:hidden}
.library-header{padding:.4rem 0 1.3rem;border-bottom:1px solid var(--line)}
.library-header h2{font-size:1.45rem;line-height:1.1;letter-spacing:-.025em;margin:.5rem 0 .65rem;font-weight:570}
.library-header p,.local-import p{font-size:.8rem;color:var(--muted);line-height:1.6;margin:0}
section{margin:1.5rem 0}
.categories{display:flex;flex-wrap:wrap;gap:.35rem}
.categories .category{font-size:.7rem;padding:.45rem .68rem;border-radius:20px;background:transparent}
.categories .category.active{background:#195469;border-color:var(--accent)}
.section-header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin:1rem 0 .8rem}
.section-header h3{font-size:.87rem;font-weight:600;margin:0}
.section-header small{color:var(--muted);font-size:.72rem}
.playlist{max-height:min(35dvh,365px);overflow:auto;padding-right:.2rem;display:grid;gap:.4rem;scrollbar-width:thin}
.video-option{width:100%;display:grid;gap:.25rem;text-align:left;padding:.8rem .95rem;background:rgba(255,255,255,.025)}
.video-option.active{border-color:var(--accent);background:rgba(60,131,154,.18)}
.video-option strong{font-size:.84rem;font-weight:600}
.video-option small{font-size:.7rem;line-height:1.4;color:var(--muted)}
.video-tag{font-family:"Clintware Mono",ui-monospace,monospace;font-size:.55rem;color:var(--accent);letter-spacing:.15em}
.empty{font-size:.8rem;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:1rem}
.settings{border-top:1px solid var(--line);padding-top:.3rem}
.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.settings label{font-size:.72rem;color:var(--muted);display:grid;gap:.5rem}
select{appearance:auto;min-width:0;width:100%;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#142835;padding:.7rem}
input[type=range]{width:100%;accent-color:var(--accent);margin:.5rem 0 0}
.local-import{border-top:1px solid var(--line);padding-top:.3rem}
.drop-zone{border:1px dashed rgba(153,214,225,.42);border-radius:12px;padding:.8rem;margin:.9rem 0;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.drop-zone.dragging{background:rgba(153,214,225,.15);border-color:#fff}
.file-button{display:block;border:1px solid rgba(153,214,225,.5);color:var(--accent);padding:.55rem .72rem;border-radius:8px;cursor:pointer;font-size:.73rem}
.file-button:hover{background:rgba(153,214,225,.1)}
.file-button input{display:none}
.drop-zone span{color:var(--muted);font-size:.7rem}
.subtle{background:transparent;color:var(--muted);font-size:.73rem;padding:.52rem .7rem}
.external{border-top:1px solid var(--line);padding-top:.4rem}
.external-sources{display:grid;gap:.55rem}
.external-option{display:grid;gap:.25rem;text-decoration:none;padding:.85rem;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035);transition:background .16s}
.external-option:hover{background:rgba(153,214,225,.1);border-color:var(--accent)}
.external-option small{color:var(--accent);font-size:.65rem;letter-spacing:.05em}
.external-option strong{color:var(--ink);font-size:.83rem}
.external-option span{color:var(--muted);font-size:.71rem;line-height:1.55}
.footnote{font-size:.69rem;color:var(--muted);line-height:1.55}
footer{padding:1.1rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;border-top:1px solid var(--line);font-size:.67rem;letter-spacing:.04em}
footer span{color:var(--muted)}
.status{position:absolute;z-index:3;left:clamp(1.1rem,3vw,3rem);right:430px;bottom:.9rem;color:#bfcdd5;font-size:.67rem;margin:0;text-shadow:0 1px 8px #000c}
body.idle .toolbar,body.idle .playing,body.idle .brand,body.idle .status{opacity:0;pointer-events:none;transition:opacity 1.1s}
body.idle .stage:hover .toolbar,body.idle .stage:hover .playing,body.idle .stage:hover .brand,body.idle .stage:hover .status{opacity:1;pointer-events:auto}
@media(max-width:950px){.library{width:min(370px,93vw)}.playing{max-width:calc(100% - 390px)}.toolbar,.status{right:390px}}
@media(max-width:650px){.library{height:min(76dvh,670px);top:auto;bottom:0;width:100%;border-left:0;border-top:1px solid var(--line);padding:1.5rem 1rem 1.5rem;box-shadow:0 -20px 60px #0008}.library.closed{transform:translateY(102%)}.library-toggle{top:14px;right:14px}.brand{top:1.3rem;font-size:.63rem;left:1rem}.playing{left:1rem;max-width:calc(100% - 2rem);bottom:9rem}.playing h1{font-size:1.6rem}.toolbar{left:1rem;right:1rem;bottom:4rem}.status{left:1rem;right:1rem;bottom:1rem}.library:not(.closed)~.status{display:none}.stage:has(.library:not(.closed)) .playing{opacity:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.library,.external-option,body.idle .toolbar,body.idle .playing{transition:none}}

/* Source-first clarity: do not stretch low-resolution pixels or manufacture 4K detail. */
.detail-filters{position:absolute;pointer-events:none;overflow:hidden}
.source-quality{font-size:.69rem;color:#d4edf2;letter-spacing:.025em;margin:.5rem 0 0;opacity:.85}
.detail-settings{margin:.85rem 0}
.detail-note{margin:.55rem 0 0;color:#b1c2c9}
#scenic-video{image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}

.quick-play{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.75rem}
.quick-play a{display:inline-flex;border:1px solid rgba(153,214,225,.32);border-radius:18px;padding:.42rem .7rem;text-decoration:none;font-size:.69rem;color:#d2edf3;background:rgba(153,214,225,.06)}
.quick-play a:hover{border-color:var(--accent);background:rgba(153,214,225,.12)}