:root{
    --bg:        oklch(0.185 0.028 205);
    --bg-grain:  oklch(0.155 0.025 205);
    --panel:     oklch(0.245 0.028 210);
    --panel-2:   oklch(0.295 0.030 212);
    --panel-3:   oklch(0.345 0.030 212);
    --line:      oklch(0.40 0.030 210);
    --line-soft: oklch(0.33 0.028 210);
    --lime:      oklch(0.885 0.205 128);
    --lime-dim:  oklch(0.62 0.14 130);
    --coral:     oklch(0.685 0.205 15);
    --coral-dim: oklch(0.50 0.14 16);
    --amber:     oklch(0.82 0.16 78);
    --text:      oklch(0.955 0.010 130);
    --muted:     oklch(0.70 0.022 208);
    --faint:     oklch(0.55 0.022 208);

    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
    --sp-8:32px; --sp-12:48px; --sp-16:64px;

    --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
    --ease-out-quint: cubic-bezier(0.22,1,0.36,1);

    --mono:'JetBrains Mono',ui-monospace,monospace;
    --disp:'Oswald',system-ui,sans-serif;
    --body:'Space Grotesk',system-ui,sans-serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    font-optical-sizing:auto;
    line-height:1.5;
    min-height:100vh;
    letter-spacing:0.005em;
    background-image:
      radial-gradient(1200px 500px at 80% -10%, oklch(0.30 0.05 200 / 0.5), transparent 70%),
      radial-gradient(900px 500px at -10% 110%, oklch(0.28 0.06 160 / 0.35), transparent 70%);
  }
  ::selection{background:var(--lime);color:var(--bg)}

  h1,h2,h3{text-wrap:balance;font-family:var(--disp);text-transform:uppercase;font-weight:700;line-height:1}

  .wrap{max-width:1080px;margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-16)}

  /* ---------- Top rail ---------- */
  .rail{
    display:flex;align-items:center;gap:var(--sp-4);
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--line-soft);
    margin-bottom:var(--sp-8);
  }
  .status{
    display:flex;align-items:center;gap:var(--sp-2);
    font-family:var(--mono);font-weight:700;font-size:0.72rem;
    letter-spacing:0.14em;text-transform:uppercase;
    padding:5px 10px 4px;border-radius:3px;
    border:1px solid var(--line);color:var(--muted);
    transition:all .3s var(--ease-out-quint);
  }
  .status .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
  .status[data-state="checking"]{border-color:var(--amber);color:var(--amber)}
  .status[data-state="checking"] .dot{background:var(--amber);animation:blink 1s steps(1) infinite}
  .status[data-state="live"]{background:var(--coral);border-color:var(--coral);color:var(--bg)}
  .status[data-state="live"] .dot{background:var(--bg);animation:blink 1.2s steps(1) infinite}
  .status[data-state="off"]{border-color:var(--coral-dim);color:var(--coral)}
  .status[data-state="off"] .dot{background:var(--coral-dim)}
  @keyframes blink{50%{opacity:0.2}}

  .wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;letter-spacing:0.02em;font-size:1.15rem}
  .wordmark span{color:var(--lime)}
  .brand-mark{display:block;width:28px;height:28px;border-radius:7px;flex:0 0 auto;
    box-shadow:0 2px 10px -2px oklch(0.885 0.205 128 / 0.4)}
  .rail-spacer{flex:1}
  .clock{
    font-family:var(--mono);font-size:0.8rem;color:var(--muted);
    letter-spacing:0.06em;font-variant-numeric:tabular-nums;
  }

  /* ---------- Hero ---------- */
  .hero{margin-bottom:var(--sp-8)}
  .eyebrow{
    font-family:var(--mono);font-size:0.72rem;letter-spacing:0.22em;
    text-transform:uppercase;color:var(--lime-dim);margin-bottom:var(--sp-3);
  }
  .hero h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:0.005em}
  .hero h1 em{font-style:normal;color:var(--lime)}
  .hero p{color:var(--muted);max-width:56ch;margin-top:var(--sp-3);font-size:1rem}

  .sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-4)}
  .src-chip{
    font-family:var(--mono);font-size:0.66rem;font-weight:700;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted);
    border:1px solid var(--line-soft);border-radius:99px;padding:4px 11px;
  }

  /* ---------- Feed input ---------- */
  .feed{
    margin-top:var(--sp-8);
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:12px;
    padding:var(--sp-3);
    display:flex;gap:var(--sp-3);align-items:stretch;
    box-shadow:0 20px 60px -30px oklch(0 0 0 / 0.8);
  }
  .feed .in-wrap{flex:1;display:flex;align-items:center;gap:var(--sp-3);padding-left:var(--sp-3);min-width:0}
  .feed .ch{
    font-family:var(--mono);font-size:0.72rem;color:var(--faint);
    letter-spacing:0.1em;white-space:nowrap;border-right:1px solid var(--line-soft);
    padding-right:var(--sp-3);
  }
  .feed input{
    flex:1;background:none;border:none;outline:none;color:var(--text);
    font-family:var(--body);font-size:1.02rem;min-width:0;
  }
  .feed input::placeholder{color:var(--faint)}
  .btn-fetch{
    font-family:var(--disp);text-transform:uppercase;font-weight:700;
    letter-spacing:0.08em;font-size:1rem;
    background:var(--lime);color:var(--bg);
    border:none;border-radius:8px;padding:0 var(--sp-8);cursor:pointer;
    display:flex;align-items:center;gap:8px;
    transition:transform .12s var(--ease-out-quint),filter .18s;
  }
  .btn-fetch:hover{filter:brightness(1.08)}
  .btn-fetch:active{transform:scale(0.97)}
  .btn-fetch:disabled{background:var(--panel-3);color:var(--faint);cursor:not-allowed}

  .hint{margin-top:var(--sp-3);font-family:var(--mono);font-size:0.72rem;color:var(--faint);letter-spacing:0.04em}
  .hint b{color:var(--muted);font-weight:700}

  /* ---------- Stage ---------- */
  .stage{margin-top:var(--sp-8)}
  [hidden]{display:none !important}

  .error{
    background:oklch(0.30 0.09 16);border:1px solid var(--coral-dim);
    border-radius:10px;padding:var(--sp-4) var(--sp-6);
    display:flex;gap:var(--sp-3);align-items:flex-start;
  }
  .error i{color:var(--coral);flex-shrink:0;margin-top:2px}
  .error .msg{font-size:0.92rem}
  .error .msg b{font-family:var(--disp);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:2px}
  .error code{font-family:var(--mono);font-size:0.8rem;color:var(--amber);word-break:break-word}

  .program{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-6);align-items:start}
  .monitor{
    background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;
    overflow:hidden;position:sticky;top:var(--sp-6);
  }
  .thumb{position:relative;aspect-ratio:16/9;background:var(--bg-grain);overflow:hidden}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .thumb .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(oklch(0 0 0/0) 0 3px, oklch(0 0 0/0.10) 3px 4px)}
  .thumb .live{
    position:absolute;top:8px;left:8px;
    font-family:var(--mono);font-weight:700;font-size:0.62rem;letter-spacing:0.14em;
    background:var(--coral);color:var(--bg);padding:3px 6px;border-radius:3px;
    display:flex;align-items:center;gap:5px;
  }
  .thumb .live .d{width:6px;height:6px;border-radius:50%;background:var(--bg);animation:blink 1.2s steps(1) infinite}
  .thumb .dur{
    position:absolute;bottom:8px;right:8px;
    font-family:var(--mono);font-weight:700;font-size:0.72rem;
    background:oklch(0 0 0/0.7);color:var(--text);padding:3px 7px;border-radius:3px;
    font-variant-numeric:tabular-nums;
  }
  .meta{padding:var(--sp-4)}
  .meta .lbl{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.16em;color:var(--faint);text-transform:uppercase}
  .meta h2{font-family:var(--disp);font-size:1.05rem;line-height:1.15;margin-top:6px;text-transform:none;font-weight:600;letter-spacing:0}
  .meta .stats{display:flex;gap:var(--sp-4);margin-top:var(--sp-4);border-top:1px solid var(--line-soft);padding-top:var(--sp-4)}
  .meta .stat{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .meta .stat span{display:block;font-size:0.62rem;letter-spacing:0.12em;color:var(--faint);text-transform:uppercase;margin-bottom:2px}
  .meta .stat b{font-size:0.95rem;color:var(--text);font-weight:700}

  .board-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-4)}
  .board-head h3{font-size:1.1rem;letter-spacing:0.03em}
  .board-head .count{font-family:var(--mono);font-size:0.74rem;color:var(--muted);letter-spacing:0.08em}

  .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;padding:3px;gap:2px;margin-bottom:var(--sp-4)}
  .seg button{
    font-family:var(--mono);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--muted);background:none;border:none;
    padding:6px 14px;border-radius:5px;cursor:pointer;transition:all .16s var(--ease-out-quint);
  }
  .seg button[aria-pressed="true"]{background:var(--panel-3);color:var(--text)}

  .board{display:flex;flex-direction:column;gap:6px}
  .flap{
    display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--sp-4);
    background:var(--panel);border:1px solid var(--line-soft);
    border-radius:8px;padding:var(--sp-3) var(--sp-4);
    cursor:pointer;text-align:left;color:var(--text);width:100%;
    transform-origin:top center;
    animation:flapIn .5s var(--ease-out-expo) both;
    animation-delay:calc(var(--i,0) * 45ms);
    transition:border-color .16s,background .16s,transform .1s;
  }
  @keyframes flapIn{
    0%{opacity:0;transform:perspective(600px) rotateX(-82deg)}
    100%{opacity:1;transform:perspective(600px) rotateX(0)}
  }
  .flap:hover{border-color:var(--line);background:var(--panel-2)}
  .flap:active{transform:scale(0.995)}
  .flap[aria-pressed="true"]{border-color:var(--lime);background:oklch(0.30 0.06 150);box-shadow:inset 0 0 0 1px var(--lime-dim)}
  .flap .res{font-family:var(--mono);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:0.01em;min-width:78px}
  .flap[aria-pressed="true"] .res{color:var(--lime)}
  .flap .kind{display:flex;flex-direction:column;gap:2px;min-width:0}
  .flap .kind .k{font-size:0.9rem;font-weight:500}
  .flap .kind .sub{font-family:var(--mono);font-size:0.68rem;color:var(--faint);letter-spacing:0.06em;text-transform:uppercase}
  .tag{font-family:var(--mono);font-size:0.64rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
  .tag.video{border-color:var(--lime-dim);color:var(--lime)}
  .tag.audio{border-color:var(--amber);color:var(--amber)}
  .flap .size{font-family:var(--mono);font-size:0.82rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:70px}
  .flap .check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0}
  .flap[aria-pressed="true"] .check{background:var(--lime);border-color:var(--lime)}
  .flap .check i{opacity:0;color:var(--bg)}
  .flap[aria-pressed="true"] .check i{opacity:1}

  .dock{
    position:sticky;bottom:0;margin-top:var(--sp-8);
    background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
    padding:var(--sp-4);display:grid;grid-template-columns:auto 1fr auto;
    gap:var(--sp-6);align-items:center;
    box-shadow:0 -20px 50px -30px oklch(0 0 0 / 0.9);
  }
  .tally{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
  .tally .bulb{width:14px;height:14px;border-radius:50%;background:var(--line);box-shadow:0 0 0 3px var(--panel)}
  .dock.armed .tally .bulb{background:var(--amber);box-shadow:0 0 12px var(--amber),0 0 0 3px var(--panel)}
  .dock.live .tally .bulb{background:var(--coral);box-shadow:0 0 16px var(--coral),0 0 0 3px var(--panel);animation:pulse 1s ease-in-out infinite}
  @keyframes pulse{50%{opacity:0.55}}
  .dock.live .tally{color:var(--coral)}

  .readout{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:0}
  .readout .top{display:flex;justify-content:space-between;font-size:0.74rem;color:var(--muted);letter-spacing:0.06em;margin-bottom:6px}
  .readout .top b{color:var(--text)}
  .prog{height:8px;background:var(--bg-grain);border-radius:99px;overflow:hidden;border:1px solid var(--line-soft)}
  .prog i{display:block;height:100%;width:0;background:var(--lime);border-radius:99px;transition:width .2s linear}
  .dock.live .prog i{background:var(--coral)}

  .btn-air{
    font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:0.1em;
    font-size:1.2rem;background:var(--coral);color:var(--bg);
    border:none;border-radius:8px;padding:14px var(--sp-8);cursor:pointer;
    display:flex;align-items:center;gap:10px;white-space:nowrap;
    transition:transform .12s var(--ease-out-quint),filter .18s;
  }
  .btn-air:hover{filter:brightness(1.08)}
  .btn-air:active{transform:scale(0.97)}
  .btn-air:disabled{background:var(--panel-3);color:var(--faint);cursor:not-allowed}

  .sk{background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 50%,var(--panel) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:8px}
  @keyframes shimmer{to{background-position:-200% 0}}
  .sk-board{display:flex;flex-direction:column;gap:6px}
  .sk-row{height:52px}
  .sk-mon{height:270px}

  .empty{text-align:center;padding:var(--sp-16) var(--sp-6);border:1px dashed var(--line-soft);border-radius:12px;color:var(--muted)}
  .empty i{color:var(--line);margin-bottom:var(--sp-4)}
  .empty h3{color:var(--muted);font-size:1.15rem;letter-spacing:0.04em}
  .empty p{max-width:44ch;margin:var(--sp-3) auto 0;font-size:0.92rem;color:var(--faint)}

  @media (max-width:820px){
    .program{grid-template-columns:1fr}
    .monitor{position:static}
    .feed{flex-direction:column}
    .feed .in-wrap{padding:var(--sp-2) var(--sp-3)}
    .btn-fetch{padding:14px;justify-content:center}
    .dock{grid-template-columns:1fr;gap:var(--sp-4);text-align:center}
    .btn-air{justify-content:center}
    .tally{justify-content:center}
  }
  @media (max-width:560px){
    .wrap{padding:var(--sp-4) var(--sp-4) var(--sp-16)}
    .flap{grid-template-columns:auto 1fr auto;gap:var(--sp-3)}
    .flap .size{display:none}
    .meta .stats{flex-wrap:wrap}
  }
  @media (max-width:440px){
    .rail{gap:var(--sp-2)}
    .rail .clock{display:none}                 /* free up room on tiny phones */
    .wordmark{font-size:1rem}
    .brand-mark{width:24px;height:24px}
    .status{padding:4px 8px 3px;font-size:0.64rem}
    .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
    .btn-air{font-size:1rem;padding:12px var(--sp-6)}
    .src-chip{font-size:0.6rem;padding:3px 9px}
  }

  /* --- site footer (legal links + disclaimer) --- */
  .site-foot{margin-top:var(--sp-16);padding-top:var(--sp-6);
    border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;
    align-items:center;justify-content:space-between;gap:var(--sp-4)}
  .site-foot .disclaimer{color:var(--faint);font-size:.82rem;line-height:1.6;
    max-width:60ch;margin:0}
  .site-foot .foot-links{display:flex;gap:var(--sp-2);flex-wrap:wrap}
  .site-foot .foot-links a{font-family:var(--mono);font-size:.68rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;
    border:1px solid var(--line-soft);border-radius:99px;padding:6px 12px;transition:all .16s}
  .site-foot .foot-links a:hover{color:var(--lime);border-color:var(--lime-dim)}

/* ── Trust bar: cheap conversion + credibility (Free / No signup / No malware) ── */
.trust{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); justify-content:center;
  margin-top:var(--sp-12); padding:var(--sp-4);
  border:1px solid var(--line-soft); border-radius:12px; background:var(--panel);
}
.trust span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.trust i{color:var(--lime)}

/* ── Homepage tool grid: every generated page 1 click from home (crawlability) ── */
.tool-grid{margin-top:var(--sp-12)}
.tool-grid h2{font-size:1.25rem;letter-spacing:.03em;margin-bottom:var(--sp-4)}
.tg-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.tg-links a{
  font-family:var(--body); font-size:.86rem; color:var(--muted); text-decoration:none;
  padding:10px 12px; border:1px solid var(--line-soft); border-radius:8px;
  background:var(--panel); transition:all .15s var(--ease-out-quint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tg-links a:hover{color:var(--lime);border-color:var(--lime-dim);background:var(--panel-2)}
@media (max-width:560px){ .tg-links{grid-template-columns:1fr} }