:root { --tab: 62px; }
  * { -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body { overscroll-behavior-y:none; }

  /* ── type system: three roles, not one weight everywhere ───────── */
  .display  { font-weight:800; letter-spacing:-.03em; line-height:1.24; }
  .title    { font-weight:700; letter-spacing:-.02em; line-height:1.4; }
  .ui       { font-weight:600; letter-spacing:-.01em; }
  .prose-fa { font-weight:400; line-height:2.05; }
  .overline { font-size:12px; font-weight:700; letter-spacing:.16em; }
  .nums     { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

  /* ── surfaces: hairline first, shadow only when floating ───────── */
  .surface { background:#fff; border:1px solid #E8E4DC; border-radius:18px; }
  .dark .surface { background:#141E2C; border-color:rgba(255,255,255,.07); }
  .surface-flat { background:#F7F5F1; border-radius:16px; }
  .dark .surface-flat { background:#0C131E; }
  .hair { border-color:#E8E4DC; }
  .dark .hair { border-color:rgba(255,255,255,.08); }

  /* ── ink grounds: one soft light from above, never a pattern ────── */
  .ink {
    background:
      radial-gradient(135% 95% at 50% -28%, rgba(219,184,113,.13), transparent 58%),
      linear-gradient(180deg, #17222F 0%, #101A28 54%, #0B1220 100%);
  }
  .ink-deep {
    background:
      radial-gradient(120% 80% at 50% -20%, rgba(219,184,113,.10), transparent 55%),
      linear-gradient(180deg, #101A28 0%, #0A111C 100%);
  }

  /* ── metal: a specular band is what separates gold from yellow ──── */
  .gold-face {
    background:linear-gradient(103deg,
      #8A6524 0%, #C1913C 13%, #F3DEAE 29%, #DCBB72 41%,
      #C9973F 55%, #A67B2C 71%, #E8CF97 87%, #B78D35 100%);
  }
  .silver-face {
    background:linear-gradient(103deg,
      #878E98 0%, #B9BFC7 13%, #F4F6F9 29%, #D6DBE1 41%,
      #B4BAC3 55%, #949BA4 71%, #E2E6EA 87%, #A2A9B2 100%);
  }
  .rule-gold { background:linear-gradient(90deg, transparent, #C9973F 22%, #E9D3A5 50%, #C9973F 78%, transparent); }

  /* ── interaction ───────────────────────────────────────────────── */
  .press { transition: transform .14s cubic-bezier(.2,0,.2,1), background-color .18s, border-color .18s, color .18s; }
  .press:active { transform: scale(.975); }
  .rip { position:relative; overflow:hidden; }
  .rip > i.rp { position:absolute; border-radius:999px; transform:scale(0); background:currentColor; opacity:.14; pointer-events:none; animation:rp .58s ease-out forwards; }
  @keyframes rp { to { transform:scale(2.7); opacity:0 } }
  :where(a,button,input,select):focus-visible { outline:2px solid #C9973F; outline-offset:2px; border-radius:10px; }

  /* ── segmented control ─────────────────────────────────────────── */
  .seg { position:relative; display:flex; padding:3px; border-radius:14px; }
  .seg-thumb { position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:11px;
               transition:transform .36s cubic-bezier(.16,1,.3,1); will-change:transform; }
  .seg button { position:relative; z-index:1; flex:1; font-weight:600; color:#7E8CA3; transition:color .22s; }
  .dark .seg button { color:rgba(255,255,255,.42); }
  .seg button.on { color:#0F1824; font-weight:700; }
  .dark .seg button.on { color:#fff; }
  [data-seg="side"] button.on { color:#fff; }

  /* ── price value transitions ───────────────────────────────────── */
  .tick-up   { animation: tkU .9s ease-out; }
  .tick-down { animation: tkD .9s ease-out; }
  @keyframes tkU { 0%,35%{ color:#0E8A5F } 100%{ color:inherit } }
  @keyframes tkD { 0%,35%{ color:#C33B45 } 100%{ color:inherit } }

  /* ── marquee (RTL-correct: travels toward +X) ──────────────────── */
  .mq { display:inline-flex; gap:2rem; white-space:nowrap; animation:mq 34s linear infinite; }
  @keyframes mq { from{transform:translateX(0)} to{transform:translateX(50%)} }
  .mq-wrap:hover .mq { animation-play-state:paused }

  /* ── chrome ────────────────────────────────────────────────────── */
  #bar { transition: transform .32s cubic-bezier(.16,1,.3,1); }
  #bar.tuck { transform: translateY(-100%); }
  .glass { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }

  /* `bg-ink-900/96` compiles to nothing on this Tailwind build (slash opacity
     over a custom palette colour), which left the bar transparent in light
     mode. The app bar is chrome — it paints itself. */
  #bar { background:rgba(15,24,36,.97) }
  .dark #bar { background:rgba(8,13,21,.95) }
  #tabbar { background:rgba(255,255,255,.94) }
  .dark #tabbar { background:rgba(15,24,36,.94) }

  .no-sb{ scrollbar-width:none; -ms-overflow-style:none } .no-sb::-webkit-scrollbar{ display:none }
  /* scroll-padding is what keeps snapping honest: with `mandatory` snapping the
     browser pins the first item's start edge flush to the scrollport, which
     swallows the rail's start inset (items hug the right edge while a gap opens
     on the left). scroll-padding-inline tells snapping where the content really
     starts. */
  .rail { scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-padding-inline:1rem }
  .rail > * { scroll-snap-align:start }

  /* Full-bleed rails: the inset rides on the first/last item margins so it
     survives the negative container margin. */
  .bleed { margin-inline:-1rem }
  .bleed > :first-child { margin-inline-start:1rem }
  .bleed > :last-child  { margin-inline-end:1rem }

  /* With nothing to scroll, the bleed only pushes the panel off-screen. */
  .is-empty { margin-inline:0 !important; overflow:visible !important; display:block !important;
              scroll-snap-type:none !important }
  .is-empty > :first-child, .is-empty > :last-child { margin-inline:0 !important }
  @media (min-width:1024px){
    .lg-flat { margin-inline:0 }
    .lg-flat > :first-child, .lg-flat > :last-child { margin-inline:0 }
  }

  /* ── product visuals: shape carries the meaning, not a photo ──── */
  .pv { position:relative; display:grid; place-items:center }
  .pv-bar {
    position:relative; width:80px; height:47px; border-radius:7px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.3),
               0 10px 18px -10px rgba(0,0,0,.72);
  }
  .pv-bar::after {
    content:''; position:absolute; inset:5px 7px; border-radius:4px;
    border:1px solid rgba(84,56,14,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  }
  .pv-coin {
    position:relative; width:60px; height:60px; border-radius:999px;
    box-shadow:inset 0 0 0 1px rgba(84,56,14,.32), inset 0 2px 3px rgba(255,255,255,.42),
               0 10px 18px -10px rgba(0,0,0,.72);
  }
  /* A conic sweep is what a struck coin actually does to light. */
  .pv-coin::before {
    content:''; position:absolute; inset:0; border-radius:999px;
    background:conic-gradient(from 212deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.38) 48deg,
               rgba(0,0,0,.16) 128deg, rgba(255,255,255,.3) 212deg, rgba(0,0,0,.2) 296deg, rgba(255,255,255,0) 360deg);
  }
  .pv-coin::after {
    content:''; position:absolute; inset:7px; border-radius:999px;
    border:1px solid rgba(84,56,14,.3); box-shadow:inset 0 1px 2px rgba(255,255,255,.34);
  }
  .pv-lg .pv-bar  { width:126px; height:73px }
  .pv-lg .pv-coin { width:92px; height:92px }
  .dot { width:6px; height:6px; border-radius:999px; display:inline-block }
  .stepper button { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; transition:.16s }
  .stepper button:active { transform:scale(.9) }

  /* ── desktop: the quote list becomes a real table panel ───────── */
  @media (min-width:1024px){
    #quotes { background:#fff; border:1px solid #E8E4DC; border-radius:18px; padding:.15rem 1rem; gap:0 }
    .dark #quotes { background:#141E2C; border-color:rgba(255,255,255,.07) }
    .qrow { min-width:0; width:100%; background:transparent; border:0; border-radius:0;
            border-bottom:1px solid #E8E4DC; padding:.72rem .1rem }
    .dark .qrow { border-bottom-color:rgba(255,255,255,.07) }
    #quotes .qrow:last-child { border-bottom:0 }
    .qrow:hover { background:rgba(201,151,63,.05) }
  }
  .safe-b { padding-bottom:max(env(safe-area-inset-bottom),0px) }
  .safe-t { padding-top:max(env(safe-area-inset-top),0px) }

  .has-rv .rv { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1) }
  .has-rv .rv.in { opacity:1; transform:none }

  .sheet-p { transition: transform .36s cubic-bezier(.16,1,.3,1) }
  .draw-p  { transition: transform .34s cubic-bezier(.16,1,.3,1) }

  .clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

  /* ── tab bar with sliding indicator ────────────────────────────── */
  #tabpill { position:absolute; top:6px; left:0; height:34px; border-radius:11px; background:rgba(201,151,63,.13); opacity:0;
             transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .2s; will-change:transform; }
  .tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1;
         font-size:11px; font-weight:600; color:#7E8CA3; transition:color .2s; padding-top:5px; position:relative; z-index:1 }
  .tab svg { width:20px; height:20px; stroke-width:1.9 }
  .tab.on { color:#8E6725; font-weight:700 }
  .dark .tab { color:rgba(255,255,255,.4) } .dark .tab.on { color:#DBB871 }

  input[type=range]{ -webkit-appearance:none; background:transparent; width:100% }
  input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:99px; background:rgba(201,151,63,.24) }
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:99px;
    background:#fff; border:2px solid #C9973F; box-shadow:0 2px 6px -1px rgba(15,24,36,.28) }
  .dark input[type=range]::-webkit-slider-thumb{ background:#141E2C }

  .fld { width:100%; height:50px; border-radius:14px; border:1px solid #E8E4DC; background:#fff; padding:0 14px;
         font-weight:600; font-size:15px; transition:border-color .18s, box-shadow .18s }
  .fld::placeholder { font-weight:400; color:#AEB9CA }
  .fld:focus { outline:none; border-color:#C9973F; box-shadow:0 0 0 3px rgba(201,151,63,.13) }
  .dark .fld { background:#0C131E; border-color:rgba(255,255,255,.09); color:#fff }

  .lnk { font-size:12px; font-weight:600; color:#8E6725; display:inline-flex; align-items:center; gap:.25rem }
  .dark .lnk { color:#DBB871 }

  .nvd { display:inline-flex; align-items:center; gap:.28rem; font-size:12.5px; font-weight:500;
         color:rgba(255,255,255,.62); padding:.42rem .6rem; border-radius:9px; transition:.2s; white-space:nowrap }
  .nvd:hover { color:#E9D3A5; background:rgba(255,255,255,.06) }
  .nvd.on { color:#0F1824; background:#DBB871; font-weight:700 }

  /* ── products submenu ─────────────────────────────────────────────── */
  .nvgroup { position:relative }
  .nvgroup > .nvd svg { transition:transform .22s }
  .nvmenu {
    position:absolute; top:calc(100% + .45rem); inset-inline-start:0; min-width:16rem; z-index:60;
    background:#111C2A; border:1px solid rgba(219,184,113,.18); border-radius:16px; padding:.4rem;
    box-shadow:0 2px 4px rgba(0,0,0,.3), 0 24px 48px -18px rgba(0,0,0,.75);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s;
  }
  .nvgroup:focus-within > .nvmenu, .nvgroup.open > .nvmenu {
    opacity:1; visibility:visible; transform:none;
  }
  .nvgroup.open > .nvd svg { transform:rotate(180deg) }
  /* Hover may open it, but only where a real pointer exists — otherwise a tap
     leaves the menu stuck open behind the click toggle. */
  @media (hover:hover) and (pointer:fine){
    .nvgroup:hover > .nvmenu { opacity:1; visibility:visible; transform:none }
    .nvgroup:hover > .nvd svg { transform:rotate(180deg) }
  }
  .nvmenu a { display:flex; align-items:center; justify-content:space-between; gap:1rem;
              padding:.55rem .7rem; border-radius:11px; font-size:12.5px; font-weight:500;
              color:rgba(255,255,255,.72); transition:.16s }
  .nvmenu a:hover { background:rgba(219,184,113,.12); color:#EBD6A8 }
  .nvmenu a b { font-size:12px; font-weight:600; color:rgba(233,211,165,.5) }
  .nvmenu hr { border:0; border-top:1px solid rgba(255,255,255,.08); margin:.35rem .4rem }
  .nvmenu .all { color:#DBB871; font-weight:600 }

  /* ── drawer disclosure ────────────────────────────────────────────── */
  .dr-sub { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1) }
  .dr-group.open .dr-sub { grid-template-rows:1fr }
  /* `grid-template-rows:0fr` collapses only when the item can shrink — a grid
     item's automatic minimum size (min-height:auto) otherwise holds the row
     open at content height. */
  .dr-sub > div { overflow:hidden; min-height:0 }
  .dr-group > .dr .chev { margin-inline-start:auto; transition:transform .25s }
  .dr-group.open > .dr .chev { transform:rotate(180deg) }
  .dr-sub a { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
              padding:.5rem .85rem .5rem 2.6rem; border-radius:10px; font-size:12.5px; font-weight:500;
              color:#3F4E64 }
  .dark .dr-sub a { color:rgba(255,255,255,.62) }
  .dr-sub a b { font-size:12px; font-weight:600; opacity:.55 }
  .dr-sub a:active { background:#F7F5F1 }
  .dark .dr-sub a:active { background:rgba(255,255,255,.05) }

  /* ── footer ───────────────────────────────────────────────────────── */
  .ft-h { font-size:12px; font-weight:700; letter-spacing:.16em; color:#DBB871; margin-bottom:.9rem }
  .ft-l { display:block; font-size:12.5px; color:rgba(255,255,255,.6); padding:.28rem 0; transition:color .16s }
  .ft-l:hover { color:#DBB871 }
  .ft-seal { height:66px; width:66px; border-radius:12px; display:grid; place-items:center; overflow:hidden; position:relative }
  .ft-seal .ph { display:none }
  .ft-seal.is-ph .ph { display:block }

  .qa { display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:12px; font-weight:600; color:#3F4E64; text-align:center; line-height:1.4 }
  .dark .qa { color:rgba(255,255,255,.72) }
  .qa-i { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:#F4E9D2; color:#8E6725; border:1px solid rgba(201,151,63,.22) }
  .dark .qa-i { background:rgba(201,151,63,.11); color:#DBB871; border-color:rgba(201,151,63,.2) }
  .qa-i svg { width:21px; height:21px; stroke-width:1.7 }

  .qrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem; min-width:190px; text-align:right }
  @media (min-width:1024px){ .qrow{ min-width:0; width:100% } }
  .qnm { font-size:12.5px; font-weight:600 }
  .qu { font-size:12px; color:#617089 } .dark .qu { color:rgba(255,255,255,.56) }

  .ac { white-space:nowrap; font-size:12px; font-weight:600; padding:.45rem .9rem; border-radius:10px; background:#F4E9D2; color:#8E6725; transition:.16s }
  .dark .ac { background:rgba(201,151,63,.12); color:#DBB871 }
  .ac:active { transform:scale(.94) }
  .ac.on { background:#0F1824; color:#DBB871 }
  .dark .ac.on { background:#C9973F; color:#0F1824 }

  .ic { white-space:nowrap; font-size:12px; font-weight:600; padding:.4rem .8rem; border-radius:9px; color:#5A6980; transition:.18s }
  .dark .ic { color:rgba(255,255,255,.45) }
  .ic.on { background:#0F1824; color:#DBB871 }
  .dark .ic.on { background:#C9973F; color:#0F1824 }

  .fc { white-space:nowrap; font-size:12px; font-weight:600; padding:.45rem .95rem; border-radius:999px; border:1px solid #E8E4DC; color:#5A6980; transition:.18s }
  .dark .fc { border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.5) }
  .fc.on { background:#0F1824; border-color:#0F1824; color:#DBB871 }
  .dark .fc.on { background:#C9973F; border-color:#C9973F; color:#0F1824 }

  .vt { display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:600; color:#7E8CA3; padding:.4rem .6rem; border-radius:9px; transition:.16s }
  .dark .vt { color:rgba(255,255,255,.4) }
  .vt svg { width:15px; height:15px }
  .vt.on { background:rgba(201,151,63,.13); color:#8E6725 }
  .dark .vt.on { color:#DBB871 }

  .dr { display:flex; align-items:center; gap:.8rem; padding:.7rem .85rem; border-radius:12px; font-size:13px; font-weight:500; transition:.16s }
  .dr svg { width:18px; height:18px; color:#B0812F; opacity:.9; stroke-width:1.8 }
  .dark .dr svg { color:#DBB871 }
  .dr:active { background:#F7F5F1 } .dark .dr:active { background:rgba(255,255,255,.05) }

  .fq-a { grid-template-rows:0fr }

  /* ── section heading: a list header on the phone, editorial on the desk ── */
  .sec-title { font-weight:700; font-size:17px; letter-spacing:-.02em; line-height:1.4 }
  @media (min-width:1024px){
    .sec-title { font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1.2 }
  }

  /* ── rails that become grids on the desk ─────────────────────────── */
  .r-item { flex:0 0 auto }
  @media (min-width:1024px){ .r-item { flex:1 1 auto; width:auto !important } }

  /* ── product card: the packaging is the card ─────────────────────── */
  .pcard { position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
           background:#fff; border:1px solid #E8E4DC }
  .dark .pcard { background:#141E2C; border-color:rgba(255,255,255,.07) }
  .pcard-art { position:relative; display:grid; place-items:center; padding:1.6rem .75rem }
  /* Product photography is shot on white in mixed ratios, so it gets its own
     light tray and is contained rather than cropped. */
  .pcard-art.has-photo { padding:0; aspect-ratio:4/3; background:#F6F4F0; overflow:hidden }
  .pcard-photo { width:100%; height:100%; object-fit:contain; padding:.45rem }
  .pcard-body { display:flex; flex-direction:column; flex:1; padding:.8rem .85rem .9rem }
  .pcard-stock { position:absolute; top:.6rem; inset-inline-end:.6rem; display:inline-flex; align-items:center; gap:.35rem;
                 padding:.22rem .5rem; border-radius:8px; background:rgba(6,10,17,.62);
                 backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
  .pcard-stock span:last-child { font-size:11px; font-weight:600; color:rgba(255,255,255,.86) }
  .pcard.is-out .pcard-art { filter:grayscale(.55); opacity:.6 }
  @media (min-width:1024px){ .pcard-art { padding:2.1rem .75rem } .pcard-art.has-photo { padding:0 } }


  /* ── book covers: a shelf, not four identical rectangles ────────── */
  .bookcover { position:relative; aspect-ratio:3/4; border-radius:5px 14px 14px 5px; overflow:hidden;
    box-shadow:0 12px 24px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1) }
  .bk-1 { background:linear-gradient(158deg,#203B34 0%,#12241F 100%) }
  .bk-2 { background:linear-gradient(158deg,#4B2127 0%,#2B1216 100%) }
  .bk-3 { background:linear-gradient(158deg,#1C2D47 0%,#101A2B 100%) }
  .bk-4 { background:linear-gradient(158deg,#3C2C1D 0%,#221810 100%) }
  .bk-spine { position:absolute; inset-block:0; inset-inline-end:0; width:14px;
    background:linear-gradient(to left, rgba(0,0,0,.46), rgba(0,0,0,.06)) }
  .bk-spine::after { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:1px;
    background:rgba(255,255,255,.16) }
  .bk-plate { position:absolute; inset-inline:18px 30px; top:50%; transform:translateY(-50%); text-align:center }
  .bk-rule { display:block; width:30px; height:1px; margin:0 auto .55rem;
    background:linear-gradient(90deg,transparent,#DBB871,transparent) }
  .bk-title { display:block; font-weight:700; font-size:12px; line-height:1.75; letter-spacing:-.01em;
    color:#EBD6A8; text-shadow:0 1px 0 rgba(0,0,0,.4) }
  .bk-mark { position:absolute; bottom:11px; inset-inline:18px 30px; text-align:center;
    font-size:12px; font-weight:800; color:rgba(219,184,113,.42) }

  /* ── rails a mouse can drive: visible track, grab, wheel ─────────── */
  @media (pointer:fine){
    .rail { cursor:grab }
    .rail.is-drag { cursor:grabbing; scroll-snap-type:none; user-select:none }
    .rail.no-sb { scrollbar-width:thin; scrollbar-color:rgba(201,151,63,.42) transparent }
    .rail.no-sb::-webkit-scrollbar { display:block; height:7px }
    .rail.no-sb::-webkit-scrollbar-track { background:transparent }
    .rail.no-sb::-webkit-scrollbar-thumb { background:rgba(201,151,63,.38); border-radius:99px }
    .rail.no-sb:hover::-webkit-scrollbar-thumb { background:rgba(201,151,63,.62) }
  }

  /* ── quote table gains columns on the desk ───────────────────────── */
  .qspark, .qspread { display:none }
  @media (min-width:1024px){
    .qspark { display:block; opacity:.9 }
    .qspread { display:block }
    /* The price column was `auto`, so its width tracked the digit count and
       every row landed its columns somewhere else — and each tick moved them.
       A fixed track (widest observed value is ~70px) pins all four columns. */
    .qrow { display:grid; grid-template-columns:minmax(0,1fr) 62px 92px 74px; align-items:center; gap:.9rem }
    .qrow > * { min-width:0 }
  }

  /* ── quick actions: an app grid on the phone, a toolbar on the desk ─ */
  @media (min-width:1024px){
    .qa-wrap { background:#fff; border:1px solid #E8E4DC; border-radius:18px; padding:.5rem }
    .dark .qa-wrap { background:#141E2C; border-color:rgba(255,255,255,.07) }
    .qa { flex:1 1 0; flex-direction:row; gap:.6rem; justify-content:center; padding:.7rem .5rem;
          border-radius:13px; font-size:12.5px }
    .qa:hover { background:rgba(201,151,63,.07) }
    .qa-i { width:32px; height:32px; border-radius:10px; background:transparent; border:0 }
    .qa-i svg { width:18px; height:18px }
  }

  @media (min-width:1024px){
    .lg\:surface { background:#fff; border:1px solid #E8E4DC; border-radius:18px }
    .dark .lg\:surface { background:#141E2C; border-color:rgba(255,255,255,.07) }
  }

  .stat { text-align:center }
  @media (min-width:1024px){
    .stat { text-align:right; background:#F7F5F1; border-radius:14px; padding:.8rem 1rem }
    .dark .stat { background:#0C131E }
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
    /* A frozen marquee would hide half its rates, so hand the strip back to
       the reader as an ordinary horizontal scroller. */
    .mq { animation:none !important; }
    .mq-view { overflow-x:auto !important; scrollbar-width:none }
    .mq-view::-webkit-scrollbar { display:none }
  }

/* ── ویدیوکست ۲۴ عیار (سکشن صفحهٔ اصلی، جای کتابخانهٔ قبلی) ─────────── */
.vcard-shot { position:relative; display:grid; place-items:center; aspect-ratio:16/10;
  border-radius:12px; overflow:hidden; background:linear-gradient(150deg,#12203a,#0a1424 70%,#080d15); }
.dark .vcard-shot { background:linear-gradient(150deg,#0f1c33,#0a1322 70%,#05090f); }
.vcard-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard-play { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px;
  border-radius:999px; background:#DBB871; color:#0F1824; box-shadow:0 8px 20px -8px rgba(0,0,0,.55); }
.vcard-play svg { margin-inline-start:2px }
.vcard:hover .vcard-play { transform:scale(1.06) }
.vcard-ep { position:absolute; z-index:1; top:8px; inset-inline-start:8px; font-size:11px; font-weight:700;
  padding:.18rem .5rem; border-radius:7px; background:rgba(6,10,17,.66); color:#fff; backdrop-filter:blur(6px); }
.vcard { transition:transform .2s var(--ease,cubic-bezier(.2,0,.2,1)) }
.vcard:hover { transform:translateY(-2px) }

  /* custom scrollbar — never the browser default (matches media/zarnoush.css) */
  html { color-scheme: light }
  html.dark { color-scheme: dark }
  * { scrollbar-width: thin; scrollbar-color: #CDBFA6 transparent }
  ::-webkit-scrollbar { width: 11px; height: 11px }
  ::-webkit-scrollbar-track { background: transparent }
  ::-webkit-scrollbar-thumb { background: #CDBFA6; border: 3px solid #F6F3ED; border-radius: 999px }
  ::-webkit-scrollbar-thumb:hover { background: #B98E45 }
  ::-webkit-scrollbar-corner { background: transparent }
  .dark * { scrollbar-color: #2C3B50 transparent }
  .dark ::-webkit-scrollbar-thumb { background: #2C3B50; border-color: #080D15 }
  .dark ::-webkit-scrollbar-thumb:hover { background: #B98E45 }