:root {
  color-scheme:dark;
  --ink:#f2f5ee;
  --muted:#a9b1aa;
  --ground:#080b0a;
  --panel:#101512;
  --acid:#b7ff38;
  --coral:#ff6457;
  --cyan:#60dbe5;
  --line:rgba(255,255,255,.16);
}

* { box-sizing:border-box; }
html { background:var(--ground); scroll-behavior:smooth; }
body { margin:0; overflow:hidden; background:var(--ground); color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }

.skip-link { position:fixed; left:12px; top:-60px; z-index:40; padding:10px 14px; background:var(--acid); color:#081006; font-weight:800; }
.skip-link:focus { top:12px; }

.topbar { position:fixed; inset:0 0 auto; z-index:30; height:62px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:rgba(8,11,10,.86); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand b { color:var(--acid); font:900 18px Consolas,monospace; }
.brand span { color:var(--muted); font:800 11px Consolas,monospace; }
.topbar nav { justify-self:center; display:flex; align-items:center; gap:24px; }
.topbar nav a { text-decoration:none; color:var(--muted); font:800 11px Consolas,monospace; }
.topbar nav a:hover,.topbar nav a:focus-visible { color:var(--ink); }
.feed-signal { display:flex; align-items:center; gap:8px; color:var(--muted); font:800 12px Consolas,monospace; }
.feed-signal i { width:8px; height:8px; background:var(--coral); box-shadow:0 0 16px rgba(255,100,87,.7); }

.short-feed { height:100dvh; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none; }
.short-feed::-webkit-scrollbar { display:none; }
.short-slide,.empty-state { min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; position:relative; }
.short-slide { display:grid; place-items:center; padding:78px 20px 16px; background:var(--ground); }

.video-stage { position:relative; width:min(480px, calc((100dvh - 98px) * 9 / 16), calc(100vw - 40px)); aspect-ratio:9 / 16; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#050706; box-shadow:0 30px 80px rgba(0,0,0,.46); }
.video-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.78)); }
.video-stage img,.video-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.video-stage iframe { z-index:1; background:#050706; }
.video-stage iframe + img { display:none; }
.video-loader { position:absolute; inset:0; display:grid; place-items:center; }
.video-loader i { width:38px; height:38px; border:3px solid rgba(255,255,255,.15); border-top-color:var(--acid); border-radius:50%; animation:spin .9s linear infinite; }
.video-stage.is-ready .video-loader { display:none; }

.short-overlay { position:absolute; z-index:4; left:50%; bottom:20px; width:min(480px, calc((100dvh - 98px) * 9 / 16), calc(100vw - 40px)); transform:translateX(-50%); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; padding:18px 20px 20px; border-top:1px solid rgba(183,255,56,.46); background:#050806; box-shadow:0 -14px 32px rgba(0,0,0,.28); pointer-events:none; }
.short-copy,.short-actions { pointer-events:auto; }
.short-status { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--acid); font:900 10px Consolas,monospace; }
.short-status i { width:7px; height:7px; background:var(--acid); }
.short-copy h2 { margin:0; max-width:360px; font-size:clamp(23px, 4vh, 34px); line-height:1.02; letter-spacing:0; overflow-wrap:anywhere; }
.short-copy > p { margin:10px 0 12px; max-width:360px; color:#d3d9d4; font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.creator-line { display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; font-size:12px; }
.creator-line strong { color:var(--ink); }
.creator-line span { color:var(--muted); }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tag-row span { border-left:2px solid var(--cyan); padding-left:6px; color:#c4ccc5; font:700 9px Consolas,monospace; }
.short-copy small { display:block; margin-top:9px; color:#818a83; font:700 9px Consolas,monospace; }
.short-actions { display:grid; gap:12px; }
.short-actions button { width:64px; min-height:64px; display:grid; place-items:center; gap:3px; padding:8px 4px; border:1px solid rgba(255,255,255,.22); border-radius:4px; background:rgba(8,11,10,.68); color:var(--ink); cursor:pointer; }
.short-actions button:hover,.short-actions button:focus-visible { border-color:var(--acid); background:#111710; }
.short-actions span { font-size:24px; line-height:1; }
.short-actions b { font:800 8px Consolas,monospace; }
.next-cue { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); color:var(--acid); animation:nudge 1.8s ease-in-out infinite; }

.empty-state { display:grid; align-content:center; justify-items:center; gap:16px; padding:94px 24px 40px; text-align:center; background:radial-gradient(circle at 50% 42%, rgba(96,219,229,.06), transparent 28%), var(--ground); }
.empty-visual { position:relative; width:min(300px,70vw); aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); }
.empty-visual::before,.empty-visual::after { content:""; position:absolute; inset:16%; border:1px solid rgba(183,255,56,.25); transform:rotate(45deg); }
.empty-visual::after { inset:30%; border-color:rgba(255,100,87,.4); animation:orbit 8s linear infinite; }
.empty-visual span { color:var(--acid); font:900 60px Consolas,monospace; }
.empty-visual i { position:absolute; width:8px; height:8px; background:var(--cyan); }
.empty-visual i:nth-of-type(1) { left:18%; top:30%; }
.empty-visual i:nth-of-type(2) { right:20%; bottom:22%; background:var(--coral); }
.empty-visual i:nth-of-type(3) { right:26%; top:17%; background:var(--acid); }
.eyebrow { margin:0; color:var(--acid); font:900 11px Consolas,monospace; }
.empty-state h1 { margin:0; max-width:760px; font-size:clamp(38px, 7vw, 76px); line-height:.96; letter-spacing:0; }
.empty-state > p:not(.eyebrow) { margin:0; max-width:540px; color:var(--muted); line-height:1.6; }
.empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.empty-actions a,.empty-actions button,.copy-command { min-height:46px; padding:0 16px; border:1px solid var(--acid); border-radius:4px; background:transparent; color:var(--ink); text-decoration:none; font:800 11px Consolas,monospace; cursor:pointer; }
.empty-actions a { display:grid; place-items:center; background:var(--acid); color:#081006; }

.task-dialog { width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; border:1px solid var(--acid); border-radius:6px; background:#0d120f; color:var(--ink); }
.task-dialog::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(8px); }
.task-dialog h2 { margin:14px 0; font-size:28px; letter-spacing:0; }
.task-dialog pre { margin:0 0 18px; padding:16px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border-left:3px solid var(--cyan); background:#070a08; color:#d5dbd5; font:12px/1.6 Consolas,monospace; }
.dialog-close { position:absolute; right:12px; top:10px; width:36px; height:36px; border:0; background:transparent; color:var(--muted); font-size:28px; cursor:pointer; }
.copy-command { width:100%; background:var(--acid); color:#081006; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes nudge { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,6px); } }
@keyframes orbit { to { transform:rotate(405deg); } }

@media (max-width:700px) {
  .topbar { grid-template-columns:auto 1fr auto; gap:10px; height:58px; }
  .topbar nav { gap:12px; justify-self:end; }
  .topbar nav a:nth-child(2),.feed-signal i { display:none; }
  .brand span { display:none; }
  .short-slide { padding:58px 0 0; place-items:stretch; }
  .video-stage { width:100%; height:calc(100dvh - 58px); aspect-ratio:auto; border:0; box-shadow:none; }
  .short-overlay { bottom:0; width:100%; padding:15px 14px max(18px, env(safe-area-inset-bottom)); }
  .short-copy h2 { font-size:24px; }
  .short-copy > p { margin:8px 0 10px; max-width:calc(100vw - 94px); font-size:13px; -webkit-line-clamp:2; }
  .creator-line span,.tag-row,.short-copy small { display:none; }
  .short-actions button { width:58px; min-height:58px; }
  .next-cue { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}