:root {
  color-scheme: dark;
  --bg: #080a0e;
  --panel: rgba(18, 22, 29, .88);
  --panel-2: #11151b;
  --line: rgba(255,255,255,.11);
  --muted: #a7adb8;
  --text: #f6f8fb;
  --accent: #38dfd0;
  --accent-2: #159e99;
  --shadow: 0 32px 90px rgba(0,0,0,.48);
  --radius: 26px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 70% -10%, #202b38 0, transparent 38%), linear-gradient(180deg,#0a0d12,#06080b 68%); }
button, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(circle at 10% 30%,rgba(25,126,124,.12),transparent 30%), radial-gradient(circle at 90% 60%,rgba(72,90,111,.11),transparent 28%); }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(18px,4vw,58px); border-bottom:1px solid rgba(255,255,255,.07); background:rgba(8,10,14,.78); backdrop-filter:blur(20px); }
.brand img { display:block; width:clamp(170px,20vw,270px); max-height:72px; object-fit:contain; object-position:left center; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button,.cast-button { border:1px solid var(--line); background:rgba(255,255,255,.055); cursor:pointer; transition:.2s ease; }
.icon-button:hover,.cast-button:hover { border-color:rgba(56,223,208,.55); background:rgba(56,223,208,.1); transform:translateY(-1px); }
.icon-button { width:48px;height:48px;border-radius:15px;display:grid;place-items:center; }
.icon-button svg { width:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.cast-button { min-height:48px;border-radius:15px;padding:0 18px;display:flex;align-items:center;gap:10px;font-weight:750; }
.cast-button svg { width:22px;fill:currentColor; }
.cast-button.connected { color:#05100f;background:var(--accent);border-color:var(--accent); }
.page-shell { position:relative; width:min(1500px,calc(100% - 32px)); margin:32px auto 70px; }
.viewer-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
.image-stage { position:relative; aspect-ratio:16/9; min-height:460px; max-height:75vh; overflow:hidden; background:#050608; }
.image-stage>img { width:100%;height:100%;object-fit:contain;display:block;transition:opacity .28s ease,transform .6s ease; }
.image-stage.changing>img { opacity:.35;transform:scale(1.006); }
.image-vignette { position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.92),transparent 48%);pointer-events:none; }
.stage-logo { position:absolute;left:clamp(22px,3vw,48px);top:clamp(18px,3vw,38px);filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.stage-logo img { width:clamp(145px,16vw,250px);max-height:95px;object-fit:contain;object-position:left center; }
.image-info { position:absolute;left:clamp(24px,4vw,66px);right:clamp(24px,4vw,66px);bottom:clamp(26px,4vw,62px);max-width:900px;text-shadow:0 2px 18px rgba(0,0,0,.8); }
.eyebrow { margin:0 0 8px;color:var(--accent);font-size:.77rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase; }
.image-info h1 { margin:0;font-size:clamp(2rem,4vw,4.4rem);line-height:1.02;letter-spacing:-.045em; }
.subtitle { margin:13px 0 0;font-size:clamp(1rem,1.65vw,1.5rem);color:#edf0f3; }
.caption { margin:8px 0 0;color:#bec5ce;font-size:clamp(.9rem,1.1vw,1.05rem); }
.counter { position:absolute;right:clamp(20px,3vw,42px);top:clamp(18px,3vw,38px);padding:9px 13px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);font-weight:750; }
.stage-nav { position:absolute;top:50%;translate:0 -50%;width:54px;height:74px;border:0;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);font-size:2.5rem;cursor:pointer;opacity:0;transition:.2s;border-radius:16px; }
.image-stage:hover .stage-nav,.stage-nav:focus-visible { opacity:1; }
.stage-nav-prev { left:18px; }.stage-nav-next { right:18px; }
.control-deck { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:20px 24px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)); }
.primary-controls { display:flex;align-items:center;gap:9px; }
.round-control,.play-control { display:grid;place-items:center;border:1px solid var(--line);background:#161b22;cursor:pointer;transition:.2s; }
.round-control:hover,.play-control:hover { border-color:var(--accent);transform:translateY(-1px); }
.round-control { width:45px;height:45px;border-radius:50%; }.round-control svg { width:20px;fill:currentColor; }
.play-control { width:60px;height:60px;border-radius:50%;background:var(--text);color:#07090c; }.play-control svg { width:24px;fill:currentColor; }.pause-icon { display:none; }.play-control.playing .play-icon{display:none}.play-control.playing .pause-icon{display:block}
.status-copy { min-width:0;display:flex;flex-direction:column;gap:4px; }.status-copy strong { font-size:1.03rem; }.status-copy span { color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.speed-control { display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.speed-control select { color:var(--text);background:#11161c;border:1px solid var(--line);border-radius:11px;padding:10px 34px 10px 12px; }
.collection-panel { margin-top:24px;padding:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:var(--radius);background:rgba(14,18,24,.84); }
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px; }.section-heading h2 { margin:0;font-size:clamp(1.6rem,2.8vw,2.45rem);letter-spacing:-.035em; }.section-heading>p { margin:0;color:var(--muted); }
.thumbnail-rail { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
.thumbnail { position:relative;min-height:150px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0b0e12;cursor:pointer;text-align:left;padding:0; }
.thumbnail img { width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:.3s; }.thumbnail:hover img { transform:scale(1.025); }.thumbnail.active { outline:2px solid var(--accent);outline-offset:2px; }
.thumbnail span { position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-weight:750; }
.how-it-works { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px; }.how-it-works article { display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(15,19,25,.74); }.how-it-works article>span { color:var(--accent);font-weight:900; }.how-it-works strong { display:block;margin-bottom:6px; }.how-it-works p { margin:0;color:var(--muted);line-height:1.55; }
.toast { position:fixed;left:50%;bottom:28px;z-index:50;translate:-50% 20px;padding:12px 17px;border:1px solid var(--line);border-radius:13px;background:#151a21;box-shadow:0 18px 50px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.25s; }.toast.show { opacity:1;translate:-50% 0; }
@media (max-width:850px){.page-shell{width:min(100% - 20px,1500px);margin-top:14px}.topbar{padding:12px 14px}.brand img{width:170px}.cast-button span{display:none}.cast-button{width:48px;padding:0;justify-content:center}.image-stage{aspect-ratio:4/3;min-height:430px}.control-deck{grid-template-columns:1fr auto}.status-copy{grid-row:2;grid-column:1/-1}.how-it-works{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.section-heading>p{max-width:520px}}
@media (max-width:560px){.icon-button{display:none}.brand img{width:155px}.page-shell{width:100%;margin:0 auto 40px}.viewer-card,.collection-panel{border-radius:0;border-left:0;border-right:0}.image-stage{min-height:500px;aspect-ratio:3/4}.image-stage>img{object-fit:cover}.stage-logo{left:18px;top:18px}.stage-logo img{width:150px}.image-info{left:20px;right:20px;bottom:28px}.image-info h1{font-size:2.25rem}.control-deck{padding:16px}.speed-control{display:none}.primary-controls{justify-content:center}.collection-panel{margin-top:12px;padding:22px 16px}.thumbnail-rail{grid-template-columns:1fr 1fr}.stage-nav{display:none}.how-it-works{padding:0 10px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}