:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f3f4f4;background:#111315;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f47e61;outline-offset:4px}aside{position:fixed;inset:0 auto 0 0;width:245px;padding:40px 25px;border-right:1px solid #292b2d;background:#141618}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-1px}.brand b{display:grid;place-items:center;border-radius:11px;background:#fa7152;width:38px;height:32px;font-size:18px;color:#141618}.muted{color:#8d9196}.nav-label{margin:65px 15px 18px;font-size:10px;font-weight:700;letter-spacing:2px;color:#787c80}nav{display:grid;gap:8px}.nav{text-align:left;border:0;background:transparent;color:#91979c;border-radius:10px;padding:17px 14px;font-size:14px}.nav.active{color:#fb8b70;background:#fa715212}.nav span{float:right;font-size:11px}.aside-bottom{position:absolute;bottom:36px;font-size:12px;color:#c3c7cb;line-height:2}.aside-bottom small{color:#72777c}.dot{display:inline-block;width:6px;height:6px;background:#81b996;border-radius:50%;margin-right:7px}main{margin-left:245px;padding:35px 48px;max-width:1700px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#858b90}.tag{border:1px solid #34373a;border-radius:20px;padding:8px 12px;font-size:9px;letter-spacing:1.5px;color:#9da3a8}.hero{display:flex;position:relative;overflow:hidden;min-height:310px;border:1px solid #393431;border-radius:20px;background:linear-gradient(115deg,#252222,#1e1c1c 60%,#38231e);padding:42px}.hero-copy{position:relative;z-index:1}.accent{color:#f28d75}h1{font-size:clamp(32px,3.7vw,54px);line-height:1.12;letter-spacing:-2px;font-weight:600;margin:23px 0 18px}h1 em{font-style:normal;color:#f79278}.hero p{font-size:13px;color:#aca4a0;line-height:1.8;margin:0}.hero-art{position:absolute;inset:0 0 0 55%;display:grid;place-items:center}.orbit{position:absolute;width:280px;height:280px;border:1px solid #ffb69a14;border-radius:50%}.orbit.two{width:380px;height:380px}.play-mark{display:grid;place-items:center;width:110px;height:110px;background:linear-gradient(135deg,#f49273,#c45a43);border-radius:32px;transform:rotate(-10deg);font-size:45px;color:#2b1c18;box-shadow:0 25px 60px #f2763920}.hero-art>span{position:absolute;bottom:35px;font-size:8px;color:#b68d7e;letter-spacing:3px}form{display:flex;align-items:center;gap:14px;margin-top:26px;background:#1b1e21;border:1px solid #35393d;border-radius:12px;padding:8px 8px 8px 20px}form>span{font-size:26px;color:#989ca1}input{flex:1;min-width:0;background:transparent;border:0;color:white;font:inherit;font-size:14px;padding:12px 0}form button{padding:14px 22px;border:0;border-radius:8px;background:#f58a6d;color:#201714;font-weight:650}form button span{margin-left:15px}#status{min-height:18px;font-size:12px;color:#92999e;margin:12px 4px 35px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:25px 0}h2{font-size:23px;letter-spacing:-.5px;margin:10px 0}#grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.empty{grid-column:1/-1;border:1px dashed #363a3d;border-radius:14px;padding:38px;text-align:center;color:#959ba0}.empty b{display:block;color:#d9dcdf;font-size:17px;margin-bottom:10px}.empty p{font-size:13px;line-height:1.8;max-width:510px;margin:auto}.card{min-width:0}.card-open{display:block;width:100%;padding:0;text-align:left;background:none;border:0;color:inherit}.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#252a2e;border-radius:12px}.card h3{font-size:14px;line-height:1.5;margin:10px 0 4px;overflow-wrap:anywhere}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#949ba0}.save{border:1px solid #383d42;background:#202428;color:#e5b4a4;min-width:44px;min-height:44px;border-radius:9px;font-size:21px}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #292d30;margin-top:60px;padding-top:22px;font-size:11px;color:#737b81}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1500px){#grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1050px){aside{width:205px;padding:30px 18px}main{margin-left:205px;padding:30px}#grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:30px}.hero-art{left:65%;opacity:.55}}@media(max-width:700px){aside{position:static;width:auto;border-right:0;border-bottom:1px solid #292b2d;padding:18px}.brand{font-size:21px}.nav-label,.aside-bottom{display:none}nav{display:flex;gap:4px;margin-top:18px}.nav{padding:13px 9px;font-size:12px;flex:1;white-space:nowrap}.nav span{display:none}main{margin:0;padding:22px 18px}header{margin-bottom:20px}.hero{min-height:300px;padding:27px}.hero-art{opacity:.15;left:30%}.hero-copy{z-index:1}h1{font-size:39px}.hero p{font-size:12px}input{font-size:12px}form{padding-left:12px;gap:8px}form button{padding:14px}form button span{display:none}footer{flex-direction:column}.empty{padding:28px 18px}#grid{gap:16px}.card h3{font-size:12px}}

.diagnostic{background:none;border:0;color:#f79278;font-size:12px;padding:8px;min-height:44px}main>header{margin-bottom:15px}main>form{margin-top:0}

/* The video owns the viewport; controls overlay it and never resize the picture. */
#player-dialog{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden;background:#000;color:#fff;isolation:isolate}
#player-dialog::backdrop{background:#000}
#player-area{position:absolute;inset:0;background:#000}
#player-area canvas{display:block;width:100%;height:100%;object-fit:contain}
#show-controls{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:default;touch-action:manipulation;z-index:1}
.dialog-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 12px 20px;background:linear-gradient(#000c,#0008,transparent);z-index:3}
.dialog-header h2{flex:1;min-width:0;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.dialog-header button{flex:0 0 48px;height:48px;border:0;border-radius:8px;background:#20252acc;color:white;font-size:24px}
.player-bottom{position:absolute;inset:auto 0 0;padding:20px 12px 8px;background:linear-gradient(transparent,#000b 20px,#000e);z-index:3}
.control-row{display:flex;align-items:center;gap:12px;min-height:48px}
.control-row button,#quality,#retry-player{font:inherit;font-size:14px;color:#fff;background:#262d32;border:1px solid #535c63;border-radius:8px;padding:10px 16px;min-height:48px;touch-action:manipulation}
#quality{margin-left:auto;max-width:155px}
#position{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
#seek{display:block;width:100%;height:40px;min-height:40px;margin:0;padding:0;accent-color:#f58a6d;cursor:pointer;touch-action:pan-x}
#player-status{display:none;margin:6px 0 0;color:#c4cbd0;font-size:12px;line-height:18px;overflow-wrap:anywhere}
#player-dialog.show-info #player-status{display:block}
#player-message{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:max-content;max-width:min(560px,calc(100% - 32px));padding:20px 24px;border-radius:12px;background:#20262eef;text-align:center;line-height:1.5;z-index:4}
#player-dialog[data-state=loading] #player-message:before{content:'';display:block;width:24px;height:24px;margin:0 auto 12px;border:3px solid #ffffff40;border-top-color:#f58a6d;border-radius:50%;animation:loading-spin 1s linear infinite}
#retry-player{display:block;margin:16px auto 0}
#retry-player[hidden],#player-controls[hidden],#youtube-link{display:none}
#player-dialog[data-state=playing] #player-message,#player-dialog[data-state=paused] #player-message,#player-dialog[data-state=ended] #player-message{display:none}
.dialog-header,.player-bottom{opacity:1;transition:opacity .18s ease}
#player-dialog.controls-hidden .dialog-header,#player-dialog.controls-hidden .player-bottom{opacity:0;visibility:hidden;pointer-events:none}
#player-dialog.controls-hidden #show-controls{cursor:pointer}
button:disabled,select:disabled{opacity:.55;cursor:default}
button:focus-visible,select:focus-visible,#seek:focus-visible{outline:3px solid #f58a6d;outline-offset:2px}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dialog-header,.player-bottom{transition:none}#player-dialog[data-state=loading] #player-message:before{animation:none}}
@media(max-width:650px){.dialog-header{padding:4px 8px 16px}.dialog-header h2{font-size:13px}.player-bottom{padding:16px 8px 6px}.control-row{gap:6px}.control-row button,#quality{padding:8px 10px;font-size:13px}#quality{max-width:110px}#position{font-size:11px}#player-info{min-width:44px}}
@media(max-width:420px){#position{position:absolute;top:15px;right:10px;padding:2px 4px;background:#0009}#seek{width:calc(100% - 105px)}.control-row{justify-content:space-between}#quality{margin-left:0}}

.section-actions{display:flex;align-items:center;gap:12px;font-size:12px}.section-actions button{min-height:44px;padding:8px 12px;border:1px solid #484039;border-radius:8px;color:#f7aa8c;background:#29211f;font-size:13px}.section-actions button[hidden],#channel-tools[hidden]{display:none}#channel-tools{margin-bottom:24px}#channel-tools form{margin-top:0}#channel-tools p{color:#a5acb2;font-size:13px;line-height:1.6;margin:12px 3px}.channel-card{display:flex;align-items:center;gap:8px;border:1px solid #343a3e;border-radius:12px;background:#1b1f23;padding:8px}.channel-open{flex:1;display:flex;align-items:center;gap:14px;min-width:0;min-height:76px;text-align:left;background:none;border:0;color:#f3f4f4;padding:6px}.channel-avatar{display:grid;place-items:center;flex:0 0 48px;height:48px;background:#40302a;color:#f5a88f;border-radius:50%;font-size:23px}.channel-open b{display:block;font-size:15px;overflow-wrap:anywhere}.channel-open small{display:block;color:#a5acb2;font-size:12px;margin-top:7px}.channel-remove,.save-channel{flex:0 0 44px;min-height:44px;border:1px solid #383d42;border-radius:8px;background:#202428;color:#e5b4a4;font-size:20px}.channel-remove{border:0;color:#abb2b8}.channel-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.channel-name{font:inherit;min-height:44px;border:0;background:none;color:#a9b2b9;padding:4px 0;text-align:left}.card-bottom{gap:6px}.save{flex:0 0 44px}.channel-open>span:last-child{min-width:0}@media(max-width:700px){nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{align-items:flex-start;gap:12px}.section-actions{flex-direction:column;align-items:flex-end}#grid.channel-grid{grid-template-columns:1fr}#channel-form{flex-wrap:wrap;padding:8px 12px}#channel-form input{flex-basis:160px}#channel-form button{flex:0 0 auto}}
#channel-results[hidden]{display:none}#channel-results{margin:20px 0 32px}#channel-results h2{font-size:18px;margin-bottom:16px}#channel-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#channel-results .channel-open{min-height:64px}#channel-results .save-channel{margin-right:4px}@media(max-width:700px){#channel-results-grid{grid-template-columns:1fr}}
/* Ambient color is blurred in a tiny 48×27 worker canvas, never at screen resolution. */
#player-area .ambient-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transform:scale(1.06);transition:opacity .3s ease;pointer-events:none}
#player-area .video-canvas{position:absolute;inset:0;z-index:1}
#player-dialog.ambient-on .ambient-canvas{opacity:.65}
#ambient-toggle[aria-pressed=true]{background:#53392d;border-color:#f58a6d;color:#ffccb7}
.nav{min-height:48px}
@media(max-width:800px){#ambient-toggle span{display:none}#ambient-toggle{min-width:48px;padding:8px;font-size:22px}}
@media(max-width:420px){#player-info{padding:8px;min-width:44px}.control-row{gap:4px}#quality{max-width:95px}}
@media(prefers-reduced-motion:reduce){#player-area .ambient-canvas{transition:none}}
#load-more{display:block;min-height:48px;margin:32px auto 0;padding:12px 26px;border:1px solid #515b63;border-radius:10px;background:#262d32;color:#fff}#load-more[hidden]{display:none}

/* Translucent controls stay on small, independently composited surfaces. */
:root{--glass-fill:linear-gradient(145deg,#ffffff0d,#ffffff04 58%,#ffffff08);--glass-border:#ffffff1c;--glass-shadow:inset 0 1px 0 #ffffff0d,0 2px 8px #0002}
body{background:radial-gradient(ellipse at 80% 0,#4b3a3b55,transparent 50%),radial-gradient(ellipse at 5% 75%,#263f4c44,transparent 50%),#111315}
button,input,select{font-family:inherit}
.nav,form,.save,.save-channel,.channel-remove,.section-actions button,#load-more,.control-row button,#quality,#retry-player,.dialog-header button{background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:14px;color:#f3f6f8;-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05)}
.nav{transition:background .15s ease,border-color .15s ease}.nav.active{background:linear-gradient(135deg,#ffffff16,#ffffff09);border-color:#ffffff20;color:#fff}
form{border-radius:14px;background:linear-gradient(145deg,#ffffff09,#ffffff03)}
form button{background:linear-gradient(145deg,#ffffff18,#ffffff08);border:1px solid #ffffff24;box-shadow:inset 0 1px 0 #ffffff24,0 2px 6px #0002;border-radius:13px;color:#fff;min-height:48px}
button:not(:disabled):hover{border-color:#ffffff38}
button:not(:disabled):active{filter:brightness(1.1)}
button.channel-name,.card-open,.channel-open,.diagnostic,#show-controls{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.channel-card{background:linear-gradient(145deg,#ffffff0d,#ffffff03);border-color:#ffffff20;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff12}
.channel-avatar{background:linear-gradient(145deg,#ffffff15,#ffffff07);border:1px solid #ffffff25;color:#fff;box-shadow:inset 0 1px 0 #ffffff25}
.channel-remove{background:#ffffff08}.save[aria-pressed=true],.save-channel[aria-pressed=true],#save-current-channel[aria-pressed=true]{background:linear-gradient(145deg,#ffd1b833,#f58a6d16);border-color:#ffd1b860;color:#ffd6c2}
.dialog-header{padding:8px 12px;background:transparent;pointer-events:none}
.dialog-header h2{flex:0 1 auto;padding:12px 18px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(140deg,#20262e80,#20262e38);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05);pointer-events:auto}
.dialog-header button{margin-left:auto;background:linear-gradient(140deg,#424b5488,#151a2055);pointer-events:auto;border-radius:50%}
.player-bottom{padding:12px;background:transparent;pointer-events:none}
#player-controls{pointer-events:auto}
.control-row{padding:7px 9px;min-height:62px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(145deg,#202832b8,#111820a6);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05)}
.control-row button,#quality{background:linear-gradient(145deg,#ffffff10,#ffffff05);border-radius:12px;box-shadow:inset 0 1px 0 #ffffff20;-webkit-backdrop-filter:none;backdrop-filter:none}
#quality option{background:#202830;color:#fff}
#ambient-toggle[aria-pressed=true],#player-info[aria-expanded=true]{background:linear-gradient(145deg,#ffffff20,#ffffff0b);border-color:#ffffff40;color:#fff;box-shadow:inset 0 1px 0 #ffffff18}
#seek{accent-color:#eaf3ff;filter:drop-shadow(0 1px 3px #0008)}
#player-status{pointer-events:auto;background:#151c24bb;border:1px solid #ffffff25;border-radius:14px;padding:6px 12px;color:#e1e7eb}
#player-message{background:linear-gradient(145deg,#303d4ce8,#151d28e0);border:1px solid #ffffff20;box-shadow:var(--glass-shadow);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#player-dialog.controls-hidden .dialog-header,#player-dialog.controls-hidden .player-bottom{display:none}
@media(max-width:650px){.control-row{gap:5px;padding:6px}.player-bottom{padding:8px}.dialog-header{padding:6px 8px}.dialog-header h2{padding:10px 12px}.control-row button,#quality{padding:8px 9px}}
@media(max-width:420px){.control-row{gap:4px;padding:5px}.control-row button,#quality{padding:8px;min-width:44px}#quality{max-width:88px}#position{top:10px;right:12px;border-radius:10px;background:#1a2433b3}#ambient-toggle{min-width:44px}}
@media(prefers-reduced-transparency:reduce){.control-row,.dialog-header h2,.dialog-header button,#player-message{background:#202830}.nav,form,.save,.save-channel{background:#252c32}}
@media(min-width:651px) and (max-width:800px){.control-row{gap:8px}#quality{max-width:120px}}
#player-area{overflow:hidden}

/* Compact glass: one quiet surface per group, without nested button tiles. */
.nav,form,.save,.save-channel,.channel-remove,.section-actions button,#load-more,#retry-player{border-radius:8px}
.nav{padding:10px 12px;min-height:44px;border-color:transparent;box-shadow:none;background:transparent}
.nav.active{border-color:#ffffff18}
form{padding:3px 4px 3px 14px;gap:10px}
form input{padding:10px 0}
form button{min-height:44px;padding:9px 16px;border-radius:6px;box-shadow:none}
.channel-card{border-radius:10px;padding:4px;box-shadow:none}
.channel-open{min-height:64px;gap:10px;padding:4px}
#channel-results .channel-open{min-height:56px}
.channel-avatar{flex-basis:38px;height:38px;font-size:19px;box-shadow:none}
.channel-open small{margin-top:4px}
.save,.save-channel,.channel-remove{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.dialog-header{padding:4px 8px;gap:8px;background:linear-gradient(#0007,transparent)}
.dialog-header h2{padding:4px 6px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px;font-weight:500}
.dialog-header button{flex-basis:44px;height:44px;border-radius:8px;font-size:22px;box-shadow:none;background:#20262e60}
.player-bottom{padding:4px 8px 6px}
.control-row{min-height:46px;padding:0 4px;gap:6px;border-radius:9px;border-color:#ffffff18;box-shadow:none;background:linear-gradient(145deg,#202832a8,#11182096)}
.control-row button,#quality{min-height:44px;padding:7px 12px;border-radius:6px;border-color:transparent;background:transparent;box-shadow:none;font-size:13px}
#ambient-toggle[aria-pressed=true],#player-info[aria-expanded=true]{background:#ffffff10;border-color:transparent;box-shadow:none}
#player-status{border-radius:6px;padding:4px 8px;font-size:11px}
#seek{height:32px;min-height:32px;filter:none}
@media(max-width:650px){.dialog-header h2{padding:4px;font-size:13px}.control-row{gap:4px;padding:0 3px}.control-row button,#quality{padding:7px 8px}.player-bottom{padding:4px 6px 6px}}
@media(max-width:420px){.control-row{gap:2px}.control-row button,#quality{padding:7px 6px;min-width:44px}#quality{max-width:84px}#position{top:7px;right:9px}}