/* ============================================================
     IRIS NOIR — dark and mystical, ornament dropped: flat night
     surfaces, modern type, a single violet accent. Gold lives
     only on card-art frames and the PREMIUM badge.
     ============================================================ */
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  /* Cyrillic serif fallback for RU display text (Instrument has no Cyrillic) */
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-cyrillic-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-cyrillic-ext-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
  @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-cyrillic-ext-italic.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
  :root{
    /* Iris Noir tokens (design handoff v4) */
    --bg:#0b0a11; --surface:#131118; --raised:#18151f;
    --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14); --hairline-x:rgba(255,255,255,.16);
    --iris:#8f7ff2; --iris-fill:#6a5ae0; --iris-text:#b3a7f7;
    --iris-tint:rgba(143,127,242,.14); --iris-border:rgba(143,127,242,.35);
    --gold:#c9a962; --gold-frame:rgba(201,169,98,.4); --gold-frame-hi:rgba(201,169,98,.6);
    --danger:rgba(241,120,120,.85); --danger-border:rgba(241,120,120,.3);
    /* legacy aliases (kept so untouched rules keep resolving) */
    --gold2:var(--iris-text); --gold-dim:var(--iris-border);
    --gold-cta:var(--iris-fill);
    --parch:#f1eee8; --rose:var(--iris-text); --violet:#18151f;
    --panel:#131118; --panel2:#18151f; --ink:#ffffff;
    --muted:rgba(241,238,232,.6); --text:#f1eee8;
    --text-2:rgba(241,238,232,.7); --text-3:rgba(241,238,232,.55);
    --surface-0:var(--bg); --surface-1:var(--surface); --surface-2:var(--surface); --surface-3:var(--raised);
    --surface-elevated:var(--raised);
    --card-back-grad:#131118;
    --border-subtle:var(--hairline); --border-accent:var(--hairline-strong); --border-frame:var(--gold-frame);
    --scrim:rgba(8,7,14,.88);
    --text-display:clamp(40px,5.8vw,74px); --text-title:clamp(24px,3vw,32px);
    --text-body:15px; --text-caption:13px;
    --leading-tight:1.05; --leading-body:1.6; --leading-relaxed:1.65;
    --space-1:6px; --space-2:10px; --space-3:18px; --space-4:28px; --space-5:36px; --space-6:44px;
    --radius-sm:10px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
    --shadow-sm:0 8px 20px rgba(0,0,0,.5); --shadow-md:0 16px 36px rgba(0,0,0,.6);
    --shadow-lg:0 20px 48px rgba(0,0,0,.6); --shadow-glow:0 0 26px rgba(143,127,242,.35);
    --cta-shadow:0 4px 18px rgba(106,90,224,.4);
    --focus-ring:0 0 0 3px rgba(143,127,242,.75);
    --ease-out:cubic-bezier(.2,0,0,1); --dur-fast:.2s; --dur-med:.4s; --dur-slow:.8s;
    --prose-width:65ch;
    --font-display:'Instrument Serif','Cormorant Garamond',Georgia,'Times New Roman',serif;
    --font-ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Long-form guide under the app (English; hidden by applyLang for other UI languages) */
  .about-tarot{max-width:760px;margin:var(--space-6) auto 0;padding:var(--space-5) var(--space-3) 0;border-top:1px solid var(--hairline);color:var(--text-2);font-size:16px;line-height:1.7}
  .about-tarot h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4vw,36px);color:var(--text);letter-spacing:-.01em;margin:0 0 var(--space-2)}
  .about-tarot h3{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--text);margin:var(--space-5) 0 var(--space-1)}
  .about-tarot p{margin:0 0 var(--space-3)}
  .about-tarot ul,.about-tarot ol{margin:0 0 var(--space-3) 1.2em}
  .about-tarot li{margin:0 0 var(--space-1)}
  .about-tarot a{color:var(--iris-text)}
  .about-tarot .about-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--iris-text);margin:0 0 var(--space-2)}
  .about-tarot .about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin:var(--space-3) 0}
  .about-tarot .about-suit{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-3)}
  .about-tarot .about-suit strong{display:block;color:var(--text);font-family:var(--font-display);font-size:20px;font-weight:400;margin-bottom:var(--space-1)}
  .about-tarot .about-example{background:var(--surface);border-left:2px solid var(--iris);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3);margin:0 0 var(--space-3)}
  .about-tarot .about-links{margin:var(--space-4) 0 0;font-size:15px;color:var(--text-3)}
  body{font-family:var(--font-ui); font-size:var(--text-body); line-height:var(--leading-body);
    background:var(--bg);
    color:var(--text); min-height:100vh; padding:0 0 calc(70px + env(safe-area-inset-bottom,0px)); text-align:center;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
  /* static star dots — quiet night sky behind everything */
  body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
    background:
      radial-gradient(1px 1px at 14% 8%,rgba(241,238,232,.4),transparent 60%),
      radial-gradient(1px 1px at 72% 5%,rgba(143,127,242,.5),transparent 60%),
      radial-gradient(1px 1px at 90% 14%,rgba(241,238,232,.3),transparent 60%),
      radial-gradient(1px 1px at 40% 12%,rgba(241,238,232,.25),transparent 60%),
      radial-gradient(1px 1px at 32% 70%,rgba(241,238,232,.3),transparent 60%),
      radial-gradient(1px 1px at 8% 45%,rgba(241,238,232,.25),transparent 60%),
      radial-gradient(1.5px 1.5px at 68% 82%,rgba(143,127,242,.35),transparent 60%)}
  a{color:var(--iris-text)}
  a:hover{opacity:.85}
  .twinkle{position:fixed; inset:0; pointer-events:none; z-index:-1}
  /* shared keyframes (design handoff, verbatim) */
  @keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.7}}
  @keyframes breathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.04)}}
  @keyframes sweep{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(220%) rotate(18deg)}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-6px) rotate(var(--r,0deg))}}
  @keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes tickerX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes shuf{0%,100%{transform:rotate(var(--r)) translateX(0)}25%{transform:rotate(calc(var(--r) * -1.4)) translateX(-26px) translateY(-8px)}60%{transform:rotate(calc(var(--r) * 1.6)) translateX(22px) translateY(4px)}}
  @keyframes glowPulse{0%,100%{box-shadow:0 0 18px rgba(201,169,98,.15)}50%{box-shadow:0 0 30px rgba(201,169,98,.3)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes inkPulse{0%,100%{opacity:.3}50%{opacity:.9}}
  @keyframes writing{0%,100%{opacity:.3}50%{opacity:.9}}
  @keyframes foil{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  /* RTL (Hebrew) — system serif fallback handled by font stack; flatten any tracking */
  html[dir="rtl"] body{direction:rtl}
  html[dir="rtl"] .reading, html[dir="rtl"] .modal{text-align:right}
  html[dir="rtl"] .daily .dc-txt{text-align:right}
  html[dir="rtl"] .pill,html[dir="rtl"] .modes button,html[dir="rtl"] .controls button,html[dir="rtl"] .actions button,
  html[dir="rtl"] .brand-name,html[dir="rtl"] .hero-emotional,html[dir="rtl"] .intention-label,html[dir="rtl"] .pos-label,
  html[dir="rtl"] .pickhint,html[dir="rtl"] .tap-hint,html[dir="rtl"] .dc-kick,html[dir="rtl"] .footer-nav-label,
  html[dir="rtl"] .kw-chip,html[dir="rtl"] .filter-chip,html[dir="rtl"] .modal button,html[dir="rtl"] .journey-step,
  html[dir="rtl"] .hero-link,html[dir="rtl"] .badge,html[dir="rtl"] .yn-verdict{letter-spacing:0}
  /* top bar */
  .topbar{display:flex; justify-content:space-between; align-items:center;
    padding:max(14px,env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) 14px max(22px,env(safe-area-inset-left,0px));
    border-bottom:1px solid var(--hairline); flex-wrap:wrap; gap:var(--space-2);
    position:sticky; top:0; z-index:50;
    background:rgba(11,10,17,.88);
    backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1)}
  .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-height:44px}
  .brand-mark{width:30px; height:30px; border-radius:50%; flex-shrink:0; display:block}
  .brand-name{font-family:var(--font-display); font-size:26px; font-weight:400; letter-spacing:-.01em; color:var(--text)}
  .brand-name .brand-to{color:var(--iris)}
  .topbar-moon{display:none; align-items:center; gap:8px; font:500 13px var(--font-ui); color:rgba(241,238,232,.55)}
  .topbar-moon img{width:16px; height:16px; border-radius:50%}
  @media (min-width:860px){.topbar-moon{display:inline-flex}}
  .nav{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
  .pill{font-family:var(--font-ui); font-size:14px; font-weight:500; cursor:pointer;
    color:rgba(241,238,232,.55); padding:8px 2px; min-height:40px;
    border:none; border-radius:0; background:transparent;
    transition:color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
  .pill:hover{color:var(--text)}
  .pill:active{transform:scale(.97)}
  .pill:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:8px}
  .pill.active-nav{color:var(--text); box-shadow:inset 0 -2px 0 var(--iris); padding-bottom:4px}
  .pill.solid{background:var(--iris-fill); color:#fff; border-radius:var(--radius-md); font-weight:600; padding:9px 16px; box-shadow:var(--cta-shadow)}
  .pill.solid:hover{filter:brightness(1.06); color:#fff}
  select.pill{font:600 12px var(--font-ui); padding:8px 14px; min-height:36px; border-radius:var(--radius-md);
    border:1px solid var(--hairline-strong); color:var(--text); background:#131118}
  .badge{font:600 11px var(--font-ui); color:var(--iris-text); background:var(--iris-tint); border:none; border-radius:100px; padding:6px 12px; letter-spacing:.02em}
  /* hero */
  h1{font-family:var(--font-display); font-size:var(--text-display); letter-spacing:-.015em; font-weight:400; margin-top:var(--space-5);
    line-height:1.02; color:var(--text)}
  .sub{color:rgba(241,238,232,.62); margin:var(--space-2) auto var(--space-3); font-size:clamp(15px,2vw,17px); padding:0 var(--space-3); max-width:600px; line-height:1.6}
  .wrap{max-width:1120px; width:100%; margin:0 auto; padding:0 22px; min-width:0}
  .skip-link{position:fixed; top:-100px; left:8px; z-index:999; background:var(--iris-fill); color:#fff; padding:10px 14px; border-radius:10px; font:600 14px var(--font-ui); text-decoration:none}
  .skip-link:focus{top:8px}
  /* AI paused: the disabled deep-reading button is noise, not an action */
  body.ai-off #deepBtn{display:none}
  /* ad slot — hidden until a real ad fills it */
  .adslot{display:none; max-width:970px; margin:14px auto; min-height:90px; border-radius:var(--radius-md);
    border:1px dashed rgba(241,238,232,.15); background:rgba(241,238,232,.04);
    align-items:center; justify-content:center; color:rgba(241,238,232,.3); font:500 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase}
  .adslot.filled{display:flex}
  /* question + controls */
  .qbox{display:flex; gap:12px; align-items:center; margin:8px auto 0; max-width:520px;
    border:1px solid var(--hairline-strong); border-radius:var(--radius-lg); padding:6px 6px 6px 18px; background:var(--surface)}
  .qbox input{flex:1; min-width:0; font-family:var(--font-ui); font-style:italic; font-size:15px; padding:10px 8px 10px 0; border:none; background:transparent; color:var(--text)}
  .qbox input::placeholder{color:rgba(241,238,232,.6); font-style:italic}
  .qbox input:focus{outline:none}
  .qbox:focus-within{border-color:var(--iris); box-shadow:0 0 0 1px rgba(143,127,242,.35)}
  .qbox button{flex:0 0 auto; font-family:var(--font-ui); font-size:15px; font-weight:600;
    cursor:pointer; color:#fff; padding:13px 26px; border:none; border-radius:var(--radius-md); background:var(--iris-fill); white-space:nowrap;
    box-shadow:var(--cta-shadow);
    transition:filter var(--dur-fast), opacity var(--dur-fast)}
  .qbox button:hover{filter:brightness(1.07)}
  .qbox button:disabled{opacity:.6}
  .draw-hint{margin:10px 0 0; font:500 13px var(--font-ui); color:var(--text-2); text-align:start}
  /* Mobile: the draw button is the hero action — full width, big, above the optional question.
     Older readers should never have to guess that the question is optional or hunt for the button. */
  @media (max-width:600px){
    .intention-wrap{width:100%}
    .qbox{flex-direction:column; align-items:stretch; gap:12px; padding:0; border:none; background:none; box-shadow:none}
    .qbox:focus-within{border:none; box-shadow:none}
    .qbox button{order:-1; width:100%; min-height:60px; font-size:20px; padding:16px 24px; border-radius:16px;
      box-shadow:var(--cta-shadow), 0 0 0 1px rgba(179,167,247,.35); animation:drawBreathe 3.2s ease-in-out infinite}
    .qbox button::before{content:"✦"; margin-inline-end:10px; opacity:.85}
    .qbox input{min-height:52px; font-size:16px; padding:13px 16px; border:1px solid var(--hairline-strong); border-radius:14px; background:var(--surface)}
    .qbox input:focus{border-color:var(--iris); box-shadow:0 0 0 1px rgba(143,127,242,.35)}
    .draw-hint{text-align:center; font-size:14px}
  }
  @keyframes drawBreathe{0%,100%{box-shadow:var(--cta-shadow), 0 0 0 1px rgba(179,167,247,.3)}50%{box-shadow:0 6px 26px rgba(106,90,224,.6), 0 0 0 3px rgba(179,167,247,.22)}}
  @media (prefers-reduced-motion: reduce){.qbox button{animation:none}}
  .modes{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 14px}
  .modes button{font-family:var(--font-ui); font-size:13px; font-weight:500; cursor:pointer; color:rgba(241,238,232,.6); padding:8px 16px; min-height:36px;
    border:1px solid rgba(255,255,255,.12); border-radius:100px; background:transparent; white-space:nowrap;
    transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast)}
  .modes button:hover{color:var(--text); border-color:var(--hairline-x)}
  .modes button:active{transform:scale(.97)}
  .modes button:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .modes button.active{background:var(--iris-tint); border:1px solid var(--iris); color:var(--text); font-weight:600}
  /* v7d — moon-gate chip, two states; unlocked pulses its gold glow (8s, subtle) */
  .modes button.moon-chip.locked{border:1px dashed rgba(241,238,232,.2); color:rgba(241,238,232,.4); cursor:default}
  .modes button.moon-chip.locked:hover{color:rgba(241,238,232,.4); border-color:rgba(241,238,232,.2)}
  .modes button.moon-chip.open{border:1px solid rgba(201,169,98,.6); background:rgba(201,169,98,.1); color:#e9d5a3; font-weight:600;
    box-shadow:0 0 18px rgba(201,169,98,.25); animation:moonGlow 8s ease-in-out infinite}
  .modes button.moon-chip.open.active{border-color:#c9a962; background:rgba(201,169,98,.16); color:#f1eee8}
  @keyframes moonGlow{0%,100%{box-shadow:0 0 12px rgba(201,169,98,.18)}50%{box-shadow:0 0 24px rgba(201,169,98,.35)}}
  @media (prefers-reduced-motion: reduce){.modes button.moon-chip.open{animation:none}}
  /* reader voice (persona) selector */
  .personas{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0 auto 14px}
  .personas .plabel{font-size:13px; color:var(--muted); font-style:italic}
  .persona{font-family:var(--font-ui); font-size:13px; font-weight:500; cursor:pointer; color:rgba(241,238,232,.6); padding:8px 16px; min-height:36px;
    border:1px solid rgba(255,255,255,.12); border-radius:100px; background:transparent;
    transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast)}
  .persona:hover{color:var(--text)}
  .persona:active{transform:scale(.97)}
  .persona:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .persona.active{background:var(--iris-tint); border-color:var(--iris); color:var(--text); font-weight:600}
  .controls{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:6px}
  .controls button{font-family:var(--font-ui); font-size:15px; font-weight:600; cursor:pointer; color:#fff; min-height:48px;
    padding:13px 26px; border:none; border-radius:var(--radius-md); background:var(--iris-fill); white-space:nowrap;
    box-shadow:var(--cta-shadow);
    transition:filter var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast)}
  .controls button:hover{filter:brightness(1.07)}
  .controls button:active:not(:disabled){transform:scale(.98)}
  .controls button:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .controls button.ghost{background:transparent; color:var(--text); border:1px solid var(--hairline-x); font-weight:600; box-shadow:none}
  .controls button.ghost:hover{border-color:rgba(255,255,255,.3); filter:none}
  .modeDesc{color:rgba(241,238,232,.55); font-family:var(--font-display); font-style:italic; font-size:15px; margin:6px 0 20px; min-height:18px}
  /* v7b — candle mode + soundscape */
  .controls .ritual-chip{font:600 12px var(--font-ui); padding:7px 14px; min-height:36px; border-radius:100px;
    border:1px solid var(--hairline-strong); background:transparent; color:rgba(241,238,232,.6); box-shadow:none; cursor:pointer;
    transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast)}
  .controls .ritual-chip:hover{filter:none; color:var(--text)}
  .controls .ritual-chip.on{background:rgba(255,196,120,.14); color:#ffc478; border-color:rgba(255,196,120,.35)}
  .controls .ritual-chip#soundBtn.on{background:var(--iris-tint); color:var(--iris-text); border-color:rgba(143,127,242,.4)}
  #candleVeil{position:fixed; inset:0; z-index:150; pointer-events:none; opacity:0; transition:opacity .5s ease;
    background:radial-gradient(circle var(--cr,340px) at var(--cx,50%) var(--cy,40%),
      rgba(255,196,120,.1) 0%, rgba(3,3,8,0) 30%, rgba(3,3,8,.86) 72%)}
  body.candle-on #candleVeil{opacity:1}
  body.candle-on .topbar,body.candle-on footer{opacity:.55}
  /* spread — flat night table, one ambient aura */
  .spread{display:flex; gap:20px 32px; justify-content:center; flex-wrap:wrap; perspective:1600px; align-items:flex-start;
    max-width:100%; overflow:visible; position:relative}
  .spread:not(:empty){background:transparent; border-radius:20px;
    border:none; padding:32px 22px}
  .spread:not(:empty)::before{content:""; position:absolute; left:50%; top:50%; width:min(640px,90%); aspect-ratio:1;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:-1;
    background:radial-gradient(circle,rgba(143,127,242,.16),transparent 65%);
    animation:breathe 6s ease-in-out infinite}
  .spread.verdict-swell::before{animation:breatheSwell 6s ease-in-out 1, breathe 6s ease-in-out 6s infinite}
  @keyframes breatheSwell{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
  /* Pre-draw ghost stage: face-down silhouettes at low opacity, one click from the ritual. */
  .stage-placeholder{display:flex; flex-direction:column; align-items:center; gap:18px; width:100%;
    margin:6px auto 0; padding:10px 16px 16px; background:none; border:0; cursor:pointer}
  .sp-ghosts{display:flex; gap:22px; justify-content:center}
  .sp-ghost{width:120px; height:201px; border-radius:10px; border:1px dashed var(--border-frame);
    background:var(--card-back-grad) url('/assets/gilt/card-back.webp') center/cover;
    opacity:.22; transform:rotate(var(--r,0deg)); transition:opacity var(--dur-med), transform var(--dur-med)}
  .sp-ghost:nth-child(1){--r:-6deg; margin-top:10px}
  .sp-ghost:nth-child(3){--r:6deg; margin-top:10px}
  .stage-placeholder:hover .sp-ghost,.stage-placeholder:focus-visible .sp-ghost{opacity:.45}
  .stage-placeholder:hover .sp-ghost:nth-child(1){transform:rotate(-8deg) translateY(-4px)}
  .stage-placeholder:hover .sp-ghost:nth-child(3){transform:rotate(8deg) translateY(-4px)}
  .sp-prompt{color:var(--text-3); font-size:15px; letter-spacing:.02em; transition:color var(--dur-med)}
  .stage-placeholder:hover .sp-prompt,.stage-placeholder:focus-visible .sp-prompt{color:var(--muted)}
  @media (max-width:640px){ .sp-ghost{width:84px; height:141px; border-radius:8px} .sp-ghosts{gap:12px} }
  .slot{display:flex; flex-direction:column; align-items:center; gap:10px; width:180px; transform-style:preserve-3d}
  .pos-label{font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:rgba(241,238,232,.45); min-height:16px}
  .card{width:180px; height:302px; border-radius:12px; position:relative; transform-style:preserve-3d;
    transition:transform var(--dur-slow) ease-in-out, box-shadow var(--dur-med);
    cursor:pointer; box-shadow:var(--shadow-lg)}
  .card:hover:not(.flipped){box-shadow:0 20px 48px rgba(0,0,0,.65), 0 0 20px rgba(143,127,242,.15)}
  .card.flipped{transform:rotateY(180deg)}
  .card.card-reveal-pulse{animation:cardPulse .76s var(--ease-out)}
  @keyframes cardPulse{
    0%{box-shadow:var(--shadow-lg)}
    42%{box-shadow:0 20px 44px rgba(0,0,0,.6), 0 0 32px rgba(143,127,242,.4)}
    100%{box-shadow:var(--shadow-lg)}}
  /* dealing the spread — cards slide in from the deck pile with a slight arc,
     450ms each, 80ms stagger; the label fades in after its card lands */
  .slot.slot-enter{animation:slotIn .45s var(--ease-out) both}
  @keyframes slotIn{
    from{opacity:0;transform:translateY(-34px) translateX(-18px) rotate(-4deg)}
    60%{opacity:1;transform:translateY(4px) translateX(2px) rotate(1deg)}
    to{opacity:1;transform:translateY(0) translateX(0) rotate(0)}}
  .slot.slot-enter .pos-label{animation:fadeUp .3s var(--ease-out) both; animation-delay:inherit}
  .face{position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;
    border:none; background:var(--surface); box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .front{transform:rotateY(180deg); background:var(--surface); box-shadow:0 0 0 1px var(--gold-frame)}
  .card svg{display:block; width:100%; height:100%}
  .back .back-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .back .back-chip{position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,10,17,.3)}
  .back .back-chip span{font:600 12px var(--font-ui); color:var(--text);
    border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:8px 16px; background:rgba(11,10,17,.75); white-space:nowrap;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
  .back .back-sweep{position:absolute; top:0; bottom:0; left:0; width:46%; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(143,127,242,.14),transparent); animation:sweep 3.6s ease-in-out infinite}
  /* v5d — foil press-and-hold reveal */
  .back .foil-sheen{position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(115deg,transparent 30%,rgba(143,127,242,.35) 44%,rgba(241,238,232,.45) 50%,rgba(201,169,98,.3) 56%,transparent 70%);
    background-size:200% 100%; transition:opacity .2s var(--ease-out)}
  .card.foil-charging .back .foil-sheen{opacity:1; animation:foil 2.4s linear infinite}
  .card.foil-charging{transform:translateY(-4px)}
  .foil-bar{width:120px; height:4px; border-radius:100px; background:rgba(241,238,232,.08); overflow:hidden; margin:2px auto 0}
  .foil-bar[hidden]{display:none}
  .foil-bar span{display:block; width:0; height:100%; border-radius:100px; background:linear-gradient(90deg,#6a5ae0,#8f7ff2); transition:width .9s linear}
  .foil-bar.run span{width:100%}
  @media (prefers-reduced-motion: reduce){.back .foil-sheen{display:none}}
  .rws{width:100%; height:100%; object-fit:cover; display:block}
  .rws.rev{transform:rotate(180deg)}
  .fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:12px; color:rgba(241,238,232,.6); font-family:var(--font-display); font-size:15px; font-style:italic; background:var(--surface)}
  .card-name{max-width:200px; font-family:var(--font-display); font-size:17px; line-height:1.3; color:var(--text); font-weight:400;
    opacity:0; transition:opacity .5s}
  .card-name.show{opacity:1}
  .card-name .reversed-tag{font-family:var(--font-ui)}
  .kw-chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:210px; animation:fadeUp .4s var(--ease-out) both}
  .kw-chip{font:500 12px var(--font-ui); padding:4px 10px; border-radius:100px;
    border:none; background:rgba(241,238,232,.06); color:rgba(241,238,232,.6); white-space:nowrap}
  .writing-line{font-family:var(--font-display); font-size:14px; font-style:italic; color:rgba(241,238,232,.4); animation:writing 1.6s ease-in-out infinite; min-height:18px}
  .meaning{max-width:210px; min-height:48px; font-size:14px; color:rgba(241,238,232,.7); line-height:1.6; opacity:0;
    transition:opacity .5s}
  .meaning.show{opacity:1; animation:fadeUp .4s var(--ease-out) both}
  .meaning b{color:var(--text); font-style:normal}
  .reversed-tag{font:600 10px var(--font-ui); padding:3px 8px; border-radius:100px; background:rgba(11,10,17,.75); color:var(--text); font-style:normal; vertical-align:middle}
  /* "Reversed" pill over the card corner — the art rotates, the frame and pill never do */
  .rev-pill{position:absolute; top:8px; right:8px; font:600 10px var(--font-ui); padding:3px 8px; border-radius:100px;
    background:rgba(11,10,17,.75); color:var(--text); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:none}
  html[dir="rtl"] .rev-pill{right:auto; left:8px}
  .spread-note{font-size:12px; color:var(--text-3); text-align:center; margin:12px auto 0; display:none}
  .spread-note.show{display:block}
  .shared-badge{width:fit-content; margin:0 auto 14px; padding:6px 14px; border-radius:100px; font-size:12px;
    color:#b3a7f7; background:rgba(143,127,242,.12); border:1px solid rgba(143,127,242,.3); text-align:center}
  /* tactile card picker (draw ritual) — the fan */
  .pickwrap{display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
  .ritual-step{font:500 12px var(--font-ui);color:rgba(241,238,232,.45);text-align:center}
  .picktitle{margin:6px 0 0; font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:400; letter-spacing:-.01em; color:var(--text); text-align:center}
  /* v7a — cut the deck */
  .cut-stage{position:relative; width:min(340px,92vw); height:250px; margin:6px auto 0}
  .cut-half{position:absolute; left:50%; width:150px; height:120px; border-radius:12px 12px 4px 4px;
    background:#131118 url('/assets/gilt/card-back.webp') top/cover;
    transition:transform .45s var(--ease-out), opacity .3s}
  .cut-bottom{top:110px; transform:translateX(-72%) rotate(-4deg);
    box-shadow:0 -2px 0 rgba(255,255,255,.06), 0 16px 36px rgba(0,0,0,.6)}
  .cut-top{top:24px; transform:translateX(-28%) rotate(5deg); cursor:grab; touch-action:none;
    box-shadow:0 0 0 1.5px rgba(143,127,242,.6), 0 20px 44px rgba(106,90,224,.4)}
  .cut-top:active{cursor:grabbing}
  .cut-top:focus-visible{outline:none; box-shadow:var(--focus-ring), 0 20px 44px rgba(106,90,224,.4)}
  .cut-top.cut-done{transform:translateX(-72%) translateY(96px) rotate(-4deg)!important; opacity:0; box-shadow:0 16px 36px rgba(0,0,0,.6)}
  .cut-tap{font:500 13px var(--font-ui); color:rgba(241,238,232,.45); text-align:center}
  .pickhint{font-family:var(--font-display); font-style:italic; color:rgba(241,238,232,.55); font-size:17px; text-align:center; min-height:18px}
  .fan{display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; max-width:100%; padding:30px 8px 24px; margin-bottom:8px}
  .pick{width:104px; height:175px; margin:0 -26px; border-radius:10px; cursor:pointer; flex:0 0 auto; overflow:hidden;
    background:var(--surface); position:relative;
    transform:rotate(var(--rot,0deg)); transform-origin:50% 130%;
    transition:transform .18s var(--ease-out), opacity .4s, margin .45s, box-shadow .18s var(--ease-out);
    border:none; box-shadow:0 16px 36px rgba(0,0,0,.6)}
  .pick img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
  .pick svg{display:block; width:100%; height:100%}
  .pick svg,.pick svg *{pointer-events:none}
  .pick:hover,.pick:focus-visible{transform:rotate(var(--rot,0deg)) translateY(-16px); outline:none;
    box-shadow:0 0 0 2px var(--iris), 0 16px 44px rgba(106,90,224,.45)}
  .pick:focus-visible{box-shadow:var(--focus-ring), 0 16px 44px rgba(106,90,224,.35)}
  .pick.chosen{opacity:.25; transform:rotate(var(--rot,0deg)) translateY(-52px); pointer-events:none;
    box-shadow:0 0 0 2px var(--iris), 0 16px 44px rgba(106,90,224,.45)}
  @media (max-width:560px){.pick{width:74px; height:125px; margin:0 -20px}}
  @media (prefers-reduced-motion: reduce){.pick,.pick:hover,.pick.chosen{transition:none}}
  /* action row */
  .actions{display:flex; flex-direction:column; align-items:center; gap:12px; margin:26px auto 0}
  .actions-primary{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
  .actions button,.actions-more-btn{font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
    padding:10px 18px; min-height:42px; border-radius:var(--radius-md); white-space:nowrap;
    border:1px solid var(--hairline-x); background:transparent; color:var(--text);
    transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); position:relative}
  .actions button:hover,.actions-more-btn:hover{border-color:rgba(255,255,255,.3)}
  .actions button:active:not(:disabled),.actions-more-btn:active{transform:scale(.97)}
  .actions button:focus-visible,.actions-more-btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .actions button.primary{background:var(--iris-fill); color:#fff; border-color:transparent; font-weight:600}
  .actions button.primary:hover{filter:brightness(1.07); color:#fff}
  .actions button:disabled{opacity:1; color:rgba(241,238,232,.35); border-color:var(--hairline); cursor:not-allowed; transform:none}
  .actions-more-btn{background:transparent; border:none; color:var(--text-3);
    padding:6px 10px; min-height:36px; font-size:13px; font-weight:600}
  .actions-more-btn:hover{background:transparent; color:var(--text-2)}
  .actions-more{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; width:100%}
  .actions-more[hidden]{display:none!important}
  /* shuffle beat — riffling stack before the picker ritual */
  .spread.shuffling{min-height:220px; align-items:center}
  .shuffle-fan{display:flex; justify-content:center; align-items:center; gap:0; padding:28px 8px; width:100%; position:relative}
  .shuffle-back{width:84px; height:141px; margin:0 -30px; border-radius:10px; overflow:hidden; position:relative;
    background:var(--surface); border:none;
    box-shadow:0 12px 30px rgba(0,0,0,.55);
    animation:shuf 1.2s ease-in-out infinite}
  .shuffle-back:nth-child(1){--r:-9deg; animation-delay:0s}
  .shuffle-back:nth-child(2){--r:6deg; animation-delay:.18s}
  .shuffle-back:nth-child(3){--r:-3deg; animation-delay:.36s}
  .shuffle-back:nth-child(4){--r:2deg; animation-delay:.5s; box-shadow:0 14px 34px rgba(0,0,0,.65)}
  .shuffle-back:nth-child(5){--r:-6deg; animation-delay:.26s}
  .shuffle-back img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .shuffle-back svg{display:block; width:100%; height:100%}
  @media (prefers-reduced-motion: reduce){
    .shuffle-back{animation:none}
  }
  /* reading panel */
  .reading{max-width:760px; width:100%; min-width:0; margin:var(--space-4) auto 0; text-align:left;
    background:var(--surface);
    border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:24px 28px;
    line-height:var(--leading-relaxed); display:none; overflow-wrap:break-word; word-wrap:break-word; overflow:visible}
  .reading.show{display:block; animation:readingIn .4s var(--ease-out); min-height:200px}
  @keyframes readingIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes readingGlow{
    0%,100%{box-shadow:none}
    45%{box-shadow:0 0 26px rgba(143,127,242,.2)}}
  .reading.reading-complete{animation:readingIn .4s var(--ease-out), readingGlow 1s var(--ease-out) .25s}
  .reading h3{color:var(--iris); font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
    overflow-wrap:break-word; word-wrap:break-word; max-width:100%}
  html[dir="rtl"] .reading h3{letter-spacing:0}
  .reading .rmeta{color:rgba(241,238,232,.55); font-family:var(--font-display); font-style:italic; font-size:15px; margin-bottom:16px;
    overflow-wrap:break-word; word-wrap:break-word; max-width:100%}
  .reading h4{color:var(--iris-text); font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; margin:18px 0 4px;
    overflow-wrap:break-word; word-wrap:break-word; max-width:100%}
  html[dir="rtl"] .reading h4{letter-spacing:0}
  .reading p,.reading .reading-body{color:rgba(241,238,232,.7); font-size:15px; margin:8px 0; line-height:1.65;
    overflow-wrap:break-word; word-wrap:break-word; word-break:break-word; max-width:var(--prose-width); min-width:0}
  .reading .reading-body{margin-left:auto; margin-right:auto}
  .reading .small{font-size:12px; color:var(--text-3); margin-top:18px; border-top:1px solid var(--hairline); padding-top:12px}
  .reading-divider{display:flex; align-items:center; gap:14px; color:rgba(241,238,232,.35); margin:18px 0}
  .reading-divider::before,.reading-divider::after{content:""; flex:1; border-top:1px solid var(--hairline)}
  /* giant serif yes/no verdict — 300ms beat of empty glow, then the verdict
     scales .94→1 / fades in over 400ms; the nuance line follows 500ms later */
  .yn-verdict{font-family:var(--font-display); font-size:clamp(64px,10vw,96px); font-weight:400; letter-spacing:-.02em; color:var(--text); text-align:center;
    line-height:1; margin:10px 0 6px; animation:verdictIn .4s var(--ease-out) .3s both}
  @keyframes verdictIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
  .yn-card-line,.yn-gloss{animation:fadeUp .4s var(--ease-out) 1.2s both}
  .reading .yn-verdict~.small{animation:fadeUp .4s var(--ease-out) 1.2s both}
  .yn-verdict .yn-dot{color:var(--iris)}
  .yn-gloss{font-size:15px; color:rgba(241,238,232,.6); text-align:center; line-height:1.6; max-width:44ch; margin:0 auto}
  .yn-card-line{display:flex; align-items:baseline; gap:10px; justify-content:center; margin:2px 0 8px}
  .yn-card-name{font-family:var(--font-display); font-size:18px; color:rgba(241,238,232,.7)}
  /* callout card — The Thread (AI-paused waitlist) */
  .upsell{margin-top:var(--space-4); padding:20px 22px; border-radius:var(--radius-lg); text-align:left;
    background:linear-gradient(170deg,rgba(143,127,242,.1),rgba(143,127,242,.03)); border:1px solid rgba(143,127,242,.3)}
  .upsell .up-title{color:var(--iris-text); font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}
  html[dir="rtl"] .upsell .up-title{letter-spacing:0}
  .upsell p{color:rgba(241,238,232,.75); font-family:var(--font-display); font-style:italic; font-size:16px; margin:6px 0 12px; line-height:1.6; overflow-wrap:break-word; word-wrap:break-word; max-width:100%}
  .upsell button{font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer; padding:11px 20px; border:none; border-radius:var(--radius-md);
    background:var(--iris-fill); color:#fff}
  .spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(143,127,242,.3);
    border-top-color:var(--iris); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:8px}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* daily card strip */
  .daily{max-width:720px; margin:var(--space-4) auto; padding:22px 28px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center;
    border-radius:20px; border:1px solid var(--hairline); position:relative; overflow:visible;
    background:var(--surface)}
  .daily .dc-img-link{display:block; flex-shrink:0; text-decoration:none; position:relative; z-index:1; line-height:0}
  .daily .dc-img{width:120px; height:200px; border-radius:10px; object-fit:cover; display:block;
    border:none;
    box-shadow:0 14px 32px rgba(0,0,0,.55), 0 0 0 1px var(--gold-frame);
    transition:box-shadow var(--dur-fast) var(--ease-out)}
  .daily .dc-img-link:hover .dc-img{box-shadow:0 20px 44px rgba(0,0,0,.6), 0 0 0 1px var(--gold-frame-hi)}
  .daily .dc-txt{text-align:left; flex:1; min-width:200px; position:relative; z-index:1}
  .daily .dc-txt b{color:var(--text)}
  .daily .dc-kick{font:600 11px var(--font-ui); letter-spacing:.08em; color:var(--iris); text-transform:uppercase; margin-bottom:6px}
  .daily .dc-name{font-family:var(--font-display); font-size:30px; font-weight:400; color:var(--text); display:inline-block; line-height:1.15}
  .daily .dc-rev{color:rgba(241,238,232,.5); font:500 12px var(--font-ui); letter-spacing:.06em; text-transform:uppercase}
  .daily .dc-mean{font-family:var(--font-display); font-size:16px; font-style:italic; color:rgba(241,238,232,.65); margin-top:6px; line-height:1.5; max-width:44ch}
  .daily .dc-actions{display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:14px; align-items:center}
  .daily .dc-study{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:13px; font-weight:600;
    padding:11px 20px; border-radius:var(--radius-md); background:transparent; color:var(--text); border:1px solid var(--hairline-x);
    text-decoration:none; transition:border-color var(--dur-fast)}
  .daily .dc-study:hover{border-color:rgba(255,255,255,.3); opacity:1}
  .daily .dc-link{font:600 13px var(--font-ui); cursor:pointer; display:inline-flex; align-items:center; min-height:38px; padding:6px 14px; border-radius:999px; background:var(--iris-fill); color:#fff; text-decoration:none; box-shadow:var(--cta-shadow)}
  .daily .dc-link:hover{color:var(--iris-text)}
  .streak{color:var(--iris-text); font:600 11px var(--font-ui); background:var(--iris-tint); border-radius:100px; padding:4px 10px; display:inline-block}
  .streak.milestone{animation:streakGlow 2.4s ease-in-out infinite}
  @keyframes streakGlow{0%,100%{box-shadow:0 0 0 rgba(143,127,242,0)}50%{box-shadow:0 0 14px rgba(143,127,242,.4)}}
  /* streak tick — badge pops (1→1.15→1, 300ms) as the number increments */
  .streak.pop,.badge.pop{animation:streakPop .3s var(--ease-out) 1}
  @keyframes streakPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
  .daily .dc-share{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:38px;padding:6px 13px;border:1px solid var(--hairline-strong);border-radius:999px;font:600 13px var(--font-ui);color:var(--text-2);cursor:pointer;text-decoration:none;background:transparent}
  .daily .dc-share-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .daily .dc-dot{display:none}
  .daily .dc-dot{color:rgba(241,238,232,.3)}
  .daily .dc-share:hover{color:var(--iris-text);opacity:1}
  .daily .dc-return{font-size:13px;color:var(--muted);margin-top:10px;font-style:italic}
  /* hero — text left, fanned floating cards right */
  .hero{padding:36px 22px 28px; position:relative; max-width:1120px; margin:0 auto; text-align:left}
  html[dir="rtl"] .hero{text-align:right}
  .hero::after{content:"";position:absolute;bottom:0;left:4%;right:4%;height:1px;
    background:var(--hairline);opacity:.8}
  .hero-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
  .hero-grid>div{min-width:0}
  @media (min-width:900px){.hero-grid{grid-template-columns:1fr 420px; gap:48px} .hero{padding:56px 40px 48px}}
  .hero-emotional{font:600 11px var(--font-ui);color:var(--iris);
    letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;line-height:1.45}
  .hero h1{margin:0}
  .hero h1 .h1-accent{font-style:italic;color:var(--iris)}
  .hero .sub{margin:12px 0 6px; padding:0; max-width:440px}
  html[dir="rtl"] .hero .sub{margin-right:0}
  .hero-ctas{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin:10px 0 4px}
  html[dir="rtl"] .hero-ctas{align-items:flex-end}
  .hero-ctas .qbox{width:100%; margin:8px 0 0}
  .hero-spread{display:flex;flex-direction:column;gap:10px;padding-top:6px;width:100%}
  .hero-spread .modes{justify-content:flex-start;margin:0}
  .hero-spread .modeDesc{text-align:left;margin:0;min-height:22px}
  html[dir="rtl"] .hero-spread .modes{justify-content:flex-end}
  html[dir="rtl"] .hero-spread .modeDesc{text-align:right}
  /* mobile: chips stay on one scrollable row instead of stacking */
  @media (max-width:600px){
    /* wrap (no hidden sideways scroll): every spread stays visible, nothing looks cropped */
    .hero-spread .modes{flex-wrap:wrap; max-width:100%}
    .hero-spread .modes button{flex:0 0 auto; min-height:44px; font-size:14px}
  }
  /* discovery rituals — a quiet row under the daily strip */
  /* quick rituals — one tidy chip row below the daily card (yes/no · birth card · friend) */
  .ritual-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:4px auto 10px;max-width:720px}
  .ritual-links .hero-link{border:1px solid var(--hairline);background:var(--surface);border-radius:100px;
    padding:10px 18px;min-height:40px;color:var(--text-2);
    transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
  .ritual-links .hero-link:hover{border-color:var(--hairline-x);color:var(--text)}
  .hero-secondary{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .hero-link{font:500 13px var(--font-ui);cursor:pointer;color:rgba(241,238,232,.55);background:none;border:none;
    padding:2px 0 3px;min-height:auto;text-decoration:none;
    transition:color var(--dur-fast)}
  .hero-link:hover{color:var(--text)}
  .hero-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
  .hero-link.gold{color:var(--iris)}
  .hero-link.gold:hover{color:var(--iris-text)}
  .hero-fine{font-size:12px;color:var(--text-3);margin-top:4px}
  /* fanned floating cards (right column) */
  .hero-fan{position:relative; height:420px; display:none}
  @media (min-width:900px){.hero-fan{display:block}}
  .hero-fan::before{content:""; position:absolute; left:50%; top:46%; width:360px; height:360px;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,rgba(143,127,242,.22),transparent 65%);
    animation:breathe 6s ease-in-out infinite}
  .hero-fan .hf-card{position:absolute; width:176px; height:296px; border-radius:14px; overflow:hidden;
    background:#131118 url('/assets/gilt/card-back.webp') center/cover; animation:floaty 5s ease-in-out infinite}
  .hero-fan .hf-card img{width:100%; height:100%; object-fit:cover; display:block}
  .hero-fan .hf-1{--r:-11deg; left:8px; top:44px; border:none; box-shadow:0 20px 48px rgba(0,0,0,.6); transform:rotate(-11deg)}
  .hero-fan .hf-2{--r:-1deg; left:104px; top:16px; border:none; box-shadow:0 20px 48px rgba(0,0,0,.65); transform:rotate(-1deg); animation-delay:.6s}
  .hero-fan .hf-3{--r:10deg; left:212px; top:48px; border:none; box-shadow:0 24px 56px rgba(0,0,0,.7), 0 0 0 1px var(--gold-frame); transform:rotate(10deg); animation-delay:1.2s}
  /* mobile hero fan */
  .hero-fan-m{position:relative; height:118px; margin:4px 0 0}
  @media (min-width:900px){.hero-fan-m{display:none}}
  .hero-fan-m .hf-card{position:absolute; width:72px; height:120px; border-radius:8px; overflow:hidden;
    background:#131118 url('/assets/gilt/card-back.webp') center/cover; animation:floaty 5s ease-in-out infinite}
  .hero-fan-m .hf-card img{width:100%; height:100%; object-fit:cover; display:block}
  .hero-fan-m .hf-1{--r:-12deg; left:calc(50% - 110px); top:12px; border:none; box-shadow:0 10px 24px rgba(0,0,0,.55); transform:rotate(-12deg)}
  .hero-fan-m .hf-2{--r:-1deg; left:calc(50% - 30px); top:3px; border:none; box-shadow:0 10px 24px rgba(0,0,0,.6); transform:rotate(-1deg); animation-delay:.6s}
  .hero-fan-m .hf-3{--r:10deg; left:calc(50% + 44px); top:13px; border:none; box-shadow:0 10px 24px rgba(0,0,0,.65), 0 0 0 1px var(--gold-frame); transform:rotate(10deg); animation-delay:1.2s}
  /* emotional journey stepper */
  .journey{display:flex;justify-content:center;align-items:center;gap:6px 10px;margin:var(--space-3) auto var(--space-2);
    padding:0 var(--space-3);max-width:540px;flex-wrap:wrap}
  .journey.journey-deferred,[hidden]#journeySteps{display:none!important}
  .journey-step{display:flex;align-items:center;gap:7px;font:500 12px var(--font-ui);
    color:rgba(241,238,232,.45);transition:color var(--dur-fast) var(--ease-out)}
  .journey-step.active{color:var(--iris-text)}
  .journey-step.done{color:rgba(241,238,232,.65)}
  .journey-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;background:transparent;
    transition:background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
  .journey-step.active .journey-dot{background:var(--iris);border-color:var(--iris);
    box-shadow:0 0 14px rgba(143,127,242,.5);transform:scale(1.2)}
  .journey-step.done .journey-dot{background:rgba(143,127,242,.4);border-color:rgba(143,127,242,.4)}
  .journey-sep{width:14px;height:1px;background:var(--hairline);opacity:.9}
  .intention-wrap{max-width:620px;margin:0;padding:0;width:100%}
  .intention-label{display:block;font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
    color:rgba(241,238,232,.45);margin-bottom:10px;text-align:left}
  html[dir="rtl"] .intention-label{text-align:right}
  .reflect-hint{font-family:var(--font-display);font-style:italic;color:rgba(241,238,232,.45);font-size:15px;line-height:1.55;margin:10px auto 6px;max-width:520px;
    padding:0 var(--space-3);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
  .reflect-hint.show{opacity:1;transform:translateY(0)}
  /* tap-to-flip hint */
  .tap-hint{font-family:var(--font-display);font-style:italic;color:rgba(241,238,232,.45);font-size:14px;text-align:center;
    margin:14px auto 0;min-height:18px;display:none}
  .tap-hint.show{display:block}
  .card.pulse-hint{animation:tapPulse 2.2s var(--ease-out) infinite}
  @keyframes tapPulse{
    0%,100%{transform:none;box-shadow:var(--shadow-lg)}
    50%{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.6), 0 0 30px rgba(143,127,242,.35)}}
  @media (prefers-reduced-motion: reduce){.card.pulse-hint{animation:none}}
  /* one-line AI-waitlist invitation */
  .ai-notify-cta{max-width:760px;margin:14px auto 0;font-size:14px;color:var(--muted);display:none;text-align:center}
  .ai-notify-cta.show{display:block}
  .ai-notify-cta a{cursor:pointer;color:var(--iris-text);text-decoration:none}
  /* ✦ The Thread panel */
  .thread-panel{margin-top:var(--space-3)}
  .thread-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .thread-head .up-title{margin-bottom:0}
  .thread-pill{font:600 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;
    border:1px solid rgba(143,127,242,.4);color:var(--iris-text);white-space:nowrap}
  .thread-field{display:flex;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);padding:3px 3px 3px 14px;
    align-items:center;background:var(--bg);max-width:400px;margin-top:4px}
  .thread-field input{flex:1;min-width:0;font-family:var(--font-ui);font-style:italic;font-size:13px;border:none;background:transparent;color:var(--text);padding:9px 0}
  .thread-field input::placeholder{color:rgba(241,238,232,.6)}
  .thread-field:focus-within{border-color:var(--iris);box-shadow:0 0 0 1px rgba(143,127,242,.5)}
  .thread-ok{font:500 14px var(--font-ui);color:var(--iris-text);margin:10px 0 0}
  .thread-ai-link{display:inline-block;margin-top:12px;font:500 12px var(--font-ui);color:var(--text-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .thread-ai-link:hover{color:var(--iris-text)}
  .thread-field input:focus{outline:none}
  .thread-field button{font:600 12px var(--font-ui);padding:9px 16px;background:var(--iris-fill);color:#fff;border:none;border-radius:9px;cursor:pointer;white-space:nowrap}
  .thread-fine{display:block;font:400 11px var(--font-ui);color:rgba(241,238,232,.35);margin-top:8px;text-align:left}
  html[dir="rtl"] .thread-fine{text-align:right}
  .study-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline);text-align:left}
  html[dir="rtl"] .study-section{text-align:right}
  .study-label{font:600 11px var(--font-ui);letter-spacing:.08em;color:rgba(241,238,232,.45);text-transform:uppercase;margin-bottom:8px}
  html[dir="rtl"] .study-label{letter-spacing:0}
  .study-chips{display:flex;flex-wrap:wrap;gap:8px}
  .study-chip{font:500 12px var(--font-ui);padding:5px 12px;border-radius:100px;border:none;background:var(--iris-tint);
    color:var(--iris-text);text-decoration:none;transition:background var(--dur-fast);white-space:nowrap}
  .study-chip:hover{background:rgba(143,127,242,.22);opacity:1}
  .card-study-link{color:var(--iris-text);text-decoration:none;border-bottom:1px dotted rgba(143,127,242,.45)}
  .card-study-link:hover{border-bottom-color:var(--iris);opacity:1}
  .share-strip{border-color:var(--iris-border);
    background:linear-gradient(170deg,rgba(143,127,242,.08),rgba(143,127,242,.02))}
  .journal-strip{max-width:760px;margin:var(--space-3) auto 0;padding:14px 18px;border-radius:var(--radius-md);display:none;
    align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;text-align:left;
    background:var(--surface);border:1px solid var(--hairline-strong);font-size:13px;color:rgba(241,238,232,.7)}
  .journal-strip.show{display:flex}
  html[dir="rtl"] .journal-strip{text-align:right}
  .journal-strip button{font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;padding:9px 16px;min-height:38px;border-radius:9px;border:none;
    background:var(--iris-tint);color:var(--iris-text);white-space:nowrap;
    transition:background var(--dur-fast)}
  .journal-strip button:active{transform:scale(.97)}
  .journal-strip button:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .journal-strip .js-x{background:none;border:none;color:var(--muted);font-size:18px;padding:4px 8px;cursor:pointer;box-shadow:none}
  .adslot.ad-pulse{animation:adPulse 1.2s ease-in-out 1}
  @keyframes adPulse{0%,100%{opacity:1}50%{opacity:.88}}
  /* modal */
  .backdrop{position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(10px) saturate(1.05); display:none; align-items:center; justify-content:center; z-index:50; padding:var(--space-3)}
  .backdrop.show{display:flex; animation:backdropIn .15s var(--ease-out)}
  @keyframes backdropIn{from{opacity:0}to{opacity:1}}
  .modal{position:relative; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-xl);
    background:var(--surface);
    max-width:420px; width:100%; padding:26px; text-align:center; max-height:88vh; overflow:auto;
    box-shadow:0 40px 90px rgba(0,0,0,.8);
    animation:modalIn .2s var(--ease-out)}
  @keyframes modalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .modal h2{font-family:var(--font-display); font-size:26px; font-weight:400; letter-spacing:0; margin-bottom:var(--space-2); color:var(--text)}
  .modal p{color:rgba(241,238,232,.6); font-size:14px; margin:var(--space-2) 0; line-height:1.55}
  .modal button{font-family:var(--font-ui); font-size:14px; font-weight:600; cursor:pointer; padding:13px 22px; min-height:48px; border-radius:var(--radius-md); border:none;
    background:var(--iris-fill); color:#fff; width:100%; margin-top:var(--space-2);
    transition:filter var(--dur-fast)}
  .modal button:hover{filter:brightness(1.07)}
  .modal button:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .modal-trust{display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin:var(--space-2) 0 var(--space-1);
    font-size:12px; color:var(--text-3)}
  .modal-trust span{padding:4px 10px; border-radius:100px; border:1px solid var(--hairline); background:transparent}
  .modal .x{position:relative; float:right; background:none; color:rgba(241,238,232,.6); box-shadow:none; width:44px; min-width:44px; padding:0; font-size:22px; margin:-6px -8px 0 0; min-height:44px; display:flex; align-items:center; justify-content:center}
  .modal .tiny{font-size:11px; color:var(--text-3); margin-top:14px}
  .modal .tiny a{cursor:pointer}
  .modal input{width:100%; font-family:var(--font-ui); font-style:italic; font-size:14px; padding:12px 14px; border-radius:var(--radius-md);
    border:1px solid var(--hairline-strong); background:var(--bg); color:var(--text); margin:6px 0}
  .modal input::placeholder{color:rgba(241,238,232,.6)}
  .modal input:focus{outline:none; border-color:var(--iris)}
  /* birth card / card of the year modal (v5b + v7c) */
  .birth-modal{position:relative; overflow:hidden; max-width:480px; padding:26px 36px 30px}
  .birth-aura{position:absolute; left:50%; top:40%; width:380px; height:380px; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle,rgba(143,127,242,.18),transparent 65%); animation:breathe 6s ease-in-out infinite; pointer-events:none}
  .birth-tabs{position:relative; display:inline-flex; gap:6px; padding:4px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:var(--bg); margin:6px auto 14px}
  /* beat the generic .modal button treatment so only the ACTIVE tab reads selected */
  .modal button.birth-tab{width:auto; margin:0; min-height:0; font:600 12px var(--font-ui); padding:8px 16px; border-radius:9px; border:none;
    background:transparent; color:rgba(241,238,232,.55); cursor:pointer; box-shadow:none;
    transition:background var(--dur-fast), color var(--dur-fast)}
  .modal button.birth-tab:hover{filter:none; color:var(--text)}
  .modal button.birth-tab.active{background:var(--iris-tint); color:var(--text)}
  .birth-kick{position:relative; font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--iris); margin-bottom:12px}
  .birth-entry{position:relative; display:flex; flex-direction:column; gap:8px; align-items:center}
  .birth-entry p{margin:0}
  .birth-entry input[type="date"]{width:auto; min-width:200px; font-style:normal; color-scheme:dark; text-align:center}
  .birth-entry button{max-width:260px}
  .birth-reveal{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px}
  .birth-card-wrap{position:relative; width:150px; height:252px; margin-top:10px}
  .birth-orbit{position:absolute; inset:-26px; border-radius:50%; border:1px dashed rgba(143,127,242,.3); animation:orbit 24s linear infinite}
  #birthCardImg{width:150px; height:252px; border-radius:12px; object-fit:cover; display:block; position:relative;
    box-shadow:0 24px 56px rgba(0,0,0,.75), 0 0 0 1px rgba(201,169,98,.45)}
  .birth-name{font-family:var(--font-display); font-size:34px; letter-spacing:-.01em; color:var(--text)}
  /* the picked birthdate — explicit so shares/screenshots carry their context */
  .birth-born{font:600 12px var(--font-ui); letter-spacing:.04em; color:var(--iris-text);
    background:var(--iris-tint); border-radius:100px; padding:6px 14px; margin:2px auto 0; width:fit-content}
  .birth-sub{font:500 11px var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:rgba(241,238,232,.45)}
  .birth-essence{font-family:var(--font-display); font-style:italic; font-size:16px; line-height:1.55; color:rgba(241,238,232,.7); max-width:330px; margin:0}
  .birth-actions{display:flex; gap:8px; align-items:stretch}
  .birth-actions button{width:auto; margin-top:0; padding:12px 22px; box-shadow:var(--cta-shadow)}
  .birth-study{display:inline-flex; align-items:center; font:600 14px var(--font-ui); padding:12px 22px; border-radius:var(--radius-md);
    border:1px solid var(--hairline-x); color:var(--text); text-decoration:none}
  @media (prefers-reduced-motion: reduce){.birth-aura,.birth-orbit{animation:none}}
  /* v7g duel + v7e friend relic */
  .duel-modal{position:relative; overflow:hidden; max-width:460px}
  .duel-row{display:flex; gap:22px; align-items:center; justify-content:center; margin:16px 0 12px}
  .duel-side{display:flex; flex-direction:column; gap:7px; align-items:center}
  .duel-side .duel-art{width:104px; height:174px; border-radius:9px; overflow:hidden;
    box-shadow:0 16px 36px rgba(0,0,0,.7), 0 0 0 1px rgba(201,169,98,.5)}
  .duel-side .duel-art img{width:100%; height:100%; object-fit:cover; display:block}
  .duel-side .duel-who{font-family:var(--font-display); font-size:15px; color:var(--text)}
  .duel-x{font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--iris)}
  /* v7f — two-player pick */
  .p2-modal{position:relative; overflow:hidden; max-width:400px}
  .p2-q{font-family:var(--font-display); font-style:italic; font-size:14px; color:rgba(241,238,232,.55); margin:2px 0 6px}
  .p2-thumbs{display:flex; gap:6px; justify-content:center; margin:6px 0}
  .p2-thumb{width:58px; height:96px; border-radius:6px; overflow:hidden; opacity:.55; display:grid; place-items:center}
  .p2-thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .p2-thumb.p2-you{border:1.5px dashed rgba(143,127,242,.6); opacity:1; font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--iris-text)}
  .p2-thumb.p2-you.picked{border-style:solid; font-style:normal; font-family:var(--font-ui); font-weight:600}
  .p2-fan{display:flex; gap:5px; justify-content:center; margin:8px 0 4px}
  .modal button.p2-back{width:40px; height:66px; min-height:0; border-radius:5px; border:none; cursor:pointer; padding:0; margin:0;
    background:#131118 url('/assets/gilt/card-back.webp') center/cover; transform:rotate(var(--r,0deg)); box-shadow:none;
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast)}
  .modal button.p2-back:hover{filter:none; transform:rotate(var(--r,0deg)) translateY(-4px); box-shadow:0 0 0 1.5px var(--iris)}
  .modal button.p2-back.sel{transform:rotate(var(--r,0deg)) translateY(-6px); box-shadow:0 0 0 1.5px var(--iris), 0 10px 24px rgba(106,90,224,.45)}
  .friend-modal{position:relative; overflow:hidden; max-width:420px}
  .friend-compose{display:flex; flex-direction:column; gap:8px; text-align:left}
  html[dir="rtl"] .friend-compose{text-align:right}
  .friend-compose h2{text-align:left; margin-bottom:2px}
  html[dir="rtl"] .friend-compose h2{text-align:right}
  .friend-compose p{margin:0 0 8px; text-align:left}
  html[dir="rtl"] .friend-compose p{text-align:right}
  .friend-relic{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; position:relative;
    border-radius:14px; padding:22px 18px; overflow:hidden;
    background:radial-gradient(120% 60% at 50% -10%,rgba(143,127,242,.26),transparent 60%)}
  .friend-relic-kick{font:600 9px var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:rgba(241,238,232,.5)}
  .friend-relic-name{font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--iris-text)}
  .friend-relic-card{width:118px; height:198px; border-radius:10px; overflow:hidden; margin:8px 0 4px;
    box-shadow:0 20px 44px rgba(0,0,0,.8), 0 0 0 1.5px rgba(201,169,98,.6)}
  .friend-relic-card img{width:100%; height:100%; object-fit:cover; display:block}
  /* email modal — header art strip (v6a) */
  .email-modal{padding:0 0 26px; overflow:hidden; max-width:400px; text-align:left}
  .email-modal-art{height:110px; background:var(--bg) url('/assets/ui-v4/email-header-v4.webp') center/cover; position:relative; margin-bottom:18px}
  .email-modal-art .x{position:absolute; top:12px; right:14px; float:none}
  .email-modal-kick{font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--iris); padding:0 26px}
  .email-modal h2{padding:0 26px; margin-top:4px; text-align:left}
  .email-modal p{padding:0 26px; text-align:left}
  .email-modal input,.email-modal button:not(.x){width:calc(100% - 52px); margin-left:26px; margin-right:26px}
  .email-modal .tiny{text-align:center}
  html[dir="rtl"] .email-modal{text-align:right}
  html[dir="rtl"] .email-modal-art .x{right:auto; left:14px}
  /* journal list */
  .jitem{text-align:left; border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--surface);
    padding:14px 18px; margin:10px 0; cursor:pointer; transition:border-color var(--dur-fast); display:flex; align-items:center; gap:16px}
  html[dir="rtl"] .jitem{text-align:right}
  .jitem:hover{border-color:rgba(143,127,242,.4)}
  .jitem .jthumbs{display:flex; gap:4px; flex-shrink:0}
  .jitem .jthumb{width:34px; height:56px; border-radius:5px; border:none;
    background:var(--surface) center/cover no-repeat; overflow:hidden}
  .jitem .jthumb img{width:100%; height:100%; object-fit:cover; display:block}
  .jitem .jbody{flex:1; min-width:0}
  .jitem b{color:var(--text); font-family:var(--font-display); font-size:17px; font-weight:400}
  .jitem .jd{color:rgba(241,238,232,.4); font:500 11px var(--font-ui)}
  .jdel{color:var(--muted); cursor:pointer; font-size:13px; flex-shrink:0}
  .jdel:hover{color:var(--danger)}
  .journal-empty{border:1px dashed var(--hairline-strong); border-radius:var(--radius-lg); padding:26px; text-align:center;
    display:flex; flex-direction:column; gap:10px; align-items:center; margin:12px 0}
  .journal-empty img{width:84px; height:84px; object-fit:cover; border-radius:50%; opacity:.9;
    -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%); mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
  .journal-empty p{font-family:var(--font-display); font-size:16px; font-style:italic; line-height:1.4; color:rgba(241,238,232,.5); margin:0}
  /* v5c — constellations + deck memory (journal insights) */
  .const-panel{border:1px solid var(--hairline); border-radius:20px; background:var(--bg); padding:18px 20px; margin:0 0 16px;
    display:flex; flex-direction:column; gap:10px; text-align:left; position:relative; overflow:hidden}
  html[dir="rtl"] .const-panel{text-align:right}
  .const-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
  .const-kick{font:600 11px var(--font-ui); letter-spacing:.08em; color:var(--iris)}
  .const-title{font-family:var(--font-display); font-size:22px; color:var(--text)}
  .const-count{font:500 12px var(--font-ui); color:rgba(241,238,232,.45); white-space:nowrap}
  .const-sky{position:relative; height:250px}
  .const-sky svg{position:absolute; inset:0; width:100%; height:100%}
  .const-line{animation:constDraw .6s var(--ease-out) both}
  @keyframes constDraw{from{opacity:0;stroke-dashoffset:24}to{opacity:1;stroke-dashoffset:0}}
  .const-node{position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; animation:fadeUp .4s var(--ease-out) both}
  .const-node .const-art{width:48px; height:80px; border-radius:5px; overflow:hidden; opacity:.85; box-shadow:0 8px 18px rgba(0,0,0,.55), 0 0 0 1px var(--gold-frame)}
  .const-node.hero{width:90px}
  .const-node.hero .const-art{width:80px; height:134px; border-radius:8px; opacity:1;
    box-shadow:0 12px 28px rgba(0,0,0,.7), 0 0 0 1.5px var(--iris), 0 0 24px rgba(143,127,242,.5)}
  .const-node .const-art img{width:100%; height:100%; object-fit:cover; display:block}
  .const-cap{font:500 10px var(--font-ui); color:rgba(241,238,232,.55); text-align:center; white-space:nowrap}
  .const-node.hero .const-cap{font-weight:600; font-size:11px; color:var(--iris-text)}
  .const-caption{font-family:var(--font-display); font-style:italic; font-size:15px; color:rgba(241,238,232,.55)}
  .const-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  @media (max-width:520px){.const-stats{grid-template-columns:1fr}}
  .const-stat{border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--surface); padding:14px 16px;
    display:flex; flex-direction:column; gap:6px}
  .const-k{font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:rgba(241,238,232,.45)}
  .const-big{font-family:var(--font-display); font-size:28px; color:var(--text)}
  .const-mid{font-family:var(--font-display); font-size:17px; line-height:1.35; color:var(--text)}
  .const-note{font-family:var(--font-display); font-style:italic; font-size:13px; color:rgba(241,238,232,.5)}
  .const-bar-row{display:flex; align-items:center; gap:8px; font:500 12px var(--font-ui)}
  .const-bar-row>span:first-child{width:72px; color:rgba(241,238,232,.6); flex:none}
  .const-bar{flex:1; height:6px; border-radius:100px; background:rgba(241,238,232,.06); overflow:hidden; display:block}
  .const-bar span{display:block; height:100%; border-radius:100px; background:var(--iris)}
  .const-bar-row em{font-style:normal; color:rgba(241,238,232,.45); width:34px; text-align:right}
  /* toast */
  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(40px); background:var(--raised);
    border:1px solid rgba(255,255,255,.12); color:var(--text); padding:10px 20px; border-radius:100px; opacity:0;
    transition:opacity var(--dur-fast), transform var(--dur-fast); z-index:99; font:500 13px var(--font-ui);
    box-shadow:0 12px 30px rgba(0,0,0,.6)}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  footer{margin-top:52px; color:var(--text-3); font-size:13px; line-height:1.65; padding:0 22px 28px; border-top:1px solid var(--hairline)}
  footer a{cursor:pointer; text-decoration:none; transition:color var(--dur-fast)}
  footer a:hover{text-decoration:none}
  .deck-meta,.deck-count{margin:28px auto 4px; padding:12px 16px; max-width:640px;
    color:var(--text-3); font-size:12px; line-height:1.55;
    border:none; background:transparent; border-radius:8px}
  .deck-count:empty{display:none}
  .footer-nav{max-width:1040px; margin:0 auto; padding:36px 18px 20px}
  .footer-nav-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1.4fr; gap:32px; text-align:left}
  .footer-brand{min-height:0; align-items:center; gap:8px}
  .footer-brand-name{font-size:18px}
  .footer-brand-blurb{font-size:13px; line-height:1.6; color:rgba(241,238,232,.45); max-width:220px; margin-top:10px}
  @media (max-width:900px){.footer-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  html[dir="rtl"] .footer-nav-grid{text-align:right}
  .footer-nav-label{display:block; font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase;
    color:rgba(241,238,232,.4); margin-bottom:10px}
  html[dir="rtl"] .footer-nav-label{letter-spacing:0}
  .footer-nav-links{display:flex; flex-direction:column; gap:9px}
  .footer-nav-links a{font-size:13px; color:rgba(241,238,232,.6); line-height:1.5}
  .footer-nav-links a:hover{color:var(--text)}
  .footer-nav-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .footer-chip{font:500 12px var(--font-ui); color:rgba(241,238,232,.6); padding:5px 12px; border-radius:100px;
    border:1px solid rgba(255,255,255,.12); background:transparent; line-height:1.3; text-decoration:none}
  .footer-chip:hover{color:var(--text); border-color:var(--hairline-x); text-decoration:none}
  /* footer daily-card email capture */
  .footer-email-blurb{font-size:13px; color:rgba(241,238,232,.6); line-height:1.5; margin-bottom:12px}
  .footer-email{display:flex; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:3px 3px 3px 14px; align-items:center; gap:6px; background:var(--surface)}
  .footer-email input{flex:1; min-width:0; font-family:var(--font-ui); font-size:13px; font-style:italic; border:none; background:transparent; color:var(--text)}
  .footer-email input::placeholder{color:rgba(241,238,232,.6)}
  .footer-email:focus-within{border-color:var(--iris);box-shadow:0 0 0 1px rgba(143,127,242,.5)}
  .footer-email-ok{font:500 13px var(--font-ui);color:var(--iris-text);line-height:1.5}
  .footer-email input:focus{outline:none}
  .footer-email button{font-family:var(--font-ui); font-size:12px; font-weight:600; padding:9px 16px; white-space:nowrap;
    background:var(--iris-fill); color:#fff; border:none; border-radius:9px; cursor:pointer}
  .footer-meta{max-width:1040px; margin:0 auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); text-align:left;
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline}
  html[dir="rtl"] .footer-meta{text-align:right}
  .footer-disclaimer{color:rgba(241,238,232,.35); font-size:12px; margin-bottom:0; line-height:1.6; max-width:60ch}
  .footer-disclaimer strong{color:rgba(241,238,232,.45); font-weight:400}
  .footer-legal{font-size:12px; color:rgba(241,238,232,.35); margin-bottom:0; white-space:nowrap}
  .footer-legal a{color:rgba(241,238,232,.35)}
  .footer-legal a:hover{color:var(--text)}
  .footer-legal-sep{color:rgba(241,238,232,.25); margin:0 5px; user-select:none}
  .footer-copy{color:rgba(241,238,232,.35); font-size:12px; margin-top:0; white-space:nowrap}
  /* cookie consent */
  .cookie-banner{position:fixed; bottom:max(16px,env(safe-area-inset-bottom,0px)); left:16px; right:auto; max-width:360px; z-index:120;
    background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);
    padding:16px 18px; box-shadow:0 20px 50px rgba(0,0,0,.6)}
  html[dir="rtl"] .cookie-banner{left:auto; right:16px}
  @media (max-width:420px){
    .cookie-banner{left:10px; right:auto; max-width:min(320px,calc(100vw - 20px))}
    html[dir="rtl"] .cookie-banner{left:auto; right:10px}
  }
  .persona-hint{font-size:13px;color:var(--muted);margin:6px 0 0;text-align:center;max-width:520px;line-height:1.45}
  .cookie-inner{max-width:none; margin:0; display:flex; flex-direction:column; gap:11px; align-items:stretch}
  .cookie-text{flex:1; min-width:240px; text-align:left; font-size:13px; color:rgba(241,238,232,.6); line-height:1.5}
  .cookie-text strong{color:var(--text); display:block; margin-bottom:4px; font-family:var(--font-display); font-weight:400; font-size:18px}
  .cookie-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
  .cookie-actions button{font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer; padding:10px 14px; border-radius:10px; transition:filter var(--dur-fast)}
  .cookie-actions .c-accept{border:none; background:var(--iris-fill); color:#fff; flex:1}
  .cookie-actions .c-reject{background:transparent; color:var(--text); border:1px solid var(--hairline-x); flex:1}
  .cookie-actions .c-manage{background:transparent; color:rgba(241,238,232,.55); border:none}
  .cookie-links{font-size:11px; margin-top:6px}
  .cookie-links a{color:rgba(241,238,232,.45)}
  html[dir="rtl"] .cookie-text{text-align:right}
  html[dir="rtl"] .cookie-actions{justify-content:flex-start}
  .cookie-pref label{display:flex; gap:10px; align-items:flex-start; text-align:left; margin:12px 0; cursor:pointer; font-size:14px; font-weight:500; color:var(--text)}
  .cookie-pref label span{color:var(--muted); font-size:12px; font-weight:400; display:block; margin-top:2px}
  html[dir="rtl"] .cookie-pref label{text-align:right}
  .cookie-pref input[type="checkbox"]{accent-color:var(--iris)}
  /* PWA install — bottom sheet ("Keep tarotogo in your pocket") */
  .pwa-banner{position:fixed; left:10px; right:10px; bottom:12px; z-index:110; max-width:420px; margin:0 auto;
    border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.12);
    background:var(--surface); box-shadow:0 -24px 60px rgba(0,0,0,.7);
    padding:22px 24px 18px; display:none; flex-direction:column; gap:12px; text-align:left}
  html[dir="rtl"] .pwa-banner{text-align:right}
  .pwa-banner::before{content:""; align-self:center; width:40px; height:4px; border-radius:100px; background:rgba(241,238,232,.15)}
  .pwa-banner.show{display:flex; animation:fadeUp .26s var(--ease-out) both}
  .pwa-row{display:flex; gap:14px; align-items:center}
  .pwa-icon{width:52px; height:52px; border-radius:14px; border:none; overflow:hidden; flex:none; box-shadow:0 0 20px rgba(143,127,242,.4)}
  .pwa-icon img{width:100%; height:100%; object-fit:cover; display:block}
  .pwa-title{font-family:var(--font-display); font-size:20px; font-weight:400; color:var(--text)}
  #pwaBannerText{font:400 12px var(--font-ui); line-height:1.4; color:rgba(241,238,232,.5); display:block}
  .pwa-banner #pwaInstallBtn{font-family:var(--font-ui); font-size:15px; font-weight:600; cursor:pointer; padding:14px 0; border-radius:var(--radius-md);
    border:none; background:var(--iris-fill); color:#fff; width:100%}
  .pwa-banner .pwa-x{background:none; border:none; color:rgba(241,238,232,.4); font:400 12px var(--font-ui);
    padding:4px 8px; cursor:pointer; align-self:center}
  /* offline — "the veil is down" */
  .online-banner{max-width:420px; margin:12px auto 0; padding:28px 26px; border-radius:var(--radius-lg); display:none;
    background:transparent; border:none; font-size:14px; color:var(--text-2);
    text-align:center; line-height:1.55}
  .online-banner.show{display:block}
  .ob-emblem{width:190px; height:190px; position:relative; display:grid; place-items:center; margin:0 auto 12px}
  .ob-emblem::before{content:""; position:absolute; inset:20px; border-radius:50%; border:1px dashed rgba(143,127,242,.3); animation:orbit 24s linear infinite}
  .ob-emblem img{width:190px; height:190px; object-fit:cover;
    -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%); mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
  .ob-title{font-family:var(--font-display); font-size:26px; font-weight:400; line-height:1.2; color:var(--text); margin-bottom:8px}
  #onlineBannerText{font-size:14px; line-height:1.55; color:rgba(241,238,232,.6); display:block}
  .ob-actions{display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:16px}
  .ob-retry{font-family:var(--font-ui); background:var(--iris-fill); color:#fff; border:none; border-radius:var(--radius-md);
    font-size:14px; font-weight:600; padding:12px 26px; cursor:pointer; white-space:nowrap}
  .ob-journal{font-family:var(--font-ui); background:none; border:none; font:500 13px var(--font-ui); color:rgba(241,238,232,.45);
    padding:0 0 2px; cursor:pointer}
  /* ad-blocker notice — the ONE gold-accented chrome element */
  .adblock-banner{background:rgba(201,169,98,.06);border:1px solid rgba(201,169,98,.35);border-radius:var(--radius-md);color:rgba(241,238,232,.7)}
  .adblock-banner::before{content:"✦";color:var(--gold);margin-inline-end:2px}
  /* deck browser + themes */
  .deck-modal{max-width:1020px; text-align:left}
  html[dir="rtl"] .deck-modal{text-align:right}
  .deck-filters{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px}
  /* undo the generic .modal button treatment inside the deck browser */
  .modal button.filter-chip{width:auto; margin-top:0; min-height:0; background:transparent; color:rgba(241,238,232,.6);
    border:1px solid rgba(255,255,255,.12); font-weight:500; font-size:13px; padding:7px 15px}
  .modal button.filter-chip.active{background:var(--iris-tint); border-color:var(--iris); color:var(--text); font-weight:500}
  .modal button.filter-chip:hover{filter:none; color:var(--text)}
  .filter-chip{font-family:var(--font-ui); font-size:13px; font-weight:500; padding:7px 15px; white-space:nowrap; cursor:pointer;
    border-radius:100px; border:1px solid rgba(255,255,255,.12); color:rgba(241,238,232,.6); background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast)}
  .filter-chip img{width:20px; height:20px; border-radius:50%}
  .filter-chip.active{background:var(--iris-tint); border-color:var(--iris); color:var(--text)}
  .deck-layout{display:grid; grid-template-columns:1fr; gap:24px; align-items:start; margin-top:14px}
  @media (min-width:820px){.deck-layout{grid-template-columns:1fr 300px}}
  .deck-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px}
  .deck-tile{cursor:pointer; border-radius:var(--radius-sm); background:transparent; border:none;
    box-shadow:none; display:flex; flex-direction:column; padding:0; gap:6px;
    transition:transform var(--dur-fast) var(--ease-out)}
  .deck-tile:hover{transform:translateY(-3px)}
  .deck-tile .dt-art{aspect-ratio:3/5; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); box-shadow:0 8px 20px rgba(0,0,0,.5);
    transition:box-shadow var(--dur-fast) var(--ease-out)}
  .deck-tile.sel .dt-art{box-shadow:0 0 0 2px var(--iris), 0 12px 28px rgba(106,90,224,.4)}
  .deck-tile .dt-art img{width:100%; height:100%; object-fit:cover; display:block}
  .deck-tile .dt-cap{text-align:center; padding-bottom:2px}
  .deck-tile .dt-num{font:500 10px var(--font-ui); letter-spacing:.04em; color:rgba(241,238,232,.4); display:block}
  .deck-tile .dt-name{font:500 12px var(--font-ui); color:rgba(241,238,232,.6); line-height:1.2}
  .deck-tile.sel .dt-name{color:var(--iris-text); font-weight:600}
  .deck-detail{border:1px solid var(--hairline); border-radius:20px; background:var(--surface); padding:22px;
    display:flex; flex-direction:column; gap:14px; position:sticky; top:20px}
  .deck-detail .dd-num{font:500 11px var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:rgba(241,238,232,.45)}
  .deck-detail h3{margin:0; font-family:var(--font-display); font-size:26px; font-weight:400; color:var(--text)}
  .deck-detail .dd-essence{font-family:var(--font-display); font-style:italic; font-size:16px; line-height:1.55; color:rgba(241,238,232,.75)}
  .deck-detail .dd-meanings{border-top:1px solid var(--hairline); padding-top:12px; display:flex; flex-direction:column; gap:10px}
  .deck-detail .dd-k{font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--iris)}
  .deck-detail .dd-meanings > div + div .dd-k{color:rgba(241,238,232,.4)}
  .deck-detail .dd-v{font-size:14px; line-height:1.6; color:rgba(241,238,232,.65)}
  .deck-detail .dd-link{display:block; text-align:center; font:600 13px var(--font-ui); padding:11px 0;
    color:var(--text); border:1px solid var(--hairline-x); border-radius:var(--radius-md); text-decoration:none; cursor:pointer;
    transition:border-color var(--dur-fast)}
  .deck-detail .dd-link:hover{border-color:rgba(255,255,255,.3); background:transparent; opacity:1}
  /* theme picker */
  .theme-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding:4px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:var(--surface); align-self:flex-start; width:max-content; max-width:100%}
  .theme-card{flex:0 1 auto; min-width:0; cursor:pointer; border-radius:10px; padding:9px 16px; display:flex; flex-direction:row; align-items:center; gap:8px;
    background:transparent; border:none; transition:background var(--dur-fast), color var(--dur-fast)}
  .theme-card .th-name{font:600 13px var(--font-ui); color:rgba(241,238,232,.6)}
  .theme-card.sel{background:var(--iris-tint); box-shadow:none}
  .theme-card.sel .th-name{color:var(--text)}
  .theme-card .th-head{display:flex; align-items:center; gap:8px}
  .theme-badge{display:none; font:600 10px var(--font-ui); letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:100px;
    border:1px solid var(--hairline-strong); color:rgba(241,238,232,.55); white-space:nowrap}
  .theme-badge.premium{display:inline-block}
  .theme-badge.premium{background:rgba(201,169,98,.18); color:var(--gold); border:1px solid rgba(201,169,98,.4); font-weight:600}
  .theme-card .th-thumbs{display:none}
  .theme-card .th-thumbs img,.theme-card .th-thumbs .th-back{width:64px; height:108px; object-fit:cover; border-radius:5px; border:none}
  .theme-card .th-thumbs .th-back{background:url('/assets/gilt/card-back.webp') center/cover}
  .theme-card .th-blurb{display:none}
  .theme-note{font-size:13px; color:var(--text-3); margin-top:12px}
  .deck-section-label{font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:rgba(241,238,232,.45); margin-top:26px}
  html[dir="rtl"] .deck-section-label{letter-spacing:0}
  /* v7h — "why this card?" popover */
  .why-link{display:inline-block; margin-top:6px; font:600 11px var(--font-ui); color:var(--iris-text); cursor:pointer; text-decoration:none}
  .why-panel{margin-top:8px; max-width:210px; border-radius:14px; border:1px solid rgba(143,127,242,.3); background:rgba(143,127,242,.06);
    padding:12px 14px; display:flex; flex-direction:column; gap:8px; text-align:left; animation:fadeUp .2s var(--ease-out) both}
  html[dir="rtl"] .why-panel{text-align:right}
  .why-k{font:600 10px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--iris-text)}
  .why-body{font:400 12px/1.6 var(--font-ui); color:rgba(241,238,232,.7)}
  .why-more{font:600 12px var(--font-ui); color:rgba(241,238,232,.45); text-decoration:none}
  /* v7h — flashcards */
  .deck-browse-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
  .modal button.study-deck-btn{width:auto; margin:0; min-height:0; font:600 12px var(--font-ui); color:var(--iris-text); background:var(--iris-tint); border:none; border-radius:100px;
    padding:7px 14px; cursor:pointer; white-space:nowrap; box-shadow:none}
  .modal button.study-deck-btn:hover{filter:none; background:rgba(143,127,242,.22)}
  .deck-modal.studying .deck-filters,.deck-modal.studying .deck-layout,.deck-modal.studying .theme-row,
  .deck-modal.studying .theme-note,.deck-modal.studying .deck-section-label:not(#deckBrowseLabel),
  .deck-modal.studying #deckThemeSub,.deck-modal.studying .study-deck-btn{display:none}
  .flash-wrap{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; padding:8px 0 4px; max-width:380px; margin:0 auto}
  .flash-wrap[hidden]{display:none}
  .flash-head{display:flex; justify-content:space-between; width:100%; font:500 12px var(--font-ui); color:rgba(241,238,232,.5)}
  .flash-streak{color:var(--iris-text); font-weight:600}
  .flash-card{width:150px; height:252px; border-radius:12px; overflow:hidden; box-shadow:0 20px 44px rgba(0,0,0,.7), 0 0 0 1px var(--gold-frame)}
  .flash-card img{width:100%; height:100%; object-fit:cover; display:block}
  .flash-q{font-family:var(--font-display); font-style:italic; font-size:15px; color:rgba(241,238,232,.6)}
  .flash-opts{display:flex; flex-direction:column; gap:7px; width:100%}
  .flash-opts button{font:500 13px var(--font-ui); padding:11px 10px; background:var(--surface); color:rgba(241,238,232,.8);
    border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); cursor:pointer; width:100%; margin:0;
    transition:border-color var(--dur-fast), background var(--dur-fast)}
  .flash-opts button:hover{border-color:rgba(255,255,255,.24); filter:none}
  .flash-opts button.good{border-color:var(--iris); background:var(--iris-tint); color:var(--text)}
  .flash-opts button.bad{border-color:var(--danger-border); color:var(--danger)}
  .flash-note{font:400 11px var(--font-ui); color:rgba(241,238,232,.35)}
  .modal button.flash-exit{font:600 12px var(--font-ui); background:none; border:none; color:rgba(241,238,232,.45); cursor:pointer; width:auto; margin:0; padding:6px 10px; min-height:0; box-shadow:none}
  .modal button.flash-exit:hover{filter:none; color:var(--text)}
  /* splash — standalone launch only */
  .splash{position:fixed; inset:0; z-index:9999; background:var(--bg) url('/assets/ui-v4/pwa-splash-v4.png') center/cover; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    transition:opacity .5s ease}
  .splash[hidden]{display:none}
  .splash.hide{opacity:0; pointer-events:none}
  .splash img,.splash .sp-word,.splash .sp-tag{display:none}
  .splash .sp-bar{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); width:120px; height:2px; border-radius:1px;
    background:rgba(143,127,242,.2); overflow:hidden}
  .splash .sp-bar span{display:block; width:40%; height:100%; background:linear-gradient(90deg,transparent,#8f7ff2,transparent); animation:tickerX 1.4s linear infinite alternate}
  /* mobile bottom nav */
  .tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
    justify-content:space-around; align-items:center; padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--hairline); background:rgba(11,10,17,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
  @media (max-width:680px){
    .tabbar{display:flex}
    /* keep the mobile top bar minimal — these destinations live in the tab bar */
    #navYesNo,#navDeck,#navJournal{display:none}
  }
  .tabbar button{font-family:var(--font-ui); background:none; border:none; cursor:pointer; font-size:12px; font-weight:500;
    color:rgba(241,238,232,.65); padding:12px 14px; min-height:44px}
  .tabbar button.active,.tabbar button:hover{color:var(--iris-text)}
  /* touch ergonomics */
  @media (max-width: 680px){
    .footer-nav-grid{grid-template-columns:1fr; gap:24px; text-align:center}
    html[dir="rtl"] .footer-nav-grid{text-align:center}
    .footer-nav-links{align-items:center}
    .footer-nav-chips{justify-content:center}
    .footer-meta{flex-direction:column; align-items:center; text-align:center; gap:8px}
  }
  @media (max-width: 600px){
    .modal .x{min-width:40px; min-height:40px; padding:0;
      display:inline-flex; align-items:center; justify-content:center}
    .nav .pill{min-height:40px}
    .nav button.pill{display:inline-flex; align-items:center; justify-content:center}
    .modal .tiny a{display:inline-block; min-height:36px; line-height:36px}
    .footer-nav{padding:18px 12px 14px; margin-top:0}
    .deck-meta,.deck-count{font-size:12px; padding:10px 12px}
    .reading{padding:18px 16px}
  }
  /* legibility pass */
  body{font-size:15px}
  .sub{line-height:1.6}
  .pill{font-size:14px}
  .modes button,.persona{font-size:13px}
  .personas .plabel{font-size:13px; color:var(--text-2)}
  .badge,.streak{font-size:11px}
  .meaning{font-size:14px}
  .reading p,.reading .reading-body{font-size:15px; line-height:1.65}
  .reading .small{font-size:12px; color:var(--text-3)}
  .daily .dc-share{font-size:13px}
  .modal .tiny{font-size:11px; color:var(--text-3)}
  .cookie-text{font-size:13px}
  @media (max-width:600px){
    body{font-size:14px}
    h1{font-size:clamp(36px,10vw,44px)}
    .hero{padding:22px 22px 24px}
    .hero-emotional{font-size:10px}
    .sub{font-size:14px}
    .modes button,.persona{font-size:12px; padding:8px 14px}
    .controls button{font-size:14px}
    .daily{padding:14px 16px; gap:14px; align-items:flex-start; border-radius:18px}
    .daily .dc-img{width:56px; height:94px; border-radius:7px}
    .daily .dc-txt{min-width:0}
    .daily .dc-name{font-size:20px}
    .daily .dc-mean{font-size:13px}
    .slot{width:104px}
    .card{width:104px; height:174px; border-radius:10px}
    .face{border-radius:10px}
    .card-name,.meaning{max-width:112px}
    .card-name{font-size:15px}
    .meaning{font-size:13px}
    .pos-label{font-size:9px}
    .spread{gap:14px 8px}
    .spread:not(:empty){padding:20px 12px}
    .back .back-chip span{font-size:11px; padding:6px 10px}
    .yn-verdict{font-size:clamp(52px,16vw,64px)}
  }
  /* AI loading skeleton */
  .ai-loading{padding:var(--space-2) 0; min-height:168px}
  .ai-loading-txt{display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin-top:var(--space-4);
    color:rgba(241,238,232,.45); font-family:var(--font-display); font-size:15px; font-style:italic; animation:writing 1.6s ease-in-out infinite}
  .skeleton{border-radius:8px; background:linear-gradient(90deg,rgba(241,238,232,.04) 0%,rgba(241,238,232,.1) 50%,rgba(241,238,232,.04) 100%);
    background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite}
  .skeleton-title{height:22px; width:58%; margin:0 auto var(--space-3); border-radius:10px}
  .skeleton-line{height:14px; width:100%; margin-bottom:var(--space-2)}
  .skeleton-line.short{width:72%}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  /* Global reduced-motion — freeze auras, crossfade instead of flips */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
    .card,.pick,.pill,.controls button,.actions button,.modal{transform:none!important}
    .card{transition:none}
    .card .front{transform:none; opacity:0; transition:opacity .3s!important}
    .card.flipped{transform:none!important}
    .card.flipped .front{opacity:1}
    .card.flipped .back{opacity:0; transition:opacity .3s!important}
    .skeleton{animation:none; background:rgba(241,238,232,.06)}
  }