/* ==========================================================================
   Svensk IPTV — design system (plain CSS in cascade layers).
   Tailwind utilities are emitted in the later "utilities" layer → they always win.
   ========================================================================== */
@layer theme, base, components, utilities;

@layer base {
  :root {
    --bg:#f6f1ea; --surface:#fffaf4; --surface-2:#efe6da;
    --fg:#16110e; --muted:#5b4f47; --line:#ddd0c1; --line-strong:#b9a996;
    --accent:#b3441a; --ring:#b3441a; --danger:#a11a00;
    --brand:#eb5e28; --brand-hi:#f47d45; --ink:#16110e; --cream:#f6efe7;
    --ease:cubic-bezier(.2,.9,.1,1);
    --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
    --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --dw:720; --dls:-.035em;
    interpolate-size:allow-keywords;
  }
  .dark {
    --bg:#0f0c0a; --surface:#171210; --surface-2:#211a16;
    --fg:#f6efe7; --muted:#b8a99b; --line:#33291f; --line-strong:#5a4a3d;
    --accent:#f47d45; --ring:#fb9f70; --danger:#ff8a6b;
    color-scheme:dark;
  }
  html[data-font="b"] { --f-display:"Instrument Serif",ui-serif,Georgia,serif; --f-body:"Manrope",ui-sans-serif,system-ui,sans-serif; --dw:400; --dls:-.01em; }
  html { background:var(--bg); color:var(--fg); scroll-padding-top:7rem; }
  html:has(dialog[open]) { overflow:hidden; }
  body { font-family:var(--f-body); overflow-x:clip; -webkit-font-smoothing:antialiased; }
  :focus-visible { outline:3px solid var(--ring); outline-offset:3px; border-radius:8px; }
  .on-brand { --ring:#16110e; }
  .on-dark { --ring:#fb9f70; }
  ::selection { background:var(--brand); color:var(--ink); }
  summary { cursor:pointer; list-style:none; } summary::-webkit-details-marker { display:none; }
  details::details-content { block-size:0; overflow:clip; transition:block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  details[open]::details-content { block-size:auto; }
  @media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
}

@layer components {
  /* ---------- Layout & type ---------- */
  .wrap { width:100%; max-width:80rem; margin-inline:auto; padding-inline:1rem; }
  @media (min-width:40rem) { .wrap { padding-inline:1.5rem; } }
  @media (min-width:64rem) { .wrap { padding-inline:2rem; } }
  .display, .h1, .h2 { font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); }
  html[data-font="b"] .italic-b { font-style:italic; }
  .h1 { font-size:clamp(2.6rem,8vw,5.5rem); line-height:.95; text-wrap:balance; }
  .h2 { font-size:clamp(2.2rem,5.5vw,3.75rem); line-height:1.02; text-wrap:balance; }
  .lead { font-size:1.125rem; line-height:1.65; color:var(--muted); text-wrap:pretty; }
  @media (min-width:40rem) { .lead { font-size:1.25rem; } }
  .eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
  .eyebrow .ch { border:1.5px solid currentColor; border-radius:.4rem; padding:.2rem .4rem; letter-spacing:.08em; font-variant-numeric:tabular-nums; }

  .page-hero { position:relative; isolation:isolate; overflow:hidden; }
  .page-hero::before, .epg-grid { background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 70% 65% at 35% 30%,#000 25%,transparent 72%); }
  .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; }
  .page-hero::after { content:""; position:absolute; right:-10rem; top:-8rem; z-index:-1; width:32rem; height:32rem; border-radius:999px; background:rgb(235 94 40 / .22); filter:blur(70px); }

  /* ---------- Buttons & links ---------- */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.8rem 1.4rem; border-radius:999px; font-weight:650; line-height:1; white-space:nowrap; transition:transform .35s var(--ease), background-color .2s, border-color .2s, box-shadow .3s, color .2s; }
  .btn:active { transform:translateY(1px) scale(.98); }
  .btn:disabled { cursor:progress; opacity:.9; }
  .btn-sm { min-height:40px; padding:.6rem 1rem; font-size:.875rem; }
  .btn-lg { min-height:56px; padding:1rem 1.75rem; font-size:1.0625rem; }
  .btn-primary { background:var(--brand); color:var(--ink); box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 12px 30px -12px rgb(235 94 40 / .75); }
  .btn-primary:hover { background:var(--brand-hi); box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 18px 40px -12px rgb(235 94 40 / .9); }
  .btn-ghost { border:1.5px solid var(--line-strong); color:var(--fg); }
  .btn-ghost:hover { border-color:var(--fg); background:var(--surface-2); }
  .btn-ink { background:var(--ink); color:var(--cream); }
  .btn-ink:hover { background:#2a201b; }
  .btn .btn-spin { display:none; }
  .btn.is-busy .btn-spin { display:block; } .btn.is-busy .btn-icon { display:none; }
  .link-arrow { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .25rem; font-weight:650; border-radius:999px; }
  .link-arrow svg { color:var(--accent); transition:transform .3s var(--ease); }
  .link-arrow:hover svg { transform:translate(3px,2px); }
  .icon-btn { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:999px; color:var(--muted); transition:background-color .2s, color .2s; }
  .icon-btn:hover { background:var(--surface-2); color:var(--fg); }

  /* ---------- Header / navigation ---------- */
  .skip { position:absolute; left:1rem; top:-5rem; z-index:100; background:var(--brand); color:var(--ink); padding:.75rem 1rem; border-radius:.75rem; font-weight:700; transition:top .2s; }
  .skip:focus { top:1rem; }
  .site-header { position:sticky; top:0; z-index:40; border-bottom:1px solid transparent; transition:background-color .3s, border-color .3s; }
  .site-header.is-scrolled { background:color-mix(in oklab,var(--bg) 84%,transparent); backdrop-filter:blur(18px); border-color:var(--line); }
  .logo { display:inline-flex; align-items:center; gap:.6rem; border-radius:.75rem; }
  .logo-mark { position:relative; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem; background:var(--brand); color:var(--ink); transition:transform .5s var(--ease); }
  .logo:hover .logo-mark { transform:rotate(-8deg); }
  .logo-dot { position:absolute; right:-.25rem; top:-.25rem; width:.75rem; height:.75rem; border-radius:999px; background:var(--ink); box-shadow:0 0 0 2px var(--bg); animation:tally 1.6s ease-in-out infinite; }
  .navlink { display:inline-flex; align-items:center; padding:.55rem .85rem; border-radius:999px; color:var(--muted); transition:color .2s, background-color .2s; }
  .navlink:hover { color:var(--fg); background:var(--surface-2); }
  .navlink[aria-current="page"], .navlink.is-active { color:var(--fg); background:var(--surface-2); }
  .navlink[aria-current="page"]::before, .navlink.is-active::before { content:""; width:6px; height:6px; margin-right:.5rem; border-radius:999px; background:var(--brand); }
  #support-btn .chev { transition:transform .3s var(--ease); }
  #support-btn[aria-expanded="true"] .chev { transform:rotate(180deg); }
  .mega { position:absolute; left:50%; top:calc(100% + .9rem); width:min(40rem,92vw); transform:translateX(-50%); padding:.5rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); box-shadow:0 40px 90px -30px rgb(22 17 14 / .4); }
  .mega:not([hidden]) { animation:pop .35s var(--ease); }
  .mega-link { display:flex; gap:.9rem; align-items:flex-start; padding:1rem; border-radius:1rem; transition:background-color .2s; }
  .mega-link:hover, .mega-link[aria-current="page"] { background:var(--surface-2); }
  .dropdown { position:absolute; right:0; top:calc(100% + .5rem); width:12rem; padding:.375rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); box-shadow:0 30px 60px -25px rgb(22 17 14 / .35); font-size:.875rem; }
  .dropdown-link { display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; border-radius:.75rem; }
  .dropdown-link:hover { background:var(--surface-2); }
  .dropdown-link[aria-current] { font-weight:650; }

  .sheet { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--bg); color:var(--fg); overflow-y:auto; }
  .sheet::backdrop { background:transparent; }
  .sheet[open] { animation:sheet .45s var(--ease); }
  .sheet[open] li { animation:rise-in .6s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms + 80ms); }
  .sheet-link { display:flex; align-items:center; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:2rem; line-height:1; }
  .sheet-link[aria-current="page"] { color:var(--accent); }
  .sheet-tile { display:flex; flex-direction:column; gap:.75rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); font-weight:650; }
  .sheet-tile[aria-current="page"] { border-color:var(--brand); }
  .pill { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:.875rem; font-weight:650; transition:color .2s, border-color .2s; }
  .pill:hover { color:var(--fg); border-color:var(--line-strong); }
  .pill[aria-current="page"] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .foot-link { color:#e6dbd0; text-underline-offset:4px; }
  .foot-link:hover { color:#fff; text-decoration:underline; }

  /* ---------- Cards ---------- */
  .card { position:relative; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); }
  .spot { isolation:isolate; }
  .spot::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .3s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgb(235 94 40 / .16),transparent 60%); }
  .spot:hover::before { opacity:1; }
  .chip { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; background:var(--surface-2); font-size:.8125rem; font-weight:600; }

  .plan { position:relative; display:flex; flex-direction:column; height:100%; padding:1.75rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); }
  .plan-name { font-size:.875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .plan-price { display:flex; align-items:baseline; gap:.4rem; margin-top:1.25rem; font-size:1.125rem; font-weight:650; }
  .plan-price span { font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:3.75rem; line-height:1; font-variant-numeric:tabular-nums; }
  .plan-sub { margin-top:.25rem; font-size:.875rem; color:var(--muted); }
  .plan-save { color:var(--accent); font-weight:650; }
  .plan-desc { margin:1.25rem 0 1.75rem; font-size:.9375rem; text-wrap:pretty; }
  .plan .btn { margin-top:auto; width:100%; }
  .meter { height:.375rem; margin-top:1.25rem; border-radius:999px; background:var(--line); overflow:hidden; }
  .meter span { display:block; height:100%; border-radius:inherit; background:color-mix(in oklab,var(--fg) 70%,transparent); }
  .plan-featured { background:var(--ink); color:var(--cream); border-color:transparent; box-shadow:0 0 0 2px var(--brand), 0 30px 80px -30px rgb(235 94 40 / .7); }
  .plan-featured .plan-name, .plan-featured .plan-sub { color:#cbbdb0; }
  .plan-featured .plan-save { color:var(--brand-hi); }
  .plan-featured .meter { background:rgb(255 255 255 / .15); } .plan-featured .meter span { background:var(--brand); }
  .plan-badge { position:absolute; top:-.85rem; left:1.5rem; display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:999px; background:var(--brand); color:var(--ink); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
  @media (min-width:64rem) { .plan-featured { transform:translateY(-.75rem); } }

  .stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:var(--line); }
  @media (min-width:40rem) { .stats { grid-template-columns:repeat(4,1fr); } }
  .stats > div { display:flex; flex-direction:column; padding:1rem; background:var(--bg); }
  .stats dt { order:2; margin-top:.25rem; font-size:.75rem; color:var(--muted); }
  .stats dd { order:1; font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:1.875rem; line-height:1; }

  /* ---------- Forms ---------- */
  .label { display:block; margin-bottom:.4rem; font-size:.875rem; font-weight:650; }
  .label .opt { font-weight:400; color:var(--muted); }
  .input { display:block; width:100%; min-height:3.25rem; padding:.75rem 1rem; border:1.5px solid var(--line-strong); border-radius:1rem; background:var(--surface); color:var(--fg); font-size:1rem; transition:border-color .2s, box-shadow .2s; }
  .input::placeholder { color:var(--muted); }
  .input:hover { border-color:var(--muted); }
  .input:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgb(235 94 40 / .16); }
  .input[aria-invalid="true"] { border-color:var(--danger); }
  select.input { appearance:none; padding-right:2.75rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7b6f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:1.1rem; }
  textarea.input { min-height:9rem; resize:vertical; }
  .hint { margin-top:.4rem; font-size:.8125rem; color:var(--muted); }
  .field-error { display:flex; align-items:flex-start; gap:.4rem; margin-top:.45rem; font-size:.875rem; font-weight:600; color:var(--danger); }
  .field-error i { margin-top:.1rem; }
  .error-summary { padding:1rem 1.25rem; border:2px solid var(--danger); border-radius:1.25rem; background:var(--surface); }
  .error-summary a { font-weight:650; text-decoration:underline; text-underline-offset:3px; }
  .choice { position:relative; display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1.5px solid var(--line); border-radius:1.25rem; background:var(--surface); cursor:pointer; transition:border-color .2s, box-shadow .3s, transform .3s var(--ease); }
  .choice:hover { border-color:var(--line-strong); }
  .choice input { position:absolute; opacity:0; pointer-events:none; }
  .choice .dot { flex:none; display:grid; place-items:center; width:1.25rem; height:1.25rem; border:2px solid var(--line-strong); border-radius:999px; }
  .choice:has(input:checked) { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand), 0 16px 40px -26px rgb(235 94 40 / .9); }
  .choice:has(input:checked) .dot { border-color:var(--brand); background:radial-gradient(circle,var(--brand) 42%,transparent 48%); }
  .choice:has(input:focus-visible) { outline:3px solid var(--ring); outline-offset:3px; }
  .choice:has(input[aria-invalid="true"]) { border-color:var(--danger); }
  .choice-tag { position:absolute; top:-.65rem; right:1rem; padding:.15rem .55rem; border-radius:999px; background:var(--brand); color:var(--ink); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
  .check { display:flex; align-items:flex-start; gap:.75rem; font-size:.9375rem; }
  .check input { flex:none; width:1.25rem; height:1.25rem; margin-top:.1rem; accent-color:var(--brand); }
  .chip-radio { position:relative; flex:none; display:inline-flex; align-items:center; min-height:40px; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:.875rem; font-weight:650; color:var(--muted); cursor:pointer; transition:all .2s; }
  .chip-radio input { position:absolute; opacity:0; pointer-events:none; }
  .chip-radio:hover { color:var(--fg); border-color:var(--line-strong); }
  .chip-radio:has(input:checked) { background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .chip-radio:has(input:focus-visible) { outline:3px solid var(--ring); outline-offset:2px; }
  .step-legend { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:1.625rem; }
  .step-legend span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem; background:var(--fg); color:var(--bg); font-family:var(--f-body); font-size:.875rem; font-weight:700; letter-spacing:0; }

  /* ---------- FAQ ---------- */
  .faq details { border-bottom:1px solid var(--line); }
  .faq summary { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.4rem 0; font-size:1.125rem; font-weight:650; text-align:left; }
  .faq .plus { position:relative; flex:none; display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:999px; transition:transform .5s var(--ease), background-color .2s, border-color .2s; }
  .faq .plus::before, .faq .plus::after { content:""; position:absolute; width:12px; height:1.5px; background:currentColor; }
  .faq .plus::after { rotate:90deg; }
  .faq details[open] .plus { transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:var(--ink); }
  .faq .ans { max-width:44rem; padding-bottom:1.5rem; color:var(--muted); line-height:1.7; }
  .faq .ans a { color:var(--accent); font-weight:650; text-decoration:underline; text-underline-offset:3px; }

  /* ---------- Tabs, steps, TOC, prose ---------- */
  .tab { display:flex; flex:none; align-items:center; gap:.75rem; padding:.8rem 1rem; border:1px solid transparent; border-radius:1rem; font-weight:650; color:var(--muted); white-space:nowrap; text-align:left; transition:all .2s; }
  .tab:hover { color:var(--fg); background:var(--surface-2); }
  .tab[aria-selected="true"] { background:var(--surface); border-color:var(--line); color:var(--fg); box-shadow:0 12px 30px -20px rgb(22 17 14 / .4); }
  .tab[aria-selected="true"] i { color:var(--accent); }
  .steps { counter-reset:s; display:grid; gap:1.5rem; }
  .steps li { position:relative; counter-increment:s; padding-left:3.5rem; line-height:1.6; color:var(--muted); }
  .steps li strong { display:block; color:var(--fg); font-weight:650; }
  .steps li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:0; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.8rem; background:var(--brand); color:var(--ink); font-size:.8rem; font-weight:700; }
  .steps li:not(:last-child)::after { content:""; position:absolute; left:1.2rem; top:2.9rem; bottom:-1.1rem; width:1px; background:var(--line); }
  .tip { display:flex; gap:.75rem; margin-top:2rem; padding:1rem 1.25rem; border-radius:1rem; background:var(--surface-2); font-size:.9375rem; }
  .toc a { display:block; padding:.45rem 0 .45rem 1rem; border-left:2px solid var(--line); color:var(--muted); font-size:.9375rem; transition:color .2s, border-color .2s; }
  .toc a:hover { color:var(--fg); }
  .toc a[aria-current="true"] { color:var(--fg); border-color:var(--brand); font-weight:650; }
  .prose-rules section + section { margin-top:3rem; padding-top:3rem; border-top:1px solid var(--line); }
  .prose-rules h2 { font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:1.875rem; line-height:1.1; }
  .prose-rules h2 span { color:var(--accent); font-variant-numeric:tabular-nums; margin-right:.5rem; }
  .prose-rules p, .prose-rules li { margin-top:.9rem; max-width:44rem; line-height:1.75; color:var(--muted); }
  .prose-rules ul { list-style:disc; padding-left:1.25rem; }
  .prose-rules a { color:var(--accent); font-weight:650; text-decoration:underline; text-underline-offset:3px; }

  /* ---------- Content visuals ---------- */
  .marquee-mask { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
  .marquee-track { display:flex; width:max-content; gap:1rem; animation:marquee 42s linear infinite; }
  .marquee-track > * { display:flex; gap:1rem; }
  .marquee-track:hover, .marquee-track:focus-within { animation-play-state:paused; }
  .wordmark { flex:none; display:flex; align-items:center; gap:.55rem; height:4.5rem; padding:0 1.75rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); color:var(--fg); font-size:1.25rem; white-space:nowrap; opacity:.85; transition:opacity .2s, border-color .2s; }
  .wordmark:hover { opacity:1; border-color:var(--line-strong); }
  .rail { display:flex; gap:1rem; overflow-x:auto; padding:.5rem .25rem 1.25rem; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .poster { position:relative; isolation:isolate; flex:none; display:flex; flex-direction:column; justify-content:flex-end; width:10.5rem; aspect-ratio:2/3; padding:1rem; overflow:hidden; border-radius:1.25rem; color:#fff; scroll-snap-align:start; background:radial-gradient(120% 80% at 20% 0%,var(--p1),transparent 62%),linear-gradient(160deg,var(--p2),#0d0907); transition:transform .5s var(--ease); }
  @media (min-width:40rem) { .poster { width:13rem; } }
  .poster:hover { transform:translateY(-6px) rotate(-1deg); }
  .poster::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgb(0 0 0 / .75),transparent 60%); }
  .poster > i { position:absolute; top:1rem; right:.9rem; z-index:-1; font-size:4.75rem; opacity:.4; }
  .poster-meta { font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .poster-title { margin-top:.35rem; font-family:var(--f-display); font-weight:var(--dw); letter-spacing:var(--dls); font-size:1.6rem; line-height:1; }
  .ch-logo { flex:none; display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:.9rem; background:hsl(var(--h) 80% 86%); color:var(--ink); font-weight:800; font-size:.95rem; letter-spacing:-.02em; }
  .dark .ch-logo { background:hsl(var(--h) 45% 24%); color:var(--cream); }
  .toolbar { position:sticky; top:4rem; z-index:20; padding:1rem; border:1px solid var(--line); border-radius:1.5rem; background:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:blur(14px); }
  @media (min-width:64rem) { .toolbar { top:calc(72px + .5rem); } }
  .skel { border-radius:.5rem; background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2)); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
  .bar { transform-origin:bottom; transform:scaleY(0); transition:transform 1.1s var(--ease); transition-delay:var(--delay,0ms); }
  .is-in .bar, html:not(.js) .bar { transform:none; }
  .toast { position:fixed; inset-inline:1rem; bottom:1rem; z-index:70; display:flex; align-items:center; gap:.75rem; max-width:24rem; margin-inline:auto; padding:.8rem 1rem; border-radius:1rem; background:var(--ink); color:var(--cream); font-size:.875rem; box-shadow:0 20px 50px -20px rgb(0 0 0 / .6); opacity:0; transform:translateY(1.5rem); pointer-events:none; transition:opacity .4s, transform .5s var(--ease); }
  .toast.is-on { opacity:1; transform:none; }

  /* ---------- Motion ---------- */
  .grain::after { content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.06; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .dark .grain::after { mix-blend-mode:screen; opacity:.05; }
  .tally { animation:tally 1.6s ease-in-out infinite; }
  .float { animation:float 7s ease-in-out infinite; }
  .word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-bottom:-.06em; }
  .word > span { display:inline-block; animation:rise 1s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms + 120ms); }
  .squiggle path { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.1s .75s var(--ease) forwards; }
  .js .reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--delay,0ms); }
  .js .reveal.is-in { opacity:1; transform:none; }
  .typing span { animation:tally 1.2s infinite; } .typing span:nth-child(2) { animation-delay:.2s; } .typing span:nth-child(3) { animation-delay:.4s; }
  .paused .marquee-track, .paused .tally, .paused .float, .paused .tv-scene, .paused .typing span, .paused .logo-dot { animation-play-state:paused; }

  /* ---------- TV preview (Start) ---------- */
  .tv-scene { position:absolute; inset:-12%; background:radial-gradient(40% 50% at 28% 35%,var(--c1) 0%,transparent 70%),radial-gradient(45% 55% at 78% 70%,var(--c2) 0%,transparent 70%),radial-gradient(30% 30% at 62% 18%,var(--c3) 0%,transparent 70%),#0d0907; animation:drift 14s ease-in-out infinite alternate; }
  .tv-scan { background:repeating-linear-gradient(to bottom,rgb(0 0 0 / .22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgb(0 0 0 / .55)); }
  .tv-noise { opacity:0; transition:opacity .12s; animation:static .18s steps(3) infinite; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .tv-content { transition:opacity .25s, filter .25s, transform .38s var(--ease); }
  .tv-skeleton { opacity:0; transition:opacity .15s; }
  .is-switching .tv-noise { opacity:.85; }
  .is-switching .tv-content { opacity:0; filter:blur(6px); transform:scaleY(.02); }
  .is-switching .tv-skeleton { opacity:1; }
  .shimmer { background:linear-gradient(90deg,rgb(255 255 255 / .08),rgb(255 255 255 / .22),rgb(255 255 255 / .08)); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }

  @keyframes marquee { to { transform:translateX(-50%); } }
  @keyframes tally { 0%,100% { opacity:1; } 50% { opacity:.3; } }
  @keyframes float { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-10px) rotate(var(--r,0deg)); } }
  @keyframes rise { from { transform:translateY(110%) rotate(4deg); } }
  @keyframes rise-in { from { opacity:0; transform:translateY(16px); } }
  @keyframes draw { to { stroke-dashoffset:0; } }
  @keyframes pop { from { opacity:0; transform:translateX(-50%) translateY(-8px) scale(.98); } }
  @keyframes sheet { from { opacity:0; transform:translateY(-14px); } }
  @keyframes shimmer { to { background-position:-200% 0; } }
  @keyframes drift { to { transform:translate3d(-4%,3%,0) scale(1.08) rotate(2deg); } }
  @keyframes static { 0% { background-position:0 0; } 33% { background-position:-40px 25px; } 66% { background-position:30px -50px; } 100% { background-position:-10px 10px; } }
}