:root {
      --bg:#12001f;
      --bg2:#2d0048;
      --panel:rgba(255,255,255,.085);
      --panel2:rgba(255,255,255,.12);
      --gold:#f5d77b;
      --gold-strong:#ffd86a;
      --cream:#fff6db;
      --text:#f8f1ff;
      --muted:#cfbfdd;
      --ink:#210031;
      --purple:#6d2f8a;
      --green:#31b86f;
      --red:#cf4a58;
      --shadow:0 24px 70px rgba(0,0,0,.44);
      --radius:24px;
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      min-height:100vh;
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 5%, rgba(118,51,162,.32), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(245,215,123,.11), transparent 24%),
        linear-gradient(150deg,var(--bg),var(--bg2));
      overflow-x:hidden;
    }

    body::before {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.3;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 20%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
      background-size:180px 180px,220px 220px,260px 260px,300px 300px;
      animation:drift 22s linear infinite;
    }

    @keyframes drift { from{transform:translateY(0)} to{transform:translateY(-40px)} }

    button,a,select { font:inherit; }
    button { touch-action:manipulation; }

    .app {
      width:min(1180px,100%);
      margin:auto;
      padding:16px 14px 56px;
      position:relative;
      z-index:1;
    }

    .hero {
      position:relative;
      overflow:hidden;
      padding:22px 16px 20px;
      border-radius:26px;
      background:
        radial-gradient(circle at 50% 18%,rgba(245,215,123,.10),transparent 22%),
        linear-gradient(165deg,#15001f,#310044 58%,#14001d);
      border:1px solid rgba(245,215,123,.20);
      box-shadow:0 18px 48px rgba(0,0,0,.34);
      text-align:center;
      isolation:isolate;
    }

    .hero::after {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at center,rgba(245,215,123,.08),transparent 46%);
      z-index:-1;
    }

    .hero-logo {
      width:76px;
      aspect-ratio:1;
      object-fit:contain;
      border-radius:50%;
      border:2px solid rgba(255,246,219,.9);
      box-shadow:0 10px 24px rgba(0,0,0,.38),0 0 18px rgba(245,215,123,.16);
      background:#1a0028;
    }

    .brand {
      margin:10px 0 3px;
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(2rem,6.5vw,3.8rem);
      color:var(--gold-strong);
      text-shadow:0 4px 16px rgba(0,0,0,.42);
      letter-spacing:.015em;
    }

    .tagline {
      margin:0 auto;
      max-width:650px;
      color:var(--cream);
      line-height:1.45;
      font-size:clamp(.96rem,2.4vw,1.12rem);
    }

    .hero-actions {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-top:18px;
    }

    .btn,.coffee-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:0;
      border-radius:999px;
      padding:12px 20px;
      font-weight:900;
      cursor:pointer;
      text-decoration:none;
      transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
    }

    .btn {
      background:linear-gradient(180deg,var(--gold-strong),#eab545);
      color:#2e123d;
      box-shadow:0 10px 24px rgba(0,0,0,.26);
    }

    .btn.secondary {
      background:#76529e;
      color:#fff;
    }

    .btn.ghost {
      background:rgba(255,255,255,.1);
      color:#fff;
      border:1px solid rgba(255,255,255,.16);
      box-shadow:none;
    }

    .btn.small,.coffee-btn.small { padding:9px 14px;font-size:.9rem; }

    .coffee-btn {
      background:#FFDD00;
      color:#24143a;
      box-shadow:0 10px 24px rgba(0,0,0,.25);
    }

    .btn:hover,.coffee-btn:hover { transform:translateY(-1px);filter:brightness(1.05); }
    .btn:active,.coffee-btn:active { transform:translateY(1px); }

    .site-nav {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      margin-top:18px;
    }

    .site-nav a {
      color:#f8efff;
      text-decoration:none;
      padding:8px 13px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.13);
      font-size:.9rem;
      font-weight:800;
    }


    .hero-quick-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:9px;
      margin-top:15px;
    }

    .hero-quick-actions .btn,
    .hero-quick-actions .coffee-btn{
      min-width:170px;
      padding:11px 17px;
    }

    .menu-wrap{
      position:absolute;
      top:14px;
      right:14px;
      z-index:5;
    }

    .menu-toggle{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(22,0,34,.66);
      color:#fff;
      font-size:1.25rem;
      font-weight:900;
      cursor:pointer;
      backdrop-filter:blur(8px);
    }

    .menu-panel{
      position:absolute;
      top:50px;
      right:0;
      width:190px;
      display:none;
      padding:10px;
      border-radius:16px;
      background:rgba(23,0,34,.97);
      border:1px solid rgba(245,215,123,.22);
      box-shadow:0 18px 44px rgba(0,0,0,.42);
      text-align:left;
    }

    .menu-panel.open{display:block;animation:fadeUp .2s ease}

    .menu-panel a{
      display:block;
      padding:11px 12px;
      border-radius:10px;
      color:#fff;
      text-decoration:none;
      font-weight:800;
    }

    .menu-panel a:hover{background:rgba(255,255,255,.08)}

    .primary-hero-btn{
      min-width:190px;
    }

    @media(max-width:600px){
      .hero{padding-top:18px}
      .hero-logo{width:88px}
      .brand{font-size:2.2rem}
      .tagline{font-size:.95rem;max-width:300px}
      .hero-quick-actions{margin-top:14px}
      .primary-hero-btn{min-width:175px}
    }

    .tabs {
      display:flex;
      gap:7px;
      overflow:auto;
      padding:14px 2px 10px;
      scrollbar-width:thin;
      scroll-snap-type:x proximity;
    }

    .tab {
      flex:0 0 auto;
      scroll-snap-align:start;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.08);
      color:#fff;
      border-radius:999px;
      padding:9px 13px;
      font-weight:850;
      font-size:.92rem;
      cursor:pointer;
    }

    .tab.active {
      background:linear-gradient(180deg,var(--gold-strong),#eab545);
      color:#351044;
      border-color:transparent;
    }

    .panel {
      display:none;
      padding:20px;
      background:var(--panel);
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius);
      backdrop-filter:blur(12px);
      box-shadow:0 16px 44px rgba(0,0,0,.24);
    }

    .panel.active { display:block;animation:fadeUp .35s ease; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

    .panel h2 {
      margin:0 0 8px;
      color:var(--gold);
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(1.65rem,5vw,2.35rem);
    }

    .panel-intro {
      margin:0 0 20px;
      color:var(--muted);
      line-height:1.6;
    }

    .deck-stage { display:grid;place-items:center;padding:10px 0 20px; }

    .deck {
      position:relative;
      width:min(67vw,245px);
      aspect-ratio:2/3;
      display:grid;
      place-items:center;
      text-align:center;
      border:7px solid var(--gold-strong);
      border-radius:20px;
      background:
        radial-gradient(circle at center,rgba(245,215,123,.22),transparent 34%),
        repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 8px,transparent 8px 16px),
        linear-gradient(145deg,#34124a,#6d2f8a 58%,#34124a);
      color:#fff;
      font-size:1.2rem;
      font-weight:950;
      cursor:pointer;
      box-shadow:0 22px 56px rgba(0,0,0,.5),0 0 28px rgba(245,215,123,.12);
      user-select:none;
      transform-style:preserve-3d;
      animation:floatDeck 3.6s ease-in-out infinite;
    }

    .deck::before,.deck::after {
      content:"";
      position:absolute;
      inset:9px -13px -9px 13px;
      z-index:-1;
      border-radius:17px;
      border:2px solid rgba(245,215,123,.48);
      background:#2f103f;
    }

    .deck::after { inset:18px -21px -18px 21px;opacity:.5; }

    @keyframes floatDeck {
      0%,100%{transform:translateY(0) rotate(-.4deg)}
      50%{transform:translateY(-7px) rotate(.4deg)}
    }

    .deck.shuffle {
      animation:shuffle 1s ease-in-out;
    }

    @keyframes shuffle {
      0%{transform:translateX(0) rotate(0)}
      14%{transform:translateX(-32px) rotate(-7deg)}
      29%{transform:translateX(28px) rotate(6deg)}
      44%{transform:translateX(-24px) rotate(-5deg)}
      59%{transform:translateX(20px) rotate(4deg)}
      74%{transform:translateX(-13px) rotate(-3deg)}
      100%{transform:translateX(0) rotate(0)}
    }

    .result-shell { display:none;margin-top:12px; }
    .result-shell.visible { display:block;animation:fadeUp .35s ease; }

    .reading-card {
      width:min(100%,470px);
      margin:0 auto;
      padding:16px;
      border-radius:22px;
      background:#fff;
      color:var(--ink);
      text-align:center;
      box-shadow:var(--shadow);
    }

    .reading-card h3 { margin:0 0 12px;font-size:clamp(1.35rem,4.5vw,1.8rem); }

    .card-visual {
      width:min(38vw,145px) !important;
      aspect-ratio:2/3;
      margin:auto;
      perspective:1300px;
    }

    .card-inner {
      position:relative;
      width:100%;
      height:100%;
      transform-style:preserve-3d;
      transition:transform .9s cubic-bezier(.2,.75,.25,1);
    }

    .card-inner.flipped { transform:rotateY(180deg); }

    .card-face {
      position:absolute;
      inset:0;
      overflow:hidden;
      border-radius:15px;
      backface-visibility:hidden;
      box-shadow:0 14px 30px rgba(0,0,0,.3);
    }

    .card-back {
      display:grid;
      place-items:center;
      color:var(--gold);
      font-size:4.4rem;
      border:5px solid var(--gold-strong);
      background:
        radial-gradient(circle,#6f2f8c 0 5%,transparent 5.5%),
        linear-gradient(135deg,#1f0036,#5a126e);
    }

    .card-front {
      transform:rotateY(180deg);
      background:#eee4ca;
      padding:6px;
    }
    .card-front img,.spread-card img {
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center;
      display:block;
      background:#eee4ca;
    }

    .card-front img.reversed,.spread-card img.reversed { transform:rotate(180deg); }

    .orientation {
      margin:14px 0 2px;
      font-weight:950;
      font-size:1.1rem;
    }

    .reading-text {
      margin-top:14px;
      padding:18px;
      border-radius:15px;
      text-align:left;
      line-height:1.7;
      background:#f3eafe;
      border:1px solid #dbc5ef;
    }

    .reading-text strong {
      display:block;
      margin-bottom:7px;
      color:#51187a;
    }

    .card-actions {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:9px;
      margin-top:15px;
    }

    .spread-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:18px;
      align-items:start;
    }

    .spread-card {
      padding:8px;
      background:linear-gradient(180deg,#fff,#faf7ff);
      color:var(--ink);
      border-radius:16px;
      box-shadow:0 12px 28px rgba(0,0,0,.28);
      text-align:center;
      min-width:0;
      overflow:hidden;
    }

    .spread-card img {
      width:100%;
      aspect-ratio:2/3;
      object-fit:contain;
      object-position:center;
      border-radius:9px;
      box-shadow:0 8px 18px rgba(0,0,0,.22);
      background:#eee4ca;
    }

    .spread-card .position {
      color:#692287;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.06em;
      font-size:.68rem;
      margin-bottom:7px;
    }

    .spread-card h3 {
      margin:8px 0 3px;
      font-size:.9rem;
      line-height:1.2;
    }

    .spread-card .card-actions {
      margin-top:8px;
      gap:6px;
    }

    .spread-card .card-actions .btn,
    .spread-card .card-actions .coffee-btn {
      padding:7px 9px;
      font-size:.72rem;
    }

    .mini-reading {
      display:none;
      margin-top:10px;
      padding:10px;
      border-radius:10px;
      background:#f5effb;
      text-align:left;
      line-height:1.5;
      font-size:.88rem;
    }

    .spread-card.expanded {
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:minmax(120px,180px) 1fr;
      gap:14px;
      text-align:left;
      align-items:start;
    }

    .spread-card.expanded .position,
    .spread-card.expanded h3,
    .spread-card.expanded > div:not(.mini-reading):not(.card-actions) {
      text-align:left;
    }

    .spread-card.expanded .mini-reading {
      display:block;
    }

    /* Version 13.9: compact one-screen Celtic Cross */
    .celtic-grid {
      display:block;
      margin-top:18px;
    }

    .celtic-spread-scroll{
      overflow:visible;
      padding:8px 0 12px;
      margin:0 0 8px;
    }

    .celtic-spread-scroll::before{
      content:"Complete Celtic Cross • tap any card for its full meaning";
      display:block;
      margin:0 auto 10px;
      color:#d8c6e3;
      text-align:center;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.03em;
    }

    .celtic-spread-layout{
      position:relative;
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      grid-template-rows:repeat(4,minmax(58px,auto));
      gap:7px 5px;
      align-items:center;
      justify-items:center;
      width:100%;
      max-width:560px;
      min-width:0;
      margin:auto;
      padding:14px 10px;
      border-radius:20px;
      background:
        linear-gradient(90deg,transparent 39%,rgba(248,229,163,.10) 39.5% 40.5%,transparent 41%),
        linear-gradient(transparent 36%,rgba(248,229,163,.10) 36.5% 37.5%,transparent 38%),
        linear-gradient(90deg,transparent 88%,rgba(248,229,163,.09) 88.5% 89.5%,transparent 90%),
        radial-gradient(circle at 39.5% 37%,rgba(248,229,163,.10),transparent 29%),
        linear-gradient(145deg,rgba(17,0,29,.42),rgba(85,35,111,.22));
      border:1px solid rgba(248,229,163,.17);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .celtic-spread-layout .spread-card{
      position:relative;
      width:100%;
      max-width:64px;
      min-width:0;
      padding:2px;
      border-radius:8px;
      cursor:pointer;
      background:linear-gradient(160deg,#fff,#f6effb);
      border:1px solid rgba(248,229,163,.45);
      box-shadow:0 7px 15px rgba(0,0,0,.27);
      transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
      overflow:visible;
    }

    .celtic-spread-layout .spread-card:hover,
    .celtic-spread-layout .spread-card:focus-visible{
      transform:translateY(-2px) scale(1.05);
      box-shadow:0 12px 24px rgba(0,0,0,.38),0 0 0 2px rgba(248,229,163,.30);
      outline:none;
      z-index:8;
    }

    .celtic-spread-layout .spread-card .position{
      position:absolute;
      left:-5px;
      top:-6px;
      z-index:7;
      display:grid;
      place-items:center;
      width:20px;
      height:20px;
      min-height:0;
      margin:0;
      padding:0;
      border-radius:50%;
      background:#f8e5a3;
      border:1px solid #d4af37;
      color:#3b1450;
      font-size:.66rem;
      font-weight:950;
      line-height:1;
      box-shadow:0 4px 10px rgba(0,0,0,.25);
    }

    .celtic-spread-layout .spread-card img{
      width:100%;
      aspect-ratio:2/3;
      object-fit:contain;
      display:block;
      border-radius:5px;
      background:#eee4ca;
    }

    .celtic-spread-layout .spread-card h3,
    .celtic-spread-layout .spread-card .card-orientation,
    .celtic-spread-layout .spread-card .card-actions,
    .celtic-spread-layout .spread-card .mini-reading{
      display:none !important;
    }

    .celtic-spread-layout .celtic-pos-1{grid-column:3;grid-row:2;z-index:3}
    .celtic-spread-layout .celtic-pos-2{grid-column:3;grid-row:2;z-index:5;transform:rotate(90deg) scale(.70)}
    .celtic-spread-layout .celtic-pos-2:hover,
    .celtic-spread-layout .celtic-pos-2:focus-visible{transform:rotate(90deg) scale(.76)}
    .celtic-spread-layout .celtic-pos-3{grid-column:3;grid-row:3}
    .celtic-spread-layout .celtic-pos-4{grid-column:1;grid-row:2}
    .celtic-spread-layout .celtic-pos-5{grid-column:3;grid-row:1}
    .celtic-spread-layout .celtic-pos-6{grid-column:5;grid-row:2}
    .celtic-spread-layout .celtic-pos-7{grid-column:7;grid-row:4}
    .celtic-spread-layout .celtic-pos-8{grid-column:7;grid-row:3}
    .celtic-spread-layout .celtic-pos-9{grid-column:7;grid-row:2}
    .celtic-spread-layout .celtic-pos-10{grid-column:7;grid-row:1}

    .celtic-position-guide{
      max-width:560px;
      margin:9px auto 0;
      border-radius:13px;
      border:1px solid rgba(248,229,163,.16);
      background:rgba(255,255,255,.055);
      color:#eadff1;
    }

    .celtic-position-guide summary{
      cursor:pointer;
      padding:10px 12px;
      color:#f8e5a3;
      font-size:.78rem;
      font-weight:900;
      text-align:center;
    }

    .celtic-position-key{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:6px 10px;
      padding:0 12px 12px;
      font-size:.72rem;
      line-height:1.3;
    }

    .celtic-position-key span{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .celtic-position-key b{
      flex:0 0 auto;
      display:grid;
      place-items:center;
      width:22px;
      height:22px;
      border-radius:50%;
      background:#f8e5a3;
      color:#3b1450;
      font-size:.65rem;
    }

    @media(max-width:760px) {
      .panel { padding:14px; }
      .spread-grid { gap:7px; }
      .spread-card { padding:7px; border-radius:13px; }
      .spread-card .position { font-size:.62rem; }
      .spread-card h3 { font-size:.78rem; }
      .spread-card.expanded {
        grid-template-columns:110px 1fr;
        gap:12px;
      }
      .celtic-spread-layout{
        max-width:100%;
        grid-template-rows:repeat(4,minmax(54px,auto));
        gap:6px 4px;
        padding:13px 8px;
      }
      .celtic-spread-layout .spread-card{max-width:56px}
    }

    @media(max-width:430px) {
      .card-visual { width:128px !important; }
      .reading-card { padding:14px; }
      .hero { padding:18px 14px 17px; }
      .brand { font-size:2rem; }
      .tagline { max-width:270px; }
      .hero-quick-actions .btn,
      .hero-quick-actions .coffee-btn {
        min-width:155px;
        padding:10px 14px;
        font-size:.9rem;
      }
      .spread-card.expanded {
        grid-template-columns:95px 1fr;
      }
      .celtic-spread-layout{
        grid-template-rows:repeat(4,50px);
        gap:5px 3px;
        padding:12px 6px;
      }
      .celtic-spread-layout .spread-card{max-width:46px;padding:1px;border-radius:6px}
      .celtic-spread-layout .spread-card .position{width:18px;height:18px;font-size:.6rem;left:-4px;top:-5px}
      .celtic-position-key{font-size:.68rem;gap:5px 8px}
    }

    .daily-banner {
      padding:15px;
      margin-bottom:15px;
      border-radius:14px;
      background:rgba(245,215,123,.12);
      border:1px solid rgba(245,215,123,.28);
      color:#ffedb9;
    }

    .favorite-item {
      display:grid;
      grid-template-columns:90px 1fr;
      gap:14px;
      padding:14px;
      margin-bottom:12px;
      border-radius:17px;
      background:#fff;
      color:var(--ink);
    }

    .favorite-item img {
      width:90px;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:8px;
      background:#eee4ca;
    }

    .favorite-item img.reversed { transform:rotate(180deg); }
    .favorite-item h3 { margin:0 0 5px; }
    .favorite-item p { margin:5px 0;line-height:1.5; }
    .empty { color:var(--muted);padding:18px;text-align:center; }

    .support-strip {
      max-width:780px;
      margin:22px auto 0;
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(245,215,123,.25);
      background:rgba(245,215,123,.09);
      text-align:center;
      color:#f9ebc1;
      line-height:1.55;
    }

    .footer {
      margin-top:22px;
      text-align:center;
      color:#bca7cd;
      font-size:.86rem;
      line-height:1.55;
    }

    .reading-overlay {
      position:fixed;
      inset:0;
      z-index:2000;
      display:none;
      place-items:center;
      padding:24px;
      background:rgba(11,0,20,.93);
      backdrop-filter:blur(12px);
    }

    .reading-overlay.visible { display:grid;animation:overlayFade .25s ease; }
    @keyframes overlayFade { from{opacity:0} to{opacity:1} }

    .ritual-box {
      position:relative;
      isolation:isolate;
      overflow:hidden;
      width:min(92vw,450px);
      padding:32px 22px;
      border-radius:26px;
      text-align:center;
      background:
        radial-gradient(circle at 50% 20%,rgba(245,215,123,.15),transparent 34%),
        linear-gradient(145deg,#210038,#3f0963);
      border:1px solid rgba(245,215,123,.36);
      box-shadow:0 30px 90px rgba(0,0,0,.64);
    }

    .ritual-symbol {
      font-size:3.8rem;
      color:var(--gold);
      animation:ritualPulse 1.5s ease-in-out infinite;
    }

    @keyframes ritualPulse {
      0%,100%{transform:scale(.94) rotate(-2deg);filter:drop-shadow(0 0 4px rgba(245,215,123,.2))}
      50%{transform:scale(1.09) rotate(2deg);filter:drop-shadow(0 0 20px rgba(245,215,123,.8))}
    }

    .ritual-box h2 {
      margin:12px 0 7px;
      color:var(--gold);
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.85rem;
    }

    .ritual-message {
      min-height:50px;
      margin:0;
      color:#f5eaff;
      line-height:1.55;
    }

    .ritual-progress {
      height:8px;
      margin-top:20px;
      overflow:hidden;
      border-radius:999px;
      background:rgba(255,255,255,.12);
    }

    .ritual-progress span {
      display:block;
      width:0;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#a66bdd,var(--gold));
      transition:width .75s ease;
    }

    dialog {
      width:min(92vw,680px);
      max-height:86vh;
      padding:0;
      border:0;
      border-radius:20px;
      box-shadow:0 28px 70px rgba(0,0,0,.55);
    }

    dialog::backdrop { background:rgba(12,0,22,.78); }
    .dialog-body { max-height:86vh;overflow:auto;padding:20px;background:#fff;color:var(--ink); }
    .dialog-body h2 { margin:0 0 8px;color:#541676; }
    .dialog-body h3 { margin:20px 0 6px;color:#6b278b; }
    .dialog-body p { line-height:1.62; }
    .dialog-top { display:flex;justify-content:space-between;gap:14px;align-items:start; }
    .close-x {
      flex:0 0 auto;
      width:38px;
      height:38px;
      border:0;
      border-radius:50%;
      background:#eee3f6;
      color:#42115d;
      font-size:1.25rem;
      font-weight:950;
      cursor:pointer;
    }

    .toast {
      position:fixed;
      left:50%;
      bottom:18px;
      z-index:1000;
      transform:translateX(-50%) translateY(25px);
      opacity:0;
      pointer-events:none;
      padding:11px 16px;
      border-radius:999px;
      background:#1f1028;
      color:#fff;
      border:1px solid rgba(255,255,255,.15);
      box-shadow:0 10px 26px rgba(0,0,0,.35);
      transition:.25s ease;
    }

    .toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

    .spread-summary{
      grid-column:1 / -1;
      margin-top:10px;
      padding:18px;
      border-radius:18px;
      background:
        radial-gradient(circle at 15% 0%,rgba(245,215,123,.12),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.07));
      border:1px solid rgba(245,215,123,.24);
      box-shadow:0 14px 34px rgba(0,0,0,.22);
      color:#f8efff;
    }

    .spread-summary h3{
      margin:0 0 8px;
      color:var(--gold);
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.45rem;
    }

    .spread-summary p{
      margin:0;
      line-height:1.68;
      color:#f2e7fb;
    }

    .energy-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }

    .energy-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:9px 13px;
      border-radius:999px;
      background:#F8E5A3;
      border:1px solid #D4AF37;
      color:#2F114D;
      font-weight:950;
      font-size:.95rem;
      box-shadow:0 6px 14px rgba(0,0,0,.12);
    }

    .summary-actions{
      margin-top:14px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .summary-actions button,
    .summary-actions a{
      flex:1 1 150px;
    }


    .celtic-summary{
      grid-column:1 / -1;
      margin-top:10px;
      padding:18px;
      border-radius:18px;
      background:
        radial-gradient(circle at 85% 0%,rgba(245,215,123,.10),transparent 32%),
        linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.065));
      border:1px solid rgba(245,215,123,.24);
      box-shadow:0 14px 34px rgba(0,0,0,.22);
      color:#f8efff;
    }

    .celtic-summary h3{
      margin:0 0 8px;
      color:var(--gold);
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.45rem;
    }

    .celtic-summary p{
      margin:0 0 11px;
      line-height:1.66;
      color:#f1e6fa;
    }

    .celtic-summary .summary-actions{
      margin-top:13px;
    }


    .section-divider{
      height:1px;
      margin:20px 0;
      background:linear-gradient(90deg,transparent,rgba(245,215,123,.38),transparent);
    }

    .panel{
      border:1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 0% 0%,rgba(245,215,123,.055),transparent 28%),
        rgba(255,255,255,.075);
    }

    .panel h2{
      letter-spacing:.01em;
      text-shadow:0 2px 10px rgba(0,0,0,.22);
    }

    .panel-intro{
      max-width:760px;
    }

    .reading-card,
    .spread-card,
    .spread-summary,
    .celtic-summary{
      transition:transform .22s ease, box-shadow .22s ease;
    }

    .reading-card:hover,
    .spread-card:hover{
      transform:translateY(-2px);
    }

    .reading-text{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }

    .question-box{
      display:grid;
      gap:12px;
      margin-top:6px;
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
    }

    .question-box label{
      color:var(--gold);
      font-weight:900;
      font-size:1rem;
    }

    .question-input{
      width:100%;
      min-height:52px;
      resize:vertical;
      border-radius:14px;
      border:1px solid rgba(245,215,123,.26);
      background:rgba(20,0,31,.74);
      color:#fff;
      padding:14px 15px;
      outline:none;
      font:inherit;
      line-height:1.45;
      box-shadow:inset 0 2px 8px rgba(0,0,0,.22);
    }

    .question-input:focus{
      border-color:rgba(245,215,123,.72);
      box-shadow:0 0 0 3px rgba(245,215,123,.11), inset 0 2px 8px rgba(0,0,0,.22);
    }

    .yesno-result{
      display:none;
      margin-top:18px;
    }

    .yesno-result.visible{
      display:block;
      animation:fadeUp .35s ease;
    }

    .answer-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:112px;
      margin:8px auto 14px;
      padding:10px 16px;
      border-radius:999px;
      font-weight:950;
      letter-spacing:.05em;
      text-transform:uppercase;
      box-shadow:0 9px 22px rgba(0,0,0,.2);
    }

    .answer-badge.yes{
      background:rgba(49,184,111,.15);
      border:1px solid rgba(49,184,111,.35);
      color:#16924f;
    }

    .answer-badge.no{
      background:rgba(207,74,88,.14);
      border:1px solid rgba(207,74,88,.35);
      color:#bc2638;
    }

    .answer-badge.maybe{
      background:rgba(245,215,123,.18);
      border:1px solid rgba(245,215,123,.4);
      color:#8a6415;
    }

    .yesno-question{
      margin:0 0 8px;
      padding:11px 13px;
      border-radius:12px;
      background:#f3eafe;
      color:#4b1768;
      font-weight:800;
      text-align:left;
      line-height:1.5;
    }

    .yesno-explanation{
      margin-top:14px;
      padding:16px;
      border-radius:14px;
      background:#f7f1fc;
      border:1px solid #dfceef;
      color:#2f163d;
      text-align:left;
      line-height:1.65;
    }

    .yesno-tip{
      margin-top:10px;
      color:#6c4b79;
      font-size:.9rem;
      line-height:1.5;
    }

    .subtle-note{
      margin-top:12px;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.5;
    }

    .reading-overlay .ritual-deck{
      width:118px;
      height:176px;
      margin:0 auto 12px;
      position:relative;
      perspective:1000px;
    }

    .reading-overlay .ritual-card{
      position:absolute;
      inset:0;
      border-radius:12px;
      border:3px solid var(--gold);
      background:
        radial-gradient(circle at center,rgba(245,215,123,.2),transparent 30%),
        linear-gradient(145deg,#2b0b40,#6c2b89);
      box-shadow:0 14px 34px rgba(0,0,0,.4);
      animation:ritualShuffle 1.3s ease-in-out infinite;
    }

    .reading-overlay .ritual-card:nth-child(2){
      animation-delay:.18s;
      transform:translateX(8px) rotate(2deg);
      opacity:.78;
    }

    .reading-overlay .ritual-card:nth-child(3){
      animation-delay:.36s;
      transform:translateX(-8px) rotate(-2deg);
      opacity:.56;
    }

    @keyframes ritualShuffle{
      0%,100%{transform:translateX(0) rotate(0deg)}
      25%{transform:translateX(-18px) rotate(-5deg)}
      50%{transform:translateX(15px) rotate(4deg)}
      75%{transform:translateX(-7px) rotate(-2deg)}
    }

    @media(max-width:430px){
      .question-box{padding:14px}
      .question-input{min-height:58px}
    }


    .favorite-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }

    .remove-favorite{
      border:0;
      border-radius:999px;
      padding:8px 12px;
      background:#b83245;
      color:#fff;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }

    .remove-favorite:hover{
      filter:brightness(1.05);
      transform:translateY(-1px);
    }


    .favorite-item{
      display:block;
      padding:16px;
    }

    .favorite-header{
      display:flex;
      gap:14px;
      align-items:flex-start;
      margin-bottom:10px;
    }

    .favorite-cover{
      width:84px;
      flex:0 0 84px;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:9px;
      background:#eee4ca;
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }

    .favorite-card-list{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
      gap:10px;
      margin:15px 0 12px;
    }

    .favorite-card-chip{
      min-width:0;
      padding:8px;
      border-radius:12px;
      background:#f6effb;
      border:1px solid #ddcaec;
      text-align:center;
    }

    .favorite-card-chip img{
      width:100%;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:7px;
      background:#eee4ca;
      box-shadow:0 5px 12px rgba(0,0,0,.14);
    }

    .favorite-card-chip img.reversed{
      transform:rotate(180deg);
    }

    .favorite-card-chip strong{
      display:block;
      margin-top:7px;
      color:#341044;
      font-size:.82rem;
      line-height:1.25;
    }

    .favorite-card-chip span{
      display:block;
      margin-top:3px;
      color:#71517d;
      font-size:.72rem;
      line-height:1.25;
    }

    .favorite-reading-text{
      margin-top:12px;
      line-height:1.62;
      color:#2f173d;
      white-space:normal;
    }

    .favorite-legacy-note{
      margin:12px 0 0;
      padding:10px 12px;
      border-radius:10px;
      background:#fff5cf;
      border:1px solid #e5c660;
      color:#5a4310;
      font-size:.86rem;
      line-height:1.45;
    }

    @media(max-width:430px){
      .favorite-card-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
      }

      .favorite-card-chip{
        padding:6px;
      }

      .favorite-card-chip strong{
        font-size:.7rem;
      }

      .favorite-card-chip span{
        font-size:.64rem;
      }
    }


    #favoriteSingle,
    #saveYesNo{
      display:inline-flex !important;
      align-items:center;
      justify-content:center;
      background:#6f3f98 !important;
      color:#ffffff !important;
      border:1px solid #5a2e81 !important;
      opacity:1 !important;
      visibility:visible !important;
      box-shadow:0 8px 18px rgba(70,31,100,.22) !important;
    }

    #favoriteSingle:hover,
    #saveYesNo:hover{
      background:#5e3286 !important;
      filter:none !important;
    }


    body{
      padding-bottom:82px;
    }

    .bottom-nav{
      position:fixed;
      pointer-events:auto;
      left:0;
      right:0;
      bottom:0;
      z-index:1500;
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:3px;
      padding:7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
      background:rgba(20,0,31,.96);
      border-top:1px solid rgba(245,215,123,.24);
      box-shadow:0 -10px 30px rgba(0,0,0,.35);
      backdrop-filter:blur(14px);
    }

    .bottom-nav button{
      min-width:0;
      pointer-events:auto;
      touch-action:manipulation;
      border:0;
      border-radius:13px;
      padding:7px 3px;
      background:transparent;
      color:#cdbbd9;
      font-size:.69rem;
      font-weight:850;
      line-height:1.15;
      cursor:pointer;
    }

    .bottom-nav button span{
      display:block;
      margin-bottom:3px;
      font-size:1.15rem;
    }

    .bottom-nav button.active{
      color:#2f114d;
      background:#f8e5a3;
      box-shadow:0 5px 14px rgba(0,0,0,.18);
    }



    .reading-tools{
      margin-top:16px;
      padding:15px;
      border-radius:16px;
      background:#f7f1fc;
      border:1px solid #dfceef;
      text-align:left;
    }

    .reading-tools h4{
      margin:0 0 8px;
      color:#4d1769;
      font-size:1.05rem;
    }

    .journal-input{
      width:100%;
      min-height:86px;
      resize:vertical;
      border-radius:12px;
      border:1px solid #d4bce5;
      background:#fff;
      color:#2f163d;
      padding:12px;
      font:inherit;
      line-height:1.5;
      outline:none;
    }

    .journal-input:focus{
      border-color:#7b47a1;
      box-shadow:0 0 0 3px rgba(123,71,161,.12);
    }

    .tool-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }

    .tool-actions button{
      flex:1 1 130px;
    }

    .history-list{
      display:grid;
      gap:14px;
    }

    .history-item{
      padding:16px;
      border-radius:18px;
      background:#fff;
      color:#2f163d;
      box-shadow:0 12px 28px rgba(0,0,0,.22);
    }

    .history-head{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      margin-bottom:10px;
    }

    .history-head h3{
      margin:0;
      color:#371049;
      font-size:1.12rem;
    }

    .history-date{
      color:#7b6685;
      font-size:.78rem;
      white-space:nowrap;
    }

    .history-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
      gap:8px;
      margin:12px 0;
    }

    .history-card{
      min-width:0;
      padding:7px;
      border-radius:11px;
      background:#f6effb;
      border:1px solid #dfceef;
      text-align:center;
    }

    .history-card img{
      width:100%;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:7px;
      background:#eee4ca;
    }

    .history-card img.reversed{
      transform:rotate(180deg);
    }

    .history-card strong{
      display:block;
      margin-top:5px;
      font-size:.7rem;
      line-height:1.2;
    }

    .history-card span{
      display:block;
      margin-top:2px;
      color:#765c80;
      font-size:.64rem;
    }

    .history-summary{
      line-height:1.6;
    }

    .history-journal{
      margin-top:10px;
      padding:10px 12px;
      border-radius:10px;
      background:#fff8dd;
      border:1px solid #e6cd71;
      color:#57420d;
      line-height:1.5;
    }

    /* Version 13.20: cleaner saved-reading history */
    .history-panel-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }

    .history-panel-copy{
      min-width:0;
    }

    .history-panel-copy h2{
      margin-bottom:8px;
    }

    .history-panel-copy .panel-intro{
      margin-bottom:0;
    }

    .history-clear-btn{
      flex:0 0 auto;
      border:1px solid rgba(255,255,255,.2);
      border-radius:999px;
      padding:9px 14px;
      background:rgba(184,50,69,.16);
      color:#ffdce2;
      font-weight:900;
      cursor:pointer;
      transition:transform .18s ease,background .18s ease,opacity .18s ease;
    }

    .history-clear-btn:hover{
      transform:translateY(-1px);
      background:rgba(184,50,69,.28);
    }

    .history-clear-btn:disabled{
      opacity:.42;
      cursor:not-allowed;
      transform:none;
    }

    .history-summary-card{
      margin-top:14px;
      padding:15px;
      border-radius:15px;
      background:linear-gradient(180deg,#fbf8fd,#f3eafb);
      border:1px solid #ddcaec;
      color:#2f163d;
    }

    .history-summary-kicker{
      margin-bottom:5px;
      color:#77508d;
      font-size:.75rem;
      font-weight:950;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .history-summary-card h4{
      margin:0 0 10px;
      color:#4b1768;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.2rem;
    }

    .history-summary-card p{
      margin:0;
      line-height:1.62;
    }

    .history-summary-card p + p{
      margin-top:10px;
    }

    .history-next-step{
      margin-top:13px;
      padding:11px 12px;
      border-radius:11px;
      background:#fff8d8;
      border:1px solid #e2c85e;
      color:#543f0b;
      line-height:1.5;
    }

    .history-full-reading{
      margin-top:12px;
      overflow:hidden;
      border-radius:13px;
      border:1px solid #d8c4e8;
      background:#fff;
    }

    .history-full-reading summary{
      cursor:pointer;
      padding:12px 14px;
      color:#50176f;
      font-weight:900;
      background:linear-gradient(180deg,#fff,#f4ecfa);
    }

    .history-full-content{
      padding:15px;
      line-height:1.65;
      color:#2f163d;
      border-top:1px solid #e4d6ee;
    }

    .history-full-content > strong{
      display:block;
      margin-bottom:7px;
      color:#5b1c7c;
      font-size:1.05rem;
    }

    .history-full-content .deep-reading{
      margin-top:18px;
    }

    .history-summary{
      white-space:normal;
      line-height:1.62;
    }

    /* Version 13.22: cleaner, structured three-card reading summary */
    .three-summary-guidance{
      margin:0 0 14px;
      padding:15px 16px;
      border-radius:15px;
      background:rgba(248,229,163,.10);
      border:1px solid rgba(248,229,163,.25);
    }

    .three-summary-guidance h4{
      margin:0 0 7px;
      color:#f8e5a3;
      font-size:1rem;
    }

    .three-summary-guidance p{
      margin:0;
      color:#f4eafb;
      line-height:1.62;
    }

    .three-summary-positions{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin:12px 0;
    }

    .three-summary-position{
      min-width:0;
      padding:14px;
      border-radius:15px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.13);
    }

    .three-summary-position .summary-position-label{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-bottom:8px;
      padding:5px 9px;
      border-radius:999px;
      background:#f8e5a3;
      color:#351044;
      font-size:.72rem;
      font-weight:950;
      letter-spacing:.05em;
      text-transform:uppercase;
    }

    .three-summary-position h4{
      margin:0 0 7px;
      color:#fff4c6;
      font-size:.98rem;
      line-height:1.35;
    }

    .three-summary-position p{
      margin:0;
      color:#f4eafb;
      font-size:.92rem;
      line-height:1.58;
    }

    .three-summary-connection,
    .three-summary-next{
      margin-top:10px;
      padding:15px 16px;
      border-radius:15px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.13);
    }

    .three-summary-connection h4,
    .three-summary-next h4{
      margin:0 0 7px;
      color:#f8e5a3;
      font-size:1rem;
    }

    .three-summary-connection p,
    .three-summary-next p{
      margin:0;
      color:#f4eafb;
      line-height:1.62;
    }

    .three-summary-next{
      background:rgba(248,229,163,.10);
      border-color:rgba(248,229,163,.25);
    }

    @media(max-width:700px){
      .three-summary-positions{
        grid-template-columns:1fr;
      }

      .three-summary-position{
        padding:13px 14px;
      }
    }

    /* Version 13.21: unified history cards for every reading type */
    .history-question-card{
      margin:0 0 12px;
      padding:11px 12px;
      border-radius:11px;
      background:#eee4f7;
      border:1px solid #d7c1e7;
      color:#3d1a4d;
      line-height:1.5;
    }

    .history-answer-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:88px;
      margin:0 0 11px;
      padding:8px 13px;
      border-radius:999px;
      background:#f8e5a3;
      border:1px solid #d4af37;
      color:#341044;
      font-weight:950;
      letter-spacing:.03em;
    }

    .history-position-list{
      display:grid;
      gap:9px;
      margin-top:12px;
    }

    .history-position-item{
      padding:11px 12px;
      border-radius:11px;
      background:#fff;
      border:1px solid #e1d2eb;
      color:#2f163d;
      line-height:1.5;
    }

    .history-position-item strong{
      display:block;
      margin-bottom:3px;
      color:#50176f;
    }

    .history-position-item span{
      display:block;
      color:#71517d;
      font-size:.78rem;
      font-weight:850;
      margin-bottom:4px;
    }

    .history-mini-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
      gap:9px;
      margin-top:12px;
    }

    .history-mini-stat{
      padding:11px 10px;
      border-radius:11px;
      background:#fff;
      border:1px solid #dfceef;
      text-align:center;
    }

    .history-mini-stat strong{
      display:block;
      color:#50176f;
      font-size:1rem;
      line-height:1.25;
    }

    .history-mini-stat span{
      display:block;
      margin-top:4px;
      color:#73577f;
      font-size:.74rem;
      line-height:1.3;
    }

    .history-full-content > p:first-child{
      margin-top:0;
    }

    .history-full-content > p:last-child{
      margin-bottom:0;
    }

    @media(max-width:560px){
      .history-panel-top{
        align-items:stretch;
        flex-direction:column;
      }

      .history-clear-btn{
        align-self:flex-start;
      }
    }

    .reminder-box{
      margin-bottom:16px;
      padding:15px;
      border-radius:16px;
      background:rgba(245,215,123,.11);
      border:1px solid rgba(245,215,123,.27);
    }

    .reminder-box h3{
      margin:0 0 8px;
      color:#f8e5a3;
    }

    .reminder-item{
      margin-top:8px;
      padding:10px 12px;
      border-radius:11px;
      background:rgba(255,255,255,.08);
      color:#f5ecfb;
      line-height:1.45;
    }

    .search-box{
      display:flex;
      gap:8px;
      margin-bottom:16px;
    }

    .search-box input{
      flex:1;
      min-width:0;
      border-radius:13px;
      border:1px solid rgba(245,215,123,.28);
      background:rgba(20,0,31,.72);
      color:#fff;
      padding:12px 14px;
      font:inherit;
      outline:none;
    }

    .card-search-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
      gap:12px;
    }

    .search-card{
      padding:12px;
      border-radius:16px;
      background:#fff;
      color:#2f163d;
      text-align:center;
    }

    .search-card img{
      width:100%;
      max-width:165px;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:9px;
      background:#eee4ca;
    }

    .search-card h3{
      margin:8px 0 5px;
      font-size:1rem;
    }

    .search-card p{
      margin:5px 0;
      font-size:.84rem;
      line-height:1.4;
      text-align:left;
    }

    .share-note{
      color:#765c80;
      font-size:.78rem;
      margin-top:7px;
    }

    @media(max-width:430px){
      .bottom-nav button{
        font-size:.61rem;
        letter-spacing:-.01em;
      }

      .history-cards{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
    }


    .ritual-three .ritual-card:nth-child(1){animation-name:ritualFanLeft}
    .ritual-three .ritual-card:nth-child(2){animation-name:ritualFanCenter}
    .ritual-three .ritual-card:nth-child(3){animation-name:ritualFanRight}
    .ritual-celtic .ritual-card{animation-duration:1.7s}
    .ritual-yesno .ritual-card{animation-name:ritualPulseCard}

    @keyframes ritualFanLeft{
      0%,100%{transform:translateX(0) rotate(0)}
      50%{transform:translateX(-34px) rotate(-12deg)}
    }
    @keyframes ritualFanCenter{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-18px)}
    }
    @keyframes ritualFanRight{
      0%,100%{transform:translateX(0) rotate(0)}
      50%{transform:translateX(34px) rotate(12deg)}
    }
    @keyframes ritualPulseCard{
      0%,100%{transform:scale(.96)}
      50%{transform:scale(1.08)}
    }


    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.75;
      background:
        radial-gradient(circle at 14% 22%,rgba(255,240,178,.95) 0 1.4px,transparent 2px),
        radial-gradient(circle at 78% 18%,rgba(255,240,178,.85) 0 1.2px,transparent 1.8px),
        radial-gradient(circle at 62% 68%,rgba(255,240,178,.8) 0 1px,transparent 1.6px),
        radial-gradient(circle at 30% 76%,rgba(255,240,178,.75) 0 1.2px,transparent 1.8px);
      background-size:160px 160px,210px 210px,260px 260px,320px 320px;
      animation:heroSparkle 7s ease-in-out infinite alternate;
      z-index:-1;
    }

    @keyframes heroSparkle{
      from{opacity:.35;transform:translateY(0) scale(1)}
      to{opacity:.8;transform:translateY(-4px) scale(1.01)}
    }

    .insight-card,
    .favorite-stats{
      margin:0 0 16px;
      padding:16px;
      border-radius:18px;
      background:
        radial-gradient(circle at 90% 0%,rgba(248,229,163,.13),transparent 35%),
        linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
      border:1px solid rgba(248,229,163,.27);
      box-shadow:0 12px 28px rgba(0,0,0,.18);
    }

    .insight-card h3,
    .favorite-stats h3{
      margin:0 0 8px;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.35rem;
    }

    .insight-card p,
    .favorite-stats p{
      margin:0;
      color:#f5ecfb;
      line-height:1.6;
    }



    .stats-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:10px;
      margin-top:12px;
    }

    .stat-box{
      padding:12px;
      border-radius:13px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      text-align:center;
    }

    .stat-box strong{
      display:block;
      color:#f8e5a3;
      font-size:1.3rem;
    }

    .stat-box span{
      display:block;
      margin-top:3px;
      color:#e6d9ef;
      font-size:.8rem;
      line-height:1.3;
    }

    .history-list{
      position:relative;
      padding-left:16px;
    }

    .history-list::before{
      content:"";
      position:absolute;
      left:5px;
      top:6px;
      bottom:6px;
      width:2px;
      background:linear-gradient(#f8e5a3,rgba(248,229,163,.18));
      border-radius:999px;
    }

    .history-item{
      position:relative;
      margin-left:10px;
    }

    .history-item::before{
      content:"";
      position:absolute;
      left:-22px;
      top:22px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:#f8e5a3;
      border:3px solid #3b0d54;
      box-shadow:0 0 0 3px rgba(248,229,163,.18);
    }

    @media(max-width:430px){
    }


    /* High-contrast action buttons inside journal/history tools */
    [id$="Share"],
    [id$="Remind"],
    .share-history,
    .remind-history{
      display:inline-flex !important;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#7b4fb0,#63378f) !important;
      color:#ffffff !important;
      border:1px solid #542a7d !important;
      opacity:1 !important;
      visibility:visible !important;
      text-shadow:none !important;
      box-shadow:0 8px 18px rgba(65,26,96,.22) !important;
    }

    [id$="Share"]:hover,
    [id$="Remind"]:hover,
    .share-history:hover,
    .remind-history:hover{
      background:linear-gradient(135deg,#8b5dc0,#70409d) !important;
      color:#ffffff !important;
      filter:none !important;
    }

    [id$="Share"]:disabled,
    [id$="Remind"]:disabled{
      background:#7b4fb0 !important;
      color:#ffffff !important;
      opacity:.72 !important;
    }


    .favorite-journal{
      margin-top:14px;
      padding:12px 14px;
      border-radius:12px;
      background:#fff8dd;
      border:1px solid #e3c85f;
      color:#57420d;
      line-height:1.55;
    }

    .favorite-journal strong{
      display:block;
      margin-bottom:5px;
      color:#4d3908;
    }


    .deep-reading{
      margin-top:16px;
      display:grid;
      gap:10px;
      text-align:left;
    }

    .deep-reading-title{
      margin:2px 0 0;
      color:#4b1768;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.22rem;
      text-align:center;
    }

    .message-clarity{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      margin:2px 0 4px;
    }

    .clarity-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 12px;
      border-radius:999px;
      background:#e9daf5;
      border:1px solid #cbaee0;
      color:#43135e;
      font-weight:900;
      font-size:.86rem;
    }

    .insight-block{
      overflow:hidden;
      border-radius:14px;
      border:1px solid #ddcaec;
      background:#faf7fd;
      box-shadow:0 5px 14px rgba(66,20,91,.06);
    }

    .insight-block summary{
      list-style:none;
      cursor:pointer;
      padding:13px 14px;
      color:#45145f;
      font-weight:900;
      line-height:1.35;
      background:linear-gradient(180deg,#fbf8fd,#f3eafb);
    }

    .insight-block summary::-webkit-details-marker{
      display:none;
    }

    .insight-block summary::after{
      content:"+";
      float:right;
      color:#7b4fa0;
      font-size:1.2rem;
      line-height:1;
    }

    .insight-block[open] summary::after{
      content:"−";
    }

    .insight-content{
      padding:13px 14px 15px;
      color:#32163e;
      line-height:1.65;
      background:#fff;
    }

    .insight-content p{
      margin:0;
    }

    .insight-content ul{
      margin:0;
      padding-left:20px;
    }

    .insight-content li + li{
      margin-top:5px;
    }

    .energy-meter{
      display:grid;
      gap:8px;
    }

    .meter-row{
      display:grid;
      grid-template-columns:92px 1fr 40px;
      gap:9px;
      align-items:center;
      font-size:.86rem;
      font-weight:800;
      color:#4b2a57;
    }

    .meter-track{
      height:9px;
      overflow:hidden;
      border-radius:999px;
      background:#eadff0;
    }

    .meter-fill{
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#7b4fb0,#d4af37);
    }

    .affirmation-box{
      padding:14px;
      border-radius:13px;
      border:1px solid #e2c85e;
      background:#fff8d8;
      color:#543f0b;
      font-weight:800;
      text-align:center;
      line-height:1.55;
    }

    .spread-summary .deep-reading,
    .celtic-summary .deep-reading{
      color:#2f163d;
    }

    @media(max-width:430px){
      .meter-row{
        grid-template-columns:78px 1fr 34px;
        gap:7px;
        font-size:.78rem;
      }
    }


    /* Version 9.1: force readable text inside all deeper-reading panels */
    .deep-reading .insight-content,
    .deep-reading .insight-content p,
    .deep-reading .insight-content li,
    .spread-summary .deep-reading .insight-content,
    .spread-summary .deep-reading .insight-content p,
    .celtic-summary .deep-reading .insight-content,
    .celtic-summary .deep-reading .insight-content p,
    #yesNoExplanation .deep-reading .insight-content,
    #yesNoExplanation .deep-reading .insight-content p,
    #dailyCard .deep-reading .insight-content,
    #dailyCard .deep-reading .insight-content p{
      color:#2F163D !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .deep-reading .insight-block{
      background:#ffffff !important;
    }

    .deep-reading .insight-block summary{
      color:#45145F !important;
      background:linear-gradient(180deg,#FBF8FD,#F1E7F8) !important;
      opacity:1 !important;
    }

    .spread-summary .deep-reading-title,
    .celtic-summary .deep-reading-title,
    #yesNoExplanation .deep-reading-title{
      color:#F8E5A3 !important;
      text-shadow:0 2px 8px rgba(0,0,0,.28);
    }

    .spread-summary .deep-reading,
    .celtic-summary .deep-reading{
      color:#2F163D !important;
    }


    .magic-intro{
      position:fixed;
      inset:0;
      z-index:4000;
      display:grid;
      place-items:center;
      overflow:hidden;
      background:
        radial-gradient(circle at 50% 35%,rgba(124,72,164,.32),transparent 30%),
        radial-gradient(circle at 20% 80%,rgba(245,215,123,.10),transparent 24%),
        linear-gradient(160deg,#0d0017,#250037 58%,#12001c);
      opacity:1;
      visibility:visible;
      transition:opacity .8s ease,visibility .8s ease;
    }

    .magic-intro.hidden{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }

    .magic-sky{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
    }

    .magic-particle{
      position:absolute;
      width:5px;
      height:5px;
      border-radius:50%;
      background:#f8e5a3;
      box-shadow:0 0 12px rgba(248,229,163,.95);
      opacity:0;
      animation:magicDrift 3.7s ease-in-out infinite;
    }

    .magic-particle:nth-child(1){left:8%;top:76%;animation-delay:.1s}
    .magic-particle:nth-child(2){left:18%;top:22%;animation-delay:.7s}
    .magic-particle:nth-child(3){left:30%;top:68%;animation-delay:1.1s}
    .magic-particle:nth-child(4){left:45%;top:18%;animation-delay:.4s}
    .magic-particle:nth-child(5){left:62%;top:72%;animation-delay:1.3s}
    .magic-particle:nth-child(6){left:78%;top:28%;animation-delay:.9s}
    .magic-particle:nth-child(7){left:88%;top:66%;animation-delay:1.6s}
    .magic-particle:nth-child(8){left:54%;top:48%;animation-delay:.2s}

    @keyframes magicDrift{
      0%{transform:translateY(18px) scale(.6);opacity:0}
      35%{opacity:1}
      70%{opacity:.85}
      100%{transform:translateY(-42px) scale(1.15);opacity:0}
    }

    .magic-stage{
      position:relative;
      z-index:2;
      width:min(92vw,520px);
      padding:28px 18px 24px;
      text-align:center;
    }

    .magic-cards{
      position:relative;
      width:220px;
      height:210px;
      margin:0 auto 10px;
      perspective:1200px;
    }

    .magic-card{
      position:absolute;
      left:50%;
      top:50%;
      width:105px;
      height:158px;
      margin-left:-52px;
      margin-top:-79px;
      border-radius:12px;
      border:3px solid #f5d77b;
      background:
        radial-gradient(circle at center,rgba(245,215,123,.18),transparent 27%),
        linear-gradient(145deg,#32104a,#6c2f8a 60%,#2a0b3d);
      box-shadow:0 18px 42px rgba(0,0,0,.44),0 0 20px rgba(245,215,123,.12);
      transform-origin:50% 95%;
      opacity:0;
      animation:magicFan 1.8s cubic-bezier(.2,.75,.2,1) forwards;
    }

    .magic-card::before{
      content:"✦";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      color:#f5d77b;
      font-size:2.2rem;
      text-shadow:0 0 16px rgba(245,215,123,.8);
    }

    .magic-card:nth-child(1){animation-delay:.2s;--rot:-18deg;--x:-44px}
    .magic-card:nth-child(2){animation-delay:.42s;--rot:0deg;--x:0px}
    .magic-card:nth-child(3){animation-delay:.64s;--rot:18deg;--x:44px}

    @keyframes magicFan{
      0%{
        opacity:0;
        transform:translateY(28px) rotate(0deg) scale(.82);
      }
      55%{opacity:1}
      100%{
        opacity:1;
        transform:translateX(var(--x)) translateY(0) rotate(var(--rot)) scale(1);
      }
    }

    .magic-logo{
      width:96px;
      height:96px;
      object-fit:cover;
      border-radius:50%;
      border:3px solid rgba(255,246,219,.92);
      background:#190027;
      box-shadow:0 0 0 0 rgba(245,215,123,.0);
      opacity:0;
      transform:scale(.75);
      animation:magicLogo 1.2s ease 1.15s forwards;
    }

    @keyframes magicLogo{
      0%{opacity:0;transform:scale(.75);box-shadow:0 0 0 0 rgba(245,215,123,0)}
      65%{opacity:1;transform:scale(1.05);box-shadow:0 0 38px 12px rgba(245,215,123,.26)}
      100%{opacity:1;transform:scale(1);box-shadow:0 0 28px 7px rgba(245,215,123,.18)}
    }

    .magic-title{
      margin:14px 0 6px;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(2rem,8vw,3.4rem);
      letter-spacing:.03em;
      opacity:0;
      transform:translateY(10px);
      animation:magicText .8s ease 1.45s forwards;
    }

    .magic-tagline{
      margin:0 auto;
      max-width:360px;
      color:#f4eafb;
      line-height:1.55;
      font-size:1rem;
      opacity:0;
      transform:translateY(10px);
      animation:magicText .8s ease 1.7s forwards;
    }

    @keyframes magicText{
      to{opacity:1;transform:translateY(0)}
    }

    .magic-skip{
      position:absolute;
      top:max(14px,env(safe-area-inset-top));
      right:14px;
      z-index:3;
      border:1px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
      color:#fff;
      border-radius:999px;
      padding:8px 12px;
      font-weight:800;
      cursor:pointer;
      backdrop-filter:blur(8px);
    }

    .magic-progress{
      width:min(240px,72vw);
      height:5px;
      margin:22px auto 0;
      overflow:hidden;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      opacity:0;
      animation:magicText .5s ease 1.8s forwards;
    }

    .magic-progress span{
      display:block;
      height:100%;
      width:0;
      border-radius:inherit;
      background:linear-gradient(90deg,#7b4fb0,#f5d77b);
      animation:magicProgress 3.7s linear .25s forwards;
    }

    @keyframes magicProgress{
      to{width:100%}
    }

    @media(prefers-reduced-motion:reduce){
      .magic-particle,
      .magic-card,
      .magic-logo,
      .magic-title,
      .magic-tagline,
      .magic-progress,
      .magic-progress span{
        animation:none !important;
      }

      .magic-card,
      .magic-logo,
      .magic-title,
      .magic-tagline,
      .magic-progress{
        opacity:1 !important;
        transform:none !important;
      }

      .magic-card:nth-child(1){transform:translateX(-44px) rotate(-18deg) !important}
      .magic-card:nth-child(2){transform:translateX(0) rotate(0deg) !important}
      .magic-card:nth-child(3){transform:translateX(44px) rotate(18deg) !important}
    }


    /* Version 9.3: improved Deeper Look heading contrast and polish */
    .deep-reading-title,
    .spread-summary .deep-reading-title,
    .celtic-summary .deep-reading-title,
    #yesNoExplanation .deep-reading-title,
    #dailyCard .deep-reading-title{
      position:relative;
      margin:4px auto 14px !important;
      padding-bottom:15px;
      width:fit-content;
      max-width:100%;
      color:#4A216C !important;
      text-shadow:none !important;
      line-height:1.25;
      opacity:0;
      transform:translateY(10px);
      animation:deeperTitleIn .38s ease forwards;
    }

    .deep-reading-title::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      width:min(150px,62%);
      height:2px;
      border-radius:999px;
      background:linear-gradient(
        90deg,
        transparent,
        #D4AF37 20%,
        #F8E5A3 50%,
        #D4AF37 80%,
        transparent
      );
      transform:translateX(-50%);
      overflow:hidden;
    }

    .deep-reading-title::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      width:42px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
      transform:translateX(-110px);
      opacity:0;
      animation:deeperDividerShimmer 1.2s ease .45s 1 forwards;
      z-index:2;
    }

    .message-clarity{
      margin:0 0 8px !important;
      gap:8px !important;
    }

    .clarity-pill{
      margin:0 !important;
    }

    @keyframes deeperTitleIn{
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes deeperDividerShimmer{
      0%{
        opacity:0;
        transform:translateX(-110px);
      }
      18%{
        opacity:1;
      }
      82%{
        opacity:1;
      }
      100%{
        opacity:0;
        transform:translateX(68px);
      }
    }

    @media(prefers-reduced-motion:reduce){
      .deep-reading-title,
      .deep-reading-title::before{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
      }
    }


    /* Version 10 preview: premium readings dashboard and visual polish */
    .seeker-dashboard{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
      gap:18px;
      margin:16px 0 2px;
      padding:20px;
      border-radius:24px;
      background:
        radial-gradient(circle at 12% 0%,rgba(248,229,163,.14),transparent 34%),
        radial-gradient(circle at 92% 16%,rgba(138,78,184,.25),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
      border:1px solid rgba(248,229,163,.26);
      box-shadow:0 18px 46px rgba(0,0,0,.25);
      backdrop-filter:blur(14px);
    }

    .seeker-dashboard::before{
      content:"";
      position:absolute;
      inset:-40%;
      pointer-events:none;
      background:conic-gradient(
        from 20deg,
        transparent 0 34%,
        rgba(248,229,163,.07) 39%,
        transparent 44% 100%
      );
      animation:dashboardAura 18s linear infinite;
    }

    @keyframes dashboardAura{
      to{transform:rotate(360deg)}
    }

    .dashboard-copy,
    .dashboard-card{
      position:relative;
      z-index:1;
    }

    .dashboard-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:7px;
      margin-bottom:7px;
      color:#f8e5a3;
      font-weight:900;
      font-size:.82rem;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .dashboard-title{
      margin:0;
      color:#fff4cf;
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(1.75rem,5.2vw,2.7rem);
      line-height:1.15;
    }

    .dashboard-message{
      max-width:680px;
      margin:10px 0 0;
      color:#eadff2;
      line-height:1.65;
    }

    .dashboard-actions{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:16px;
    }

    .dashboard-stats{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:9px;
      margin-top:17px;
    }

    .dashboard-stat{
      padding:11px 9px;
      border-radius:14px;
      text-align:center;
      background:rgba(15,0,26,.34);
      border:1px solid rgba(255,255,255,.10);
    }

    .dashboard-stat strong{
      display:block;
      color:#f8e5a3;
      font-size:1.25rem;
      line-height:1;
    }

    .dashboard-stat span{
      display:block;
      margin-top:5px;
      color:#d7c7e3;
      font-size:.74rem;
      line-height:1.25;
    }

    .dashboard-card{
      min-height:220px;
      display:grid;
      grid-template-columns:105px 1fr;
      gap:13px;
      align-items:center;
      padding:14px;
      border-radius:19px;
      background:linear-gradient(160deg,rgba(14,0,24,.72),rgba(77,23,105,.52));
      border:1px solid rgba(248,229,163,.22);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .dashboard-card img{
      width:105px;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:10px;
      padding:4px;
      background:#eee4ca;
      box-shadow:0 14px 28px rgba(0,0,0,.34);
    }

    .dashboard-card img.reversed{
      transform:rotate(180deg);
    }

    #dailyImage{
      transform-origin:center center;
      transition:transform .28s ease;
    }

    #dailyImage.reversed{
      transform:rotate(180deg);
    }

    .dashboard-card-kicker{
      margin:0 0 4px;
      color:#d8c2e7;
      font-size:.76rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .dashboard-card h3{
      margin:0 0 6px;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.28rem;
      line-height:1.15;
    }

    .dashboard-card p{
      margin:0;
      color:#eee4f5;
      font-size:.88rem;
      line-height:1.5;
    }

    .mode-ribbon{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      margin:14px 0 0;
      color:#d8c9e4;
      font-size:.79rem;
      text-align:center;
    }

    .mode-ribbon::before,
    .mode-ribbon::after{
      content:"";
      width:min(90px,18vw);
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(248,229,163,.42));
    }

    .mode-ribbon::after{
      transform:scaleX(-1);
    }

    .tabs{
      position:relative;
      padding-top:11px;
    }

    .tab{
      position:relative;
      overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    }

    .tab.active::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.36) 45%,transparent 62%);
      transform:translateX(-120%);
      animation:tabSheen .7s ease forwards;
    }

    @keyframes tabSheen{
      to{transform:translateX(120%)}
    }

    .panel.active{
      animation:premiumPanelIn .42s cubic-bezier(.2,.75,.2,1);
    }

    @keyframes premiumPanelIn{
      from{opacity:0;transform:translateY(12px) scale(.992)}
      to{opacity:1;transform:none}
    }

    .panel h2::after{
      content:"";
      display:block;
      width:68px;
      height:2px;
      margin-top:9px;
      border-radius:999px;
      background:linear-gradient(90deg,#d4af37,#f8e5a3,transparent);
    }

    .deck{
      box-shadow:
        0 24px 58px rgba(0,0,0,.52),
        0 0 0 1px rgba(255,255,255,.05),
        0 0 34px rgba(245,215,123,.16);
    }

    .deck:hover{
      filter:brightness(1.06);
      box-shadow:
        0 28px 64px rgba(0,0,0,.55),
        0 0 42px rgba(245,215,123,.23);
    }

    .reading-card,
    .spread-card{
      border:1px solid rgba(70,20,90,.08);
    }

    .premium-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:10px;
      padding:7px 10px;
      border-radius:999px;
      color:#f8e5a3;
      background:rgba(248,229,163,.08);
      border:1px solid rgba(248,229,163,.18);
      font-size:.75rem;
      font-weight:850;
    }

    @media(max-width:760px){
      .seeker-dashboard{
        grid-template-columns:1fr;
        padding:17px;
      }

      .dashboard-card{
        min-height:0;
      }
    }

    @media(max-width:430px){
      .seeker-dashboard{
        margin-top:12px;
        padding:15px;
        border-radius:20px;
      }

      .dashboard-stats{
        gap:6px;
      }

      .dashboard-stat{
        padding:9px 5px;
      }

      .dashboard-stat strong{
        font-size:1.08rem;
      }

      .dashboard-card{
        grid-template-columns:86px 1fr;
        gap:11px;
        padding:12px;
      }

      .dashboard-card img{
        width:86px;
      }

      .dashboard-actions .btn{
        flex:1 1 140px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .seeker-dashboard::before,
      .tab.active::after{
        animation:none !important;
      }
    }


    /* Version 10.1: personalized daily card, organized navigation, editable journals */
    .library-ribbon{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      margin:4px 0 0;
      color:#d8c9e4;
      font-size:.79rem;
      font-weight:850;
      text-align:center;
      letter-spacing:.035em;
    }

    .library-ribbon::before,
    .library-ribbon::after{
      content:"";
      width:min(80px,16vw);
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(248,229,163,.34));
    }

    .library-ribbon::after{
      transform:scaleX(-1);
    }

    .utility-tabs{
      justify-content:center;
      padding-top:9px;
      padding-bottom:15px;
    }

    .utility-tab{
      background:rgba(117,82,158,.22);
      border-color:rgba(196,165,220,.22);
    }

    .utility-tab.active{
      background:linear-gradient(180deg,#a879cf,#76529e);
      color:#fff;
    }

    .dashboard-stats{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      max-width:360px;
    }

    .edit-favorite-journal{
      background:#76529e !important;
      color:#fff !important;
      border:1px solid #624087 !important;
    }

    .journal-saved-note{
      margin-top:7px;
      color:#73547f;
      font-size:.8rem;
      line-height:1.4;
    }


    /* Version 10.2: Tarot Academy */
    .academy-hero{
      margin-bottom:18px;
      padding:20px;
      border-radius:20px;
      background:
        radial-gradient(circle at 90% 0%,rgba(248,229,163,.15),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
      border:1px solid rgba(248,229,163,.25);
    }

    .academy-hero h3{
      margin:0 0 8px;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.5rem;
    }

    .academy-hero p{
      margin:0;
      color:#eadff2;
      line-height:1.65;
    }

    .academy-progress{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:9px;
      margin-top:15px;
    }

    .academy-progress div{
      padding:11px;
      border-radius:13px;
      background:rgba(16,0,27,.35);
      border:1px solid rgba(255,255,255,.10);
      text-align:center;
    }

    .academy-progress strong{
      display:block;
      color:#f8e5a3;
      font-size:1.2rem;
    }

    .academy-progress span{
      display:block;
      margin-top:4px;
      color:#d5c5e1;
      font-size:.75rem;
      line-height:1.25;
    }

    .academy-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      margin-bottom:18px;
    }

    .lesson-card{
      overflow:hidden;
      border-radius:17px;
      background:#fff;
      color:#2f163d;
      border:1px solid #dfceef;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }

    .lesson-card summary{
      list-style:none;
      cursor:pointer;
      padding:15px 16px;
      color:#4b1768;
      font-weight:950;
      background:linear-gradient(180deg,#fbf8fd,#f1e7f8);
    }

    .lesson-card summary::-webkit-details-marker{display:none}
    .lesson-card summary::after{
      content:"+";
      float:right;
      color:#7b4fa0;
      font-size:1.2rem;
    }
    .lesson-card[open] summary::after{content:"−"}

    .lesson-body{
      padding:15px 16px 17px;
      line-height:1.65;
    }

    .lesson-body h4{
      margin:16px 0 6px;
      color:#5b2377;
    }

    .lesson-body p{margin:0 0 10px}
    .lesson-body ul{margin:0;padding-left:20px}
    .lesson-body li+li{margin-top:5px}

    .academy-tools{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:9px;
      margin:18px 0 12px;
    }

    .academy-tools input,
    .academy-tools select{
      min-width:0;
      border-radius:13px;
      border:1px solid rgba(245,215,123,.28);
      background:rgba(20,0,31,.72);
      color:#fff;
      padding:12px 14px;
      font:inherit;
      outline:none;
    }

    .academy-filter-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:14px;
    }

    .academy-filter{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:#fff;
      border-radius:999px;
      padding:8px 12px;
      font-weight:850;
      cursor:pointer;
    }

    .academy-filter.active{
      background:#f8e5a3;
      color:#2f114d;
      border-color:#d4af37;
    }

    .academy-card-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:12px;
    }

    .academy-card{
      padding:12px;
      border-radius:17px;
      background:#fff;
      color:#2f163d;
      text-align:center;
      border:1px solid #dfceef;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }

    .academy-card img{
      width:100%;
      max-width:170px;
      aspect-ratio:2/3;
      object-fit:contain;
      border-radius:9px;
      background:#eee4ca;
    }

    .academy-card h3{
      margin:8px 0 4px;
      color:#43145d;
      font-size:1rem;
    }

    .academy-card .academy-meta{
      color:#765c80;
      font-size:.74rem;
      font-weight:800;
      margin-bottom:8px;
    }

    .academy-card p{
      margin:5px 0;
      font-size:.82rem;
      line-height:1.42;
      text-align:left;
    }

    .academy-card .btn{
      margin-top:8px;
      width:100%;
    }

    .academy-section-title{
      margin:20px 0 10px;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.45rem;
    }

    @media(max-width:700px){
      .academy-grid{grid-template-columns:1fr}
      .academy-progress{grid-template-columns:1fr}
      .academy-tools{grid-template-columns:1fr}
    }


    /* Version 10.3: stronger academy contrast, mobile-safe utility navigation */
    .utility-tabs{
      overflow:visible;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
      padding:10px 0 16px;
    }

    .utility-tabs .tab{
      width:100%;
      white-space:normal;
      line-height:1.2;
      min-height:48px;
      padding:9px 8px;
      text-align:center;
    }

    #academyPanel{
      background:
        radial-gradient(circle at 8% 0%,rgba(126,54,167,.34),transparent 34%),
        radial-gradient(circle at 96% 8%,rgba(248,229,163,.11),transparent 26%),
        linear-gradient(145deg,rgba(67,18,91,.96),rgba(35,4,52,.96)) !important;
      border-color:rgba(248,229,163,.24);
      box-shadow:0 20px 54px rgba(0,0,0,.34);
    }

    #academyPanel .panel-intro{
      color:#f0e6f7;
    }

    .academy-hero{
      background:
        radial-gradient(circle at 92% 0%,rgba(248,229,163,.17),transparent 34%),
        linear-gradient(145deg,rgba(111,46,145,.66),rgba(54,18,75,.78));
      border-color:rgba(248,229,163,.30);
      box-shadow:0 16px 34px rgba(0,0,0,.22);
    }

    .academy-progress div{
      background:rgba(26,0,39,.56);
      border-color:rgba(248,229,163,.13);
    }

    .lesson-card{
      border-color:#ccb3de;
      box-shadow:0 12px 28px rgba(14,0,24,.22);
    }

    .lesson-card summary{
      color:#421257;
      background:linear-gradient(180deg,#fff,#ecdef5);
      font-size:1.02rem;
    }

    .lesson-body{
      color:#2d1538;
      background:#fff;
    }

    .lesson-body p,
    .lesson-body li{
      color:#2d1538;
    }

    .lesson-callout{
      margin:12px 0;
      padding:12px 13px;
      border-radius:12px;
      background:#f7effc;
      border-left:4px solid #7b4fb0;
      color:#3d1b4e;
      line-height:1.58;
    }

    .lesson-example{
      margin:12px 0 0;
      padding:12px 13px;
      border-radius:12px;
      background:#fff8dd;
      border:1px solid #e4cb72;
      color:#57420d;
      line-height:1.58;
    }

    @media(max-width:700px){
      .utility-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }

    @media(max-width:430px){
      .utility-tabs{
        gap:7px;
      }

      .utility-tabs .tab{
        font-size:.82rem;
        min-height:50px;
      }

      #academyPanel{
        padding:14px;
      }
    }


    /* Version 10.4: cinematic opening ritual — silent by design */
    .magic-intro{
      background:
        radial-gradient(circle at 50% 42%,rgba(129,67,170,.38),transparent 24%),
        radial-gradient(circle at 50% 52%,rgba(245,215,123,.09),transparent 40%),
        linear-gradient(160deg,#08000f,#220032 50%,#110019);
    }

    .magic-intro::before,
    .magic-intro::after{
      content:"";
      position:absolute;
      inset:50% auto auto 50%;
      width:min(86vw,620px);
      aspect-ratio:1;
      border-radius:50%;
      pointer-events:none;
      transform:translate(-50%,-50%);
    }

    .magic-intro::before{
      border:1px solid rgba(248,229,163,.22);
      box-shadow:
        0 0 70px rgba(248,229,163,.08),
        inset 0 0 70px rgba(122,72,165,.08);
      animation:introOrbitSlow 18s linear infinite;
    }

    .magic-intro::after{
      width:min(65vw,440px);
      border:1px dashed rgba(207,171,231,.28);
      animation:introOrbitReverse 14s linear infinite;
    }

    @keyframes introOrbitSlow{
      to{transform:translate(-50%,-50%) rotate(360deg)}
    }

    @keyframes introOrbitReverse{
      to{transform:translate(-50%,-50%) rotate(-360deg)}
    }

    .magic-sky{
      background:
        radial-gradient(circle at 10% 20%,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
        radial-gradient(circle at 85% 14%,rgba(248,229,163,.9) 0 1.2px,transparent 1.8px),
        radial-gradient(circle at 74% 78%,rgba(255,255,255,.75) 0 1px,transparent 1.6px),
        radial-gradient(circle at 20% 82%,rgba(248,229,163,.8) 0 1.1px,transparent 1.7px);
      background-size:130px 130px,190px 190px,230px 230px,280px 280px;
      animation:starFieldDrift 16s linear infinite;
    }

    @keyframes starFieldDrift{
      to{transform:translateY(-38px) scale(1.02)}
    }

    .magic-stage{
      width:min(94vw,620px);
      padding:22px 18px 26px;
    }

    .magic-celestial{
      position:relative;
      width:260px;
      height:260px;
      margin:0 auto -28px;
      opacity:0;
      transform:scale(.72);
      animation:celestialReveal 1.2s cubic-bezier(.2,.75,.2,1) .25s forwards;
    }

    .magic-ring{
      position:absolute;
      inset:50%;
      border-radius:50%;
      border:1px solid rgba(248,229,163,.34);
      transform:translate(-50%,-50%);
    }

    .magic-ring.one{
      width:235px;
      height:235px;
      animation:introOrbitSlow 9s linear infinite;
    }

    .magic-ring.two{
      width:185px;
      height:185px;
      border-style:dashed;
      border-color:rgba(205,164,231,.34);
      animation:introOrbitReverse 7s linear infinite;
    }

    .magic-ring.three{
      width:128px;
      height:128px;
      border-color:rgba(248,229,163,.55);
      box-shadow:0 0 28px rgba(248,229,163,.13);
      animation:ringBreathe 2.4s ease-in-out infinite;
    }

    @keyframes ringBreathe{
      0%,100%{opacity:.48;transform:translate(-50%,-50%) scale(.96)}
      50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
    }

    .magic-orbit-symbol{
      position:absolute;
      left:50%;
      top:50%;
      width:28px;
      height:28px;
      margin:-14px;
      display:grid;
      place-items:center;
      color:#f8e5a3;
      font-size:1.15rem;
      text-shadow:0 0 14px rgba(248,229,163,.8);
      transform-origin:14px 14px;
    }

    .magic-orbit-symbol:nth-child(4){
      animation:orbitSymbolOne 6.5s linear infinite;
    }

    .magic-orbit-symbol:nth-child(5){
      animation:orbitSymbolTwo 8s linear infinite;
    }

    .magic-orbit-symbol:nth-child(6){
      animation:orbitSymbolThree 10s linear infinite;
    }

    @keyframes orbitSymbolOne{
      from{transform:rotate(0deg) translateX(116px) rotate(0deg)}
      to{transform:rotate(360deg) translateX(116px) rotate(-360deg)}
    }

    @keyframes orbitSymbolTwo{
      from{transform:rotate(120deg) translateX(91px) rotate(-120deg)}
      to{transform:rotate(480deg) translateX(91px) rotate(-480deg)}
    }

    @keyframes orbitSymbolThree{
      from{transform:rotate(240deg) translateX(64px) rotate(-240deg)}
      to{transform:rotate(600deg) translateX(64px) rotate(-600deg)}
    }

    @keyframes celestialReveal{
      0%{opacity:0;transform:scale(.72) rotate(-18deg);filter:blur(8px)}
      70%{opacity:1;transform:scale(1.04) rotate(2deg);filter:blur(0)}
      100%{opacity:1;transform:scale(1) rotate(0)}
    }

    .magic-cards{
      width:280px;
      height:220px;
      margin:-195px auto 2px;
      z-index:3;
    }

    .magic-card{
      width:108px;
      height:162px;
      margin-left:-54px;
      margin-top:-81px;
      border:3px solid #f5d77b;
      background:
        radial-gradient(circle at center,rgba(245,215,123,.2),transparent 22%),
        repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 7px,transparent 7px 14px),
        linear-gradient(145deg,#2b083d,#702c90 56%,#260634);
      box-shadow:
        0 18px 42px rgba(0,0,0,.5),
        0 0 24px rgba(245,215,123,.14);
      animation-duration:2.15s;
    }

    .magic-card:nth-child(1){animation-delay:.65s;--rot:-24deg;--x:-63px}
    .magic-card:nth-child(2){animation-delay:.9s;--rot:0deg;--x:0px}
    .magic-card:nth-child(3){animation-delay:1.15s;--rot:24deg;--x:63px}

    .magic-card::after{
      content:"";
      position:absolute;
      inset:8px;
      border:1px solid rgba(248,229,163,.34);
      border-radius:8px;
    }

    .magic-logo{
      width:108px;
      height:108px;
      position:relative;
      z-index:6;
      animation-delay:2.15s;
      animation-duration:1.45s;
    }

    .magic-logo-halo{
      position:absolute;
      left:50%;
      top:50%;
      width:150px;
      height:150px;
      margin:-75px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(248,229,163,.22),transparent 66%);
      opacity:0;
      animation:logoHalo 2s ease 2.1s forwards;
      pointer-events:none;
    }

    @keyframes logoHalo{
      0%{opacity:0;transform:scale(.45)}
      55%{opacity:1;transform:scale(1.14)}
      100%{opacity:.7;transform:scale(1)}
    }

    .magic-title{
      font-size:clamp(2.25rem,9vw,4rem);
      margin-top:16px;
      animation-delay:3.15s;
      letter-spacing:.045em;
      text-shadow:0 4px 22px rgba(0,0,0,.55),0 0 22px rgba(248,229,163,.12);
    }

    .magic-tagline{
      animation-delay:3.55s;
      max-width:390px;
      color:#f8efff;
    }

    .magic-message-stage{
      min-height:52px;
      margin:14px auto 0;
      display:grid;
      place-items:center;
      max-width:430px;
    }

    .magic-message{
      grid-area:1/1;
      margin:0;
      color:#f8e5a3;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.04rem;
      line-height:1.45;
      opacity:0;
      transform:translateY(8px);
    }

    .magic-message.one{
      animation:introMessage 1.55s ease 4.15s forwards;
    }

    .magic-message.two{
      animation:introMessage 1.55s ease 5.6s forwards;
    }

    .magic-message.three{
      animation:introMessageFinal 1.4s ease 7.05s forwards;
    }

    @keyframes introMessage{
      0%{opacity:0;transform:translateY(8px)}
      20%,72%{opacity:1;transform:translateY(0)}
      100%{opacity:0;transform:translateY(-8px)}
    }

    @keyframes introMessageFinal{
      0%{opacity:0;transform:translateY(8px)}
      25%,100%{opacity:1;transform:translateY(0)}
    }

    .magic-progress{
      margin-top:18px;
      animation-delay:3.9s;
      height:6px;
      background:rgba(255,255,255,.10);
      box-shadow:inset 0 1px 5px rgba(0,0,0,.35);
    }

    .magic-progress span{
      background:linear-gradient(90deg,#6e2f8d,#c58bea,#f8e5a3,#fff1b5);
      box-shadow:0 0 14px rgba(248,229,163,.5);
      animation:magicProgressLong 8.6s linear .35s forwards;
    }

    @keyframes magicProgressLong{
      0%{width:0}
      22%{width:18%}
      48%{width:48%}
      70%{width:72%}
      100%{width:100%}
    }

    .magic-enter-glow{
      position:absolute;
      left:50%;
      bottom:5%;
      width:220px;
      height:70px;
      transform:translateX(-50%);
      background:radial-gradient(ellipse,rgba(248,229,163,.16),transparent 70%);
      opacity:0;
      animation:enterGlow 1.4s ease 7.4s forwards;
      pointer-events:none;
    }

    @keyframes enterGlow{
      to{opacity:1;transform:translateX(-50%) scale(1.2)}
    }

    .magic-skip{
      top:max(16px,env(safe-area-inset-top));
      right:16px;
      padding:9px 14px;
      border-color:rgba(248,229,163,.22);
      background:rgba(17,0,28,.52);
      box-shadow:0 8px 22px rgba(0,0,0,.24);
    }

    @media(max-width:430px){
      .magic-celestial{
        width:230px;
        height:230px;
      }

      .magic-ring.one{width:215px;height:215px}
      .magic-ring.two{width:168px;height:168px}
      .magic-ring.three{width:118px;height:118px}
      .magic-cards{width:250px}
      .magic-card{width:98px;height:147px;margin-left:-49px;margin-top:-73.5px}
      .magic-card:nth-child(1){--x:-55px}
      .magic-card:nth-child(3){--x:55px}
      .magic-logo{width:96px;height:96px}
      .magic-title{margin-top:13px}
      .magic-message-stage{min-height:58px}
    }

    @media(prefers-reduced-motion:reduce){
      .magic-intro::before,
      .magic-intro::after,
      .magic-sky,
      .magic-ring,
      .magic-orbit-symbol,
      .magic-enter-glow{
        animation:none !important;
      }

      .magic-celestial,
      .magic-message.three{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
      }

      .magic-message.one,
      .magic-message.two{
        display:none !important;
      }
    }

  

    /* Version 10.7 preview: liquid answer chamber and reliable text fitting */
    .eightball-panel-intro{
      max-width:780px;
    }

    .eightball-question-box{
      max-width:760px;
      margin:0 auto 22px;
    }

    .eightball-stage{
      position:relative;
      display:grid;
      place-items:center;
      min-height:430px;
      padding:18px 0 28px;
      overflow:hidden;
    }

    .eightball-stage::before{
      content:"";
      position:absolute;
      width:min(88vw,540px);
      height:min(88vw,540px);
      border-radius:50%;
      background:radial-gradient(circle,rgba(119,70,157,.2),transparent 68%);
      filter:blur(10px);
      animation:eightAura 4.8s ease-in-out infinite;
      pointer-events:none;
    }

    @keyframes eightAura{
      0%,100%{transform:scale(.92);opacity:.45}
      50%{transform:scale(1.04);opacity:.82}
    }

    .magic-eight-ball{
      position:relative;
      width:min(78vw,360px);
      aspect-ratio:1;
      border:0;
      border-radius:50%;
      padding:0;
      cursor:pointer;
      color:#fff;
      background:
        radial-gradient(circle at 31% 23%,rgba(255,255,255,.42) 0 2.5%,rgba(255,255,255,.11) 8%,transparent 20%),
        radial-gradient(circle at 68% 74%,rgba(82,44,104,.25),transparent 32%),
        radial-gradient(circle at 42% 38%,#252329 0 13%,#101014 47%,#020203 74%,#000 100%);
      box-shadow:
        inset -28px -34px 54px rgba(0,0,0,.88),
        inset 18px 16px 30px rgba(255,255,255,.075),
        0 34px 50px rgba(0,0,0,.52),
        0 0 0 1px rgba(255,255,255,.08);
      transform:translateZ(0);
      transition:filter .2s ease,transform .2s ease;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }

    .magic-eight-ball:hover{
      filter:brightness(1.05);
      transform:translateY(-3px) scale(1.006);
    }

    .magic-eight-ball:focus-visible{
      outline:4px solid rgba(248,229,163,.78);
      outline-offset:8px;
    }

    .magic-eight-ball.shaking{
      animation:eightBallShake 1.25s cubic-bezier(.36,.07,.19,.97) both;
      pointer-events:none;
    }

    @keyframes eightBallShake{
      0%,100%{transform:translate3d(0,0,0) rotate(0)}
      8%{transform:translate3d(-13px,3px,0) rotate(-4deg)}
      16%{transform:translate3d(14px,-4px,0) rotate(4deg)}
      24%{transform:translate3d(-18px,5px,0) rotate(-6deg)}
      33%{transform:translate3d(17px,-3px,0) rotate(5deg)}
      42%{transform:translate3d(-12px,-5px,0) rotate(-4deg)}
      51%{transform:translate3d(13px,5px,0) rotate(4deg)}
      61%{transform:translate3d(-8px,2px,0) rotate(-3deg)}
      72%{transform:translate3d(8px,-2px,0) rotate(2deg)}
      84%{transform:translate3d(-4px,1px,0) rotate(-1deg)}
    }

    .eightball-front{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      transition:opacity .38s ease,transform .45s ease;
    }

    .eightball-eight-disc{
      width:43%;
      aspect-ratio:1;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:
        radial-gradient(circle at 34% 27%,#fff 0 18%,#f0eff2 54%,#c8c6cc 100%);
      color:#09090b;
      font-family:Arial Black,Impact,sans-serif;
      font-size:clamp(4.8rem,19vw,8.8rem);
      line-height:1;
      box-shadow:inset -10px -12px 18px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.55);
      text-shadow:1px 2px 0 rgba(255,255,255,.4);
    }

    .eightball-answer-window{
      position:absolute;
      left:50%;
      top:50%;
      width:58%;
      aspect-ratio:1;
      transform:translate(-50%,-50%) scale(.78) rotate(8deg);
      display:grid;
      place-items:center;
      border-radius:50%;
      overflow:hidden;
      opacity:0;
      background:
        radial-gradient(circle at center,#11131a 0 48%,#040509 67%,#000 100%);
      border:10px solid #07070a;
      box-shadow:
        inset 0 0 32px rgba(0,0,0,.95),
        inset 0 0 0 2px rgba(255,255,255,.05),
        0 7px 14px rgba(0,0,0,.52);
      transition:opacity .5s ease,transform .72s cubic-bezier(.2,.8,.2,1);
    }

    .eightball-triangle{
      width:78%;
      height:68%;
      display:grid;
      place-items:center;
      padding:24% 15% 10%;
      clip-path:polygon(50% 0,100% 100%,0 100%);
      background:
        radial-gradient(circle at 50% 64%,rgba(89,136,255,.95),rgba(35,62,181,.95) 43%,#111f78 78%,#081047 100%);
      filter:drop-shadow(0 0 12px rgba(72,110,255,.62));
      transform:translateY(18px) rotate(-8deg) scale(.9);
      transition:transform .8s cubic-bezier(.2,.8,.2,1);
    }

    .eightball-answer{
      max-width:100%;
      color:#dce8ff;
      font-family:Arial,Helvetica,sans-serif;
      font-size:clamp(.72rem,3vw,1.05rem);
      font-weight:900;
      line-height:1.12;
      letter-spacing:.025em;
      text-align:center;
      text-transform:uppercase;
      text-shadow:0 0 5px #fff,0 0 10px #6e96ff;
      opacity:0;
      transform:translateY(8px);
      transition:opacity .45s ease .28s,transform .45s ease .28s;
    }

    .magic-eight-ball.answered .eightball-front{
      opacity:0;
      transform:scale(.72) rotate(-16deg);
    }

    .magic-eight-ball.answered .eightball-answer-window{
      opacity:1;
      transform:translate(-50%,-50%) scale(1) rotate(0);
    }

    .magic-eight-ball.answered .eightball-triangle{
      transform:translateY(0) rotate(0) scale(1);
      animation:eightLiquidFloat 3.8s ease-in-out infinite 1s;
    }

    .magic-eight-ball.answered .eightball-answer{
      opacity:1;
      transform:translateY(0);
    }

    @keyframes eightLiquidFloat{
      0%,100%{transform:translateY(0) rotate(-.7deg)}
      50%{transform:translateY(-4px) rotate(.7deg)}
    }

    .eightball-shadow{
      width:min(64vw,310px);
      height:34px;
      margin-top:-8px;
      border-radius:50%;
      background:rgba(0,0,0,.42);
      filter:blur(13px);
      animation:eightShadow 4.2s ease-in-out infinite;
    }

    @keyframes eightShadow{
      0%,100%{transform:scaleX(.94);opacity:.54}
      50%{transform:scaleX(1.04);opacity:.4}
    }

    .eightball-instruction{
      margin:4px 0 0;
      color:#eadff2;
      text-align:center;
      font-weight:800;
      line-height:1.5;
    }

    .eightball-question-echo{
      display:none;
      max-width:680px;
      margin:0 auto 15px;
      padding:12px 15px;
      border-radius:14px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(248,229,163,.2);
      color:#f8e5a3;
      text-align:center;
      line-height:1.5;
    }

    .eightball-question-echo.visible{display:block;animation:fadeUp .3s ease}

    .eightball-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:9px;
      margin-top:12px;
    }

    .eightball-actions .btn{min-width:160px}

    /* Refined answer fit and restrained liquid-motion details */
    .magic-eight-ball:not(.shaking){
      animation:eightBallIdle 5.4s ease-in-out infinite;
    }

    @keyframes eightBallIdle{
      0%,100%{transform:translateY(0) rotate(0deg)}
      50%{transform:translateY(-4px) rotate(.35deg)}
    }

    .eightball-answer-window::before{
      content:"";
      position:absolute;
      inset:8%;
      z-index:2;
      border-radius:50%;
      pointer-events:none;
      background:linear-gradient(115deg,transparent 26%,rgba(255,255,255,.13) 43%,transparent 59%);
      transform:translateX(-125%) rotate(-8deg);
      opacity:0;
    }

    .eightball-answer-window::after{
      content:"";
      position:absolute;
      left:26%;
      top:24%;
      z-index:2;
      width:7px;
      height:7px;
      border-radius:50%;
      pointer-events:none;
      background:rgba(132,169,255,.62);
      box-shadow:34px 14px 0 -2px rgba(132,169,255,.4),52px 55px 0 -1px rgba(132,169,255,.3);
      opacity:0;
    }

    .magic-eight-ball.shaking .eightball-answer-window::before{
      opacity:1;
      animation:eightWindowSweep .72s ease-in-out infinite;
    }

    .magic-eight-ball.answered .eightball-answer-window::before{
      animation:eightWindowReveal 1.05s ease .08s 1 both;
    }

    .magic-eight-ball.answered .eightball-answer-window::after{
      animation:eightBubbles 3.5s ease-in-out 1s infinite;
    }

    @keyframes eightWindowSweep{
      from{transform:translateX(-125%) rotate(-8deg)}
      to{transform:translateX(125%) rotate(-8deg)}
    }

    @keyframes eightWindowReveal{
      0%{opacity:0;transform:translateX(-125%) rotate(-8deg)}
      35%{opacity:.75}
      100%{opacity:0;transform:translateX(125%) rotate(-8deg)}
    }

    @keyframes eightBubbles{
      0%,100%{opacity:.12;transform:translateY(7px) scale(.86)}
      50%{opacity:.55;transform:translateY(-8px) scale(1.08)}
    }

    .eightball-triangle{
      position:relative;
      width:82%;
      height:72%;
      padding:0;
    }

    .eightball-answer{
      position:absolute;
      left:50%;
      top:63%;
      width:69%;
      max-width:none;
      transform:translate(-50%,calc(-50% + 8px));
      font-size:clamp(.68rem,2.55vw,.98rem);
      line-height:1.03;
      letter-spacing:.012em;
      text-wrap:balance;
      overflow-wrap:normal;
      word-break:normal;
      z-index:3;
    }

    .eightball-answer.answer-medium{
      width:72%;
      font-size:clamp(.62rem,2.3vw,.89rem);
    }

    .eightball-answer.answer-long{
      width:75%;
      font-size:clamp(.56rem,2.02vw,.79rem);
      line-height:1.01;
      letter-spacing:0;
    }

    .magic-eight-ball.answered .eightball-answer{
      transform:translate(-50%,-50%);
      animation:eightAnswerSettle .7s cubic-bezier(.2,.8,.2,1) .2s both;
    }

    @keyframes eightAnswerSettle{
      0%{opacity:0;filter:blur(5px);transform:translate(-50%,calc(-50% + 13px)) scale(.92)}
      70%{opacity:1;filter:blur(0);transform:translate(-50%,calc(-50% - 2px)) scale(1.02)}
      100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
    }

    @media(max-width:500px){
      .eightball-stage{min-height:350px;padding-top:6px}
      .magic-eight-ball{width:min(84vw,330px)}
      .eightball-answer-window{width:61%;border-width:8px}
      .eightball-triangle{width:84%;height:73%}
      .eightball-answer{width:70%;font-size:clamp(.66rem,3.2vw,.9rem)}
      .eightball-answer.answer-medium{width:73%;font-size:clamp(.59rem,2.85vw,.82rem)}
      .eightball-answer.answer-long{width:76%;font-size:clamp(.53rem,2.52vw,.73rem)}
      .eightball-question-box{padding:14px}
    }

    @media(prefers-reduced-motion:reduce){
      .magic-eight-ball.shaking{animation:none !important}
      .eightball-stage::before,
      .eightball-triangle,
      .eightball-shadow{animation:none !important}
    }

  

    /* Version 10.7: keep answer text clear of the triangular clipping mask */
    .eightball-answer-window{
      isolation:isolate;
      background:
        radial-gradient(circle at 48% 43%,rgba(28,47,102,.34),transparent 31%),
        radial-gradient(circle at center,#10131c 0 45%,#03050a 68%,#000 100%);
    }

    .eightball-triangle{
      overflow:visible;
      clip-path:none !important;
      background:none !important;
      filter:none !important;
      isolation:isolate;
    }

    .eightball-triangle::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      clip-path:polygon(50% 0,100% 100%,0 100%);
      background:
        radial-gradient(ellipse at 50% 72%,rgba(111,157,255,.96) 0 8%,rgba(46,89,226,.96) 37%,#182c9b 67%,#081148 100%);
      box-shadow:inset 0 -20px 32px rgba(1,6,48,.38);
      filter:drop-shadow(0 0 13px rgba(75,115,255,.72));
      animation:eightLiquidBody 5.2s ease-in-out infinite;
    }

    .eightball-triangle::after{
      content:"";
      position:absolute;
      left:9%;
      right:9%;
      top:42%;
      height:28%;
      z-index:1;
      pointer-events:none;
      clip-path:polygon(41% 0,59% 0,88% 100%,12% 100%);
      background:
        radial-gradient(ellipse at 50% 5%,rgba(255,255,255,.48),rgba(126,172,255,.20) 28%,transparent 68%),
        linear-gradient(180deg,rgba(157,195,255,.24),rgba(28,67,190,.08));
      filter:blur(2px);
      opacity:.7;
      animation:eightLiquidSurface 3.8s ease-in-out infinite;
    }

    @keyframes eightLiquidBody{
      0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 12px rgba(75,115,255,.64)) saturate(1)}
      45%{transform:translateY(-2px) scaleX(1.012) scaleY(.992);filter:drop-shadow(0 0 18px rgba(75,115,255,.82)) saturate(1.12)}
      70%{transform:translateY(1px) scaleX(.994) scaleY(1.008)}
    }

    @keyframes eightLiquidSurface{
      0%,100%{transform:translateY(4px) scaleX(.92);opacity:.38}
      50%{transform:translateY(-5px) scaleX(1.08);opacity:.82}
    }

    .eightball-answer{
      top:64% !important;
      width:78% !important;
      max-width:78% !important;
      padding:0 2px;
      font-size:clamp(.64rem,2.45vw,.94rem) !important;
      line-height:1.04 !important;
      letter-spacing:0 !important;
      overflow:visible !important;
      white-space:normal;
      text-wrap:balance;
      word-break:keep-all;
      hyphens:none;
      z-index:4;
    }

    .eightball-answer.answer-medium{
      width:82% !important;
      max-width:82% !important;
      font-size:clamp(.58rem,2.14vw,.84rem) !important;
    }

    .eightball-answer.answer-long{
      width:86% !important;
      max-width:86% !important;
      font-size:clamp(.51rem,1.9vw,.74rem) !important;
      line-height:1.02 !important;
    }

    .magic-eight-ball.answered .eightball-answer{
      animation:eightAnswerLiquidFloat 4.1s ease-in-out .7s infinite,
                eightAnswerSettle .72s cubic-bezier(.2,.8,.2,1) .18s both;
    }

    @keyframes eightAnswerLiquidFloat{
      0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-.15deg)}
      50%{transform:translate(-50%,-50%) translateY(-2px) rotate(.15deg)}
    }

    .eightball-answer-window::after{
      width:8px;
      height:8px;
      background:rgba(137,177,255,.72);
      box-shadow:
        31px 12px 0 -2px rgba(137,177,255,.46),
        48px 51px 0 -1px rgba(137,177,255,.34),
        -13px 48px 0 -2px rgba(137,177,255,.30),
        17px 72px 0 -3px rgba(137,177,255,.28);
      filter:blur(.2px);
    }

    @keyframes eightBubbles{
      0%{opacity:.08;transform:translate(1px,12px) scale(.75)}
      35%{opacity:.52;transform:translate(-2px,-2px) scale(1)}
      70%{opacity:.3;transform:translate(2px,-13px) scale(1.08)}
      100%{opacity:.06;transform:translate(-1px,-22px) scale(.84)}
    }

    @media(max-width:500px){
      .eightball-answer{top:64% !important;width:80% !important;max-width:80% !important;font-size:clamp(.61rem,2.9vw,.84rem) !important}
      .eightball-answer.answer-medium{width:84% !important;max-width:84% !important;font-size:clamp(.54rem,2.55vw,.75rem) !important}
      .eightball-answer.answer-long{width:88% !important;max-width:88% !important;font-size:clamp(.47rem,2.22vw,.66rem) !important}
    }

    @media(prefers-reduced-motion:reduce){
      .eightball-triangle::before,
      .eightball-triangle::after,
      .magic-eight-ball.answered .eightball-answer{
        animation:none !important;
      }
    }



    /* Version 10.8: keep every response safely inside the triangular window */
    .eightball-answer{
      left:50% !important;
      top:66% !important;
      width:54% !important;
      max-width:54% !important;
      padding:0 !important;
      font-size:clamp(.58rem,2.05vw,.82rem) !important;
      line-height:1.02 !important;
      letter-spacing:-.012em !important;
      white-space:normal !important;
      overflow-wrap:normal !important;
      word-break:normal !important;
      text-wrap:balance;
      z-index:5 !important;
    }

    .eightball-answer.answer-medium{
      width:56% !important;
      max-width:56% !important;
      font-size:clamp(.53rem,1.88vw,.74rem) !important;
    }

    .eightball-answer.answer-long{
      width:58% !important;
      max-width:58% !important;
      font-size:clamp(.47rem,1.68vw,.66rem) !important;
      line-height:1 !important;
    }

    /* A contained liquid lens that never interferes with answer readability */
    .eightball-triangle::after{
      left:18% !important;
      right:18% !important;
      top:43% !important;
      height:23% !important;
      opacity:.58 !important;
      filter:blur(2.6px) !important;
    }

    .magic-eight-ball.answered .eightball-answer{
      animation:eightAnswerLiquidSettle 2.9s ease-in-out .18s infinite !important;
    }

    @keyframes eightAnswerLiquidSettle{
      0%{opacity:0;filter:blur(4px);transform:translate(-50%,calc(-50% + 10px)) scale(.94)}
      18%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
      52%{opacity:1;filter:blur(0);transform:translate(-50%,calc(-50% - 1.5px)) scale(1.006)}
      100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
    }

    @media(max-width:500px){
      .eightball-answer{
        top:66% !important;
        width:55% !important;
        max-width:55% !important;
        font-size:clamp(.55rem,2.55vw,.73rem) !important;
      }
      .eightball-answer.answer-medium{
        width:57% !important;
        max-width:57% !important;
        font-size:clamp(.49rem,2.28vw,.66rem) !important;
      }
      .eightball-answer.answer-long{
        width:59% !important;
        max-width:59% !important;
        font-size:clamp(.43rem,2.02vw,.58rem) !important;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .magic-eight-ball.answered .eightball-answer{
        animation:none !important;
        opacity:1 !important;
        filter:none !important;
        transform:translate(-50%,-50%) !important;
      }
    }



    /* Version 11.0: refined mobile hierarchy and reading navigation */
    :root{--radius:22px;--radius-soft:16px;--radius-button:999px}
    .mode-ribbon{margin-top:10px}
    .reading-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:10px 0 8px}
    .reading-tabs .tab{width:100%;min-height:48px;padding:9px 8px;white-space:normal;line-height:1.15;text-align:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
    .reading-tabs .tab:hover{transform:translateY(-1px)}
    .reading-tabs .tab.active{box-shadow:0 10px 24px rgba(245,215,123,.20),0 0 0 1px rgba(255,216,106,.18)}
    .reading-tabs .tab.active::before{content:"";position:absolute;left:20%;right:20%;bottom:4px;height:2px;border-radius:999px;background:#fff4c8;box-shadow:0 0 10px rgba(255,244,200,.85);animation:activeUnderline .3s ease both}
    @keyframes activeUnderline{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
    .library-ribbon{margin-top:2px}.utility-tabs{padding-bottom:10px}
    .utility-tabs .tab[data-panel="academyPanel"]{background:linear-gradient(145deg,rgba(137,74,176,.68),rgba(88,39,124,.76));border-color:rgba(248,229,163,.34);box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.10)}
    .utility-tabs .tab[data-panel="academyPanel"]::before{content:"Featured";position:absolute;top:4px;right:7px;color:#f8e5a3;font-size:.52rem;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
    .insight-card.compact-insight{padding:14px 15px;margin-bottom:12px}.compact-insight h3{margin-bottom:6px;font-size:1.2rem}.compact-insight .insight-summary{margin:0;color:#f5ecfb;line-height:1.5}.compact-insight details{margin-top:8px}.compact-insight summary{cursor:pointer;color:#f8e5a3;font-weight:900;font-size:.84rem;list-style:none}.compact-insight summary::-webkit-details-marker{display:none}.compact-insight summary::after{content:" +"}.compact-insight details[open] summary::after{content:" −"}.compact-insight .insight-more{margin:8px 0 0;color:#eadff2;line-height:1.55}
    .panel{border-radius:22px}.insight-card,.favorite-stats,.academy-hero,.question-box,.reminder-box{border-radius:18px}.reading-card,.spread-card,.history-item,.search-card{border-radius:18px}
    .deck-stage{padding-top:6px}.deck-scroll-cue{display:flex;align-items:center;justify-content:center;gap:7px;margin:-4px 0 8px;color:#d9c8e4;font-size:.8rem;font-weight:800;opacity:.9}.deck-scroll-cue span{display:inline-block;animation:cueBounce 1.5s ease-in-out infinite}@keyframes cueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
    @media(max-width:700px){.reading-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.reading-tabs .tab{font-size:.82rem;min-height:50px;padding:8px 5px}}
    @media(prefers-reduced-motion:reduce){.reading-tabs .tab.active::before,.deck-scroll-cue span{animation:none!important}}

  

    /* Version 11.2: polished single-card starting deck */
    .single-deck-stage{padding:10px 0 18px;min-height:0}
    .single-deck{
      width:min(76vw,320px);
      aspect-ratio:4/5.15;
      min-height:0;
      padding:28px 24px 22px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      overflow:visible;
      border:3px solid #ffd86a;
      border-radius:24px;
      background:
        radial-gradient(circle at 50% 35%,rgba(255,216,106,.16),transparent 26%),
        radial-gradient(circle at 50% 50%,rgba(139,77,179,.22),transparent 58%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 9px,transparent 9px 18px),
        linear-gradient(155deg,#2a073d,#4b1763 52%,#260536);
      box-shadow:0 24px 54px rgba(0,0,0,.46),0 0 34px rgba(255,216,106,.11),inset 0 0 0 1px rgba(255,255,255,.08);
      font-size:inherit;
      animation:singleDeckFloat 4.2s ease-in-out infinite;
    }
    .single-deck::before,.single-deck::after{
      border-radius:21px;
      background:linear-gradient(145deg,#321044,#22032f);
      border:1px solid rgba(245,215,123,.42);
      box-shadow:0 10px 24px rgba(0,0,0,.22);
    }
    .single-deck::before{inset:10px -11px -10px 11px}
    .single-deck::after{inset:20px -19px -20px 19px;opacity:.55}
    .deck-emblem{
      position:relative;
      width:126px;
      height:126px;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1px solid rgba(248,229,163,.28);
      background:radial-gradient(circle,rgba(255,216,106,.13),rgba(92,38,121,.16) 55%,transparent 57%);
      box-shadow:0 0 30px rgba(245,215,123,.10),inset 0 0 22px rgba(255,255,255,.04);
    }
    .deck-orbit{position:absolute;inset:15px;border:1px solid rgba(248,229,163,.35);border-radius:50%;animation:deckOrbit 9s linear infinite}
    .deck-orbit::before,.deck-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#f8e5a3;box-shadow:0 0 12px rgba(248,229,163,.85)}
    .deck-orbit::before{top:8px;left:12px}.deck-orbit::after{right:5px;bottom:20px}
    .deck-moon{font-family:Georgia,serif;font-size:3.8rem;line-height:1;color:#f8e5a3;text-shadow:0 0 22px rgba(248,229,163,.45);transform:rotate(-12deg)}
    .deck-star{position:absolute;color:#ffd86a;text-shadow:0 0 12px rgba(255,216,106,.7);animation:deckTwinkle 2.4s ease-in-out infinite}
    .deck-star-one{top:19px;right:22px;font-size:1rem}.deck-star-two{left:23px;bottom:22px;font-size:.8rem;animation-delay:.8s}
    .deck-copy{display:grid;gap:7px;text-align:center;margin-top:6px}
    .deck-eyebrow{color:#d7c2e5;font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
    .deck-copy strong{font-family:Georgia,"Times New Roman",serif;color:#fff4cf;font-size:clamp(1.55rem,6vw,2rem);line-height:1.1;text-shadow:0 3px 12px rgba(0,0,0,.35)}
    .deck-instruction{max-width:230px;color:#e8dced;font-size:.88rem;line-height:1.45;font-weight:650}
    .deck-tap{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(248,229,163,.11);border:1px solid rgba(248,229,163,.25);color:#f8e5a3;font-size:.78rem;font-weight:900}
    .deck-tap b{font-size:1rem;animation:cueBounce 1.5s ease-in-out infinite}
    .deck-corner{position:absolute;color:rgba(248,229,163,.62);font-size:.8rem}.deck-corner-top{top:15px;left:17px}.deck-corner-bottom{right:17px;bottom:15px;transform:rotate(180deg)}
    .single-deck:hover{transform:translateY(-3px);box-shadow:0 28px 62px rgba(0,0,0,.5),0 0 38px rgba(255,216,106,.16)}
    .single-deck:focus-visible{outline:3px solid rgba(255,216,106,.7);outline-offset:5px}
    @keyframes singleDeckFloat{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-5px) rotate(.25deg)}}
    @keyframes deckOrbit{to{transform:rotate(360deg)}}
    @keyframes deckTwinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
    @media(max-width:430px){
      .single-deck{width:min(78vw,300px);padding:24px 20px 19px;border-radius:22px}
      .deck-emblem{width:112px;height:112px}.deck-moon{font-size:3.35rem}
      .deck-copy strong{font-size:1.7rem}.deck-instruction{font-size:.82rem;max-width:215px}
    }
    @media(prefers-reduced-motion:reduce){.single-deck,.deck-orbit,.deck-star,.deck-tap b{animation:none!important}}

    /* Version 11.5: magical golden glitter for shuffle states and the main deck */
    .single-deck,
    .ritual-box{
      position:relative;
      isolation:isolate;
      overflow:hidden;
    }

    .single-deck > *:not(.gold-glitter),
    .ritual-box > *:not(.gold-glitter){
      position:relative;
      z-index:1;
    }

    .gold-glitter{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      overflow:hidden;
    }

    .gold-glitter span{
      position:absolute;
      display:block;
      opacity:0;
      filter:drop-shadow(0 0 8px rgba(255,216,106,.55));
      animation:goldGlitterFloat 5.4s ease-in-out infinite;
    }

    .gold-glitter .glitter-dot{
      width:6px;
      height:6px;
      border-radius:50%;
      background:radial-gradient(circle,#fffbe7 0%,#ffe18a 45%,rgba(255,216,106,0) 74%);
      box-shadow:0 0 12px rgba(255,216,106,.65),0 0 24px rgba(255,216,106,.22);
    }

    .gold-glitter .glitter-star{
      width:auto;
      height:auto;
      color:#ffe494;
      font-size:.95rem;
      line-height:1;
      text-shadow:0 0 10px rgba(255,216,106,.8),0 0 24px rgba(255,216,106,.35);
      animation-name:goldGlitterTwinkle;
      animation-duration:4.3s;
    }

    .gold-glitter .g1{left:10%;top:78%;animation-delay:.1s}
    .gold-glitter .g2{left:22%;top:22%;animation-delay:1s}
    .gold-glitter .g3{left:34%;top:66%;animation-delay:2s}
    .gold-glitter .g4{left:48%;top:14%;animation-delay:.6s}
    .gold-glitter .g5{left:61%;top:72%;animation-delay:1.4s}
    .gold-glitter .g6{left:76%;top:30%;animation-delay:2.3s}
    .gold-glitter .g7{left:85%;top:62%;animation-delay:3.1s}
    .gold-glitter .g8{left:70%;top:10%;animation-delay:1.8s}
    .gold-glitter .g9{left:13%;top:48%;animation-delay:2.7s}
    .gold-glitter .g10{left:90%;top:84%;animation-delay:.9s}

    .single-deck .gold-glitter{
      background:radial-gradient(circle at 50% 52%,rgba(255,216,106,.10),transparent 30%);
    }

    .ritual-box .gold-glitter{
      background:radial-gradient(circle at 50% 45%,rgba(255,216,106,.12),transparent 34%);
    }

    @keyframes goldGlitterFloat{
      0%{opacity:0;transform:translate3d(0,12px,0) scale(.55)}
      20%{opacity:.95}
      60%{opacity:.7}
      100%{opacity:0;transform:translate3d(8px,-26px,0) scale(1.18)}
    }

    @keyframes goldGlitterTwinkle{
      0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.6) rotate(0deg)}
      25%{opacity:1}
      50%{opacity:.92;transform:translate3d(3px,-8px,0) scale(1.08) rotate(12deg)}
      100%{opacity:0;transform:translate3d(-2px,-20px,0) scale(.7) rotate(-6deg)}
    }

    @media(prefers-reduced-motion:reduce){
      .gold-glitter span{animation:none !important;opacity:.38}
    }

    /* Version 11.9: organic magical gold dust flowing through shuffle scenes */
    .shuffle-particles{
      position:absolute;
      inset:-10%;
      z-index:6;
      pointer-events:none;
      overflow:hidden;
      opacity:0;
      transition:opacity .18s ease;
      mix-blend-mode:screen;
    }

    .shuffle-particles span{
      position:absolute;
      left:50%;
      top:50%;
      width:var(--size,4px);
      height:var(--size,4px);
      border-radius:50%;
      opacity:0;
      background:radial-gradient(circle,#fffef6 0 24%,#ffe8a7 44%,#ffc84e 68%,rgba(255,200,78,0) 82%);
      box-shadow:0 0 7px rgba(255,232,154,.9),0 0 16px rgba(255,200,78,.4);
      filter:blur(var(--blur,0px));
      transform:translate(calc(-50% + var(--x0,0px)),calc(-50% + var(--y0,0px))) scale(.25);
      animation:shuffleDust var(--dur,1.7s) cubic-bezier(.23,.56,.37,1) infinite;
      animation-delay:var(--delay,0s);
      animation-play-state:paused;
    }

    .shuffle-particles span.star{
      width:10px;
      height:10px;
      border-radius:0;
      background:none;
      box-shadow:none;
      filter:none;
      color:#ffe49b;
      text-shadow:0 0 8px rgba(255,216,106,.95),0 0 18px rgba(255,216,106,.32);
      font-size:.8rem;
      line-height:1;
    }

    .shuffle-particles span.star::before{
      content:"✦";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
    }

    .magic-intro:not(.hidden) .magic-cards .shuffle-particles,
    .reading-overlay.visible .ritual-box .shuffle-particles,
    .single-deck.shuffle .shuffle-particles{
      opacity:1;
    }

    .magic-intro:not(.hidden) .magic-cards .shuffle-particles span,
    .reading-overlay.visible .ritual-box .shuffle-particles span,
    .single-deck.shuffle .shuffle-particles span{
      animation-play-state:running;
    }

    .magic-cards .shuffle-particles{inset:-18% -22%;}
    .ritual-box .shuffle-particles{inset:2% 6% 16%;}
    .single-deck .shuffle-particles{inset:-8%;}

    @keyframes shuffleDust{
      0%{
        opacity:0;
        transform:translate(calc(-50% + var(--x0,0px)),calc(-50% + var(--y0,0px))) scale(.22);
      }
      12%{opacity:var(--peak,.78);}
      46%{
        opacity:calc(var(--peak,.78) + .08);
        transform:translate(calc(-50% + var(--x1,0px)),calc(-50% + var(--y1,0px))) scale(1);
      }
      78%{opacity:calc(var(--peak,.78) * .75);}
      100%{
        opacity:0;
        transform:translate(calc(-50% + var(--x2,0px)),calc(-50% + var(--y2,0px))) scale(.42);
      }
    }

    @media(prefers-reduced-motion:reduce){
      .shuffle-particles{display:none!important}
    }

    /* Version 11.4: restore strong contrast for Deeper Look headings on dark reading summaries */
    .spread-summary .deep-reading-title,
    .celtic-summary .deep-reading-title,
    #yesNoExplanation .deep-reading-title,
    #dailyCard .deep-reading-title {
      color:#FFF1B8 !important;
      text-shadow:0 2px 10px rgba(0,0,0,.52) !important;
      font-weight:900;
    }

    .spread-summary .deep-reading-title::after,
    .celtic-summary .deep-reading-title::after,
    #yesNoExplanation .deep-reading-title::after,
    #dailyCard .deep-reading-title::after {
      height:3px;
      background:linear-gradient(90deg,transparent,#D4AF37 18%,#FFF1B8 50%,#D4AF37 82%,transparent);
      box-shadow:0 0 10px rgba(245,215,123,.28);
    }


    /* Version 12.0: guided reading flow, tactile polish, clarifiers and Academy tools */
    .intention-panel{
      margin:4px 0 14px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.065);
      border:1px solid rgba(245,215,123,.18);
    }
    .intention-panel strong{display:block;color:#f8e5a3;margin-bottom:9px;text-align:center}
    .intention-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
    .intention-option{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#eee1f7;border-radius:999px;padding:9px 7px;font-weight:850;font-size:.8rem;cursor:pointer}
    .intention-option.active{background:#f8e5a3;color:#321044;border-color:#d4af37;box-shadow:0 7px 17px rgba(0,0,0,.2)}
    .intention-note{margin:9px 0 0;text-align:center;color:#cdbbd9;font-size:.76rem}

    .intention-next-target{
      animation:intentionNextAttention 1.65s ease;
    }

    @keyframes intentionNextAttention{
      0%,100%{
        box-shadow:inherit;
        filter:none;
      }
      35%,70%{
        box-shadow:0 0 0 4px rgba(248,229,163,.22),0 0 28px rgba(248,229,163,.22),0 16px 34px rgba(0,0,0,.28);
        filter:brightness(1.06);
      }
    }

    .reading-path{display:flex;align-items:center;justify-content:center;gap:0;margin:2px 0 16px;padding:10px 8px;border-radius:15px;background:rgba(20,0,31,.28);border:1px solid rgba(255,255,255,.08)}
    .reading-step{display:flex;align-items:center;color:#a995b7;font-size:.7rem;font-weight:850;white-space:nowrap}
    .reading-step::after{content:"";width:24px;height:1px;margin:0 5px;background:rgba(248,229,163,.2)}
    .reading-step:last-child::after{display:none}
    .reading-step.active,.reading-step.done{color:#f8e5a3}
    .reading-step.active{filter:drop-shadow(0 0 7px rgba(248,229,163,.35))}

    .deck:active,.reading-card:active,.spread-card:active,.dashboard-card:active{transform:translateY(1px) scale(.992)!important}
    .panel.active{animation:panelArrival .38s cubic-bezier(.2,.72,.25,1)}
    @keyframes panelArrival{from{opacity:0;transform:translateY(12px) scale(.995)}to{opacity:1;transform:none}}

    .result-shell.visible .reading-card,.spread-summary,.celtic-summary,.yesno-result.visible .reading-card{position:relative}
    .result-complete::before{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 50% 35%,rgba(255,216,106,.26),transparent 58%);opacity:0;animation:readingHalo 1.35s ease-out forwards;pointer-events:none}
    @keyframes readingHalo{0%{opacity:0;transform:scale(.92)}36%{opacity:1}100%{opacity:0;transform:scale(1.08)}}

    .clarifier-box{margin-top:14px;padding:14px;border-radius:16px;background:linear-gradient(145deg,#f7f0fc,#fff);border:1px solid #dcc7ec;color:#2f163d;text-align:left}
    .clarifier-box h4{margin:0 0 9px;color:#531d72}
    .clarifier-result{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:start;margin-top:11px}
    .clarifier-result img{width:82px;aspect-ratio:2/3;object-fit:contain;border-radius:8px;background:#eee4ca}
    .clarifier-result img.reversed{transform:rotate(180deg)}
    .clarifier-result p{margin:4px 0;line-height:1.5}

    .journal-prompt{margin:0 0 10px;padding:10px 12px;border-radius:11px;background:#fff8d8;border:1px solid #e2c85e;color:#543f0b;line-height:1.45;font-weight:750}


    .academy-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 22px}
    .academy-feature{padding:15px;border-radius:17px;background:rgba(255,255,255,.075);border:1px solid rgba(248,229,163,.18)}
    .academy-feature h3{margin:0 0 7px;color:#f8e5a3}.academy-feature p{margin:0;color:#e1d4e9;line-height:1.5;font-size:.88rem}
    .learning-paths{display:grid;gap:8px;margin-top:11px}
    .learning-path{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 11px;border-radius:12px;background:rgba(20,0,31,.35);border:1px solid rgba(255,255,255,.09);color:#fff;font-weight:800;cursor:pointer;text-align:left}
    .symbol-card{padding:13px;border-radius:14px;background:linear-gradient(145deg,#fff8d8,#fff);color:#3b2247;border:1px solid #e2c85e}
    .symbol-card strong{display:block;color:#5d4610;font-size:1.05rem;margin-bottom:5px}

    .comparison-tool{margin:0 0 22px;padding:16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
    .comparison-tool h3{margin:0 0 10px;color:#f8e5a3}
    .comparison-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
    .comparison-controls select{min-width:0;border-radius:12px;padding:10px;background:#240335;color:#fff;border:1px solid rgba(248,229,163,.28)}
    .comparison-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
    .compare-card{padding:11px;border-radius:14px;background:#fff;color:#2f163d;text-align:center}
    .compare-card img{width:min(100%,135px);aspect-ratio:2/3;object-fit:contain;border-radius:8px;background:#eee4ca}
    .compare-card h4{margin:7px 0 5px}.compare-card p{text-align:left;font-size:.8rem;line-height:1.42}


    @media(max-width:620px){
      .intention-options{grid-template-columns:repeat(2,minmax(0,1fr))}
      .reading-step{font-size:.62rem}.reading-step::after{width:12px;margin:0 3px}
      .academy-feature-grid{grid-template-columns:1fr}
      .comparison-controls{grid-template-columns:1fr 1fr}.comparison-controls button{grid-column:1/-1}
      .clarifier-result{grid-template-columns:70px 1fr}.clarifier-result img{width:70px}
    }
    @media(prefers-reduced-motion:reduce){.result-complete::before{animation:none!important}.panel.active{animation:none!important}}

  


    /* Version 13.5: expanded animated planetary wheel */
    .clarifier-box,
    .spread-summary .clarifier-box,
    .celtic-summary .clarifier-box{
      background:linear-gradient(145deg,#f7f0fc,#ffffff) !important;
      color:#2f163d !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .clarifier-box h4{
      color:#531d72 !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .clarifier-box .clarifier-result,
    .clarifier-box .clarifier-result div,
    .clarifier-box .clarifier-result p,
    .clarifier-box .clarifier-result strong,
    .spread-summary .clarifier-box p,
    .spread-summary .clarifier-box strong,
    .celtic-summary .clarifier-box p,
    .celtic-summary .clarifier-box strong{
      color:#32163e !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .clarifier-box .clarifier-result > div > strong{
      display:block;
      color:#4d1769 !important;
      font-size:1.02rem;
      line-height:1.35;
    }

    .birth-planetary-profile{
      margin-top:18px;
      padding:17px;
      border-radius:20px;
      background:
        radial-gradient(circle at 92% 0%,rgba(248,229,163,.11),transparent 34%),
        rgba(15,0,26,.27);
      border:1px solid rgba(248,229,163,.19);
    }

    .birth-planetary-heading{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-end;
      margin-bottom:13px;
    }

    .birth-planetary-heading h4{
      margin:0;
      color:#fff2c6;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.35rem;
    }

    .birth-planetary-heading p{
      max-width:520px;
      margin:0;
      color:#ddcfe7;
      font-size:.86rem;
      line-height:1.5;
      text-align:right;
    }

    .birth-planet-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:9px;
    }

    .birth-planet-card{
      min-width:0;
      padding:13px 10px;
      border-radius:15px;
      background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.065));
      border:1px solid rgba(255,255,255,.12);
      text-align:center;
      box-shadow:0 9px 20px rgba(0,0,0,.13);
    }

    .birth-planet-card.possible{
      border-style:dashed;
      border-color:rgba(248,229,163,.38);
    }

    .birth-planet-glyph{
      display:block;
      margin-bottom:5px;
      color:#f8e5a3;
      font-size:1.65rem;
      line-height:1;
    }

    .birth-planet-role{
      display:block;
      color:#d7c5e3;
      font-size:.66rem;
      font-weight:850;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .birth-planet-card h5{
      margin:5px 0 4px;
      color:#fff;
      font-size:.95rem;
      line-height:1.25;
    }

    .birth-planet-card p{
      margin:0;
      color:#d9cce3;
      font-size:.71rem;
      line-height:1.4;
    }

    .birth-planet-degree{
      display:block;
      margin:4px 0 0;
      color:#f8e5a3;
      font-size:.68rem;
      font-weight:800;
    }

    .favorite-birth-placements{
      grid-template-columns:repeat(auto-fit,minmax(82px,1fr)) !important;
    }

    @media(max-width:820px){
      .birth-planet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }

    @media(max-width:560px){
      .birth-planetary-heading{display:block}
      .birth-planetary-heading p{margin-top:7px;text-align:left}
      .birth-planet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    /* Version 13.3: saved birth chart favorites */
    .favorite-birth-chart{
      margin:14px 0 12px;
      padding:15px;
      border-radius:16px;
      background:
        radial-gradient(circle at 88% 0%,rgba(248,229,163,.15),transparent 38%),
        linear-gradient(145deg,#f8f1fc,#efe3f7);
      border:1px solid #d8c0e8;
      color:#32163e;
    }

    .favorite-birth-chart-title{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:11px;
      color:#51187a;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.05rem;
      font-weight:900;
    }

    .favorite-birth-placements{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
    }

    .favorite-birth-placement{
      min-width:0;
      padding:11px 8px;
      border-radius:13px;
      background:#fff;
      border:1px solid #dfceef;
      text-align:center;
      box-shadow:0 6px 14px rgba(66,20,91,.07);
    }

    .favorite-birth-placement .glyph{
      display:block;
      margin-bottom:3px;
      color:#7b4fa0;
      font-size:1.45rem;
      line-height:1;
    }

    .favorite-birth-placement strong{
      display:block;
      color:#371049;
      font-size:.85rem;
      line-height:1.25;
    }

    .favorite-birth-placement span:last-child{
      display:block;
      margin-top:3px;
      color:#765c80;
      font-size:.7rem;
      line-height:1.25;
    }

    .favorite-birth-balance{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:10px;
    }

    .favorite-birth-balance span{
      padding:6px 9px;
      border-radius:999px;
      background:#efe2f7;
      border:1px solid #d8c0e8;
      color:#55206f;
      font-size:.72rem;
      font-weight:850;
    }

    #favoriteBirthChart:disabled{
      opacity:.58;
      cursor:not-allowed;
      transform:none;
    }

    @media(max-width:430px){
      .favorite-birth-placements{gap:6px}
      .favorite-birth-placement{padding:9px 5px}
      .favorite-birth-placement strong{font-size:.76rem}
      .favorite-birth-placement span:last-child{font-size:.64rem}
    }

    /* Version 13.1: automatic Big Three birth chart reading */
    .reading-tabs .birth-chart-tab{
      grid-column:1 / -1;
      min-height:58px;
      background:
        radial-gradient(circle at 18% 20%,rgba(248,229,163,.13),transparent 30%),
        linear-gradient(135deg,rgba(65,29,95,.96),rgba(88,48,128,.92));
      border-color:rgba(248,229,163,.30);
      color:#fff4cf;
      letter-spacing:.02em;
      box-shadow:0 11px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
    }

    .reading-tabs .birth-chart-tab::after{
      content:"Big Three • Planets";
      display:block;
      margin-top:4px;
      color:#d9c7e6;
      font-size:.67rem;
      font-weight:750;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .reading-tabs .birth-chart-tab.active::after{color:#4b205e}

    .birth-chart-panel{
      overflow:hidden;
      background:
        radial-gradient(circle at 92% 2%,rgba(248,229,163,.12),transparent 30%),
        radial-gradient(circle at 4% 92%,rgba(121,69,165,.18),transparent 34%),
        rgba(255,255,255,.075);
    }

    .birth-chart-heading{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom:18px;
    }

    .birth-chart-kicker{
      display:inline-block;
      margin-bottom:5px;
      color:#f8e5a3;
      font-size:.76rem;
      font-weight:900;
      letter-spacing:.09em;
      text-transform:uppercase;
    }

    .birth-chart-badge{
      flex:0 0 auto;
      padding:8px 11px;
      border-radius:999px;
      border:1px solid rgba(248,229,163,.25);
      background:rgba(248,229,163,.09);
      color:#f8e5a3;
      font-size:.73rem;
      font-weight:850;
      white-space:nowrap;
    }

    .birth-chart-layout{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
      gap:16px;
      align-items:stretch;
    }

    .birth-chart-form{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      padding:17px;
      border-radius:20px;
      background:rgba(15,0,26,.30);
      border:1px solid rgba(255,255,255,.11);
    }

    .birth-field{display:grid;gap:7px;align-content:start}
    .birth-field-wide{grid-column:1 / -1}

    .birth-field label{
      color:#fff3cd;
      font-weight:900;
      font-size:.9rem;
    }

    .birth-field label span{
      color:#cdbad9;
      font-size:.68rem;
      font-weight:750;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .birth-field input,
    .birth-field select{
      width:100%;
      min-height:48px;
      border-radius:13px;
      border:1px solid rgba(248,229,163,.28);
      background:rgba(18,0,31,.82);
      color:#fff;
      padding:11px 12px;
      font:inherit;
      outline:none;
    }

    .birth-field select option{background:#240038;color:#fff}

    .birth-field input:focus,
    .birth-field select:focus{
      border-color:rgba(248,229,163,.72);
      box-shadow:0 0 0 3px rgba(248,229,163,.10);
    }

    .birth-field small{color:#bfaecb;line-height:1.4}

    .birth-chart-note{
      padding:12px 13px;
      border-radius:13px;
      background:rgba(248,229,163,.08);
      border:1px solid rgba(248,229,163,.18);
      color:#eadff1;
    }

    .birth-chart-note strong{display:block;color:#f8e5a3;margin-bottom:4px}
    .birth-chart-note p{margin:0;line-height:1.5;font-size:.84rem}
    .birth-chart-generate{width:100%;min-height:50px}

    .birth-chart-preview{
      display:grid;
      place-items:center;
      align-content:center;
      gap:12px;
      min-height:320px;
      padding:18px;
      border-radius:20px;
      background:
        radial-gradient(circle,rgba(248,229,163,.08),transparent 52%),
        linear-gradient(145deg,rgba(63,24,88,.72),rgba(26,4,38,.78));
      border:1px solid rgba(248,229,163,.18);
      text-align:center;
      color:#d9c9e5;
    }

    .birth-chart-preview p{margin:0;max-width:220px;line-height:1.5}

    .birth-chart-mini-wheel{
      position:relative;
      width:190px;
      aspect-ratio:1;
      border-radius:50%;
      border:2px solid rgba(248,229,163,.64);
      background:
        repeating-conic-gradient(from -15deg,rgba(248,229,163,.16) 0 1deg,transparent 1deg 30deg),
        radial-gradient(circle,rgba(116,59,151,.28) 0 35%,transparent 36%),
        rgba(22,0,34,.55);
      box-shadow:0 0 32px rgba(248,229,163,.10),inset 0 0 26px rgba(0,0,0,.28);
      animation:birthPreviewFloat 5.2s ease-in-out infinite;
    }

    .birth-chart-mini-wheel::before,
    .birth-chart-mini-wheel::after{
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(248,229,163,.24);
      inset:15%;
    }
    .birth-chart-mini-wheel::after{inset:34%}

    .birth-chart-mini-wheel span{
      position:absolute;
      left:50%;top:50%;
      color:#f8e5a3;
      font-size:1rem;
      transform-origin:0 0;
    }

    .birth-chart-mini-wheel span:nth-child(1){transform:rotate(-90deg) translate(76px) rotate(90deg)}
    .birth-chart-mini-wheel span:nth-child(2){transform:rotate(-60deg) translate(76px) rotate(60deg)}
    .birth-chart-mini-wheel span:nth-child(3){transform:rotate(-30deg) translate(76px) rotate(30deg)}
    .birth-chart-mini-wheel span:nth-child(4){transform:rotate(0deg) translate(76px) rotate(0deg)}
    .birth-chart-mini-wheel span:nth-child(5){transform:rotate(30deg) translate(76px) rotate(-30deg)}
    .birth-chart-mini-wheel span:nth-child(6){transform:rotate(60deg) translate(76px) rotate(-60deg)}
    .birth-chart-mini-wheel span:nth-child(7){transform:rotate(90deg) translate(76px) rotate(-90deg)}
    .birth-chart-mini-wheel span:nth-child(8){transform:rotate(120deg) translate(76px) rotate(-120deg)}
    .birth-chart-mini-wheel span:nth-child(9){transform:rotate(150deg) translate(76px) rotate(-150deg)}
    .birth-chart-mini-wheel span:nth-child(10){transform:rotate(180deg) translate(76px) rotate(-180deg)}
    .birth-chart-mini-wheel span:nth-child(11){transform:rotate(210deg) translate(76px) rotate(-210deg)}
    .birth-chart-mini-wheel span:nth-child(12){transform:rotate(240deg) translate(76px) rotate(-240deg)}

    .birth-chart-mini-wheel strong{
      position:absolute;inset:0;display:grid;place-items:center;
      color:#fff0b5;font-size:2.1rem;text-shadow:0 0 18px rgba(248,229,163,.55);
    }

    @keyframes birthPreviewFloat{
      0%,100%{transform:translateY(0) rotate(-1deg)}
      50%{transform:translateY(-5px) rotate(1deg)}
    }

    .birth-chart-result{
      display:none;
      margin-top:18px;
      padding:18px;
      border-radius:22px;
      background:
        radial-gradient(circle at 12% 0%,rgba(248,229,163,.13),transparent 30%),
        linear-gradient(150deg,rgba(18,0,31,.72),rgba(70,25,96,.52));
      border:1px solid rgba(248,229,163,.24);
      box-shadow:0 18px 40px rgba(0,0,0,.22);
    }

    .birth-chart-result.visible{display:block;animation:fadeUp .38s ease}

    .birth-result-hero{
      display:grid;
      grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);
      gap:20px;
      align-items:center;
    }

    .birth-chart-wheel-shell{display:grid;place-items:center;padding:8px}

    .birth-chart-wheel{
      position:relative;
      width:min(72vw,330px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        repeating-conic-gradient(from -15deg,rgba(248,229,163,.20) 0 1deg,transparent 1deg 30deg),
        radial-gradient(circle at center,rgba(105,52,142,.30) 0 34%,transparent 35%),
        conic-gradient(from -15deg,rgba(244,178,210,.14),rgba(164,209,246,.14),rgba(192,232,178,.14),rgba(250,225,139,.14),rgba(244,178,210,.14));
      border:2px solid rgba(248,229,163,.66);
      box-shadow:0 0 38px rgba(248,229,163,.10),inset 0 0 30px rgba(0,0,0,.32),0 18px 32px rgba(0,0,0,.24);
      overflow:hidden;
    }

    .birth-chart-wheel.casting{animation:birthWheelCast 8.9s cubic-bezier(.18,.72,.22,1)}

    @keyframes birthWheelCast{
      0%{transform:scale(.78) rotate(-35deg);opacity:.18;filter:blur(7px)}
      22%{transform:scale(.93) rotate(300deg);opacity:.62;filter:blur(3px)}
      52%{transform:scale(1.04) rotate(720deg);opacity:1;filter:blur(.8px)}
      78%{transform:scale(.98) rotate(990deg);opacity:1;filter:blur(0)}
      100%{transform:scale(1) rotate(1440deg);opacity:1;filter:blur(0)}
    }

    .birth-wheel-ring{position:absolute;border-radius:50%;border:1px solid rgba(248,229,163,.34);pointer-events:none}
    .birth-wheel-ring.outer{inset:9%}
    .birth-wheel-ring.inner{inset:29%}

    .birth-zodiac-label{
      position:absolute;
      transform:translate(-50%,-50%);
      color:#fff0b5;
      font-size:1.18rem;
      text-shadow:0 0 10px rgba(248,229,163,.52);
      z-index:2;
    }

    .birth-placement-markers{position:absolute;inset:0}

    .birth-placement-marker{
      position:absolute;
      transform:translate(-50%,-50%);
      display:grid;
      place-items:center;
      min-width:31px;
      min-height:31px;
      padding:2px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.72);
      color:#210031;
      font-weight:950;
      font-size:.9rem;
      z-index:4;
      box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 20px rgba(248,229,163,.28);
      animation:birthMarkerPulse 2.8s ease-in-out infinite;
    }

    .birth-placement-marker.planet-small{
      min-width:22px;
      min-height:22px;
      border-width:1.4px;
      font-size:.72rem;
      box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 10px rgba(248,229,163,.16);
    }

    .birth-placement-marker.sun{background:#ffd96d}
    .birth-placement-marker.moon{background:#d9d6ff;animation-delay:.45s}
    .birth-placement-marker.rising{background:#d5f0e4;animation-delay:.9s}
    .birth-placement-marker.mercury{background:#ffe3a7;animation-delay:1.2s}
    .birth-placement-marker.venus{background:#ffcfe7;animation-delay:1.45s}
    .birth-placement-marker.mars{background:#ffbfab;animation-delay:1.7s}
    .birth-placement-marker.jupiter{background:#c9dbff;animation-delay:1.95s}
    .birth-placement-marker.saturn{background:#dfd6c5;animation-delay:2.2s}

    .birth-chart-legend{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:7px;
      margin-top:12px;
      max-width:330px;
    }

    .birth-chart-legend .legend-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 9px;
      border-radius:999px;
      border:1px solid rgba(248,229,163,.20);
      background:rgba(248,229,163,.08);
      color:#f7efcf;
      font-size:.72rem;
      font-weight:850;
      line-height:1;
    }

    .birth-chart-legend .legend-chip i{
      display:inline-grid;
      place-items:center;
      width:22px;
      height:22px;
      border-radius:50%;
      background:rgba(255,255,255,.16);
      color:#fff7d7;
      font-style:normal;
      font-size:.74rem;
    }

    .birth-aspect-key{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px 10px;
      margin-top:12px;
      width:min(100%,360px);
    }
    .birth-aspect-key .aspect-key-chip{
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:12px;
      border:1px solid rgba(248,229,163,.18);
      background:rgba(17,2,29,.24);
      color:#f4ebf7;
      font-size:.73rem;
      font-weight:800;
      line-height:1;
    }
    .birth-aspect-key .aspect-key-chip i{
      font-style:normal;
      color:#fff4cf;
      font-size:.76rem;
      font-weight:900;
      width:34px;
      text-align:center;
      flex:0 0 auto;
      letter-spacing:.02em;
    }
    .birth-aspect-key .aspect-key-chip b{
      display:block;
      width:30px;
      height:0;
      border-top:3px solid currentColor;
      flex:0 0 auto;
      filter:drop-shadow(0 0 4px currentColor);
    }
    .birth-aspect-key .aspect-key-chip.conjunction{color:#f8e5a3}
    .birth-aspect-key .aspect-key-chip.opposition{color:#ef6f86}
    .birth-aspect-key .aspect-key-chip.trine{color:#6ec1ff}
    .birth-aspect-key .aspect-key-chip.square{color:#e15b72}
    .birth-aspect-key .aspect-key-chip.sextile{color:#9edcff}
    .birth-aspect-key .aspect-key-chip.quincunx{color:#8fd18b}
    .birth-aspect-key .aspect-key-chip.square b{border-top-style:dashed}
    .birth-aspect-key .aspect-key-chip.sextile b{border-top-style:dashed;border-top-width:2px}
    .birth-aspect-key .aspect-key-chip.quincunx b{border-top-style:dotted;border-top-width:4px}

    .birth-download-cue{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:9px 10px;
      align-items:center;
      width:min(100%,360px);
      margin-top:14px;
      padding:12px;
      border-radius:15px;
      border:1px solid rgba(248,229,163,.34);
      background:
        radial-gradient(circle at 0 0,rgba(248,229,163,.14),transparent 42%),
        linear-gradient(145deg,rgba(69,26,91,.92),rgba(31,5,45,.92));
      box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 18px rgba(248,229,163,.06);
      color:#f8efff;
      text-align:left;
    }

    .birth-download-cue-icon{
      display:grid;
      place-items:center;
      width:38px;
      height:38px;
      border-radius:50%;
      background:#f8e5a3;
      color:#351044;
      font-size:1.2rem;
      font-weight:950;
      box-shadow:0 6px 14px rgba(0,0,0,.2);
      animation:birthDownloadBounce 1.8s ease-in-out infinite;
    }

    .birth-download-cue-copy strong{
      display:block;
      color:#fff1b8;
      font-size:.86rem;
      line-height:1.3;
    }

    .birth-download-cue-copy span{
      display:block;
      margin-top:3px;
      color:#d9cbe3;
      font-size:.72rem;
      line-height:1.4;
    }

    .birth-download-jump{
      grid-column:1 / -1;
      width:100%;
      min-height:40px;
    }

    .birth-download-button.download-attention{
      animation:birthDownloadAttention 1.1s ease 2;
    }

    @keyframes birthDownloadBounce{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(4px)}
    }

    @keyframes birthDownloadAttention{
      0%,100%{transform:scale(1);box-shadow:0 8px 18px rgba(0,0,0,.2)}
      50%{transform:scale(1.045);box-shadow:0 0 0 5px rgba(248,229,163,.20),0 12px 28px rgba(0,0,0,.28)}
    }

    @keyframes birthMarkerPulse{
      0%,100%{transform:translate(-50%,-50%) scale(.95)}
      50%{transform:translate(-50%,-50%) scale(1.06)}
    }

    .birth-wheel-center{
      position:absolute;
      left:50%;top:50%;
      transform:translate(-50%,-50%);
      width:14%;aspect-ratio:1;
      display:grid;place-items:center;
      border-radius:50%;
      background:radial-gradient(circle,rgba(93,45,120,.76),rgba(38,5,55,.62) 72%);
      border:1px solid rgba(248,229,163,.40);
      box-shadow:0 0 14px rgba(0,0,0,.18),inset 0 0 10px rgba(248,229,163,.05);
      text-align:center;
      z-index:2;
      pointer-events:none;
    }

    .birth-wheel-center span{color:#f8e5a3;font-size:1.05rem;line-height:1;text-shadow:0 0 8px rgba(248,229,163,.35)}
    .birth-wheel-center strong,
    .birth-wheel-center small{display:none}

    .birth-result-copy h3{
      margin:2px 0 8px;
      color:#fff1b8;
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(1.6rem,5vw,2.35rem);
    }

    .birth-result-copy p{margin:0;color:#e6d9ed;line-height:1.65}

    .birth-balance-pills{
      display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;
    }

    .birth-balance-pill{
      padding:7px 10px;border-radius:999px;
      background:rgba(248,229,163,.10);
      border:1px solid rgba(248,229,163,.20);
      color:#fff1bc;font-size:.76rem;font-weight:850;
    }

    .big-three-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:18px;
    }

    .big-three-card{
      position:relative;
      overflow:hidden;
      padding:15px;
      border-radius:17px;
      background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.12);
      min-height:190px;
    }

    .big-three-card::after{
      content:"";position:absolute;right:-22px;bottom:-34px;width:100px;height:100px;border-radius:50%;
      background:radial-gradient(circle,rgba(248,229,163,.12),transparent 68%);
    }

    .big-three-role{color:#d5c3e0;font-size:.69rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
    .big-three-glyph{display:block;margin:8px 0 3px;color:#f8e5a3;font-size:2.3rem;line-height:1}
    .big-three-card h4{margin:0;color:#fff4cf;font-family:Georgia,"Times New Roman",serif;font-size:1.35rem}
    .big-three-meta{margin:5px 0 8px;color:#d5c5df;font-size:.76rem;font-weight:800}
    .big-three-card p{margin:0;color:#eee4f5;line-height:1.55;font-size:.86rem}
    .big-three-card.unknown{border-style:dashed;opacity:.78}

    .birth-reading-body{
      display:grid;
      gap:11px;
      margin-top:16px;
    }

    .birth-reading-section{
      padding:15px;
      border-radius:15px;
      background:#fff;
      color:#2f163d;
      border:1px solid #dfceef;
      box-shadow:0 8px 20px rgba(0,0,0,.10);
    }

    .birth-reading-section h4{margin:0 0 7px;color:#551b70;font-size:1.05rem}
    .birth-reading-section p{margin:0;line-height:1.68}
    .birth-reading-section p + p{margin-top:10px}
    .birth-reading-section ul{margin:9px 0 0;padding-left:20px;line-height:1.62}
    .birth-reading-section li + li{margin-top:5px}
    .birth-reading-section .birth-keywords{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
    .birth-reading-section .birth-keyword{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f2e8f8;border:1px solid #deccec;color:#5b2c70;font-size:.74rem;font-weight:850}

    .birth-casting-status{
      display:none;
      margin:0 0 16px;
      padding:16px;
      border-radius:17px;
      text-align:center;
      background:linear-gradient(145deg,rgba(248,229,163,.12),rgba(109,47,138,.15));
      border:1px solid rgba(248,229,163,.25);
      color:#f6ecfb;
    }
    .birth-chart-result.revealing .birth-casting-status{display:grid;gap:6px;animation:fadeUp .32s ease}
    .birth-casting-symbol{font-size:2rem;color:#f8e5a3;text-shadow:0 0 18px rgba(248,229,163,.55);animation:birthCastingPulse 1.4s ease-in-out infinite}
    .birth-casting-status strong{color:#fff1b8;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}
    .birth-casting-status p{margin:0;color:#ddcfe8;line-height:1.5;font-size:.9rem}
    .birth-casting-progress{height:6px;margin-top:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.10)}
    .birth-casting-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8d54b2,#f8e5a3);transition:width 1.05s ease}
    @keyframes birthCastingPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.12);opacity:1}}

    .birth-chart-result.revealing .birth-result-copy,
    .birth-chart-result.revealing .big-three-grid,
    .birth-chart-result.revealing .birth-reading-body,
    .birth-chart-result.revealing #birthChartTools,
    .birth-chart-result.revealing .birth-download-cue,
    .birth-chart-result.revealing .birth-chart-actions{
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      pointer-events:none;
    }
    .birth-chart-result.revealed .birth-result-copy,
    .birth-chart-result.revealed .big-three-grid,
    .birth-chart-result.revealed .birth-reading-body,
    .birth-chart-result.revealed #birthChartTools,
    .birth-chart-result.revealed .birth-download-cue,
    .birth-chart-result.revealed .birth-chart-actions{
      animation:birthContentUnveil .72s cubic-bezier(.2,.75,.25,1) both;
    }
    .birth-chart-result.revealed .big-three-grid{animation-delay:.08s}
    .birth-chart-result.revealed .birth-reading-body{animation-delay:.16s}
    .birth-chart-result.revealed .birth-download-cue{animation-delay:.20s}
    .birth-chart-result.revealed #birthChartTools,
    .birth-chart-result.revealed .birth-chart-actions{animation-delay:.24s}
    @keyframes birthContentUnveil{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}

    .birth-chart-wheel.casting .birth-zodiac-label{animation:birthZodiacAwaken 1.15s ease 1.1s both}
    @keyframes birthZodiacAwaken{from{opacity:.05;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
    .birth-chart-wheel.casting .birth-placement-marker{opacity:0;animation:birthMarkerReveal .9s cubic-bezier(.2,.82,.22,1) both}
    .birth-chart-wheel.casting .birth-placement-marker.sun{animation-delay:2.2s}
    .birth-chart-wheel.casting .birth-placement-marker.moon{animation-delay:3.1s}
    .birth-chart-wheel.casting .birth-placement-marker.mercury{animation-delay:4.0s}
    .birth-chart-wheel.casting .birth-placement-marker.venus{animation-delay:4.8s}
    .birth-chart-wheel.casting .birth-placement-marker.mars{animation-delay:5.6s}
    .birth-chart-wheel.casting .birth-placement-marker.jupiter{animation-delay:6.4s}
    .birth-chart-wheel.casting .birth-placement-marker.saturn{animation-delay:7.0s}
    .birth-chart-wheel.casting .birth-placement-marker.uranus{animation-delay:7.35s}
    .birth-chart-wheel.casting .birth-placement-marker.neptune{animation-delay:7.65s}
    .birth-chart-wheel.casting .birth-placement-marker.pluto{animation-delay:7.95s}
    .birth-chart-wheel.casting .birth-placement-marker.rising{animation-delay:8.25s}
    @keyframes birthMarkerReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:blur(5px)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.18);filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

    .birth-chart-actions{
      display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:15px;
    }

    @media(max-width:760px){
      .birth-chart-heading{display:block}
      .birth-chart-badge{display:inline-block;margin-top:4px}
      .birth-chart-layout{grid-template-columns:1fr}
      .birth-chart-preview{min-height:250px}
      .birth-result-hero{grid-template-columns:1fr;text-align:center}
      .birth-balance-pills{justify-content:center}
    }

    @media(max-width:520px){
      .birth-chart-form{grid-template-columns:1fr;padding:14px}
      .birth-field-wide{grid-column:auto}
      .big-three-grid{grid-template-columns:1fr}
      .big-three-card{min-height:0}
      .birth-chart-result{padding:14px}
      .birth-chart-wheel{width:min(82vw,310px)}
      .birth-download-cue{width:100%;padding:11px}
      .birth-download-cue-copy strong{font-size:.82rem}
      .birth-download-cue-copy span{font-size:.69rem}
      .birth-zodiac-label{font-size:1.03rem}
      .birth-placement-marker{min-width:34px;min-height:34px;font-size:.8rem}
      .birth-placement-marker.planet-small{min-width:24px;min-height:24px;font-size:.74rem}
    }

    @media(prefers-reduced-motion:reduce){
      .birth-chart-mini-wheel,
      .birth-chart-wheel.casting,
      .birth-placement-marker{animation:none !important}
    }

  

    /* Version 13.1: automatic birthplace lookup and Big Three calculation */
    .reading-tabs .birth-chart-tab::after{content:"Date • Time • Birthplace"}
    .birth-chart-layout{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}
    .birth-chart-form{position:relative}
    .birth-time-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
    .birth-time-unknown{
      display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 12px;
      border-radius:13px;border:1px solid rgba(248,229,163,.22);
      background:rgba(255,255,255,.055);color:#eadff1;font-size:.78rem;font-weight:850;cursor:pointer;
    }
    .birth-time-unknown input{width:17px;height:17px;min-height:0;margin:0;accent-color:#f5d77b}
    .birth-place-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
    .birth-place-search .btn{min-width:116px;padding-inline:15px}
    .birth-location-status{
      display:none;padding:10px 12px;border-radius:12px;background:rgba(213,240,228,.10);
      border:1px solid rgba(213,240,228,.25);color:#e9fff5;line-height:1.45;font-size:.82rem;
    }
    .birth-location-status.visible{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;animation:fadeUp .22s ease}
    .birth-location-status strong{display:block;color:#d9ffe9;margin-bottom:2px}
    .birth-location-clear{border:0;background:transparent;color:#f8e5a3;font-weight:900;cursor:pointer;padding:2px 4px}
    .birth-place-results{
      display:none;grid-column:1/-1;gap:7px;padding:8px;border-radius:14px;
      background:rgba(10,0,18,.78);border:1px solid rgba(248,229,163,.18);max-height:232px;overflow:auto;
    }
    .birth-place-results.visible{display:grid}
    .birth-place-result{
      width:100%;display:grid;gap:2px;text-align:left;padding:10px 11px;border-radius:11px;
      border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
    }
    .birth-place-result:hover,.birth-place-result:focus-visible{background:rgba(248,229,163,.12);border-color:rgba(248,229,163,.34);outline:none}
    .birth-place-result strong{font-size:.9rem}.birth-place-result span{color:#cbb8d8;font-size:.75rem;line-height:1.35}
    .birth-location-loading{display:none;color:#f8e5a3;font-size:.8rem;font-weight:850}
    .birth-location-loading.visible{display:block}
    .birth-calculation-note{
      grid-column:1/-1;padding:12px 13px;border-radius:13px;background:rgba(248,229,163,.08);
      border:1px solid rgba(248,229,163,.18);color:#eadff1;line-height:1.5;font-size:.84rem;
    }
    .birth-calculation-note strong{display:block;color:#f8e5a3;margin-bottom:4px}
    .birth-accuracy-line{
      margin-top:12px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.065);
      border:1px solid rgba(255,255,255,.10);color:#e9ddf2;font-size:.82rem;line-height:1.5;
    }
    .big-three-card .big-three-degree{display:block;margin-top:5px;color:#9f7bb5;font-size:.72rem;font-weight:850}
    .big-three-card.possible{border-style:dashed;background:linear-gradient(145deg,#fffaf0,#f4ecff)}
    .birth-place-error{color:#ffd1d8;font-size:.82rem;line-height:1.45}
    @media(max-width:700px){
      .birth-chart-layout{grid-template-columns:1fr}
      .birth-chart-form{grid-template-columns:1fr}
      .birth-field-wide{grid-column:auto}
      .birth-place-search{grid-template-columns:1fr}
      .birth-place-search .btn{width:100%}
      .birth-time-row{grid-template-columns:1fr}
      .birth-time-unknown{justify-content:center}
      .birth-calculation-note{grid-column:auto}
    }

  

    /* Version 13.6: complete personal numerology reading */
    .reading-tabs .numerology-tab{
      grid-column:1 / -1;
      min-height:58px;
      background:
        radial-gradient(circle at 78% 18%,rgba(248,229,163,.15),transparent 30%),
        linear-gradient(135deg,rgba(43,21,82,.97),rgba(98,51,132,.92));
      border-color:rgba(248,229,163,.32);
      color:#fff4cf;
      letter-spacing:.02em;
      box-shadow:0 11px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
    }

    .reading-tabs .numerology-tab::after{
      content:"Name • Birth Date • Core Numbers";
      display:block;
      margin-top:4px;
      color:#d9c7e6;
      font-size:.67rem;
      font-weight:750;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .reading-tabs .numerology-tab.active::after{color:#4b205e}

    .numerology-panel{
      overflow:hidden;
      background:
        radial-gradient(circle at 8% 5%,rgba(248,229,163,.11),transparent 28%),
        radial-gradient(circle at 94% 92%,rgba(136,79,181,.18),transparent 36%),
        rgba(255,255,255,.075);
    }

    .numerology-heading{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom:18px;
    }

    .numerology-kicker{
      display:inline-block;
      margin-bottom:5px;
      color:#f8e5a3;
      font-size:.76rem;
      font-weight:900;
      letter-spacing:.09em;
      text-transform:uppercase;
    }

    .numerology-badge{
      flex:0 0 auto;
      padding:8px 11px;
      border-radius:999px;
      border:1px solid rgba(248,229,163,.25);
      background:rgba(248,229,163,.09);
      color:#f8e5a3;
      font-size:.73rem;
      font-weight:850;
      white-space:nowrap;
    }

    .numerology-layout{
      display:grid;
      grid-template-columns:minmax(0,1.12fr) minmax(230px,.88fr);
      gap:16px;
      align-items:stretch;
    }

    .numerology-form{
      display:grid;
      gap:13px;
      padding:18px;
      border-radius:20px;
      background:rgba(15,0,26,.30);
      border:1px solid rgba(255,255,255,.11);
    }

    .numerology-field{display:grid;gap:7px}
    .numerology-field label{color:#fff3cd;font-weight:900;font-size:.9rem}
    .numerology-field label span{color:#cdbad9;font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
    .numerology-field input{
      width:100%;min-height:50px;border-radius:13px;
      border:1px solid rgba(248,229,163,.28);
      background:rgba(18,0,31,.82);color:#fff;padding:12px 13px;font:inherit;outline:none;
    }
    .numerology-field input:focus{border-color:rgba(248,229,163,.72);box-shadow:0 0 0 3px rgba(248,229,163,.10)}
    .numerology-field small{color:#bfaecb;line-height:1.45}

    .numerology-note{
      padding:12px 13px;border-radius:13px;
      background:rgba(248,229,163,.08);
      border:1px solid rgba(248,229,163,.18);
      color:#eadff1;line-height:1.5;font-size:.84rem;
    }
    .numerology-note strong{display:block;color:#f8e5a3;margin-bottom:4px}
    .numerology-generate{width:100%;min-height:50px}

    .numerology-preview{
      display:grid;place-items:center;align-content:center;gap:13px;min-height:330px;padding:18px;
      border-radius:20px;
      background:radial-gradient(circle,rgba(248,229,163,.09),transparent 52%),linear-gradient(145deg,rgba(63,24,88,.74),rgba(26,4,38,.80));
      border:1px solid rgba(248,229,163,.18);text-align:center;color:#d9c9e5;
    }
    .numerology-preview p{margin:0;max-width:230px;line-height:1.5}

    .numerology-mini-wheel,
    .numerology-mandala{
      position:relative;aspect-ratio:1;border-radius:50%;
      border:2px solid rgba(248,229,163,.66);
      background:
        repeating-conic-gradient(from -20deg,rgba(248,229,163,.20) 0 1deg,transparent 1deg 40deg),
        radial-gradient(circle,rgba(105,52,142,.30) 0 34%,transparent 35%),
        conic-gradient(from -20deg,rgba(244,178,210,.13),rgba(164,209,246,.13),rgba(192,232,178,.13),rgba(250,225,139,.13),rgba(244,178,210,.13));
      box-shadow:0 0 38px rgba(248,229,163,.10),inset 0 0 30px rgba(0,0,0,.32),0 18px 32px rgba(0,0,0,.24);
      overflow:hidden;
    }

    .numerology-mini-wheel{width:194px;animation:numerologyPreviewFloat 5.4s ease-in-out infinite}
    .numerology-mini-wheel::before,.numerology-mini-wheel::after,
    .numerology-mandala::before,.numerology-mandala::after{
      content:"";position:absolute;border-radius:50%;border:1px solid rgba(248,229,163,.28);inset:15%;pointer-events:none;
    }
    .numerology-mini-wheel::after,.numerology-mandala::after{inset:34%}
    .numerology-mini-wheel strong{position:absolute;inset:0;display:grid;place-items:center;color:#fff0b5;font-size:2.5rem;text-shadow:0 0 18px rgba(248,229,163,.55)}
    .numerology-mini-wheel span{position:absolute;left:50%;top:50%;color:#f8e5a3;font-weight:900;transform-origin:0 0}
    .numerology-mini-wheel span:nth-child(1){transform:rotate(-90deg) translate(77px) rotate(90deg)}
    .numerology-mini-wheel span:nth-child(2){transform:rotate(-50deg) translate(77px) rotate(50deg)}
    .numerology-mini-wheel span:nth-child(3){transform:rotate(-10deg) translate(77px) rotate(10deg)}
    .numerology-mini-wheel span:nth-child(4){transform:rotate(30deg) translate(77px) rotate(-30deg)}
    .numerology-mini-wheel span:nth-child(5){transform:rotate(70deg) translate(77px) rotate(-70deg)}
    .numerology-mini-wheel span:nth-child(6){transform:rotate(110deg) translate(77px) rotate(-110deg)}
    .numerology-mini-wheel span:nth-child(7){transform:rotate(150deg) translate(77px) rotate(-150deg)}
    .numerology-mini-wheel span:nth-child(8){transform:rotate(190deg) translate(77px) rotate(-190deg)}
    .numerology-mini-wheel span:nth-child(9){transform:rotate(230deg) translate(77px) rotate(-230deg)}
    @keyframes numerologyPreviewFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}

    .numerology-result{
      display:none;margin-top:18px;padding:18px;border-radius:22px;
      background:radial-gradient(circle at 12% 0%,rgba(248,229,163,.13),transparent 30%),linear-gradient(150deg,rgba(18,0,31,.72),rgba(70,25,96,.52));
      border:1px solid rgba(248,229,163,.24);box-shadow:0 18px 40px rgba(0,0,0,.22);
    }
    .numerology-result.visible{display:block;animation:fadeUp .38s ease}

    .numerology-casting-status{
      display:none;margin:0 0 16px;padding:16px;border-radius:17px;text-align:center;
      background:linear-gradient(145deg,rgba(248,229,163,.12),rgba(109,47,138,.15));
      border:1px solid rgba(248,229,163,.25);color:#f6ecfb;
    }
    .numerology-result.revealing .numerology-casting-status{display:grid;gap:6px;animation:fadeUp .32s ease}
    .numerology-casting-symbol{font-size:2rem;color:#f8e5a3;text-shadow:0 0 18px rgba(248,229,163,.55);animation:numerologyPulse 1.35s ease-in-out infinite}
    .numerology-casting-status strong{color:#fff1b8;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}
    .numerology-casting-status p{margin:0;color:#ddcfe8;line-height:1.5;font-size:.9rem}
    .numerology-casting-progress{height:6px;margin-top:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.10)}
    .numerology-casting-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8d54b2,#f8e5a3);transition:width .85s ease}
    @keyframes numerologyPulse{0%,100%{transform:scale(.9);opacity:.58}50%{transform:scale(1.12);opacity:1}}

    .numerology-result-hero{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);gap:20px;align-items:center}
    .numerology-mandala-shell{display:grid;place-items:center;padding:8px}
    .numerology-mandala{width:min(72vw,330px)}
    .numerology-mandala.casting{animation:numerologyCast 7.7s cubic-bezier(.18,.72,.22,1)}
    @keyframes numerologyCast{
      0%{transform:scale(.76) rotate(-42deg);opacity:.16;filter:blur(7px)}
      24%{transform:scale(.92) rotate(310deg);opacity:.66;filter:blur(3px)}
      54%{transform:scale(1.04) rotate(720deg);opacity:1;filter:blur(.7px)}
      80%{transform:scale(.98) rotate(1040deg);opacity:1;filter:blur(0)}
      100%{transform:scale(1) rotate(1260deg);opacity:1;filter:blur(0)}
    }

    .numerology-digit-label{position:absolute;transform:translate(-50%,-50%);color:#fff0b5;font-size:1rem;font-weight:950;text-shadow:0 0 10px rgba(248,229,163,.52);z-index:2}
    .numerology-core-center{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:31%;aspect-ratio:1;
      display:grid;place-items:center;align-content:center;border-radius:50%;
      background:radial-gradient(circle,#5d2d78,#260537 72%);border:1px solid rgba(248,229,163,.44);
      box-shadow:0 0 28px rgba(0,0,0,.36),inset 0 0 18px rgba(248,229,163,.08);text-align:center;z-index:5;
    }
    .numerology-core-center span{color:#cbb7d8;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em}
    .numerology-core-center strong{color:#fff4cf;font-family:Georgia,"Times New Roman",serif;font-size:2.25rem;line-height:1}
    .numerology-core-center small{color:#f8e5a3;font-size:.62rem;font-weight:900}

    .numerology-marker{
      position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;
      width:44px;height:44px;padding:3px;border-radius:50%;border:2px solid rgba(255,255,255,.72);
      background:#ead8ff;color:#2b0b3b;font-weight:950;z-index:4;
      box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 20px rgba(248,229,163,.24);
      animation:numerologyMarkerPulse 2.8s ease-in-out infinite;
    }
    .numerology-marker strong{font-size:1rem;line-height:1}
    .numerology-marker small{font-size:.45rem;line-height:1;text-transform:uppercase;margin-top:2px}
    .numerology-marker.expression{background:#ffe4a6}.numerology-marker.soul{background:#ffd1e7}.numerology-marker.personality{background:#cde8ff}
    .numerology-marker.birthday{background:#d7f0d9}.numerology-marker.maturity{background:#e2d8c8}.numerology-marker.year{background:#f0d4ff}
    @keyframes numerologyMarkerPulse{0%,100%{transform:translate(-50%,-50%) scale(.95)}50%{transform:translate(-50%,-50%) scale(1.06)}}
    .numerology-mandala.casting .numerology-digit-label{animation:birthZodiacAwaken 1.1s ease .9s both}
    .numerology-mandala.casting .numerology-marker{opacity:0;animation:numerologyMarkerReveal .75s cubic-bezier(.2,.82,.22,1) both}
    .numerology-mandala.casting .numerology-marker.expression{animation-delay:2.3s}
    .numerology-mandala.casting .numerology-marker.soul{animation-delay:3.1s}
    .numerology-mandala.casting .numerology-marker.personality{animation-delay:3.9s}
    .numerology-mandala.casting .numerology-marker.birthday{animation-delay:4.7s}
    .numerology-mandala.casting .numerology-marker.maturity{animation-delay:5.5s}
    .numerology-mandala.casting .numerology-marker.year{animation-delay:6.3s}
    @keyframes numerologyMarkerReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:blur(5px)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.16);filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

    .numerology-result-copy h3{margin:2px 0 8px;color:#fff1b8;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.6rem,5vw,2.35rem)}
    .numerology-result-copy p{margin:0;color:#e6d9ed;line-height:1.65}
    .numerology-summary-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
    .numerology-summary-pill{padding:7px 10px;border-radius:999px;background:rgba(248,229,163,.10);border:1px solid rgba(248,229,163,.20);color:#fff1bc;font-size:.76rem;font-weight:850}

    .numerology-number-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
    .numerology-number-card{position:relative;overflow:hidden;padding:15px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);min-height:164px}
    .numerology-number-card::after{content:"";position:absolute;right:-25px;bottom:-38px;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle,rgba(248,229,163,.12),transparent 68%)}
    .numerology-number-role{color:#d5c3e0;font-size:.67rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    .numerology-number-card strong{display:block;margin:7px 0 2px;color:#f8e5a3;font-family:Georgia,"Times New Roman",serif;font-size:2rem;line-height:1}
    .numerology-number-card h4{margin:0 0 7px;color:#fff4cf;font-size:1.05rem}
    .numerology-number-card p{margin:0;color:#eee4f5;line-height:1.5;font-size:.82rem}
    .numerology-master-badge{display:inline-flex;margin-top:8px;padding:5px 8px;border-radius:999px;background:rgba(248,229,163,.12);border:1px solid rgba(248,229,163,.24);color:#fff0b5;font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}

    .numerology-reading-body{display:grid;gap:11px;margin-top:16px}
    .numerology-reading-section{padding:15px;border-radius:15px;background:#fff;color:#2f163d;border:1px solid #dfceef;box-shadow:0 8px 20px rgba(0,0,0,.10)}
    .numerology-reading-section h4{margin:0 0 7px;color:#551b70;font-size:1.05rem}
    .numerology-reading-section p{margin:0;line-height:1.68}.numerology-reading-section p + p{margin-top:10px}
    .numerology-reading-section ul{margin:9px 0 0;padding-left:20px;line-height:1.62}.numerology-reading-section li + li{margin-top:5px}
    .numerology-keywords{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
    .numerology-keyword{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f2e8f8;border:1px solid #deccec;color:#5b2c70;font-size:.74rem;font-weight:850}

    .numerology-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:15px}
    .numerology-result.revealing .numerology-result-copy,
    .numerology-result.revealing .numerology-number-grid,
    .numerology-result.revealing .numerology-reading-body,
    .numerology-result.revealing #numerologyTools,
    .numerology-result.revealing .numerology-actions{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
    .numerology-result.revealed .numerology-result-copy,
    .numerology-result.revealed .numerology-number-grid,
    .numerology-result.revealed .numerology-reading-body,
    .numerology-result.revealed #numerologyTools,
    .numerology-result.revealed .numerology-actions{animation:birthContentUnveil .72s cubic-bezier(.2,.75,.25,1) both}
    .numerology-result.revealed .numerology-number-grid{animation-delay:.08s}
    .numerology-result.revealed .numerology-reading-body{animation-delay:.16s}
    .numerology-result.revealed #numerologyTools,.numerology-result.revealed .numerology-actions{animation-delay:.24s}

    .favorite-numerology{margin:12px 0;padding:14px;border-radius:16px;background:linear-gradient(145deg,#f8f1fc,#fff);border:1px solid #dfceef;color:#2f163d}
    .favorite-numerology-title{margin-bottom:10px;color:#5a1b76;font-weight:950;font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
    .favorite-numerology-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .favorite-numerology-number{padding:10px 7px;border-radius:12px;background:#efe4f7;border:1px solid #dcc8eb;text-align:center}
    .favorite-numerology-number strong{display:block;color:#4f1769;font-size:1.25rem}.favorite-numerology-number span{display:block;margin-top:3px;color:#70517e;font-size:.68rem;font-weight:800}

    @media(max-width:760px){
      .numerology-heading{display:block}.numerology-badge{display:inline-block;margin-top:4px}
      .numerology-layout{grid-template-columns:1fr}.numerology-preview{min-height:250px}
      .numerology-result-hero{grid-template-columns:1fr;text-align:center}.numerology-summary-pills{justify-content:center}
    }
    @media(max-width:520px){
      .numerology-form{padding:14px}.numerology-result{padding:14px}.numerology-mandala{width:min(82vw,310px)}
      .numerology-number-grid{grid-template-columns:1fr}.numerology-number-card{min-height:0}
      .numerology-marker{width:38px;height:38px}.favorite-numerology-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(prefers-reduced-motion:reduce){.numerology-mini-wheel,.numerology-mandala.casting,.numerology-marker,.numerology-casting-symbol{animation:none!important}}

    /* Version 13.18: crystal ball final text cleanup */
    /* Version 13.19: more direct reading guidance and true clarifier interpretations */
    /* Version 13.22: refined three-card reading summary language and layout */
    /* Version 13.21: clean, structured History entries for every saved reading type */
    body.crystal-open{overflow:hidden}

    .crystal-ball-launch{
      grid-column:1 / -1;
      position:relative;
      isolation:isolate;
      overflow:hidden;
      width:100%;
      min-height:78px;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:13px;
      padding:14px 16px;
      border-radius:22px;
      border:1px solid rgba(248,229,163,.38);
      background:
        radial-gradient(circle at 14% 50%,rgba(255,230,163,.16),transparent 23%),
        radial-gradient(circle at 87% 17%,rgba(171,129,255,.22),transparent 34%),
        linear-gradient(135deg,#2b0f40,#5f2c82 56%,#1f0c31);
      color:#fff;
      text-align:left;
      cursor:pointer;
      box-shadow:0 14px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12);
      transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
    }
    .crystal-ball-launch::before{
      content:"";
      position:absolute;
      inset:-80% -30%;
      z-index:-1;
      background:linear-gradient(110deg,transparent 39%,rgba(255,255,255,.14) 48%,transparent 57%);
      transform:translateX(-50%);
      animation:crystalLaunchShimmer 5.8s ease-in-out infinite;
    }
    .crystal-ball-launch:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.30),0 0 28px rgba(194,154,255,.12)}
    .crystal-ball-launch:active{transform:translateY(1px)}
    .crystal-launch-orb{
      width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
      background:radial-gradient(circle at 35% 26%,#fff 0 4%,#d7d2ff 8%,#8d6fd4 35%,#2f0d49 72%);
      border:2px solid rgba(255,255,255,.72);
      box-shadow:0 0 22px rgba(204,174,255,.72),inset -9px -11px 18px rgba(24,4,43,.42);
      font-size:1.45rem;
      animation:crystalLaunchFloat 3.8s ease-in-out infinite;
    }
    .crystal-launch-copy strong{display:block;color:#fff3c8;font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.2}
    .crystal-launch-copy small{display:block;margin-top:4px;color:#e2d4ec;font-size:.73rem;font-weight:750;letter-spacing:.035em}
    .crystal-launch-arrow{color:#f8e5a3;font-size:1.25rem;font-weight:900}
    @keyframes crystalLaunchFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
    @keyframes crystalLaunchShimmer{0%,58%{transform:translateX(-60%)}82%,100%{transform:translateX(60%)}}

    .crystal-journey{
      --orb-glow:rgba(178,181,255,.52);
      position:fixed;
      inset:0;
      z-index:6500;
      display:none;
      overflow:auto;
      overscroll-behavior:contain;
      padding:max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));
      color:#fff;
      background:#080713;
      opacity:0;
      transition:opacity .5s ease;
    }
    .crystal-journey.visible{display:block;opacity:1;animation:crystalJourneyEnter .65s ease both}
    .crystal-backdrop{
      position:fixed;inset:-5%;
      background-position:center;
      background-size:cover;
      filter:blur(18px) saturate(1.02) brightness(.46);
      transform:scale(1.08);
      transition:background-image 1s ease, filter 1s ease, opacity .8s ease;
      opacity:1;
    }
    .crystal-backdrop::after{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(circle at 50% 32%,rgba(255,255,255,.08),transparent 24%),
        radial-gradient(circle at 50% 54%,rgba(182,138,255,.11),transparent 26%),
        linear-gradient(180deg,rgba(6,4,18,.45),rgba(5,3,14,.72) 38%,rgba(5,3,14,.92));
    }
    .crystal-journey.scene-shift .crystal-backdrop{filter:blur(22px) saturate(1.08) brightness(.42)}
    .crystal-journey.scene-shift .crystal-scene-layer{filter:blur(8px) brightness(.84);opacity:.2}
    .crystal-journey.scene-shift .crystal-ambient{opacity:.35}
    .crystal-journey.paused .crystal-mote,
    .crystal-journey.paused .crystal-orb,
    .crystal-journey.paused .crystal-glass,
    .crystal-journey.paused .crystal-backdrop{animation-play-state:paused!important}

    .crystal-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:1;transition:opacity .8s ease}
    .crystal-ambient::before{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(circle at 16% 24%,rgba(255,255,255,.48) 0 1px,transparent 1.8px),
        radial-gradient(circle at 82% 17%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
        radial-gradient(circle at 73% 72%,rgba(255,255,255,.28) 0 1px,transparent 1.8px),
        radial-gradient(circle at 25% 78%,rgba(255,255,255,.24) 0 1px,transparent 1.8px);
      background-size:190px 190px,240px 240px,280px 280px,330px 330px;
      opacity:.55;
    }
    .crystal-mote{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff2bd;box-shadow:0 0 13px rgba(255,238,181,.88);opacity:0;animation:crystalMoteRise 9.5s ease-in-out infinite}
    .crystal-mote:nth-child(1){left:8%;top:83%;animation-delay:.2s}.crystal-mote:nth-child(2){left:18%;top:62%;animation-delay:2.1s}.crystal-mote:nth-child(3){left:31%;top:88%;animation-delay:4.2s}.crystal-mote:nth-child(4){left:46%;top:72%;animation-delay:1.2s}.crystal-mote:nth-child(5){left:61%;top:86%;animation-delay:5.1s}.crystal-mote:nth-child(6){left:74%;top:66%;animation-delay:3.2s}.crystal-mote:nth-child(7){left:88%;top:82%;animation-delay:6.1s}.crystal-mote:nth-child(8){left:54%;top:93%;animation-delay:2.8s}.crystal-mote:nth-child(9){left:38%;top:54%;animation-delay:6.8s}.crystal-mote:nth-child(10){left:94%;top:49%;animation-delay:4.8s}
    @keyframes crystalMoteRise{0%{transform:translateY(24px) scale(.55);opacity:0}20%{opacity:.9}75%{opacity:.45}100%{transform:translateY(-170px) scale(1.15);opacity:0}}

    .crystal-close{
      position:fixed;top:max(13px,env(safe-area-inset-top));right:13px;z-index:6;
      width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
      background:rgba(10,6,24,.52);color:#fff;font-size:1.35rem;font-weight:900;cursor:pointer;backdrop-filter:blur(10px)
    }
    .crystal-journey-shell{position:relative;z-index:2;width:min(780px,100%);min-height:calc(100svh - max(16px,env(safe-area-inset-top)) - max(18px,env(safe-area-inset-bottom)));margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 0 20px}
    .crystal-journey-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(248,229,163,.20);background:rgba(24,12,40,.28);color:#fff0bd;font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 18px rgba(255,234,168,.42);backdrop-filter:blur(8px)}
    .crystal-journey-title{margin:0 0 4px;color:#fff7dc;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.85rem,6vw,2.95rem);font-weight:700;letter-spacing:.02em;text-shadow:0 5px 25px rgba(0,0,0,.45)}
    .crystal-journey-subtitle{margin:6px auto 12px;max-width:460px;color:#efe6f5;line-height:1.35;font-size:.9rem;font-style:normal;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.35);opacity:.95}

    .crystal-stage{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;padding:8px 0 0}
    .crystal-orb-wrap{position:relative;display:grid;place-items:center;padding:12px 8px 98px}
    .crystal-orb-halo{position:absolute;inset:auto 50% 62px auto;translate:50% 0;width:min(96vw,500px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, var(--orb-glow), transparent 60%);filter:blur(26px);opacity:.68;pointer-events:none}
    .crystal-orb{
      position:relative;
      width:min(82vw,420px);
      aspect-ratio:1;
      border-radius:50%;
      overflow:hidden;
      cursor:pointer;
      border:2px solid rgba(255,255,255,.72);
      background:#221437;
      box-shadow:
        0 0 0 10px rgba(255,255,255,.05),
        0 0 78px var(--orb-glow),
        0 34px 64px rgba(0,0,0,.46),
        inset -30px -34px 54px rgba(8,4,22,.60),
        inset 20px 14px 28px rgba(255,255,255,.14);
      animation:crystalOrbFloat 6.2s ease-in-out infinite;
      transition:box-shadow 1s ease, transform .3s ease;
      isolation:isolate;
    }
    .crystal-orb:hover{box-shadow:0 0 0 10px rgba(255,255,255,.07),0 0 95px var(--orb-glow),0 36px 66px rgba(0,0,0,.48),inset -30px -34px 54px rgba(8,4,22,.60),inset 20px 14px 28px rgba(255,255,255,.18)}
    .crystal-orb:focus-visible{outline:3px solid #fff0b5;outline-offset:7px}
    @keyframes crystalOrbFloat{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-9px) rotate(.35deg)}}

    .crystal-scene-layer,
    .crystal-orb-vignette,
    .crystal-glass,
    .crystal-message-card{position:absolute;inset:0;border-radius:50%}
    .crystal-scene-layer{background-position:center;background-size:cover;opacity:0;transition:opacity 1.15s ease,filter 1.15s ease;transform:scale(1.03)}
    .crystal-scene-layer.active{opacity:1}
    .crystal-scene-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,18,.10),rgba(5,4,16,.20) 48%,rgba(6,5,18,.38));}
    .crystal-orb-vignette{background:radial-gradient(circle at 50% 46%,transparent 24%,rgba(8,5,21,.12) 55%,rgba(7,4,18,.48) 78%,rgba(5,3,12,.82) 100%);z-index:2;pointer-events:none}
    .crystal-message-card{
      z-index:3;
      inset:15% 10.5% 16%;
      height:auto;width:auto;
      display:grid;place-items:center;align-content:center;
      padding:18px 20px 16px;
      border-radius:46% 46% 43% 43% / 40% 40% 44% 44%;
      background:linear-gradient(180deg,rgba(15,9,34,.14),rgba(10,6,24,.36) 18%,rgba(8,5,22,.56) 100%);
      border:1px solid rgba(255,244,205,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 32px rgba(0,0,0,.14);
      opacity:0;
      transform:translateY(12px) scale(.95);
      backdrop-filter:blur(6px);
      overflow:visible;
    }
    .crystal-message-card.revealing{animation:crystalMessageIn 1.2s cubic-bezier(.2,.78,.2,1) both}
    .crystal-message-card.hiding{animation:crystalMessageOut .8s ease both}
    .crystal-message-content{position:relative;z-index:1;display:grid;justify-items:center;gap:8px}
    .crystal-message-type{display:block;color:#fff0be;font-size:.66rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.55);opacity:.96}
    .crystal-message-card blockquote{margin:0;max-width:290px;color:#fffcef;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.08rem,4.2vw,1.52rem);line-height:1.42;font-weight:700;text-wrap:balance;text-shadow:0 4px 20px rgba(0,0,0,.70)}
    .crystal-message-hint{display:block;color:#eadcf5;font-size:.63rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.88;text-shadow:0 2px 10px rgba(0,0,0,.58)}
    @keyframes crystalMessageIn{0%{opacity:0;transform:translateY(16px) scale(.92);filter:blur(10px)}70%{opacity:1;transform:translateY(-1px) scale(1.01);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
    @keyframes crystalMessageOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(6px)}}

    .crystal-glass{z-index:4;pointer-events:none;background:
      radial-gradient(circle at 77% 23%,rgba(255,255,255,.10),transparent 9%),
      radial-gradient(circle at 36% 70%,rgba(255,255,255,.05),transparent 18%),
      radial-gradient(circle at 50% 48%,rgba(255,255,255,.035),transparent 58%),
      linear-gradient(136deg,rgba(255,255,255,.08),transparent 28%,rgba(255,255,255,.025) 50%,transparent 66%);
      mix-blend-mode:screen;
      animation:crystalGlassShift 8.5s ease-in-out infinite;
    }
    .crystal-glass::before{content:"";position:absolute;inset:4.6%;border-radius:50%;border:1px solid rgba(255,255,255,.21)}
    .crystal-glass::after{content:"";position:absolute;right:15%;top:18%;width:8%;height:28%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 82%);filter:blur(5px);transform:rotate(13deg)}
    @keyframes crystalGlassShift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.5px)}}

    .crystal-pedestal{
      position:absolute;
      bottom:-10px;
      width:72%;
      height:148px;
      z-index:-1;
      pointer-events:none;
      filter:drop-shadow(0 22px 28px rgba(0,0,0,.38));
    }
    .crystal-pedestal span{
      position:absolute;
      display:block;
      box-sizing:border-box;
    }

    .crystal-pedestal::before{
      content:"";
      position:absolute;
      left:18%;
      right:18%;
      top:38px;
      height:72px;
      border-radius:50%;
      background:
        radial-gradient(circle at 18% 38%,rgba(255,239,166,.90) 0 1.4px,transparent 2.2px),
        radial-gradient(circle at 80% 28%,rgba(214,181,255,.84) 0 1.3px,transparent 2.1px),
        radial-gradient(circle at 67% 72%,rgba(255,233,151,.76) 0 1px,transparent 1.9px),
        radial-gradient(circle at 31% 78%,rgba(193,151,243,.68) 0 1px,transparent 1.8px),
        radial-gradient(ellipse at center,rgba(150,97,204,.16),transparent 67%);
      filter:drop-shadow(0 0 7px rgba(238,210,142,.34));
      opacity:.78;
      animation:crystalPedestalMagic 4.8s ease-in-out infinite;
    }

    .crystal-pedestal::after{
      content:"";
      position:absolute;
      left:20%;
      right:20%;
      bottom:23px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(
        90deg,
        transparent,
        rgba(179,126,222,.22) 18%,
        rgba(255,241,181,.92) 50%,
        rgba(179,126,222,.22) 82%,
        transparent
      );
      box-shadow:0 0 10px rgba(255,228,151,.32);
      opacity:.68;
      animation:crystalPedestalShimmer 3.8s ease-in-out infinite;
    }

    @keyframes crystalPedestalMagic{
      0%,100%{opacity:.52;transform:translateY(1px) scale(.98)}
      50%{opacity:.90;transform:translateY(-1px) scale(1.02)}
    }

    @keyframes crystalPedestalShimmer{
      0%,100%{opacity:.34;transform:scaleX(.86)}
      50%{opacity:.88;transform:scaleX(1)}
    }

    /* Thin crescent cradle: the orb appears seated in metalwork, not on a cushion. */
    .crystal-pedestal-cradle{
      left:10%;
      right:10%;
      top:4px;
      height:34px;
      border-bottom:8px solid #d8a953;
      border-radius:0 0 50% 50% / 0 0 100% 100%;
      background:transparent;
      box-shadow:
        0 6px 9px rgba(0,0,0,.26),
        inset 0 -2px 0 rgba(255,241,182,.58);
    }
    .crystal-pedestal-cradle::before,
    .crystal-pedestal-cradle::after{
      content:"";
      position:absolute;
      bottom:-10px;
      width:18px;
      height:18px;
      border-radius:50%;
      background:
        radial-gradient(circle at 35% 28%,#fff2bd 0 9%,#d8aa54 28%,#87512c 70%,#3e2115 100%);
      border:1px solid rgba(255,230,158,.42);
      box-shadow:0 3px 8px rgba(0,0,0,.28);
    }
    .crystal-pedestal-cradle::before{left:-4px}
    .crystal-pedestal-cradle::after{right:-4px}

    /* Curved filigree arms replace the former straight rounded bars. */
    .crystal-pedestal-arm{
      top:27px;
      width:50px;
      height:65px;
      background:transparent;
      border-bottom:6px solid #b8793f;
      border-radius:0 0 46px 46px;
      box-shadow:
        inset 0 -2px 0 rgba(255,225,151,.42),
        0 4px 8px rgba(0,0,0,.16);
    }
    .crystal-pedestal-arm::after{
      content:"";
      position:absolute;
      bottom:-9px;
      width:11px;
      height:11px;
      border-radius:50%;
      background:#e5bd69;
      box-shadow:0 0 0 3px rgba(88,45,24,.8),0 2px 7px rgba(0,0,0,.28);
    }
    .crystal-pedestal-arm-left{
      left:16%;
      transform:rotate(18deg);
      border-left:7px solid #b8793f;
    }
    .crystal-pedestal-arm-left::after{right:-3px}
    .crystal-pedestal-arm-right{
      right:16%;
      transform:rotate(-18deg);
      border-right:7px solid #b8793f;
    }
    .crystal-pedestal-arm-right::after{left:-3px}

    /* Faceted column with engraved center line. */
    .crystal-pedestal-neck{
      left:50%;
      top:52px;
      width:62px;
      height:52px;
      transform:translateX(-50%);
      clip-path:polygon(18% 0,82% 0,100% 18%,86% 100%,14% 100%,0 18%);
      background:
        linear-gradient(90deg,rgba(75,35,94,.96),rgba(126,77,150,.98) 48%,rgba(59,26,78,.98)),
        linear-gradient(180deg,#ecd184,#8e572e);
      border:1px solid rgba(244,216,140,.44);
      box-shadow:
        inset 0 0 0 3px rgba(40,15,54,.34),
        inset 0 2px 2px rgba(255,235,170,.34),
        0 8px 14px rgba(0,0,0,.22);
    }
    .crystal-pedestal-neck::before{
      content:"";
      position:absolute;
      left:50%;
      top:7px;
      bottom:7px;
      width:1px;
      background:linear-gradient(180deg,transparent,rgba(255,233,167,.75),transparent);
    }

    /* The gem is now a small inset jewel, not a protruding cap. */
    .crystal-pedestal-gem{
      left:50%;
      top:69px;
      width:24px;
      height:24px;
      transform:translateX(-50%) rotate(45deg);
      border-radius:4px;
      background:
        radial-gradient(circle at 30% 25%,#e1c9ff 0 8%,#9e6ec8 28%,#633584 63%,#2c123e 100%);
      border:2px solid #e3bd68;
      box-shadow:
        0 0 0 3px rgba(47,19,63,.76),
        0 0 16px rgba(164,111,211,.34),
        0 0 7px rgba(255,226,154,.16);
    }
    .crystal-pedestal-gem::after{
      content:"";
      position:absolute;
      inset:5px;
      border:1px solid rgba(255,241,208,.38);
    }

    /* Layered Art-Deco plinth with rails and engraved center ornament. */
    .crystal-pedestal-base{
      left:7%;
      right:7%;
      bottom:14px;
      height:58px;
      clip-path:polygon(7% 0,93% 0,100% 24%,100% 76%,93% 100%,7% 100%,0 76%,0 24%);
      background:
        repeating-linear-gradient(90deg,transparent 0 16px,rgba(92,48,24,.13) 16px 17px),
        linear-gradient(180deg,#fff0b0 0,#d8a753 17%,#a86437 54%,#5b2f1d 100%);
      border:1px solid rgba(255,226,149,.38);
      box-shadow:
        0 16px 24px rgba(0,0,0,.30),
        inset 0 3px 2px rgba(255,247,213,.62),
        inset 0 -10px 14px rgba(45,20,12,.38);
    }
    .crystal-pedestal-base::before{
      content:"";
      position:absolute;
      left:5%;
      right:5%;
      top:8px;
      height:8px;
      clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);
      background:linear-gradient(90deg,#794326,#efd17a 18%,#fff1b1 50%,#efd17a 82%,#794326);
      opacity:.95;
      box-shadow:0 3px 5px rgba(0,0,0,.20),0 0 8px rgba(255,228,151,.18);
    }
    .crystal-pedestal-base::after{
      content:"✦";
      position:absolute;
      left:50%;
      bottom:7px;
      transform:translateX(-50%);
      color:#f4d682;
      font-size:17px;
      text-shadow:0 1px 0 #4a2517,0 0 8px rgba(255,224,135,.28);
    }

    .crystal-pedestal-shadow{
      left:16%;
      right:16%;
      bottom:0;
      height:20px;
      border-radius:50%;
      background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 72%);
      filter:blur(5px);
      opacity:.8;
    }

    .crystal-caption-card,.crystal-scene-kicker,.crystal-theme-shell{display:none!important}

    .crystal-timeline{width:min(560px,90vw);height:5px;margin:10px auto 0;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.11)}
    .crystal-timeline span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9f74df,#fff0ad);box-shadow:0 0 12px rgba(255,236,168,.45)}
    .crystal-timeline.running span{animation:crystalTimeline 12.2s linear forwards}
    @keyframes crystalTimeline{from{width:0}to{width:100%}}

    .crystal-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:14px}
    .crystal-controls button{min-width:130px}
    @keyframes crystalJourneyEnter{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

    @media(max-width:700px){
      .crystal-journey-shell{justify-content:center;padding:18px 0 22px}
      .crystal-journey-title{font-size:2rem}
      .crystal-journey-subtitle{margin-bottom:10px;font-size:.9rem}
      .crystal-stage{gap:12px}
      .crystal-orb-wrap{padding:14px 8px 94px}
      .crystal-orb{width:min(89vw,390px)}
      .crystal-orb-halo{width:min(100vw,470px)}
      .crystal-message-card{inset:15.5% 9.5% 16%;padding:15px 16px 13px}
      .crystal-message-card blockquote{max-width:255px;font-size:clamp(1.05rem,5vw,1.28rem)}
      .crystal-controls{margin-top:12px}
      .crystal-controls button{min-width:0;flex:1 1 110px;padding:10px 12px}
    }
    @media(max-height:720px) and (max-width:700px){
      .crystal-journey-kicker,.crystal-journey-subtitle{display:none}
      .crystal-journey-shell{padding:8px 0 16px;justify-content:center}
      .crystal-orb{width:min(70vw,292px)}
      .crystal-orb-wrap{padding-bottom:78px}
      .crystal-message-card{inset:15% 9.5% 16%}
      .crystal-message-card blockquote{max-width:220px;font-size:1rem;line-height:1.36}
      
    }
    @media(prefers-reduced-motion:reduce){
      .crystal-ball-launch::before,.crystal-launch-orb,.crystal-mote,.crystal-orb,.crystal-glass,.crystal-theme-shell::before,.crystal-theme-shell::after,.crystal-caption-card strong{animation:none!important}
      .crystal-message-card.revealing{animation:fadeUp .3s ease both}
      .crystal-message-card.hiding{animation:none;opacity:0}
    }




    /* Version 13.23: readable, consistent saved-reading text in Favorites */
    .favorite-reading-panel{
      margin-top:14px;
      padding:15px;
      border-radius:16px;
      background:linear-gradient(180deg,#ffffff,#fbf7fd);
      border:1px solid #ddcaec;
      box-shadow:0 7px 18px rgba(66,20,91,.08);
      color:#2f163d;
    }

    .favorite-reading-heading{
      display:flex;
      align-items:center;
      gap:7px;
      margin:0 0 12px;
      color:#4d1769;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.08rem;
      font-weight:950;
    }

    .favorite-reading-text{
      margin:0;
      color:#2f163d !important;
      font-size:.98rem;
      line-height:1.65;
      white-space:normal;
    }

    /* Saved markup comes from several reading types. Force a light-card palette
       so no white or gold reading copy can disappear against the Favorites card. */
    .favorite-reading-text,
    .favorite-reading-text p,
    .favorite-reading-text li,
    .favorite-reading-text div,
    .favorite-reading-text section,
    .favorite-reading-text article,
    .favorite-reading-text span:not(.summary-position-label):not(.energy-pill):not(.clarity-pill),
    .favorite-reading-text .insight-content,
    .favorite-reading-text .insight-content p,
    .favorite-reading-text .insight-content li{
      color:#2f163d !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .favorite-reading-text h2,
    .favorite-reading-text h3,
    .favorite-reading-text h4,
    .favorite-reading-text h5,
    .favorite-reading-text strong,
    .favorite-reading-text summary{
      color:#4d1769 !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .favorite-reading-text > p:first-child{margin-top:0}
    .favorite-reading-text > p:last-child{margin-bottom:0}

    .favorite-reading-text .three-summary-positions{
      grid-template-columns:1fr;
      gap:10px;
      margin:0 0 10px;
    }

    .favorite-reading-text .three-summary-guidance,
    .favorite-reading-text .three-summary-position,
    .favorite-reading-text .three-summary-connection,
    .favorite-reading-text .three-summary-next,
    .favorite-reading-text .birth-reading-section,
    .favorite-reading-text .numerology-reading-section{
      padding:13px 14px;
      border-radius:13px;
      background:#f6effb !important;
      border:1px solid #ddcaec !important;
      box-shadow:none !important;
    }

    .favorite-reading-text .three-summary-guidance,
    .favorite-reading-text .three-summary-connection,
    .favorite-reading-text .three-summary-next{
      margin-top:10px;
    }

    .favorite-reading-text .three-summary-position h4,
    .favorite-reading-text .three-summary-guidance h4,
    .favorite-reading-text .three-summary-connection h4,
    .favorite-reading-text .three-summary-next h4{
      color:#4d1769 !important;
    }

    .favorite-reading-text .three-summary-position p,
    .favorite-reading-text .three-summary-guidance p,
    .favorite-reading-text .three-summary-connection p,
    .favorite-reading-text .three-summary-next p{
      color:#2f163d !important;
    }

    .favorite-reading-text .summary-position-label{
      background:#f8e5a3 !important;
      border:1px solid #d4af37 !important;
      color:#351044 !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .favorite-reading-text .deep-reading{
      margin-top:15px;
      color:#2f163d !important;
    }

    .favorite-reading-text .deep-reading-title{
      color:#4d1769 !important;
      text-shadow:none !important;
    }

    .favorite-reading-text .insight-block{
      background:#ffffff !important;
      border-color:#ddcaec !important;
    }

    .favorite-reading-text .insight-block summary{
      color:#45145f !important;
      background:linear-gradient(180deg,#fbf8fd,#f1e7f8) !important;
    }

    .favorite-reading-text .insight-content{
      background:#ffffff !important;
      color:#2f163d !important;
    }

    .favorite-reading-text .energy-row,
    .favorite-reading-text .message-clarity{
      margin-top:12px;
    }

    .favorite-reading-text .energy-pill,
    .favorite-reading-text .clarity-pill{
      color:#2f114d !important;
      background:#f8e5a3 !important;
      border-color:#d4af37 !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    .favorite-reading-text .affirmation-box{
      background:#fff8d8 !important;
      border-color:#e2c85e !important;
      color:#543f0b !important;
    }

    .favorite-reading-text .meter-row{
      color:#4b2a57 !important;
    }

    .favorite-card-list[data-count="1"]{
      grid-template-columns:minmax(130px,190px);
      justify-content:center;
    }

    .favorite-card-list[data-count="2"]{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    @media(max-width:430px){
      .favorite-card-list[data-count="1"]{grid-template-columns:minmax(125px,175px)}
      .favorite-card-list[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    .favorite-reading-text .history-summary-card{
      margin:0;
      padding:14px;
      background:linear-gradient(180deg,#fbf8fd,#f3eafb) !important;
      border:1px solid #ddcaec !important;
      color:#2f163d !important;
    }

    .favorite-reading-text .history-full-content{
      background:#fff !important;
      color:#2f163d !important;
    }

    .favorite-direct-answer{
      display:grid;
      gap:12px;
      padding:14px;
      border-radius:14px;
      background:#f6effb !important;
      border:1px solid #ddcaec !important;
    }

    .favorite-question{
      display:grid;
      gap:4px;
      padding:11px 12px;
      border-radius:11px;
      background:#fff !important;
      border:1px solid #e1d4eb !important;
    }

    .favorite-answer-badge{
      justify-self:start;
      padding:8px 14px;
      border-radius:999px;
      background:#f8e5a3 !important;
      border:1px solid #d4af37 !important;
      color:#351044 !important;
      font-weight:950;
    }

    .favorite-next-step{
      display:grid;
      gap:4px;
      padding:11px 12px;
      border-radius:11px;
      background:#fff8d8 !important;
      border:1px solid #e2c85e !important;
      color:#543f0b !important;
    }

    .favorite-clarifier-reading{
      margin-top:13px;
      padding:13px 14px;
      border-radius:13px;
      background:linear-gradient(180deg,#fff8d8,#fffdf3) !important;
      border:1px solid #e2c85e !important;
      color:#3b2445 !important;
    }

    .favorite-clarifier-kicker{
      margin-bottom:4px;
      color:#7a5a12 !important;
      font-size:.73rem;
      font-weight:950;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .favorite-clarifier-reading h4{
      margin:0 0 8px;
      color:#4d1769 !important;
      font-family:Georgia,"Times New Roman",serif;
    }

    .favorite-clarifier-reading p{
      margin:0;
      line-height:1.58;
    }

    .favorite-clarifier-reading p + p{margin-top:9px}

    @media(max-width:430px){
      .favorite-reading-panel{padding:13px}
      .favorite-reading-text{font-size:.94rem}
      .favorite-reading-text .three-summary-position,
      .favorite-reading-text .three-summary-guidance,
      .favorite-reading-text .three-summary-connection,
      .favorite-reading-text .three-summary-next{padding:12px}
    }



    /* Version 13.25: detailed, downloadable birth chart */
    .birth-aspect-lines,
    .birth-house-lines,
    .birth-house-labels{
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .birth-aspect-lines{z-index:2}
    .birth-house-lines{z-index:1}
    .birth-house-labels{z-index:2}

    .birth-aspect-line{
      position:absolute;
      height:2.2px;
      transform-origin:0 50%;
      opacity:.82;
      border-radius:999px;
      background:currentColor;
      box-shadow:0 0 6px currentColor,0 0 10px currentColor;
    }
    .birth-aspect-line.conjunction{color:#f8e5a3;height:2.8px}
    .birth-aspect-line.opposition{color:#ef6f86;height:2.6px}
    .birth-aspect-line.trine{color:#6ec1ff;height:2.6px}
    .birth-aspect-line.square{color:#e15b72;height:2.5px;background:repeating-linear-gradient(90deg,currentColor 0 10px,transparent 10px 16px)}
    .birth-aspect-line.sextile{color:#9edcff;height:2.3px;background:repeating-linear-gradient(90deg,currentColor 0 8px,transparent 8px 13px)}
    .birth-aspect-line.quincunx{color:#8fd18b;height:3px;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 9px)}

    .birth-house-line{
      position:absolute;
      left:50%;
      top:50%;
      width:47%;
      height:1px;
      transform-origin:0 50%;
      background:linear-gradient(90deg,rgba(248,229,163,.56),rgba(248,229,163,.08));
    }

    .birth-house-line.angular{
      height:2px;
      background:linear-gradient(90deg,rgba(255,244,207,.92),rgba(248,229,163,.20));
      box-shadow:0 0 7px rgba(248,229,163,.28);
    }

    .birth-house-label{
      position:absolute;
      transform:translate(-50%,-50%);
      display:grid;
      place-items:center;
      width:20px;
      height:20px;
      border-radius:50%;
      color:#f6e8bd;
      background:rgba(35,5,52,.76);
      border:1px solid rgba(248,229,163,.20);
      font-size:.59rem;
      font-weight:900;
    }

    .birth-placement-marker{
      animation:none;
    }

    .birth-placement-marker .marker-degree{display:none}

    .birth-placement-marker.uranus{background:#bce5de;animation-delay:2.45s}
    .birth-placement-marker.neptune{background:#c8d2ff;animation-delay:2.7s}
    .birth-placement-marker.pluto{background:#d5c0d8;animation-delay:2.95s}

    .birth-chart-data-panel{
      margin-top:18px;
      padding:16px;
      border-radius:18px;
      background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
      border:1px solid rgba(248,229,163,.24);
      box-shadow:0 12px 28px rgba(0,0,0,.18);
    }

    .birth-data-heading{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      margin-bottom:13px;
    }

    .birth-data-heading h4{
      margin:0;
      color:#fff1b8;
      font-family:Georgia,"Times New Roman",serif;
      font-size:1.38rem;
    }

    .birth-data-badge{
      flex:0 0 auto;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(248,229,163,.11);
      border:1px solid rgba(248,229,163,.25);
      color:#fff1bc;
      font-size:.7rem;
      font-weight:900;
    }

    .birth-chart-facts{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
      margin-bottom:13px;
    }

    .birth-chart-fact{
      min-width:0;
      padding:10px;
      border-radius:12px;
      background:rgba(16,0,28,.42);
      border:1px solid rgba(255,255,255,.09);
    }

    .birth-chart-fact span{
      display:block;
      margin-bottom:3px;
      color:#cdbbd8;
      font-size:.62rem;
      font-weight:900;
      letter-spacing:.07em;
      text-transform:uppercase;
    }

    .birth-chart-fact strong{
      display:block;
      overflow-wrap:anywhere;
      color:#fff3cd;
      font-size:.82rem;
      line-height:1.35;
    }

    .birth-placement-table-wrap{
      overflow:auto;
      border-radius:14px;
      border:1px solid rgba(248,229,163,.16);
      background:rgba(16,0,28,.34);
    }

    .birth-placement-table{
      width:100%;
      min-width:560px;
      border-collapse:collapse;
      color:#f6edf9;
      font-size:.79rem;
    }

    .birth-placement-table th,
    .birth-placement-table td{
      padding:10px 11px;
      border-bottom:1px solid rgba(255,255,255,.08);
      text-align:left;
      vertical-align:middle;
    }

    .birth-placement-table th{
      position:sticky;
      top:0;
      z-index:1;
      background:#3a1750;
      color:#f8e5a3;
      font-size:.67rem;
      letter-spacing:.07em;
      text-transform:uppercase;
    }

    .birth-placement-table tbody tr:last-child td{border-bottom:0}
    .birth-placement-table tbody tr:nth-child(even){background:rgba(255,255,255,.035)}

    .birth-body-cell{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:900;
      color:#fff2c3;
    }

    .birth-body-cell i{
      display:grid;
      place-items:center;
      width:25px;
      height:25px;
      border-radius:50%;
      background:rgba(248,229,163,.13);
      border:1px solid rgba(248,229,163,.20);
      color:#f8e5a3;
      font-style:normal;
      font-size:.9rem;
    }

    .birth-position-primary{display:block;color:#fff;font-weight:850}
    .birth-position-secondary{display:block;margin-top:2px;color:#cdbbd8;font-size:.68rem}
    .birth-retrograde{color:#ffca9f;font-weight:900}
    .birth-direct{color:#bde7d0;font-weight:850}

    .birth-aspect-section{margin-top:15px}
    .birth-aspect-heading{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:9px}
    .birth-aspect-heading h5{margin:0;color:#fff1b8;font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
    .birth-aspect-heading p{margin:0;max-width:420px;color:#cdbbd8;font-size:.72rem;line-height:1.4;text-align:right}

    .birth-aspect-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:8px;
    }

    .birth-aspect-card{
      padding:10px 11px;
      border-radius:12px;
      background:rgba(16,0,28,.38);
      border:1px solid rgba(255,255,255,.09);
      color:#f4ebf7;
    }

    .birth-aspect-card strong{display:block;color:#fff2c3;font-size:.82rem;line-height:1.35}
    .birth-aspect-card span{display:block;margin-top:3px;color:#cbb8d7;font-size:.7rem}
    .birth-aspect-empty{grid-column:1 / -1;padding:13px;border-radius:12px;background:rgba(16,0,28,.35);color:#d6c6df;text-align:center;font-size:.8rem}

    .birth-download-button{
      background:linear-gradient(180deg,#ffe88f,#e9b947)!important;
      color:#32113f!important;
      border:1px solid #d4af37!important;
    }
    .birth-download-button:disabled{opacity:.55;cursor:not-allowed;transform:none}

    .birth-chart-result.revealing .birth-chart-data-panel{
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      pointer-events:none;
    }

    .birth-chart-result.revealed .birth-chart-data-panel{
      animation:birthContentUnveil .72s cubic-bezier(.2,.75,.25,1) .14s both;
    }

    @media(max-width:640px){
      .birth-chart-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
      .birth-data-heading{display:block}
      .birth-data-badge{display:inline-block;margin-top:8px}
      .birth-aspect-heading{display:block}
      .birth-aspect-heading p{margin-top:4px;text-align:left}
      .birth-placement-marker .marker-degree{font-size:.43rem}
    }

    @media(max-width:520px){
      .birth-placement-table{min-width:0;font-size:.76rem}
      .birth-placement-table thead{display:none}
      .birth-placement-table tbody,
      .birth-placement-table tr,
      .birth-placement-table td{display:block;width:100%}
      .birth-placement-table tr{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5px 12px;
        padding:12px;
        border-bottom:1px solid rgba(255,255,255,.10);
      }
      .birth-placement-table tr:last-child{border-bottom:0}
      .birth-placement-table td{padding:0;border:0}
      .birth-placement-table td:nth-child(1),
      .birth-placement-table td:nth-child(2){grid-column:1 / -1}
      .birth-placement-table td:nth-child(2){margin:4px 0 3px}
      .birth-placement-table td:nth-child(3)::before,
      .birth-placement-table td:nth-child(4)::before{
        display:block;
        margin-bottom:2px;
        color:#bfaecb;
        font-size:.58rem;
        font-weight:900;
        letter-spacing:.07em;
        text-transform:uppercase;
      }
      .birth-placement-table td:nth-child(3)::before{content:"House"}
      .birth-placement-table td:nth-child(4)::before{content:"Motion"}
    }

    @media(max-width:430px){
      .birth-chart-facts{grid-template-columns:1fr}
      .birth-chart-data-panel{padding:13px}
      .birth-chart-actions .birth-download-button{flex:1 1 100%}
      .birth-house-label{width:18px;height:18px;font-size:.53rem}
    }

    /* Version 13.26: birth chart presentation polish */
    .birth-chart-layout{
      grid-template-columns:1fr !important;
    }

    .birth-chart-form{
      width:100%;
      max-width:900px;
      margin-inline:auto;
    }

  
    /* Version 13.43: clearer action hierarchy and guided reading path */
    .btn,
    .coffee-btn{
      border:1px solid rgba(47,13,62,.62);
      box-shadow:
        0 10px 24px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.22);
    }

    .btn{
      background:linear-gradient(180deg,#ffdc72,#e8ac38);
      border-color:rgba(255,234,161,.64);
      color:#2e123d;
    }

    .btn.secondary{
      background:linear-gradient(180deg,#855eb0,#67428f);
      color:#fff;
      border-color:rgba(226,205,244,.40);
      box-shadow:
        0 9px 20px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.15);
    }

    .btn.ghost{
      background:rgba(27,5,40,.38);
      color:#fff4d3;
      border:1.5px solid rgba(248,229,163,.38);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }

    .btn:focus-visible,
    .coffee-btn:focus-visible,
    .tab:focus-visible,
    .intention-option:focus-visible,
    .crystal-ball-launch:focus-visible{
      outline:3px solid rgba(255,224,125,.78);
      outline-offset:3px;
    }

    #heroBegin,
    #dashboardBegin{
      box-shadow:
        0 11px 26px rgba(0,0,0,.30),
        0 0 0 2px rgba(255,231,145,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
    }

    #dashboardDaily{
      border-color:rgba(200,178,232,.42);
      color:#f3e9fb;
    }

    .mode-ribbon{
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:7px;
      margin-top:12px;
      color:#f4e9fb;
      font-weight:900;
    }

    .mode-ribbon::before{
      content:"1";
      display:grid;
      place-items:center;
      width:24px;
      height:24px;
      border-radius:50%;
      color:#351044;
      background:#f8e5a3;
      border:1px solid #d4af37;
      box-shadow:0 5px 12px rgba(0,0,0,.22);
      font-size:.76rem;
    }

    .mode-ribbon span{
      color:#bda9ca;
      font-size:.7rem;
      font-weight:800;
      letter-spacing:.02em;
    }

    .reading-tabs{
      gap:9px;
      padding-top:11px;
    }

    .reading-tabs .tab{
      position:relative;
      border:1.5px solid rgba(248,229,163,.28);
      background:linear-gradient(145deg,rgba(64,27,82,.96),rgba(39,13,53,.96));
      color:#f7eefc;
      box-shadow:
        0 7px 16px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.07);
    }

    .reading-tabs .tab:nth-child(5),
    .reading-tabs .tab:nth-child(6){
      background:linear-gradient(145deg,rgba(78,54,113,.92),rgba(46,29,71,.96));
      border-color:rgba(193,177,235,.34);
    }

    .reading-tabs .tab:hover{
      border-color:rgba(255,231,151,.58);
      box-shadow:
        0 10px 22px rgba(0,0,0,.22),
        0 0 0 2px rgba(248,229,163,.08);
    }

    .reading-tabs .tab.active{
      background:linear-gradient(180deg,#ffdc72,#e8ac38) !important;
      color:#351044 !important;
      border-color:#ffe8a1 !important;
      box-shadow:
        0 11px 25px rgba(0,0,0,.24),
        0 0 0 2px rgba(255,231,145,.20) !important;
    }

    .reading-tabs .tab.active::before{
      height:3px;
      bottom:5px;
    }

    .reading-tabs .tab.reading-choice-pulse{
      animation:readingChoicePulse 1.25s ease 2;
    }

    @keyframes readingChoicePulse{
      0%,100%{
        transform:translateY(0);
        box-shadow:0 11px 25px rgba(0,0,0,.24),0 0 0 2px rgba(255,231,145,.20);
      }
      50%{
        transform:translateY(-2px);
        box-shadow:
          0 13px 29px rgba(0,0,0,.28),
          0 0 0 5px rgba(255,226,124,.24),
          0 0 24px rgba(255,220,112,.28);
      }
    }

    .intention-panel{
      border:1.5px solid rgba(248,229,163,.28);
      background:linear-gradient(145deg,rgba(72,29,91,.72),rgba(40,13,54,.80));
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }

    .intention-panel.is-hidden{
      display:none;
    }

    .intention-panel > strong{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    .intention-panel > strong::before{
      content:"2";
      display:grid;
      place-items:center;
      width:23px;
      height:23px;
      border-radius:50%;
      color:#351044;
      background:#f8e5a3;
      border:1px solid #d4af37;
      box-shadow:0 5px 12px rgba(0,0,0,.20);
      font-size:.74rem;
    }

    .intention-option{
      border:1.5px solid rgba(211,191,229,.26);
      background:rgba(26,5,38,.34);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .intention-option:not(.active):hover{
      border-color:rgba(248,229,163,.46);
      background:rgba(102,56,128,.42);
    }

    .intention-option.active{
      border-color:#e3bd53;
      box-shadow:
        0 8px 18px rgba(0,0,0,.22),
        0 0 0 2px rgba(248,229,163,.12);
    }

    #singlePanel::before,
    #threePanel::before,
    #celticPanel::before,
    #yesNoPanel::before{
      content:"3  Start your selected reading";
      display:inline-flex;
      align-items:center;
      gap:7px;
      margin:0 0 9px;
      padding:6px 11px;
      border-radius:999px;
      color:#f8e5a3;
      background:rgba(248,229,163,.08);
      border:1px solid rgba(248,229,163,.22);
      font-size:.7rem;
      font-weight:900;
      letter-spacing:.035em;
      text-transform:uppercase;
    }

    .crystal-ball-launch{
      border:1.5px solid rgba(255,228,151,.48);
      box-shadow:
        0 15px 32px rgba(0,0,0,.27),
        0 0 0 2px rgba(183,137,238,.08),
        inset 0 1px 0 rgba(255,255,255,.14);
    }

    .crystal-launch-copy{
      display:block;
      min-width:0;
      opacity:1 !important;
      visibility:visible !important;
    }

    .crystal-launch-copy strong,
    .crystal-launch-copy small{
      opacity:1 !important;
      visibility:visible !important;
    }

    @media(max-width:430px){
      .reading-tabs{gap:7px}
      .reading-tabs .tab{border-width:1px}
      .mode-ribbon span{flex-basis:100%;text-align:center;margin-top:-2px}
      #singlePanel::before,
      #threePanel::before,
      #celticPanel::before,
      #yesNoPanel::before{font-size:.65rem}
    }

    @media(prefers-reduced-motion:reduce){
      .reading-tabs .tab.reading-choice-pulse{animation:none!important}
    }

/* =========================================================
   TAROT ECHOES v13.45 — USER ACCOUNT FOUNDATION
   ========================================================= */

.menu-account-button{
  display:block;
  width:100%;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  text-align:left;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.menu-account-button:hover{
  background:rgba(255,255,255,.08);
}

.account-status-button{
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}

.account-status-button:hover{
  background:rgba(248,229,163,.14);
  border-color:rgba(248,229,163,.34);
}

.account-status-button.signed-in{
  color:#f7edff;
  background:rgba(132,91,176,.24);
  border-color:rgba(210,185,236,.34);
}

.account-modal{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.account-modal.is-open{
  display:flex;
}

.account-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,0,20,.82);
  backdrop-filter:blur(9px);
}

.account-dialog{
  position:relative;
  width:min(100%,560px);
  max-height:min(90vh,820px);
  overflow:auto;
  padding:24px;
  border-radius:26px;
  color:#f9f3fc;
  background:
    radial-gradient(circle at 12% 0%,rgba(172,117,220,.20),transparent 34%),
    linear-gradient(160deg,#3d164f,#20072d 58%,#160020);
  border:1px solid rgba(248,229,163,.30);
  box-shadow:
    0 30px 80px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.10);
  animation:accountModalIn .24s ease;
}

@keyframes accountModalIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.account-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,0,28,.56);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

.account-header{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding-right:32px;
  margin-bottom:20px;
}

.account-orb{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  color:#fff7d0;
  font-size:1.45rem;
  background:
    radial-gradient(circle at 35% 28%,#fff 0 4%,#d9c2ff 8%,#8e64c7 28%,#3a1457 67%,#160020 100%);
  border:2px solid rgba(248,229,163,.66);
  box-shadow:0 0 24px rgba(178,131,231,.46);
}

.account-eyebrow{
  margin:0 0 4px;
  color:#f4dc8d;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.account-header h2{
  margin:0 0 7px;
  color:#fff4cf;
  font-family:Georgia,serif;
  font-size:clamp(1.35rem,5vw,1.8rem);
  line-height:1.08;
}

.account-header p:last-child{
  margin:0;
  color:#d9c9e1;
  font-size:.88rem;
  line-height:1.5;
}

.account-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:28px 12px;
  color:#f8e5a3;
}

.account-spinner{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid rgba(248,229,163,.20);
  border-top-color:#f8e5a3;
  animation:accountSpin .8s linear infinite;
}

@keyframes accountSpin{to{transform:rotate(360deg)}}

.account-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:5px;
  margin-bottom:18px;
  border-radius:15px;
  background:rgba(10,0,18,.34);
  border:1px solid rgba(255,255,255,.08);
}

.account-tab{
  min-height:43px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#d8c8e0;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.account-tab.active{
  color:#351044;
  background:linear-gradient(180deg,#ffe184,#e8b447);
  border-color:#ffeaa5;
  box-shadow:0 7px 18px rgba(0,0,0,.24);
}

.account-form{
  display:grid;
  gap:14px;
}

.account-form h3,
.account-confirmation h3,
.account-signed-in h3{
  margin:0;
  color:#fff0bc;
  font-family:Georgia,serif;
  font-size:1.35rem;
}

.account-form > p{
  margin:0;
  color:#d8c8e0;
  line-height:1.5;
}

.account-form label{
  display:grid;
  gap:7px;
  color:#fff4d3;
  font-size:.85rem;
  font-weight:850;
}

.account-form label small{
  color:#bda9c8;
  font-weight:650;
}

.account-form input{
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border-radius:12px;
  border:1.5px solid rgba(221,199,237,.28);
  outline:none;
  color:#281033;
  background:#fff;
  font:inherit;
}

.account-form input:focus{
  border-color:#f4cf6a;
  box-shadow:0 0 0 3px rgba(244,207,106,.18);
}

.password-field{
  position:relative;
  display:block;
}

.password-field input{
  padding-right:70px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  padding:7px 9px;
  border:0;
  border-radius:8px;
  color:#5d376d;
  background:#eee4f3;
  font-weight:900;
  cursor:pointer;
}

.account-primary{
  width:100%;
  min-height:49px;
  margin-top:2px;
}

.account-text-button,
.account-back-button{
  justify-self:center;
  border:0;
  background:transparent;
  color:#f4dc8d;
  font:inherit;
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.account-back-button{
  justify-self:start;
  padding:0;
  text-decoration:none;
}

.account-legal{
  color:#bdaac8 !important;
  font-size:.76rem;
  text-align:center;
}

.account-legal a{
  color:#f4dc8d;
}

.account-confirmation{
  padding:20px;
  border-radius:18px;
  text-align:center;
  background:rgba(248,229,163,.08);
  border:1px solid rgba(248,229,163,.25);
}

.account-confirmation-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 12px;
  border-radius:50%;
  color:#351044;
  background:#f8e5a3;
  font-size:1.35rem;
}

.account-confirmation p{
  color:#dccde4;
  line-height:1.55;
}

.account-recovery-form{
  padding:18px;
  border-radius:18px;
  background:rgba(248,229,163,.07);
  border:1px solid rgba(248,229,163,.24);
}

.account-welcome-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:15px;
  margin-bottom:15px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(130,79,164,.34),rgba(32,7,45,.70));
  border:1px solid rgba(230,207,244,.24);
}

.account-avatar{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  color:#351044;
  background:linear-gradient(180deg,#ffe184,#e8b447);
  border:2px solid #ffeaa5;
  font-family:Georgia,serif;
  font-size:1.35rem;
  font-weight:900;
}

.account-welcome-card h3{
  margin:0 0 3px;
}

.account-welcome-card p:last-child{
  margin:0;
  color:#c9b7d3;
  font-size:.79rem;
  overflow-wrap:anywhere;
}

.account-plan-badge{
  padding:6px 9px;
  border-radius:999px;
  color:#361044;
  background:#f8e5a3;
  border:1px solid #d9b84c;
  font-size:.72rem;
  font-weight:950;
  text-transform:capitalize;
}

.account-profile-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:14px;
}

.account-profile-form label{
  display:grid;
  gap:7px;
  color:#fff4d3;
  font-size:.83rem;
  font-weight:850;
}

.account-profile-form input{
  width:100%;
  min-height:45px;
  padding:10px 12px;
  border:1.5px solid rgba(221,199,237,.28);
  border-radius:11px;
  outline:none;
  font:inherit;
}

.account-profile-form .btn{
  min-height:45px;
  white-space:nowrap;
}

.account-foundation-note,
.account-privacy-note{
  padding:14px;
  margin-top:11px;
  border-radius:16px;
  color:#dacbe2;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}

.account-foundation-note strong,
.account-privacy-note strong{
  color:#f8e5a3;
}

.account-foundation-note p,
.account-privacy-note p{
  margin:6px 0 0;
  font-size:.84rem;
  line-height:1.5;
}

.account-sign-out{
  width:100%;
  margin-top:15px;
}

.account-message{
  min-height:1.2em;
  margin:14px 0 0;
  color:#f4dc8d;
  font-size:.84rem;
  font-weight:750;
  text-align:center;
}

.account-message.error{
  color:#ffb8c3;
}

.account-message.success{
  color:#c9f4cf;
}

body.account-modal-open{
  overflow:hidden;
}

@media(max-width:520px){
  .account-modal{padding:9px}
  .account-dialog{
    max-height:94vh;
    padding:20px 16px;
    border-radius:22px;
  }
  .account-header{
    grid-template-columns:46px 1fr;
    gap:10px;
    padding-right:26px;
  }
  .account-orb{
    width:46px;
    height:46px;
  }
  .account-profile-form{
    grid-template-columns:1fr;
  }
  .account-profile-form .btn{
    width:100%;
  }
  .account-welcome-card{
    grid-template-columns:auto 1fr;
  }
  .account-plan-badge{
    grid-column:1 / -1;
    justify-self:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .account-dialog,
  .account-spinner{
    animation:none!important;
  }
}

/* =========================================================
   TAROT ECHOES v13.46 — CLEAN ACCOUNT FLOW
   ========================================================= */

/* Author CSS previously overrode the browser's hidden behavior.
   These rules guarantee that only one account screen can appear. */
.account-modal [hidden],
.account-modal .is-hidden{
  display:none !important;
}

.account-dialog{
  width:min(100%,500px);
  max-height:min(92vh,760px);
  padding:22px;
  border-radius:22px;
  background:
    linear-gradient(165deg,#421952 0%,#260933 50%,#190321 100%);
}

.account-dialog[data-account-mode="recovery"]{
  width:min(100%,470px);
}

.account-header{
  margin-bottom:16px;
}

.account-header h2{
  font-size:clamp(1.35rem,4.7vw,1.72rem);
}

.account-header p:last-child{
  font-size:.84rem;
  line-height:1.45;
}

.account-loading{
  min-height:126px;
  padding:26px 12px;
}

.account-tabs{
  margin:0 0 16px;
  padding:4px;
  border-radius:13px;
  background:rgba(10,0,18,.42);
}

.account-tab{
  min-height:45px;
  border-radius:10px;
}

.account-auth-shell{
  min-height:0;
}

.account-form{
  gap:13px;
}

.account-form label{
  gap:6px;
}

.account-form input{
  min-height:50px;
  border-radius:11px;
}

.account-text-button{
  margin-top:1px;
}

.account-recovery-form{
  padding:22px;
  border-radius:17px;
  text-align:left;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(248,229,163,.24);
  box-shadow:none;
}

.account-recovery-form h3{
  margin:1px 0 2px;
  font-size:1.55rem;
}

.account-recovery-form > p:not(.account-eyebrow){
  margin-bottom:5px;
  color:#dbcde2;
}

.recovery-success-mark{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:13px;
  border-radius:50%;
  color:#351044;
  background:linear-gradient(180deg,#ffe58f,#e7b943);
  border:2px solid #fff0b7;
  font-size:1.3rem;
  font-weight:950;
}

.account-dialog.recovery-mode .account-header{
  display:none;
}

.account-dialog.recovery-mode .account-close{
  display:none;
}

.account-dialog.recovery-mode{
  padding-top:18px;
}

.account-signed-in{
  display:block;
}

.account-welcome-card{
  margin-bottom:14px;
  border-radius:15px;
  background:rgba(255,255,255,.055);
  box-shadow:none;
}

.account-foundation-note,
.account-privacy-note{
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

.account-message{
  margin-top:12px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(248,229,163,.07);
}

.account-message:empty{
  display:none !important;
}

.menu-panel{
  overflow:visible;
}

.menu-account-button{
  color:#f8e5a3;
  border-bottom:1px solid rgba(248,229,163,.12);
  margin-bottom:3px;
}

@media(max-width:520px){
  .account-modal{
    align-items:flex-start;
    padding:8px;
  }

  .account-dialog{
    width:100%;
    max-height:calc(100dvh - 16px);
    padding:18px 15px;
    border-radius:18px;
  }

  .account-dialog.recovery-mode{
    margin-top:4px;
  }

  .account-recovery-form{
    padding:18px 15px;
  }

  .account-header{
    grid-template-columns:42px 1fr;
  }

  .account-orb{
    width:42px;
    height:42px;
  }
}



/* v13.47 deterministic password recovery */
.account-dialog.recovery-mode .account-loading{
  min-height:220px;
}

.account-dialog.recovery-mode .account-confirmation{
  margin-top:4px;
  padding:24px 18px;
}

.account-dialog.recovery-mode .account-confirmation h3{
  font-size:1.45rem;
}

/* =========================================================
   TAROT ECHOES v13.48 — COMPACT SIGNED-IN ACCOUNT HEADER
   ========================================================= */

.account-welcome-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px 13px;
  margin-bottom:13px;
  min-height:0;
  border-radius:14px;
}

.account-avatar{
  width:44px;
  height:44px;
  font-size:1.12rem;
  border-width:1.5px;
}

.account-identity-copy{
  min-width:0;
}

.account-identity-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}

.account-identity-meta .account-eyebrow{
  margin:0;
  font-size:.67rem;
  line-height:1;
}

.account-plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 7px;
  border-radius:999px;
  font-size:.62rem;
  line-height:1.1;
}

.account-welcome-card h3{
  margin:0 0 2px;
  font-size:1.28rem;
  line-height:1.08;
}

.account-welcome-card p:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.73rem;
  line-height:1.25;
}

/* Cancel the older mobile rule that pushed Free onto its own full row. */
@media(max-width:520px){
  .account-welcome-card{
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
    padding:10px 12px;
  }

  .account-avatar{
    width:42px;
    height:42px;
  }

  .account-plan-badge{
    grid-column:auto;
    justify-self:auto;
  }

  .account-welcome-card h3{
    font-size:1.2rem;
  }
}

/* =========================================================
   TAROT ECHOES v13.49 — LOCAL-FIRST CLOUD SYNC
   ========================================================= */

.account-cloud-card{
  padding:13px 14px;
}

.account-cloud-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
}

.account-cloud-heading p{
  margin:5px 0 0;
}

.account-cloud-dot{
  width:11px;
  height:11px;
  margin-top:4px;
  border-radius:50%;
  background:#d8c5df;
  box-shadow:0 0 0 4px rgba(216,197,223,.10);
}

.account-cloud-dot[data-cloud-state="ready"]{
  background:#80e89c;
  box-shadow:0 0 0 4px rgba(128,232,156,.12),0 0 14px rgba(128,232,156,.45);
}

.account-cloud-dot[data-cloud-state="syncing"]{
  background:#f8d66f;
  box-shadow:0 0 0 4px rgba(248,214,111,.12);
  animation:cloudSyncPulse 1s ease-in-out infinite alternate;
}

.account-cloud-dot[data-cloud-state="offline"]{
  background:#f2bd69;
}

.account-cloud-dot[data-cloud-state="error"]{
  background:#ff9dac;
}

@keyframes cloudSyncPulse{
  from{opacity:.45;transform:scale(.85)}
  to{opacity:1;transform:scale(1.12)}
}

.account-cloud-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.account-cloud-actions span{
  min-width:0;
  color:#cdbcd6;
  font-size:.71rem;
  line-height:1.3;
}

.account-cloud-actions .btn{
  flex:0 0 auto;
  min-height:34px;
  padding:7px 11px;
  margin:0;
  font-size:.72rem;
}

.account-cloud-card[data-cloud-state="ready"]{
  border-color:rgba(128,232,156,.20);
}

.account-cloud-card[data-cloud-state="offline"]{
  border-color:rgba(242,189,105,.24);
}

.account-cloud-card[data-cloud-state="error"]{
  border-color:rgba(255,157,172,.22);
}

@media(max-width:420px){
  .account-cloud-actions{
    align-items:flex-start;
  }

  .account-cloud-actions span{
    max-width:66%;
  }
}

@media(prefers-reduced-motion:reduce){
  .account-cloud-dot{
    animation:none!important;
  }
}

/* =========================================================
   TAROT ECHOES v13.50 — FREE NUMEROLOGY PROFILE DOWNLOAD
   ========================================================= */

.numerology-download-cue{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  margin-top:16px;
  padding:14px 15px;
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(248,229,163,.12),rgba(255,255,255,.045));
  border:1px solid rgba(248,229,163,.28);
  box-shadow:0 10px 25px rgba(0,0,0,.14);
}

.numerology-download-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  color:#351044;
  background:linear-gradient(180deg,#ffe58e,#e8b946);
  border:1px solid #fff0b7;
  box-shadow:0 7px 16px rgba(0,0,0,.22);
  font-size:1.05rem;
  font-weight:900;
}

.numerology-download-copy{
  min-width:0;
}

.numerology-download-copy strong{
  display:block;
  color:#fff1ba;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.03rem;
}

.numerology-download-copy span{
  display:block;
  margin-top:4px;
  color:#d6c7df;
  font-size:.79rem;
  line-height:1.45;
}

.numerology-download-cue-button{
  min-height:39px;
  white-space:nowrap;
}

.numerology-download-button{
  box-shadow:
    0 10px 23px rgba(0,0,0,.24),
    0 0 0 2px rgba(248,229,163,.12),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.numerology-download-button:disabled,
.numerology-download-cue-button:disabled{
  opacity:.48;
  cursor:not-allowed;
}

@media(max-width:650px){
  .numerology-download-cue{
    grid-template-columns:auto minmax(0,1fr);
  }

  .numerology-download-cue-button{
    grid-column:1 / -1;
    width:100%;
  }
}

@media(max-width:420px){
  .numerology-download-cue{
    padding:13px;
  }

  .numerology-download-icon{
    width:38px;
    height:38px;
  }
}

/* =========================================================
   TAROT ECHOES v13.51 — PREMIUM SHOWCASE
   ========================================================= */

html{
  scroll-behavior:smooth;
}

#premiumShowcase{
  scroll-margin-top:18px;
}

.premium-hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:170px;
  padding:11px 17px;
  border-radius:999px;
  color:#fff3c4;
  background:
    linear-gradient(145deg,rgba(117,65,147,.90),rgba(56,19,75,.96));
  border:1.5px solid rgba(248,229,163,.48);
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.13);
  text-decoration:none;
  font-weight:900;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.premium-hero-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:
    0 13px 28px rgba(0,0,0,.29),
    0 0 0 3px rgba(248,229,163,.09);
}

.premium-hero-button:active{
  transform:translateY(1px);
}

.premium-hero-button:focus-visible{
  outline:3px solid rgba(255,224,125,.78);
  outline-offset:3px;
}

.premium-showcase{
  position:relative;
  isolation:isolate;
  max-width:960px;
  margin:24px auto 0;
  padding:26px;
  overflow:hidden;
  border-radius:27px;
  color:#f9f1fc;
  background:
    radial-gradient(circle at 12% 0%,rgba(192,137,226,.20),transparent 38%),
    linear-gradient(155deg,rgba(68,24,87,.98),rgba(29,5,40,.98) 58%,rgba(20,0,29,.99));
  border:1px solid rgba(248,229,163,.30);
  box-shadow:
    0 22px 54px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.premium-showcase-glow{
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  right:-130px;
  top:-160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(248,220,130,.15),transparent 68%);
  pointer-events:none;
}

.premium-showcase-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:start;
  max-width:790px;
  margin:0 auto 22px;
}

.premium-crown{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:50%;
  color:#fff5cb;
  background:
    radial-gradient(circle at 35% 28%,#fff 0 4%,#e1c8ff 8%,#9062c0 31%,#3c1654 68%,#190022 100%);
  border:2px solid rgba(248,229,163,.66);
  box-shadow:
    0 0 25px rgba(176,126,224,.42),
    inset 0 1px 0 rgba(255,255,255,.24);
  font-size:1.45rem;
}

.premium-eyebrow{
  margin:1px 0 5px;
  color:#f4dc8d;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.premium-showcase-header h2{
  margin:0 0 8px;
  color:#fff1bd;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,5vw,2.35rem);
  line-height:1.08;
}

.premium-showcase-header p:last-child{
  margin:0;
  max-width:680px;
  color:#d9c9e1;
  font-size:.93rem;
  line-height:1.58;
}

.premium-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.premium-feature-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:15px;
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
  border:1px solid rgba(226,205,241,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.premium-feature-wide{
  grid-column:1 / -1;
}

.premium-feature-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  color:#351044;
  background:linear-gradient(180deg,#ffe58b,#e8b846);
  border:1px solid #fff0b4;
  box-shadow:0 7px 15px rgba(0,0,0,.20);
  font-size:1rem;
  font-weight:900;
}

.premium-feature-card h3{
  margin:1px 0 5px;
  color:#fff2c4;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
}

.premium-feature-card p{
  margin:0;
  color:#d3c3dc;
  font-size:.82rem;
  line-height:1.48;
}

.premium-free-companions{
  display:grid;
  gap:5px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  color:#d9c9e1;
  background:rgba(248,229,163,.065);
  border:1px solid rgba(248,229,163,.17);
}

.premium-free-companions strong{
  color:#f8e5a3;
  font-size:.9rem;
}

.premium-free-companions span{
  font-size:.79rem;
  line-height:1.52;
}

.premium-showcase-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 15px;
  margin-top:18px;
  text-align:center;
}

.premium-account-button{
  min-height:45px;
  box-shadow:
    0 11px 25px rgba(0,0,0,.27),
    0 0 0 2px rgba(248,229,163,.11),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.premium-showcase-actions p{
  margin:0;
  max-width:360px;
  color:#bfaec9;
  font-size:.76rem;
  line-height:1.42;
}

@media(max-width:650px){
  .premium-showcase{
    padding:21px 16px;
    border-radius:22px;
  }

  .premium-showcase-header{
    grid-template-columns:48px minmax(0,1fr);
    gap:11px;
  }

  .premium-crown{
    width:48px;
    height:48px;
    font-size:1.1rem;
  }

  .premium-feature-grid{
    grid-template-columns:1fr;
  }

  .premium-feature-wide{
    grid-column:auto;
  }
}

@media(max-width:430px){
  .hero-quick-actions .premium-hero-button{
    min-width:155px;
    padding:10px 14px;
    font-size:.9rem;
  }

  .premium-feature-card{
    padding:13px;
  }

  .premium-showcase-actions{
    align-items:stretch;
  }

  .premium-account-button{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .premium-hero-button{
    transition:none;
  }
}

/* =========================================================
   TAROT ECHOES v13.52 — REAL PREMIUM ACCESS LOCKS
   ========================================================= */

.tab-premium-mark{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  color:#42214f;
  background:linear-gradient(180deg,#ffeaa2,#e8bd50);
  border:1px solid rgba(255,246,202,.86);
  font-size:.56rem;
  font-weight:950;
  line-height:1.1;
  letter-spacing:.03em;
  vertical-align:middle;
}

.has-premium-access .tab-premium-mark{display:none}

.premium-gate{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:15px;
  border-radius:18px;
  color:#f6eff9;
  background:
    radial-gradient(circle at 0 0,rgba(191,137,225,.17),transparent 43%),
    linear-gradient(145deg,rgba(77,34,94,.97),rgba(37,10,49,.98));
  border:1px solid rgba(248,229,163,.28);
  box-shadow:0 13px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.07);
}

.premium-gate strong{
  display:block;
  color:#fff0b8;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.03rem;
}

.premium-gate p{
  margin:5px 0 0;
  color:#d5c5de;
  font-size:.79rem;
  line-height:1.48;
}

.premium-lock-symbol{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#fff3c0;
  background:radial-gradient(circle at 34% 28%,#fff 0 4%,#d6b6ef 9%,#7d4aa6 40%,#30103e 72%);
  border:1px solid rgba(248,229,163,.58);
  box-shadow:0 0 18px rgba(179,123,222,.30);
  font-weight:900;
}

.premium-lock-symbol.large{width:52px;height:52px;font-size:1.2rem}
.premium-full-reading-gate{margin:16px 0 5px;padding:21px}
.premium-full-reading-gate strong{font-size:1.3rem}
.premium-depth-gate,.premium-clarifier-gate{margin:14px 0}
@media(max-width:720px){
  .intention-options{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:520px){
  .intention-options{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .intention-general-option{
    grid-column:1 / -1;
    min-height:48px;
  }

  .intention-premium-heading{
    font-size:.60rem;
    padding:4px 7px;
  }

}

@media(max-width:360px){
  .intention-heading-row{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

/* =========================================================
   TAROT ECHOES v13.54 — CLEAN READING INTENTIONS
   ========================================================= */

#readingIntentionPanel .premium-intention-controls{
  margin-bottom:0;
}

#readingIntentionPanel .intention-note{
  margin-bottom:0;
}

/* =========================================================
   TAROT ECHOES v13.55 — CLEAN FEATURE BADGES
   ========================================================= */

/* Premium reading choices: title and yellow badge get their own clean lines. */
.reading-tabs .premium-reading-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
}

.reading-tabs .premium-reading-choice .tab-choice-title{
  display:block;
  max-width:100%;
  color:inherit;
  font-weight:900;
  line-height:1.08;
  text-align:center;
}

.reading-tabs .premium-reading-choice .tab-choice-title-ppf{
  white-space:nowrap;
  font-size:.75rem;
  letter-spacing:-.018em;
}

.reading-tabs .premium-reading-choice .tab-premium-mark{
  margin:0;
}

/* Birth Chart and Numerology clearly advertise their free information download. */
.reading-tabs .free-download-choice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  column-gap:8px;
  row-gap:3px;
  padding-top:10px;
  padding-bottom:9px;
}

.feature-tab-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.tab-free-download-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  color:#42214f;
  background:linear-gradient(180deg,#ffeaa2,#e8bd50);
  border:1px solid rgba(255,246,202,.90);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  font-size:.58rem;
  font-weight:950;
  line-height:1.1;
  letter-spacing:.025em;
  white-space:nowrap;
}

/* Keep the descriptive subtitle on its own full-width line. */
.reading-tabs .free-download-choice::after{
  flex-basis:100%;
  width:100%;
  margin-top:1px;
}

/* Intentions use the exact yellow Premium pill used above. */
.intention-option .intention-premium-mark{
  margin:1px 0 0;
  padding:3px 7px;
  color:#42214f;
  font-size:.55rem;
  line-height:1.05;
}

html:not(.has-premium-access) .intention-premium-option{
  gap:5px;
}

html.has-premium-access .intention-premium-mark{
  display:none;
}

/* The active General button does not need a second large line. */
.intention-current-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  color:#53325f;
  background:rgba(70,25,85,.09);
  font-size:.54rem;
  font-weight:900;
}

/* Preserve badge contrast when a special tab is selected. */
.reading-tabs .free-download-choice.active .tab-free-download-mark{
  color:#3b1649;
  background:linear-gradient(180deg,#fff4bd,#efc85a);
  border-color:#fff8d5;
  box-shadow:0 3px 8px rgba(72,31,82,.18);
}

@media(max-width:700px){
  .reading-tabs .premium-reading-choice{
    padding-left:3px;
    padding-right:3px;
  }

  .reading-tabs .premium-reading-choice .tab-choice-title-ppf{
    font-size:.68rem;
    letter-spacing:-.028em;
  }

  .reading-tabs .premium-reading-choice .tab-premium-mark{
    padding:2px 7px;
    font-size:.54rem;
  }
}

@media(max-width:430px){
  .reading-tabs .premium-reading-choice .tab-choice-title-ppf{
    font-size:.64rem;
  }

  .tab-free-download-mark{
    font-size:.55rem;
    padding:3px 7px;
  }

  .intention-option .intention-premium-mark{
    font-size:.53rem;
    padding:3px 6px;
  }
}

/* =========================================================
   TAROT ECHOES v13.56 — SMALLER FEATURE BADGES
   ========================================================= */

/* Slightly reduce every yellow Premium badge. */
.tab-premium-mark{
  padding:1px 5px;
  font-size:.50rem;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(0,0,0,.13);
}

.reading-tabs .premium-reading-choice{
  gap:4px;
}

.reading-tabs .premium-reading-choice .tab-premium-mark{
  padding:1px 6px;
  font-size:.50rem;
}

/* Slightly reduce Birth Chart and Numerology Free Download pills. */
.tab-free-download-mark{
  padding:2px 6px;
  font-size:.52rem;
  letter-spacing:.015em;
  box-shadow:0 2px 7px rgba(0,0,0,.14);
}

/* Keep intention badges compact inside the smaller buttons. */
.intention-option .intention-premium-mark{
  margin-top:0;
  padding:2px 5px;
  font-size:.48rem;
}

html:not(.has-premium-access) .intention-premium-option{
  gap:4px;
}

/* The General Current marker should remain visually quieter than Premium. */
.intention-current-label{
  padding:1px 6px;
  font-size:.49rem;
}

@media(max-width:430px){
  .reading-tabs .premium-reading-choice .tab-premium-mark{
    padding:1px 5px;
    font-size:.48rem;
  }

  .tab-free-download-mark{
    padding:2px 5px;
    font-size:.49rem;
  }

  .intention-option .intention-premium-mark{
    padding:2px 5px;
    font-size:.46rem;
  }
}

/* =========================================================
   TAROT ECHOES v13.57 — QUIET PREMIUM PRESENTATION
   ========================================================= */

/* Repeated locked-feature notices are concise information rows, not sales cards. */
.premium-gate,
.premium-full-reading-gate,
.premium-depth-gate,
.premium-clarifier-gate,
.premium-interpretation-gate,
.premium-saved-gate{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  margin:11px 0;
  padding:9px 10px;
  min-height:0;
  border-radius:13px;
  color:#eee4f3;
  background:rgba(66,27,79,.62);
  border:1px solid rgba(224,202,236,.18);
  box-shadow:none;
}

.premium-full-reading-gate{
  margin:11px 0 8px;
}

.premium-gate .premium-lock-symbol,
.premium-gate .premium-lock-symbol.large{
  width:29px;
  height:29px;
  font-size:.72rem;
  border-width:1px;
  box-shadow:none;
}

.premium-gate strong,
.premium-full-reading-gate strong{
  margin:0;
  color:#f8e8aa;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.88rem;
  line-height:1.18;
}

.premium-gate p{
  margin:2px 0 0;
  color:#cdbfd4;
  font-size:.67rem;
  line-height:1.32;
}

.premium-details-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:5px 8px;
  border-radius:999px;
  color:#eadcf0;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(232,211,241,.22);
  box-shadow:none;
  font:800 .61rem/1.05 inherit;
  white-space:nowrap;
  cursor:pointer;
}

.premium-details-link:hover,
.premium-details-link:focus-visible{
  color:#fff0b2;
  background:rgba(248,229,163,.08);
  border-color:rgba(248,229,163,.34);
}

.premium-details-link:focus-visible{
  outline:2px solid rgba(255,226,132,.64);
  outline-offset:2px;
}

/* Clarifier area remains useful without placing a second giant box inside it. */
.clarifier-box .premium-clarifier-gate{
  margin-top:9px;
  margin-bottom:0;
}

/* Compact Premium destination: enough information, no oversized sales wall. */
.premium-showcase.premium-showcase-compact{
  max-width:900px;
  margin:20px auto 0;
  padding:17px;
  border-radius:19px;
  background:
    linear-gradient(145deg,rgba(83,39,96,.90),rgba(42,12,53,.94));
  border:1px solid rgba(248,229,163,.20);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.premium-compact-heading{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;
  align-items:start;
}

.premium-compact-symbol{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  color:#fff0b0;
  background:rgba(111,68,137,.64);
  border:1px solid rgba(248,229,163,.38);
  font-weight:900;
}

.premium-showcase-compact .premium-eyebrow{
  margin:0 0 3px;
  font-size:.63rem;
}

.premium-showcase-compact h2{
  margin:0;
  color:#fff0b3;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.22rem;
  line-height:1.16;
}

.premium-showcase-compact .premium-compact-heading p:last-child{
  margin:5px 0 0;
  color:#d0c1d7;
  font-size:.74rem;
  line-height:1.42;
}

.premium-compact-features{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:13px;
}

.premium-compact-features span{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  color:#e6d9eb;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(230,210,240,.15);
  font-size:.66rem;
  font-weight:800;
}

.premium-compact-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(235,215,241,.12);
}

.premium-compact-actions .premium-account-button{
  min-height:34px;
  padding:7px 11px;
  box-shadow:none;
}

.premium-compact-actions span{
  color:#bfaec8;
  font-size:.65rem;
  line-height:1.3;
  text-align:right;
}

/* Keep panels from visually selling Premium before users engage with free content. */
#eightBallPanel + .panel,
#dailyPanel + .panel{
  scroll-margin-top:18px;
}

@media(max-width:520px){
  .premium-gate,
  .premium-full-reading-gate,
  .premium-depth-gate,
  .premium-clarifier-gate,
  .premium-interpretation-gate,
  .premium-saved-gate{
    grid-template-columns:27px minmax(0,1fr) auto;
    gap:7px;
    padding:8px 9px;
  }

  .premium-gate .premium-lock-symbol,
  .premium-gate .premium-lock-symbol.large{
    width:27px;
    height:27px;
  }

  .premium-gate strong,
  .premium-full-reading-gate strong{
    font-size:.82rem;
  }

  .premium-gate p{
    font-size:.63rem;
  }

  .premium-details-link{
    min-height:27px;
    padding:5px 7px;
    font-size:.56rem;
  }

  .premium-showcase.premium-showcase-compact{
    padding:15px 13px;
  }

  .premium-showcase-compact h2{
    font-size:1.08rem;
  }

  .premium-compact-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .premium-compact-actions span{
    text-align:left;
  }
}

@media(max-width:370px){
  .premium-gate,
  .premium-full-reading-gate,
  .premium-depth-gate,
  .premium-clarifier-gate,
  .premium-interpretation-gate,
  .premium-saved-gate{
    grid-template-columns:25px minmax(0,1fr);
  }

  .premium-details-link{
    grid-column:2;
    justify-self:start;
  }
}



/* =========================================================
   TAROT ECHOES v13.58 — STRIPE BILLING FOUNDATION
   ========================================================= */

.premium-billing{
  margin-top:14px;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(232,211,241,.14);
}

.premium-billing-heading,
.account-billing-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.premium-billing-heading strong,
.account-billing-heading strong{
  color:#f8e6a6;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.93rem;
}

.premium-billing-heading p,
.account-billing-heading p{
  margin:3px 0 0;
  color:#cdbfd4;
  font-size:.68rem;
  line-height:1.38;
}

#premiumBillingMessage[data-tone="error"]{ color:#ffd0d0; }
#premiumBillingMessage[data-tone="warning"]{ color:#ffe4a8; }
#premiumBillingMessage[data-tone="success"]{ color:#d9ffd8; }

.premium-billing-status{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 8px;
  border-radius:999px;
  color:#442052;
  background:#f8e49b;
  font-size:.61rem;
  font-weight:950;
  white-space:nowrap;
}

.premium-plan-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:11px;
}

.premium-plan-card{
  display:grid;
  gap:4px;
  padding:11px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(232,211,241,.15);
}

.premium-plan-card-annual{
  border-color:rgba(248,229,163,.25);
}

.premium-plan-name{
  color:#d8c7df;
  font-size:.65rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.premium-plan-price{
  color:#fff0b3;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.02rem;
}

.premium-plan-detail{
  min-height:26px;
  color:#bfaec8;
  font-size:.61rem;
  line-height:1.25;
}

.premium-plan-card .btn{
  width:100%;
  min-height:34px;
  margin-top:3px;
  padding:7px 9px;
  font-size:.68rem;
}

.premium-active-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  margin-top:11px;
  padding:11px;
  border-radius:14px;
  background:rgba(248,229,163,.055);
  border:1px solid rgba(248,229,163,.18);
}

.premium-active-actions strong,
.premium-active-actions span{
  display:block;
}

.premium-active-actions strong{
  color:#fff0b3;
  font-size:.86rem;
}

.premium-active-actions span{
  margin-top:3px;
  color:#cabbd2;
  font-size:.65rem;
  line-height:1.34;
}

.premium-signin-link{
  display:block;
  margin:10px auto 0;
  padding:4px;
  color:#dbcbe3;
  background:transparent;
  border:0;
  font:800 .65rem/1.2 inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.account-billing-card{
  margin-top:13px;
  padding:13px;
  border-radius:16px;
  background:rgba(98,52,116,.08);
  border:1px solid rgba(117,69,136,.18);
}

.account-billing-heading strong{ color:#5a226d; }
.account-billing-heading p{ color:#6f5d76; }

.account-billing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

@media(max-width:520px){
  .premium-plan-options{ grid-template-columns:1fr 1fr; }
  .premium-plan-card{ padding:9px; }
  .premium-plan-price{ font-size:.92rem; }
  .premium-active-actions{ align-items:flex-start; flex-direction:column; }
}

@media(max-width:360px){
  .premium-plan-options{ grid-template-columns:1fr; }
}


/* Fortune Machine — The Echo Oracle */
.fortune-machine-tab{white-space:nowrap}
.fortune-note{
  margin:-.35rem 0 1.15rem;
  color:#7b5b90;
  text-align:center;
  font-style:italic;
}
.fortune-layout{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:1.1rem;
  align-items:start;
}
.fortune-machine-shell{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.fortune-machine{
  position:relative;
  overflow:hidden;
  padding:1rem 1rem 2.2rem;
  border-radius:30px;
  background:linear-gradient(180deg,#4a123d 0%,#2b0724 55%,#160011 100%);
  border:1px solid rgba(214,184,97,.5);
  box-shadow:0 18px 35px rgba(20,0,20,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.fortune-marquee{
  padding:.65rem .9rem;
  text-align:center;
  font-family:Georgia,serif;
  font-size:1.35rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f6e1a1;
  background:linear-gradient(180deg,#6d1438,#43112e);
  border:1px solid rgba(241,213,124,.55);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fortune-bulbs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:.45rem;
  margin:.75rem .25rem 1rem;
}
.fortune-bulbs span{
  height:12px;width:12px;border-radius:50%;justify-self:center;
  background:#f3d98f;box-shadow:0 0 12px rgba(247,214,126,.55);
}
.fortune-window{
  position:relative;
  min-height:280px;
  margin:0 auto 1rem;
  border-radius:26px;
  border:1px solid rgba(243,215,130,.55);
  background:radial-gradient(circle at 50% 18%,rgba(255,233,187,.12),transparent 34%),linear-gradient(180deg,#100410 0%,#23091f 68%,#100410 100%);
  box-shadow:inset 0 0 0 4px rgba(212,179,105,.09), inset 0 25px 35px rgba(255,255,255,.04);
  overflow:hidden;
}
.fortune-window::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.09),transparent 16%,transparent 84%,rgba(255,255,255,.05));
  pointer-events:none;
}
.fortune-curtain{
  position:absolute;top:0;bottom:0;width:18%;
  background:linear-gradient(180deg,#7d173d,#4d0b29 40%,#3a061e);
  z-index:2;
}
.fortune-curtain.left{left:0;border-right:1px solid rgba(234,203,125,.22)}
.fortune-curtain.right{right:0;border-left:1px solid rgba(234,203,125,.22)}
.fortune-oracle{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:150px;height:220px;
  z-index:1;
}
.fortune-oracle-halo{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,229,175,.35),rgba(191,140,255,.14) 52%,transparent 74%);
}
.fortune-oracle-head{
  position:absolute;left:50%;top:42px;transform:translateX(-50%);
  width:62px;height:72px;border-radius:35px;
  background:linear-gradient(180deg,#f2d6c6,#d8b4a6);
  box-shadow:0 0 0 5px rgba(54,11,38,.75);
}
.fortune-oracle-head::before,
.fortune-oracle-head::after{
  content:"";position:absolute;top:30px;width:7px;height:7px;border-radius:50%;background:#43223c;
}
.fortune-oracle-head::before{left:18px}
.fortune-oracle-head::after{right:18px}
.fortune-oracle-turban{
  position:absolute;left:50%;top:22px;transform:translateX(-50%);
  width:86px;height:42px;border-radius:32px 32px 18px 18px;
  background:linear-gradient(180deg,#8f2e78,#4b0a31);
  border:1px solid rgba(244,217,134,.4);
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.fortune-oracle-turban::after{
  content:"✦";position:absolute;left:50%;top:7px;transform:translateX(-50%);color:#f6df9a;font-size:1rem;
}
.fortune-oracle-body{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:122px;height:124px;border-radius:58px 58px 18px 18px;
  background:linear-gradient(180deg,#5d1848,#2e0b25);
  border:1px solid rgba(244,217,134,.28);
}
.fortune-oracle-body::after{
  content:"";position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:78px;height:28px;border-radius:30px;
  background:linear-gradient(180deg,rgba(245,224,161,.16),rgba(176,124,255,.08));
}
.fortune-oracle-orb{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f5edff 0%,#d2a9ff 18%,#7d3cd6 44%,#36115c 72%,#1d072d 100%);
  box-shadow:0 0 24px rgba(185,116,255,.45);
  border:2px solid rgba(243,215,130,.45);
}
.fortune-controls{
  display:flex;gap:.65rem;align-items:center;justify-content:center;flex-wrap:wrap;
}
.fortune-coin-slot{
  min-width:110px;padding:.6rem .9rem;border-radius:999px;
  border:1px solid rgba(243,215,130,.35);
  background:linear-gradient(180deg,rgba(255,236,187,.12),rgba(255,236,187,.04));
  color:#f2d486;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;text-align:center;
}
.fortune-ticket-slot{
  width:112px;height:12px;margin:1rem auto .2rem;border-radius:999px;background:#12000d;box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
}
.fortune-ticket{
  position:relative;
  max-width:240px;
  margin:0 auto;
  transform:translateY(-22px);
  opacity:0;
  transition:transform .7s ease,opacity .4s ease;
}
.fortune-ticket-inner{
  background:linear-gradient(180deg,#fff8ed,#f4ead3);
  color:#4a2f20;
  border-radius:16px;
  padding:1rem .95rem;
  border:1px dashed #c9b37a;
  box-shadow:0 12px 25px rgba(8,0,12,.25);
  text-align:center;
}
.fortune-ticket-kicker{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  color:#8e6d35;
  margin-bottom:.3rem;
}
.fortune-ticket strong{display:block;font-size:1rem;margin-bottom:.35rem;color:#5d3b28}
.fortune-ticket p{margin:0;font-size:.92rem;line-height:1.35;color:#6c513d}
.fortune-status{
  text-align:center;color:#69497d;margin:0;font-weight:600;
}
.fortune-result{display:none}
.fortune-result.visible{display:block}
.fortune-reading-card{min-height:100%}
.fortune-reading-body p + p{margin-top:.75rem}
.fortune-reading-meta{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem;
}
.fortune-meta-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .8rem;border-radius:999px;
  background:#ebdfb0;color:#47295d;font-weight:700;border:1px solid #d9bf59;font-size:.9rem;
}
.fortune-machine.working .fortune-bulbs span{animation:fortuneBlink .55s linear infinite}
.fortune-machine.working .fortune-oracle{animation:fortuneSway 1.6s ease-in-out infinite}
.fortune-machine.working .fortune-oracle-orb{animation:fortunePulse 1.35s ease-in-out infinite}
.fortune-machine.ticket-ready .fortune-ticket{transform:translateY(0);opacity:1}
@keyframes fortuneBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.86)}}
@keyframes fortunePulse{0%,100%{box-shadow:0 0 18px rgba(185,116,255,.3)}50%{box-shadow:0 0 32px rgba(210,167,255,.72)}}
@keyframes fortuneSway{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@media (max-width: 860px){
  .fortune-layout{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .fortune-machine{padding:.9rem .8rem 2rem}
  .fortune-window{min-height:244px}
  .fortune-marquee{font-size:1.15rem}
  .fortune-oracle{transform:translateX(-50%) scale(.92);transform-origin:bottom center}
  .fortune-meta-pill{font-size:.84rem}
}


/* Echo Oracle video experience */
body.fortune-video-open{overflow:hidden}
.fortune-video-layout{
  display:grid;
  grid-template-columns:minmax(0,448px) minmax(0,1fr);
  gap:1.2rem;
  align-items:start;
}
.fortune-static-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
.fortune-static-machine{
  position:relative;
  display:block;
  width:min(100%,448px);
  padding:0;
  border:0;
  border-radius:28px;
  overflow:hidden;
  background:#080808;
  cursor:pointer;
  box-shadow:0 22px 50px rgba(0,0,0,.42),0 0 0 1px rgba(245,215,123,.2);
}
.fortune-static-machine img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
}
.fortune-static-overlay{
  position:absolute;
  inset:auto 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:11px 14px;
  border-radius:17px;
  color:#fff5d0;
  background:linear-gradient(180deg,rgba(29,3,36,.78),rgba(13,0,18,.9));
  border:1px solid rgba(247,219,133,.4);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.32);
  pointer-events:none;
}
.fortune-static-overlay strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  color:#ffe29a;
}
.fortune-static-overlay small{color:#e3d5ea;font-size:.75rem}
.fortune-static-machine:hover .fortune-static-overlay,
.fortune-static-machine:focus-visible .fortune-static-overlay{filter:brightness(1.08)}
.fortune-static-machine:focus-visible{outline:3px solid rgba(255,216,106,.72);outline-offset:4px}
.fortune-controls-video{justify-content:center;margin-top:.15rem}
.fortune-result-kicker{
  display:block;
  margin-bottom:.35rem;
  color:#7b438f;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:900;
}
.fortune-video-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(4,0,8,.94);
  backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .25s ease;
}
.fortune-video-overlay.visible{opacity:1}
.fortune-video-stage{
  position:relative;
  width:min(92vw,448px);
  max-height:92vh;
  display:grid;
  place-items:center;
}
.fortune-video{
  display:block;
  width:100%;
  max-height:86vh;
  aspect-ratio:2/3;
  object-fit:contain;
  border-radius:22px;
  background:#000;
  box-shadow:0 0 0 1px rgba(245,215,123,.23),0 24px 70px rgba(0,0,0,.58);
}
.fortune-video-caption{
  position:absolute;
  left:50%;
  bottom:58px;
  transform:translateX(-50%);
  width:max-content;
  max-width:80%;
  padding:7px 11px;
  border-radius:999px;
  color:#f9e9ae;
  background:rgba(16,0,24,.7);
  border:1px solid rgba(245,215,123,.22);
  font-size:.75rem;
  font-weight:850;
  text-align:center;
  pointer-events:none;
}
.fortune-video-actions{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.fortune-video-sound,
.fortune-video-skip,
.fortune-video-play{
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(15,0,22,.76);
  backdrop-filter:blur(8px);
  padding:8px 12px;
  font-weight:850;
  cursor:pointer;
}
.fortune-video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-width:150px;
  background:linear-gradient(180deg,#ffd86a,#eab545);
  color:#31113e;
  border:0;
}
.fortune-video-overlay.needs-play .fortune-video{filter:brightness(.58)}
@media(max-width:860px){
  .fortune-video-layout{grid-template-columns:1fr}
  .fortune-result{width:100%}
}
@media(max-width:520px){
  .fortune-video-overlay{padding:8px}
  .fortune-video-stage{width:min(96vw,448px)}
  .fortune-video{max-height:88vh;border-radius:17px}
  .fortune-video-caption{bottom:54px;font-size:.68rem}
  .fortune-video-sound,.fortune-video-skip{padding:7px 10px;font-size:.72rem}
}

/* Emergency click-through fix: hidden fortune video overlay must not cover the site */
.fortune-video-overlay[hidden]{display:none !important;}
.fortune-video-overlay:not(.visible){pointer-events:none;}
.fortune-video-overlay.visible{pointer-events:auto;}

/* Version 13.67 — grouped reading chooser + Dream Echoes + Lunar Echoes */
.reading-choice-board{
  display:block !important;
  overflow:visible !important;
  padding:12px 0 10px !important;
}
.reading-choice-group{
  margin:0 0 12px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(248,229,163,.18);
  background:linear-gradient(145deg,rgba(44,13,60,.78),rgba(29,7,42,.84));
  box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.045);
}
.reading-choice-group:last-child{margin-bottom:0}
.reading-choice-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 10px;
}
.reading-choice-heading > div{display:flex;align-items:center;gap:7px;min-width:0}
.reading-choice-heading strong{
  color:#f8e5a3;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.02rem;
  letter-spacing:.01em;
}
.reading-choice-heading small{
  color:#bda9ca;
  font-size:.68rem;
  line-height:1.25;
  text-align:right;
  font-weight:750;
}
.reading-choice-icon{color:#ffd86a;font-size:.94rem}
.reading-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.reading-choice-board .reading-choice-grid .tab,
.reading-choice-board .birth-chart-tab,
.reading-choice-board .numerology-tab,
.reading-choice-board .dream-echoes-tab,
.reading-choice-board .lunar-echoes-tab{
  width:100% !important;
  min-width:0 !important;
  min-height:68px !important;
  grid-column:auto !important;
  padding:10px 9px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:normal !important;
  text-align:center;
  border:1.5px solid rgba(248,229,163,.28) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(64,27,82,.96),rgba(39,13,53,.96)) !important;
  color:#f7eefc !important;
  box-shadow:0 7px 16px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.reading-choice-board .reading-choice-grid .tab::after,
.reading-choice-board .birth-chart-tab::after,
.reading-choice-board .numerology-tab::after{content:none !important}
.reading-choice-board .reading-choice-grid .tab:hover{
  border-color:rgba(255,231,151,.58) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22),0 0 0 2px rgba(248,229,163,.08) !important;
}
.reading-choice-board .reading-choice-grid .tab.active{
  background:linear-gradient(180deg,#ffdc72,#e8ac38) !important;
  color:#351044 !important;
  border-color:#ffe8a1 !important;
  box-shadow:0 11px 25px rgba(0,0,0,.24),0 0 0 2px rgba(255,231,145,.20) !important;
}
.reading-choice-board .reading-choice-grid .tab.active small,
.reading-choice-board .reading-choice-grid .tab.active .tab-premium-mark,
.reading-choice-board .reading-choice-grid .tab.active .tab-free-download-mark,
.reading-choice-board .reading-choice-grid .tab.active .tab-free-feature-mark{color:#4d295b !important}
.choice-featured{grid-column:1 / -1 !important;min-height:76px !important}
.choice-title,.feature-tab-title,.tab-choice-title{
  display:block;
  font-weight:900;
  font-size:.94rem;
  line-height:1.14;
}
.reading-choice-board .tab small{
  display:block;
  color:#ccbcd7;
  font-size:.66rem;
  line-height:1.2;
  font-weight:750;
}
.reading-choice-board .tab-premium-mark,
.reading-choice-board .tab-free-download-mark,
.reading-choice-board .tab-free-feature-mark{
  position:static !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  min-height:18px;
  border-radius:999px;
  font-size:.58rem !important;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
  text-transform:none;
  background:#f8e5a3;
  color:#4b205e;
  border:1px solid #d4af37;
  box-shadow:none;
}
.premium-reading-group{
  background:linear-gradient(145deg,rgba(49,15,64,.64),rgba(25,6,35,.72));
  border-color:rgba(196,161,220,.18);
}
.self-discovery-group{
  background:linear-gradient(145deg,rgba(42,16,61,.84),rgba(27,8,42,.88));
}
.fun-guidance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fun-guidance-grid .crystal-ball-launch{
  grid-column:1 / -1;
  min-height:72px;
  margin:0;
  padding:10px 14px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(64,27,82,.96),rgba(39,13,53,.96));
  border:1.5px solid rgba(248,229,163,.28);
  box-shadow:0 7px 16px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.07);
}
.fun-guidance-grid .crystal-ball-launch:hover{
  border-color:rgba(255,231,151,.58);
  box-shadow:0 10px 22px rgba(0,0,0,.22),0 0 0 2px rgba(248,229,163,.08);
}
.fun-guidance-grid .crystal-launch-orb{width:42px;height:42px;font-size:1rem;flex:0 0 42px}
.fun-guidance-grid .crystal-launch-copy strong{font-size:1rem}
.fun-guidance-grid .crystal-launch-copy small{font-size:.68rem}
.fun-guidance-grid .crystal-launch-arrow{font-size:1rem}

/* Remove the old accidental lighter-purple emphasis from utility buttons. */
.reading-choice-board .fun-guidance-grid .tab:nth-child(1):not(.active),
.reading-choice-board .fun-guidance-grid .tab:nth-child(2):not(.active){
  background:linear-gradient(145deg,rgba(64,27,82,.96),rgba(39,13,53,.96)) !important;
  border-color:rgba(248,229,163,.28) !important;
}

/* Keep the selected Fun Guidance button visually consistent with every other selected reading. */
.reading-choice-board .fun-guidance-grid .tab.active{
  background:linear-gradient(180deg,#ffdc72,#e8ac38) !important;
  color:#351044 !important;
  border-color:#ffe8a1 !important;
  box-shadow:0 11px 25px rgba(0,0,0,.24),0 0 0 2px rgba(255,231,145,.20) !important;
}
.reading-choice-board .fun-guidance-grid .tab.active small{
  color:#4d295b !important;
}

.feature-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.feature-panel-heading h2{margin-bottom:5px}
.feature-panel-heading .panel-intro{margin-bottom:0}
.feature-panel-kicker{
  display:block;
  margin-bottom:5px;
  color:#f8e5a3;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.free-feature-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  background:#f8e5a3;
  color:#4b205e;
  border:1px solid #d4af37;
  font-size:.68rem;
  font-weight:950;
  white-space:nowrap;
}

/* Dream Echoes */
.dream-form{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(248,229,163,.17);
}
.dream-form label{
  display:block;
  margin-bottom:8px;
  color:#f8e5a3;
  font-weight:900;
}
.dream-input-row{display:grid;grid-template-columns:1fr;gap:10px}
.dream-input-row textarea{
  width:100%;
  min-width:0;
  min-height:112px;
  resize:vertical;
  border:1px solid rgba(248,229,163,.28);
  border-radius:14px;
  padding:13px 14px;
  background:rgba(17,0,28,.68);
  color:#fff;
  font:inherit;
  line-height:1.5;
  outline:none;
}
.dream-input-row textarea:focus{border-color:#f8e5a3;box-shadow:0 0 0 3px rgba(248,229,163,.10)}
.dream-input-row .btn{width:100%}
.dream-recognized-block{grid-column:1 / -1;background:#fff8db;border-color:#dfc75d}
.dream-result{display:none;margin-top:15px}
.dream-result.visible{display:block;animation:fadeUp .35s ease}
.dream-reading-card{max-width:700px;text-align:left}
.dream-result-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 6px;
  border-radius:50%;
  color:#fff3c1;
  background:radial-gradient(circle at 40% 35%,#c89bf4,#6b2e94 55%,#29103f 100%);
  box-shadow:0 0 24px rgba(132,72,177,.35);
  font-size:1.35rem;
}
.dream-result-kicker{
  display:block;
  text-align:center;
  color:#7b4b92;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.dream-reading-card > h3{text-align:center;color:#4d1d68;margin-top:4px}
.dream-reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.dream-insight-block{
  padding:13px;
  border-radius:14px;
  background:#f4ecfb;
  border:1px solid #dbc8ed;
}
.dream-insight-block span{
  display:block;
  margin-bottom:5px;
  color:#672986;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-weight:950;
}
.dream-insight-block p{margin:0;color:#38233f;line-height:1.55}
.dream-reflection-block,.dream-action-block{grid-column:1 / -1}
.dream-reflection-block{background:#fff8dc;border-color:#e7ce76}
.dream-reflection-block span{color:#6b5016}
.dream-action-block{background:#eee6f8}

/* Lunar Echoes */
.lunar-experience{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.lunar-visual-card{
  position:relative;
  overflow:hidden;
  min-height:360px;
  padding:22px 16px 18px;
  border-radius:24px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 28%,rgba(159,109,211,.30),transparent 31%),
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.15) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 24%,rgba(255,255,255,.12) 0 1px,transparent 1.5px),
    linear-gradient(165deg,#13001f,#35104d 58%,#170024);
  border:1px solid rgba(248,229,163,.22);
  box-shadow:0 18px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
}
.lunar-orbit{position:relative;width:190px;height:190px;margin:10px auto 18px;border-radius:50%;border:1px solid rgba(248,229,163,.15)}
.lunar-orbit::before,.lunar-orbit::after{content:"";position:absolute;inset:17px;border-radius:50%;border:1px solid rgba(201,163,230,.12)}
.lunar-orbit::after{inset:38px}
.lunar-moon{
  position:absolute;
  left:50%;top:50%;
  width:112px;height:112px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#f8f4e8 0%,#d8d2c5 42%,#9c96a0 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 28px rgba(210,180,255,.48);
}
.lunar-moon::before{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,rgba(84,79,84,.25) 0 5%,transparent 5.5%),
    radial-gradient(circle at 62% 36%,rgba(84,79,84,.20) 0 7%,transparent 7.5%),
    radial-gradient(circle at 48% 70%,rgba(84,79,84,.18) 0 8%,transparent 8.5%);
  opacity:.8;
}
.lunar-moon::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:#12001f;transition:transform .35s ease}
.lunar-moon[data-phase="new-moon"]::after{transform:translateX(0)}
.lunar-moon[data-phase="waxing-crescent"]::after{transform:translateX(-24%)}
.lunar-moon[data-phase="first-quarter"]::after{transform:translateX(-50%)}
.lunar-moon[data-phase="waxing-gibbous"]::after{transform:translateX(-76%)}
.lunar-moon[data-phase="full-moon"]::after{transform:translateX(-110%)}
.lunar-moon[data-phase="waning-gibbous"]::after{transform:translateX(76%)}
.lunar-moon[data-phase="last-quarter"]::after{transform:translateX(50%)}
.lunar-moon[data-phase="waning-crescent"]::after{transform:translateX(24%)}
.lunar-star{position:absolute;color:#f8e5a3;font-style:normal;opacity:.85}
.lunar-star.one{left:18px;top:28px}
.lunar-star.two{right:22px;top:58px}
.lunar-star.three{right:34px;bottom:28px;font-size:1.4rem}
.lunar-date{display:block;color:#cdb9d9;font-size:.72rem;font-weight:800}
.lunar-visual-card h3{margin:7px 0 4px;color:#f8e5a3;font-family:Georgia,"Times New Roman",serif;font-size:1.5rem}
.lunar-illumination{margin:0;color:#eadff1;font-size:.78rem;line-height:1.45}
.lunar-guidance-card{max-width:none;width:100%;text-align:left}
.lunar-guidance-kicker{display:block;color:#7b4b92;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:950}
.lunar-guidance-card h3{color:#4d1d68;margin:5px 0 12px}
.lunar-guidance-grid{display:grid;gap:10px}
.lunar-guidance-block{padding:13px;border-radius:14px;background:#f4ecfb;border:1px solid #dbc8ed}
.lunar-guidance-block span{display:block;margin-bottom:5px;color:#672986;font-size:.72rem;text-transform:uppercase;letter-spacing:.045em;font-weight:950}
.lunar-guidance-block p,.lunar-guidance-block blockquote{margin:0;color:#38233f;line-height:1.58}
.lunar-action-block{background:#fff8dc;border-color:#e7ce76}
.lunar-action-block span{color:#6b5016}
.lunar-affirmation-block{background:linear-gradient(145deg,#eadcf7,#f7effe)}
.lunar-affirmation-block blockquote{font-family:Georgia,"Times New Roman",serif;font-size:1.06rem;color:#4d1d68}
.lunar-method-note{text-align:center;margin-top:10px}

@media(max-width:700px){
  .reading-choice-heading{align-items:flex-start;flex-direction:column;gap:3px}
  .reading-choice-heading small{text-align:left}
  .reading-choice-group{padding:10px}
  .reading-choice-board .reading-choice-grid .tab{min-height:64px !important;font-size:.82rem !important}
  .choice-featured{min-height:72px !important}
  .feature-panel-heading{flex-direction:column;gap:7px}
  .dream-input-row{grid-template-columns:1fr}
  .dream-input-row .btn{width:100%}
  .dream-reading-grid{grid-template-columns:1fr}
  .dream-reflection-block,.dream-action-block{grid-column:auto}
  .lunar-experience{grid-template-columns:1fr}
  .lunar-visual-card{min-height:310px}
}
@media(max-width:390px){
  .reading-choice-grid{gap:7px}
  .reading-choice-board .reading-choice-grid .tab{padding:9px 6px !important}
  .choice-title,.feature-tab-title,.tab-choice-title{font-size:.85rem}
  .reading-choice-board .tab small{font-size:.61rem}
  .fun-guidance-grid .crystal-launch-copy small{font-size:.62rem}
}


/* =========================================================
   TAROT ECHOES v13.70 — HYBRID AI DREAM ECHOES
   ========================================================= */
.dream-ai-disclosure{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(248,229,163,.16);
  color:#ded0e8;
}
.dream-ai-disclosure strong{color:#f8e5a3}
.dream-ai-status{
  display:none;
  margin:10px 0 0;
  padding:10px 13px;
  border-radius:13px;
  color:#f5eafd;
  background:rgba(90,38,119,.35);
  border:1px solid rgba(207,177,232,.20);
  font-size:.88rem;
  line-height:1.45;
}
.dream-ai-status.visible{display:block}
.dream-ai-status.working::before{
  content:"✦";
  display:inline-block;
  margin-right:7px;
  color:#f8d86d;
  animation:dreamAiPulse .8s ease-in-out infinite alternate;
}
#decodeDream:disabled{cursor:wait;filter:saturate(.72);opacity:.82}
.dream-source-note{
  grid-column:1/-1;
  background:linear-gradient(145deg,#fff8dd,#f5e9bb) !important;
  border-color:#dfc36e !important;
}
.dream-source-note span{color:#6b5016 !important}
@keyframes dreamAiPulse{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}


/* Tarot Echoes v13.71 — expanded free testing spreads and deeper Lunar Echoes */
.tab-test-mark{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:linear-gradient(180deg,#fff1a8,#e3c057);color:#4b235f;border:1px solid rgba(255,243,177,.72);font-size:.62rem;font-weight:950;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.testing-access-note{display:inline-flex;margin:5px 0 14px;padding:7px 11px;border-radius:999px;background:rgba(248,229,163,.12);border:1px solid rgba(248,229,163,.28);color:#f8e5a3;font-size:.76rem;font-weight:850}
.compact-spread-question{margin-bottom:16px}.themed-spread-grid{margin-top:18px}.two-card-spread{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto}.six-card-spread{grid-template-columns:repeat(3,minmax(0,1fr))}.themed-spread-grid .spread-card .position{min-height:2.4em;display:flex;align-items:center;justify-content:center;line-height:1.18}.custom-spread-summary{margin-top:20px}
.spread-focus-echo{margin:0 0 14px;padding:13px 15px;border-radius:15px;background:#fff7d9;border:1px solid #e6cb72;color:#4c3514;text-align:left}.spread-focus-echo strong{display:block;margin-bottom:4px;color:#5d4219}.spread-focus-echo p{margin:0;line-height:1.55}
.custom-position-reading-grid{display:grid;gap:11px;margin:14px 0}.two-position-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.six-position-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-position-reading{padding:14px;border-radius:16px;background:#f4ebfb;border:1px solid #d9c3e8;text-align:left}.custom-position-reading>span,.path-comparison-grid>div>span{display:block;margin-bottom:5px;color:#7b3d91;font-size:.74rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase}.custom-position-reading h4,.path-comparison-grid h4{margin:0 0 7px;color:#511b69;font-family:Georgia,"Times New Roman",serif}.custom-position-reading p,.path-comparison-grid p{margin:0;line-height:1.58}
.custom-connection-reading,.custom-next-reading,.custom-reflection-reading{margin:11px 0;padding:15px;border-radius:16px;text-align:left;border:1px solid #d9c3e8}.custom-connection-reading{background:#f2e8fa}.custom-next-reading{background:#fff7d9;border-color:#e5cb76}.custom-reflection-reading{background:#efe6f7}.custom-connection-reading h4,.custom-next-reading h4,.custom-reflection-reading h4{margin:0 0 7px;color:#511b69}.custom-connection-reading p,.custom-next-reading p,.custom-reflection-reading p{margin:0;line-height:1.6}
.path-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:14px 0}.path-comparison-grid>div{padding:15px;border-radius:16px;background:#f4ebfb;border:1px solid #d9c3e8;text-align:left}
.lunar-cycle-progress{padding:14px;border-radius:16px;background:linear-gradient(145deg,#30103e,#53206b);color:#fff;text-align:left;border:1px solid rgba(248,229,163,.25)}.lunar-cycle-progress>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#f8e5a3;font-weight:900}.lunar-progress-track{height:9px;margin:9px 0;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}.lunar-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a96bd0,#f8e5a3);box-shadow:0 0 14px rgba(248,229,163,.35)}.lunar-cycle-progress p{margin:0;color:#e7dcec;font-size:.9rem;line-height:1.45}
.lunar-deep-dive{margin-top:4px;border-radius:18px;border:1px solid #d6c0e5;background:#f7f0fb;overflow:hidden;text-align:left}.lunar-deep-dive summary{cursor:pointer;padding:15px 17px;color:#54206c;font-weight:950;list-style:none}.lunar-deep-dive summary::-webkit-details-marker{display:none}.lunar-deep-dive summary::after{content:"＋";float:right}.lunar-deep-dive[open] summary::after{content:"−"}.lunar-deep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 13px 14px}.lunar-deep-grid section{padding:13px;border-radius:14px;background:#fff;border:1px solid #e3d4ec}.lunar-deep-grid span{display:block;margin-bottom:6px;color:#7a3d91;font-size:.74rem;font-weight:950;letter-spacing:.045em;text-transform:uppercase}.lunar-deep-grid p{margin:0;line-height:1.55}.lunar-deep-grid .lunar-ritual{background:#fff8df;border-color:#e7d181}.lunar-deep-grid .lunar-journal-question{grid-column:1/-1;background:#efe4f7}
@media(max-width:700px){.six-card-spread{grid-template-columns:repeat(2,minmax(0,1fr))}.six-position-summary,.lunar-deep-grid{grid-template-columns:1fr}.lunar-deep-grid .lunar-journal-question{grid-column:auto}}
@media(max-width:480px){.two-card-spread,.path-comparison-grid{grid-template-columns:1fr}}


/* Crossroads spread: true decision layout and readable narrative */
#crossroadsGrid{
  display:block;
  max-width:none;
}
.crossroads-spread-scroll{
  position:relative;
  width:100%;
  overflow-x:auto;
  padding:12px 8px 10px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 42%,rgba(245,215,123,.13),transparent 30%),
    linear-gradient(160deg,rgba(21,2,35,.72),rgba(64,18,78,.48));
  border:1px solid rgba(245,215,123,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.18);
}
.crossroads-spread-layout{
  position:relative;
  isolation:isolate;
  width:min(100%,560px);
  min-width:318px;
  min-height:390px;
  margin:0 auto;
  display:grid;
  grid-template-columns:72px 1fr 78px 1fr 72px;
  grid-template-rows:96px 62px 96px 104px;
  gap:7px 5px;
  align-items:center;
  justify-items:center;
}
.crossroads-spread-layout::before,
.crossroads-spread-layout::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(245,215,123,.44),transparent);
  box-shadow:0 0 18px rgba(208,164,255,.15);
}
.crossroads-spread-layout::before{
  left:8%;right:8%;top:42%;height:2px;
}
.crossroads-spread-layout::after{
  top:13%;bottom:9%;left:50%;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(245,215,123,.44),transparent);
}
.crossroads-layout-label{
  z-index:3;
  padding:5px 9px;
  border-radius:999px;
  color:#f8e5a3;
  background:rgba(31,4,42,.86);
  border:1px solid rgba(245,215,123,.34);
  font-size:.69rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 5px 14px rgba(0,0,0,.22);
}
.path-a-label{grid-column:1;grid-row:2}
.decision-label{grid-column:3;grid-row:1;align-self:start;margin-top:3px}
.path-b-label{grid-column:5;grid-row:2}
.crossroads-spread-layout .spread-card{
  width:70px;
  max-width:70px;
  min-width:0;
  margin:0;
  padding:3px;
  border-radius:9px;
  border:1px solid rgba(245,215,123,.42);
  background:#2a0838;
  box-shadow:0 9px 18px rgba(0,0,0,.32);
  cursor:pointer;
}
.crossroads-spread-layout .spread-card:hover,
.crossroads-spread-layout .spread-card:focus-visible{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,.38),0 0 0 2px rgba(245,215,123,.28);
}
.crossroads-spread-layout .spread-card .position{
  position:absolute;
  left:-6px;top:-7px;
  z-index:5;
  display:grid;
  place-items:center;
  width:22px;height:22px;
  min-height:0;
  padding:0;
  border-radius:50%;
  color:#2f114d;
  background:#f8e5a3;
  border:1px solid #d4af37;
  font-size:.7rem;
  font-weight:950;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.crossroads-spread-layout .spread-card img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:6px;
  display:block;
}
.crossroads-spread-layout .spread-card h3,
.crossroads-spread-layout .spread-card .card-orientation,
.crossroads-spread-layout .spread-card .mini-reading,
.crossroads-spread-layout .spread-card .card-actions{
  display:none !important;
}
.crossroads-pos-1{grid-column:3;grid-row:2;z-index:4}
.crossroads-pos-2{grid-column:1;grid-row:1}
.crossroads-pos-3{grid-column:1;grid-row:3}
.crossroads-pos-4{grid-column:5;grid-row:1}
.crossroads-pos-5{grid-column:5;grid-row:3}
.crossroads-pos-6{grid-column:3;grid-row:4}
.crossroads-position-guide{
  max-width:560px;
  margin:4px auto 0;
  color:#f3e8f8;
}
.crossroads-position-guide summary{
  cursor:pointer;
  text-align:center;
  color:#f8e5a3;
  font-weight:900;
  padding:9px;
}
.crossroads-position-key{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:4px 4px 8px;
}
.crossroads-position-key span{
  display:grid;
  grid-template-columns:25px 1fr;
  gap:1px 7px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.1);
}
.crossroads-position-key b{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  color:#2f114d;
  background:#f8e5a3;
  font-size:.72rem;
}
.crossroads-position-key em{
  color:#f8e5a3;
  font-size:.72rem;
  font-style:normal;
  font-weight:900;
}
.crossroads-position-key strong{
  color:#f5eef9;
  font-size:.76rem;
  line-height:1.25;
}
.crossroads-summary{
  padding:18px;
  overflow:hidden;
}
.crossroads-summary>h3{
  margin-bottom:14px;
}
.crossroads-summary p,
.crossroads-summary li{
  color:#321a3d !important;
  opacity:1 !important;
  text-shadow:none !important;
  font-size:1rem;
  line-height:1.62;
}
.crossroads-focus,
.crossroads-heart-reading,
.crossroads-comparison-reading,
.crossroads-lean-reading,
.crossroads-guidance-reading,
.crossroads-decision-check,
.crossroads-final-question{
  margin:11px 0;
  padding:16px;
  border-radius:17px;
  background:#fff;
  border:1px solid #dcc9e9;
  box-shadow:0 8px 18px rgba(47,17,77,.08);
  text-align:left;
}
.crossroads-focus{
  background:#fff8da;
  border-color:#e0c967;
}
.crossroads-focus strong,
.crossroads-section-kicker{
  display:block;
  margin-bottom:5px;
  color:#7a368d;
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.crossroads-heart-reading h4,
.crossroads-comparison-reading h4,
.crossroads-guidance-reading h4,
.crossroads-decision-check h4,
.crossroads-final-question h4{
  margin:0 0 8px;
  color:#541a69;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.16rem;
}
.crossroads-path-reading-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:12px 0;
}
.crossroads-path-reading{
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f7effc);
  border:1px solid #d9c3e8;
  box-shadow:0 9px 20px rgba(47,17,77,.09);
  text-align:left;
}
.path-a-reading{border-top:4px solid #b980d0}
.path-b-reading{border-top:4px solid #d4af37}
.crossroads-path-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid #e4d7ec;
}
.crossroads-path-heading span{
  color:#5a1d70;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.2rem;
  font-weight:900;
}
.crossroads-path-heading strong{
  color:#7c5188;
  font-size:.78rem;
}
.crossroads-card-reading{
  padding:11px;
  border-radius:13px;
  background:#f5ecfa;
  border:1px solid #dfcfea;
}
.crossroads-card-reading+ .crossroads-card-reading{margin-top:9px}
.crossroads-cost-reading{background:#fff9e4;border-color:#e8d78d}
.crossroads-card-reading>span{
  display:block;
  margin-bottom:3px;
  color:#7b3d91;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.crossroads-card-reading h5{
  margin:0 0 6px;
  color:#4d175f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
}
.crossroads-card-reading p{
  margin:0;
  font-size:.94rem;
}
.crossroads-path-verdict{
  margin:10px 1px 0 !important;
  font-size:.93rem !important;
}
.crossroads-comparison-reading{
  background:linear-gradient(135deg,#f5ebfb,#fff);
}
.crossroads-lean-reading{
  background:#f0e3f8;
  border-color:#cdaee0;
}
.crossroads-guidance-reading{
  background:#fff8d8;
  border-color:#e2c85e;
}
.crossroads-decision-check ul{
  margin:8px 0 0;
  padding-left:20px;
}
.crossroads-decision-check li+li{margin-top:7px}
.crossroads-final-question{
  border:1px solid #bd8ed1;
  background:linear-gradient(135deg,#efe0f8,#fff);
}
@media(max-width:700px){
  .crossroads-path-reading-grid{grid-template-columns:1fr}
  .crossroads-position-key{grid-template-columns:1fr}
}
@media(max-width:430px){
  .crossroads-spread-scroll{padding:10px 2px 8px}
  .crossroads-spread-layout{
    min-width:300px;
    grid-template-columns:58px 1fr 64px 1fr 58px;
    grid-template-rows:84px 54px 84px 92px;
    min-height:345px;
    gap:5px 3px;
  }
  .crossroads-spread-layout .spread-card{width:56px;max-width:56px;padding:2px;border-radius:7px}
  .crossroads-layout-label{font-size:.58rem;padding:4px 6px}
  .crossroads-summary{padding:14px 10px}
  .crossroads-focus,
  .crossroads-heart-reading,
  .crossroads-comparison-reading,
  .crossroads-lean-reading,
  .crossroads-guidance-reading,
  .crossroads-decision-check,
  .crossroads-final-question{padding:14px 13px}
  .crossroads-summary p,.crossroads-summary li{font-size:.96rem}
}


/* Tarot Echoes v13.73 — relationship layout + site-wide reading readability audit */
#relationshipGrid{
  display:block;
  max-width:none;
}
.relationship-spread-scroll{
  position:relative;
  width:100%;
  overflow-x:auto;
  padding:12px 8px 10px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 43%,rgba(190,123,222,.18),transparent 29%),
    radial-gradient(circle at 15% 20%,rgba(245,215,123,.10),transparent 25%),
    linear-gradient(160deg,rgba(21,2,35,.74),rgba(67,19,82,.50));
  border:1px solid rgba(245,215,123,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.18);
}
.relationship-spread-layout{
  position:relative;
  isolation:isolate;
  width:min(100%,560px);
  min-width:318px;
  min-height:410px;
  margin:0 auto;
  padding-top:28px;
  display:grid;
  grid-template-columns:72px 1fr 78px 1fr 72px;
  grid-template-rows:98px 74px 92px 105px;
  gap:7px 5px;
  align-items:center;
  justify-items:center;
}
.relationship-spread-layout::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:11%;right:11%;top:116px;height:175px;
  background:
    linear-gradient(90deg,rgba(245,215,123,.05),rgba(245,215,123,.34),rgba(245,215,123,.05)) center 1px/100% 1px no-repeat,
    linear-gradient(90deg,rgba(245,215,123,.05),rgba(245,215,123,.28),rgba(245,215,123,.05)) center calc(100% - 1px)/100% 1px no-repeat,
    linear-gradient(180deg,rgba(245,215,123,.06),rgba(245,215,123,.35),rgba(245,215,123,.06)) center/1px 100% no-repeat;
  pointer-events:none;
}
.relationship-layout-label{
  position:absolute;
  top:2px;
  padding:5px 9px;
  border-radius:999px;
  color:#f8e5a3;
  background:rgba(79,26,96,.88);
  border:1px solid rgba(245,215,123,.28);
  font-size:.63rem;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.relationship-you-label{left:4%}
.relationship-center-label{left:50%;transform:translateX(-50%)}
.relationship-them-label{right:4%}
.relationship-spread-layout .spread-card{
  width:70px;
  max-width:70px;
  min-width:0;
  padding:3px;
  border-radius:9px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.30),0 0 0 1px rgba(245,215,123,.18);
}
.relationship-spread-layout .spread-card .position{
  position:absolute;
  z-index:3;
  width:19px;height:19px;
  margin:-7px 0 0 -7px;
  display:grid;
  place-items:center;
  min-height:0;
  border-radius:50%;
  color:#321041;
  background:#f8e5a3;
  border:1px solid #d4af37;
  font-size:.65rem;
  line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.relationship-spread-layout .spread-card img{
  width:100%;
  aspect-ratio:2/3;
  border-radius:6px;
}
.relationship-spread-layout .spread-card h3,
.relationship-spread-layout .spread-card .card-orientation,
.relationship-spread-layout .spread-card .mini-reading,
.relationship-spread-layout .spread-card .card-actions{display:none!important}
.relationship-pos-1{grid-column:1;grid-row:1}
.relationship-pos-2{grid-column:5;grid-row:1}
.relationship-pos-3{grid-column:3;grid-row:2}
.relationship-pos-4{grid-column:3;grid-row:3}
.relationship-pos-5{grid-column:1;grid-row:4}
.relationship-pos-6{grid-column:5;grid-row:4}
.relationship-position-guide{
  margin:8px auto 0;
  max-width:720px;
  color:#f5eafd;
}
.relationship-position-guide summary{
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  color:#f8e5a3;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(245,215,123,.20);
  font-weight:900;
  text-align:center;
}
.relationship-position-key{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.relationship-position-key span{
  display:grid;
  grid-template-columns:24px 1fr;
  column-gap:8px;
  padding:10px;
  border-radius:12px;
  background:#f7f0fb;
  border:1px solid #ddcaeb;
  color:#2f163d;
  text-align:left;
}
.relationship-position-key b{
  grid-row:1/3;
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#351044;
  background:#f8e5a3;
  border:1px solid #d4af37;
}
.relationship-position-key em{
  color:#7b3d91;
  font-size:.72rem;
  font-style:normal;
  font-weight:950;
  text-transform:uppercase;
}
.relationship-position-key strong{
  color:#371645;
  font-size:.88rem;
  line-height:1.35;
}
.relationship-summary>h3{margin-bottom:12px}
.relationship-summary p,
.relationship-summary li{
  color:#2f163d!important;
  opacity:1!important;
  text-shadow:none!important;
  font-size:1rem;
  line-height:1.65;
}
.relationship-mirror-intro,
.relationship-side-reading,
.relationship-center-reading,
.relationship-strength-reading,
.relationship-direction-reading,
.relationship-core-message,
.relationship-reflection-reading{
  margin:11px 0;
  padding:15px;
  border-radius:16px;
  color:#2f163d!important;
  background:#f5edf9;
  border:1px solid #d9c5e7;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.relationship-mirror-intro{background:#fff8df;border-color:#e5d083}
.relationship-side-reading-grid,
.relationship-center-reading-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin:11px 0;
}
.relationship-side-reading,
.relationship-center-reading{margin:0}
.relationship-side-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
  padding-bottom:8px;
  border-bottom:1px solid #dfcfeb;
}
.relationship-side-heading span,
.relationship-section-kicker{
  display:block;
  color:#7b3d91!important;
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.relationship-side-heading strong{
  color:#4d1769!important;
  font-size:.78rem;
}
.relationship-summary h4,
.relationship-summary h5{
  margin:0 0 8px;
  color:#4d1769!important;
  opacity:1!important;
  text-shadow:none!important;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.32;
}
.relationship-unspoken-reading{background:#f0e7f7}
.relationship-strength-reading{background:#fff8df;border-color:#e5d083}
.relationship-direction-reading{background:#eee4f7}
.relationship-core-message{background:#f8f2fb}
.relationship-reflection-reading{background:#fff;border-color:#dfd0e9}
.relationship-reflection-reading ul{margin:8px 0 0;padding-left:1.2rem}
.relationship-reflection-reading li+li{margin-top:7px}

/* Strong readability guardrails for every light reading-result surface. */
.reading-card,
.reading-card p,
.reading-card li,
.reading-card .reading-text,
.reading-card .reading-text p,
.spread-card,
.spread-card h3,
.spread-card .mini-reading,
.spread-card .mini-reading p,
.spread-card .mini-reading li{
  color:#2f163d!important;
  opacity:1!important;
  text-shadow:none!important;
}
.spread-summary .spread-focus-echo,
.spread-summary .spread-focus-echo p,
.spread-summary .custom-position-reading,
.spread-summary .custom-position-reading p,
.spread-summary .custom-connection-reading,
.spread-summary .custom-connection-reading p,
.spread-summary .custom-next-reading,
.spread-summary .custom-next-reading p,
.spread-summary .custom-reflection-reading,
.spread-summary .custom-reflection-reading p,
.spread-summary .path-comparison-grid>div,
.spread-summary .path-comparison-grid p,
.lunar-deep-dive,
.lunar-deep-dive p,
.dream-insight-block,
.dream-insight-block p{
  color:#2f163d!important;
  opacity:1!important;
  text-shadow:none!important;
}
.spread-summary .custom-position-reading h4,
.spread-summary .custom-connection-reading h4,
.spread-summary .custom-next-reading h4,
.spread-summary .custom-reflection-reading h4,
.spread-summary .path-comparison-grid h4,
.lunar-deep-dive h3,
.lunar-deep-dive h4,
.dream-insight-block h3,
.dream-insight-block h4{
  color:#4d1769!important;
  opacity:1!important;
  text-shadow:none!important;
}
.favorite-reading-text .relationship-mirror-intro,
.favorite-reading-text .relationship-side-reading,
.favorite-reading-text .relationship-center-reading,
.favorite-reading-text .relationship-strength-reading,
.favorite-reading-text .relationship-direction-reading,
.favorite-reading-text .relationship-core-message,
.favorite-reading-text .relationship-reflection-reading{
  background:#f6effb!important;
  border:1px solid #ddcaec!important;
  color:#2f163d!important;
  box-shadow:none!important;
}
.favorite-reading-text .relationship-summary p,
.favorite-reading-text .relationship-summary li,
.history-full-reading .relationship-summary p,
.history-full-reading .relationship-summary li{
  color:#2f163d!important;
  opacity:1!important;
  text-shadow:none!important;
}
@media(max-width:700px){
  .relationship-side-reading-grid,
  .relationship-center-reading-grid,
  .relationship-position-key{grid-template-columns:1fr}
}
@media(max-width:480px){
  .relationship-spread-scroll{padding:10px 2px 8px}
  .relationship-spread-layout{
    min-width:310px;
    min-height:380px;
    grid-template-columns:60px 1fr 64px 1fr 60px;
    grid-template-rows:90px 68px 88px 98px;
    gap:5px 3px;
  }
  .relationship-spread-layout .spread-card{width:56px;max-width:56px;padding:2px;border-radius:7px}
  .relationship-layout-label{font-size:.55rem;padding:4px 6px}
  .relationship-summary{padding:14px 10px}
  .relationship-mirror-intro,
  .relationship-side-reading,
  .relationship-center-reading,
  .relationship-strength-reading,
  .relationship-direction-reading,
  .relationship-core-message,
  .relationship-reflection-reading{padding:14px 13px}
  .relationship-summary p,.relationship-summary li{font-size:.96rem}
}


/* Dream Echoes AI usage counter — 3 readings per rolling 24 hours */
.dream-ai-usage{
  margin:14px 0 16px;
  padding:12px 14px;
  border:1px solid rgba(248,229,163,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(31,8,43,.74),rgba(79,39,91,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dream-ai-usage-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#f7e8bd;
  font-size:.9rem;
  font-weight:800;
}
.dream-ai-usage-main strong{
  flex:0 0 auto;
  min-width:58px;
  padding:6px 11px;
  border:1px solid rgba(248,229,163,.52);
  border-radius:999px;
  background:rgba(248,229,163,.12);
  color:#ffe895;
  font-size:1rem;
  line-height:1;
  text-align:center;
}
.dream-ai-usage-track{
  height:6px;
  margin:9px 0 8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}
.dream-ai-usage-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f2c34b,#ffe79b);
  transition:width .28s ease;
}
.dream-ai-usage small{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:.78rem;
  line-height:1.45;
}
.dream-ai-usage.at-limit{
  border-color:rgba(255,205,109,.48);
  background:linear-gradient(135deg,rgba(61,20,49,.82),rgba(93,44,70,.54));
}
.dream-ai-usage.at-limit .dream-ai-usage-main strong{
  background:rgba(255,205,109,.18);
}


/* Dream Echoes request animation — waits for the live AI response */
body.dream-journey-open{overflow:hidden}
.dream-journey-overlay[hidden]{display:none!important}
.dream-journey-overlay{
  position:fixed;
  inset:0;
  z-index:2200;
  display:none;
  place-items:center;
  padding:22px;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 28%,rgba(121,64,158,.24),transparent 34%),
    linear-gradient(180deg,rgba(16,0,30,.95),rgba(6,0,14,.97));
  backdrop-filter:blur(14px);
}
.dream-journey-overlay.visible{
  display:grid;
  opacity:1;
  pointer-events:auto;
  animation:dreamOverlayIn .3s ease both;
}
.dream-journey-card{
  position:relative;
  isolation:isolate;
  width:min(92vw,430px);
  overflow:hidden;
  padding:28px 22px 24px;
  border:1px solid rgba(246,218,139,.38);
  border-radius:28px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 13%,rgba(192,142,232,.22),transparent 34%),
    linear-gradient(150deg,rgba(64,19,88,.98),rgba(26,5,43,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.07);
}
.dream-journey-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-2;
  background:conic-gradient(from 20deg,transparent,rgba(194,145,235,.12),transparent 25%,rgba(246,218,139,.1),transparent 54%,rgba(139,85,184,.14),transparent 76%);
  animation:dreamAuraTurn 12s linear infinite;
}
.dream-journey-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 22%,rgba(255,255,255,.055) 45%,transparent 66%);
  transform:translateX(-100%);
  animation:dreamGlassSweep 3.6s ease-in-out infinite;
}
.dream-journey-sky{position:relative;height:190px;margin:-4px auto 2px}
.dream-moon-wrap{position:absolute;left:50%;top:46%;width:130px;height:130px;transform:translate(-50%,-50%)}
.dream-moon{
  position:absolute;
  inset:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff8cf 0 10%,#f0d18a 36%,#ad78cd 68%,rgba(104,55,139,.55) 100%);
  box-shadow:0 0 18px rgba(255,236,171,.72),0 0 48px rgba(193,132,232,.56),0 0 85px rgba(128,70,172,.34);
  animation:dreamMoonBreathe 2.3s ease-in-out infinite;
}
.dream-moon span{color:#3d1456;font:700 4.1rem/1 Georgia,serif;transform:translateY(-2px);text-shadow:0 1px 0 rgba(255,255,255,.45)}
.dream-orbit{position:absolute;border:1px solid rgba(246,218,139,.34);border-radius:50%}
.dream-orbit-one{inset:5px;animation:dreamOrbit 8s linear infinite}
.dream-orbit-one::before,.dream-orbit-two::before{content:"✦";position:absolute;color:#ffe6a3;text-shadow:0 0 10px rgba(255,230,163,.9)}
.dream-orbit-one::before{right:8px;top:13px;font-size:.85rem}
.dream-orbit-two{inset:-12px;border-color:rgba(185,131,220,.27);animation:dreamOrbitReverse 11s linear infinite}
.dream-orbit-two::before{left:9px;bottom:19px;font-size:.62rem}
.dream-cloud{position:absolute;height:30px;border-radius:999px;filter:blur(5px);opacity:.62;background:linear-gradient(90deg,transparent,rgba(214,180,236,.42),rgba(255,238,188,.22),transparent)}
.dream-cloud-one{left:2%;right:33%;top:112px;animation:dreamCloudDrift 5.8s ease-in-out infinite}
.dream-cloud-two{left:30%;right:-2%;top:132px;animation:dreamCloudDrift 6.8s ease-in-out -2s infinite reverse}
.dream-cloud-three{left:12%;right:12%;top:155px;opacity:.35;animation:dreamCloudDrift 8s ease-in-out -1s infinite}
.dream-star{position:absolute;color:#ffeab0;text-shadow:0 0 12px rgba(255,234,176,.9);animation:dreamStarBlink 1.8s ease-in-out infinite}
.dream-star-1{left:12%;top:28px;font-size:1rem}.dream-star-2{right:12%;top:45px;font-size:.82rem;animation-delay:-.5s}.dream-star-3{left:20%;top:102px;font-size:.68rem;animation-delay:-1.1s}.dream-star-4{right:23%;top:104px;font-size:1.4rem;animation-delay:-.8s}.dream-star-5{right:31%;top:10px;font-size:.55rem;animation-delay:-1.4s}
.dream-journey-kicker{display:block;margin-top:-3px;color:#d9bce9;font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.dream-journey-card h2{margin:8px 0 8px;color:#f8dc91;font:700 clamp(1.65rem,6vw,2rem)/1.12 Georgia,"Times New Roman",serif;text-shadow:0 0 18px rgba(248,220,145,.16);transition:opacity .18s ease,transform .18s ease}
.dream-journey-card p{min-height:50px;margin:0 auto;color:#f2e9f7;font-size:1rem;line-height:1.55;transition:opacity .18s ease,transform .18s ease}
.dream-journey-card.is-changing h2,.dream-journey-card.is-changing p{opacity:.25;transform:translateY(5px)}
.dream-journey-card.is-complete .dream-moon{box-shadow:0 0 24px rgba(255,236,171,.92),0 0 64px rgba(193,132,232,.78),0 0 110px rgba(128,70,172,.52)}
.dream-journey-progress{height:7px;margin:20px 4px 12px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1)}
.dream-journey-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(246,218,139,.2),#f6da8b,#d9aef0,rgba(217,174,240,.2));animation:dreamProgressGlide 1.55s ease-in-out infinite}
.dream-journey-card small{display:block;color:rgba(239,224,246,.72);font-size:.76rem;line-height:1.45}
@keyframes dreamOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes dreamAuraTurn{to{transform:rotate(360deg)}}
@keyframes dreamGlassSweep{0%,52%{transform:translateX(-100%)}78%,100%{transform:translateX(100%)}}
@keyframes dreamMoonBreathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.045)}}
@keyframes dreamOrbit{to{transform:rotate(360deg)}}
@keyframes dreamOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes dreamCloudDrift{0%,100%{transform:translateX(-8px) scaleX(.96)}50%{transform:translateX(12px) scaleX(1.04)}}
@keyframes dreamStarBlink{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1.15)}}
@keyframes dreamProgressGlide{0%{transform:translateX(-115%)}100%{transform:translateX(350%)}}
@media(prefers-reduced-motion:reduce){
  .dream-journey-card::before,.dream-journey-card::after,.dream-moon,.dream-orbit,.dream-cloud,.dream-star,.dream-journey-progress span{animation:none!important}
  .dream-journey-card h2,.dream-journey-card p{transition:none!important}
}

/* Version 13.80 — Dream Echoes copy cleanup and compact spacing */
.dream-echoes-panel .feature-panel-heading{
  margin-bottom:4px;
}
.dream-echoes-panel .dream-ai-usage{
  margin-top:10px;
}

/* Version 13.81 — Ask the Echo AI follow-up */
.ask-echo-shell{
  position:relative;
  overflow:hidden;
  margin:0 0 16px;
  padding:17px;
  border-radius:18px;
  color:#fff8df;
  background:
    radial-gradient(circle at 15% 5%,rgba(255,222,112,.18),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(186,126,255,.22),transparent 34%),
    linear-gradient(145deg,#2a063d 0%,#48175e 54%,#291039 100%);
  border:1px solid rgba(248,229,163,.44);
  box-shadow:0 14px 28px rgba(32,0,48,.24),inset 0 1px 0 rgba(255,255,255,.08);
}
.ask-echo-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:
    radial-gradient(circle at 12% 24%,rgba(255,255,255,.78) 0 1px,transparent 1.7px),
    radial-gradient(circle at 76% 17%,rgba(255,230,142,.75) 0 1px,transparent 1.8px),
    radial-gradient(circle at 88% 68%,rgba(255,255,255,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 34% 82%,rgba(220,186,255,.6) 0 1px,transparent 1.8px);
}
.ask-echo-shell>*{position:relative;z-index:1}
.ask-echo-heading{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.ask-echo-heading h4{margin:1px 0 0!important;color:#fff2ba!important;font-size:1.22rem!important;letter-spacing:.01em}
.ask-echo-kicker{color:#d9c6e6;font-size:.69rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ask-echo-counter{
  margin-left:auto;
  min-width:52px;
  padding:7px 10px;
  border-radius:999px;
  text-align:center;
  color:#ffe997;
  background:rgba(18,0,29,.34);
  border:1px solid rgba(248,229,163,.42);
  font-weight:950;
  line-height:1;
}
.ask-echo-mini-orb{
  position:relative;
  flex:0 0 44px;
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fffbe4 0 5%,#e8c9ff 17%,#9b59c5 42%,#3a0b55 72%);
  box-shadow:0 0 0 3px rgba(248,229,163,.15),0 0 20px rgba(208,146,255,.48),inset -7px -8px 13px rgba(18,0,30,.44);
}
.ask-echo-mini-orb i,.ask-echo-mini-orb b,.ask-echo-mini-orb em{position:absolute;display:block;border-radius:50%;background:#fff4b8;box-shadow:0 0 8px #fff4b8}
.ask-echo-mini-orb i{width:4px;height:4px;left:12px;top:11px}
.ask-echo-mini-orb b{width:3px;height:3px;right:10px;top:16px}
.ask-echo-mini-orb em{width:2px;height:2px;left:20px;bottom:9px}
.ask-echo-intro{margin:0 0 13px;color:#eee2f4;line-height:1.5;font-size:.91rem}
.ask-echo-label{display:block;margin:0 0 6px;color:#ffeaa4;font-size:.82rem;font-weight:900}
.ask-echo-input{
  width:100%;min-height:92px;resize:vertical;
  padding:12px 13px;
  border-radius:13px;
  border:1px solid rgba(248,229,163,.35);
  background:rgba(17,0,27,.62);
  color:#fff;
  font:inherit;
  line-height:1.48;
  outline:none;
}
.ask-echo-input::placeholder{color:#bcaac8}
.ask-echo-input:focus{border-color:#ffe071;box-shadow:0 0 0 3px rgba(255,224,113,.13)}
.btn.ask-echo-button{
  width:100%;
  margin-top:10px;
  padding:12px 16px;
  border:1px solid #fff0af;
  border-radius:999px;
  color:#351044;
  background:linear-gradient(180deg,#ffe889,#efb936);
  box-shadow:0 8px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.66);
  font-weight:950;
}
.btn.ask-echo-button:active{transform:translateY(1px) scale(.992)}
.btn.ask-echo-button:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.6)}
.ask-echo-limit-note{margin-top:10px;color:#ccbcd6;font-size:.72rem;line-height:1.42}
.ask-echo-status{min-height:0;margin-top:9px;color:#ffe49a;font-size:.82rem;font-weight:800;line-height:1.4}
.ask-echo-status:not(:empty){padding:9px 11px;border-radius:11px;background:rgba(255,227,136,.1);border:1px solid rgba(255,227,136,.2)}
.ask-echo-shell.at-limit .ask-echo-counter{color:#f6d5d5;border-color:rgba(255,170,170,.42);background:rgba(94,16,40,.35)}
.ask-echo-listening{
  margin-top:12px;
  padding:14px 12px;
  border-radius:14px;
  text-align:center;
  background:rgba(13,0,23,.42);
  border:1px solid rgba(218,179,255,.22);
}
.ask-echo-listening[hidden]{display:none!important}
.ask-echo-listening strong{display:block;margin:6px 0 3px;color:#fff0b3;font-size:.95rem}
.ask-echo-listening p{margin:0;color:#d8c9e2;font-size:.78rem;line-height:1.4}
.ask-echo-listening-orb{position:relative;width:54px;height:54px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fffbe8 0 5%,#dbaeff 17%,#7b319f 48%,#270638 76%);box-shadow:0 0 26px rgba(201,128,255,.62)}
.ask-echo-listening-orb::before,.ask-echo-listening-orb::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(255,231,143,.42);border-radius:50%;animation:askEchoRing 1.8s ease-out infinite}
.ask-echo-listening-orb::after{inset:-13px;animation-delay:.55s;border-color:rgba(211,164,255,.34)}
.ask-echo-listening-orb span{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff4b5;box-shadow:0 0 8px #fff4b5;animation:askEchoStar 1.5s ease-in-out infinite}
.ask-echo-listening-orb span:nth-child(1){left:12px;top:14px}
.ask-echo-listening-orb span:nth-child(2){right:12px;top:20px;animation-delay:.35s}
.ask-echo-listening-orb span:nth-child(3){left:25px;bottom:10px;animation-delay:.7s}
.ask-echo-shell.is-listening .ask-echo-input,.ask-echo-shell.is-listening .ask-echo-button{display:none}
@keyframes askEchoRing{0%{opacity:.65;transform:scale(.72)}100%{opacity:0;transform:scale(1.22)}}
@keyframes askEchoStar{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}
.ask-echo-answer{display:grid;gap:10px;margin-top:12px}
.ask-echo-answer-kicker{color:#ffe897;font-size:.73rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.ask-echo-answer section,.ask-echo-question-saved{
  padding:11px 12px;
  border-radius:13px;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.11);
}
.ask-echo-answer section span,.ask-echo-question-saved strong{display:block;margin-bottom:4px;color:#ffe9a0;font-size:.77rem;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.ask-echo-answer p,.ask-echo-question-saved p{margin:0;color:#f5edf8;line-height:1.5;font-size:.88rem}
.ask-echo-answer .ask-echo-focus{background:rgba(255,229,143,.12);border-color:rgba(255,229,143,.25)}
.ask-echo-shell.is-answered .ask-echo-intro{margin-bottom:6px}
.ask-echo-shell+.journal-tools-section{padding-top:16px;border-top:1px solid #dfceef}
.history-ask-echo{margin-top:14px;padding:14px;border-radius:15px;background:linear-gradient(145deg,#f7effd,#fff8dc);border:1px solid #ddc8eb;color:#321441}
.history-ask-echo p{line-height:1.5}
.history-ask-echo .history-summary-kicker{color:#6c2d88}
@media(max-width:520px){
  .ask-echo-shell{padding:15px}
  .ask-echo-heading{gap:9px}
  .ask-echo-mini-orb{width:40px;height:40px;flex-basis:40px}
  .ask-echo-heading h4{font-size:1.12rem!important}
  .ask-echo-counter{min-width:48px;padding:6px 8px}
}
@media(prefers-reduced-motion:reduce){
  .ask-echo-listening-orb::before,.ask-echo-listening-orb::after,.ask-echo-listening-orb span{animation:none!important}
}


/* Version 13.82 — Ask the Echo mobile presentation polish (shared by every supported reading) */
.ask-echo-shell.is-answered{
  padding:16px;
  background:
    radial-gradient(circle at 12% 4%,rgba(255,225,124,.2),transparent 29%),
    radial-gradient(circle at 90% 12%,rgba(203,154,255,.2),transparent 32%),
    linear-gradient(150deg,#2a073c 0%,#421455 55%,#260c35 100%);
}
.ask-echo-shell.is-answered .ask-echo-heading{margin-bottom:11px}
.ask-echo-shell.is-answered .ask-echo-intro{display:none}
.ask-echo-shell.is-answered .ask-echo-answer{margin-top:2px}
.ask-echo-answer{
  display:grid;
  gap:12px;
}
.ask-echo-answer-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  margin:1px 1px 0;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,237,169,.24);
  color:#ffe9a0;
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.ask-echo-question-saved,
.ask-echo-answer section{
  position:relative;
  overflow:hidden;
  padding:14px 15px;
  border-radius:15px;
  box-shadow:0 7px 16px rgba(19,0,28,.14),inset 0 1px 0 rgba(255,255,255,.7);
}
.ask-echo-question-saved{
  background:linear-gradient(145deg,#efe1f6,#f8effa);
  border:1px solid #dfc7e8;
}
.ask-echo-answer section{
  background:linear-gradient(145deg,#fffdf7,#f8f1fb);
  border:1px solid #e5d6eb;
}
.ask-echo-answer .ask-echo-reading-answer{
  background:linear-gradient(145deg,#fff9e7,#fffdf9);
  border-color:#ead9a8;
}
.ask-echo-answer .ask-echo-card-connection{
  background:linear-gradient(145deg,#f8effd,#fffafd);
  border-color:#dfcbea;
}
.ask-echo-answer .ask-echo-focus{
  background:linear-gradient(145deg,#fff0b7,#fff8db);
  border-color:#e4c56f;
}
.ask-echo-answer section::after,
.ask-echo-question-saved::after{
  content:"";
  position:absolute;
  right:-26px;
  top:-34px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.65),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.ask-echo-answer section span,
.ask-echo-question-saved strong{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px;
  color:#512365;
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.ask-echo-answer section span::before,
.ask-echo-question-saved strong::before{
  display:grid;
  place-items:center;
  flex:0 0 23px;
  width:23px;
  height:23px;
  border-radius:50%;
  color:#fff7ce;
  background:linear-gradient(145deg,#6b2d87,#3e1456);
  box-shadow:0 3px 8px rgba(47,13,62,.18);
  font-size:.7rem;
}
.ask-echo-question-saved strong::before{content:"?"}
.ask-echo-reading-answer span::before{content:"1"}
.ask-echo-card-connection span::before{content:"2"}
.ask-echo-focus span::before{content:"3"}
.ask-echo-answer p,
.ask-echo-question-saved p{
  position:relative;
  z-index:1;
  margin:0;
  color:#3c2945;
  font-size:.95rem;
  line-height:1.64;
  letter-spacing:.002em;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.ask-echo-question-saved p{
  color:#4a3453;
  font-size:.91rem;
  font-style:italic;
  line-height:1.52;
}
.ask-echo-focus p{
  color:#3a2a23;
  font-weight:700;
}
.ask-echo-shell.is-answered .ask-echo-limit-note{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,237,169,.2);
  color:#dfd0e6;
  font-size:.74rem;
  line-height:1.46;
}
.history-ask-echo p,
.history-ask-echo .history-next-step,
.history-ask-echo .history-question-card{
  line-height:1.62;
  overflow-wrap:anywhere;
}
@media(max-width:520px){
  .ask-echo-shell.is-answered{padding:14px}
  .ask-echo-answer{gap:10px}
  .ask-echo-question-saved,.ask-echo-answer section{padding:13px}
  .ask-echo-answer p{font-size:.94rem;line-height:1.62}
  .ask-echo-question-saved p{font-size:.9rem}
}


/* Version 13.83 — Ask the Echo cache-busted, high-contrast mobile result cards.
   Shared component: Single, Daily, Yes/No, Challenge, PPF, Celtic, Relationship, Crossroads. */
.ask-echo-shell.is-answered .ask-echo-intro{display:none!important}
.ask-echo-shell.is-answered{
  color:#fff7e1!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,225,124,.24),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(211,164,255,.22),transparent 31%),
    linear-gradient(150deg,#250634 0%,#3d0f4f 54%,#21072f 100%)!important;
  border:1px solid rgba(255,229,151,.4)!important;
  box-shadow:0 12px 28px rgba(28,0,39,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.ask-echo-shell.is-answered .ask-echo-heading h4,
.ask-echo-shell.is-answered .ask-echo-kicker,
.ask-echo-shell.is-answered .ask-echo-answer-kicker{
  color:#ffe79a!important;
  -webkit-text-fill-color:#ffe79a!important;
}
.ask-echo-shell.is-answered .ask-echo-answer{
  display:grid!important;
  gap:12px!important;
  margin-top:4px!important;
}
.ask-echo-shell.is-answered .ask-echo-question-saved,
.ask-echo-shell.is-answered .ask-echo-answer section{
  position:relative!important;
  overflow:hidden!important;
  padding:14px 15px!important;
  border-radius:16px!important;
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
  box-shadow:0 8px 18px rgba(20,0,29,.18),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.ask-echo-shell.is-answered .ask-echo-question-saved{
  background:linear-gradient(145deg,#f1e4f7,#fbf5fd)!important;
  border:1px solid #ddc5e8!important;
}
.ask-echo-shell.is-answered .ask-echo-reading-answer{
  background:linear-gradient(145deg,#fff8df,#fffdf7)!important;
  border:1px solid #e7cf88!important;
}
.ask-echo-shell.is-answered .ask-echo-card-connection{
  background:linear-gradient(145deg,#f7effc,#fffafd)!important;
  border:1px solid #ddc8e8!important;
}
.ask-echo-shell.is-answered .ask-echo-focus{
  background:linear-gradient(145deg,#ffe9a0,#fff6d3)!important;
  border:1px solid #dcb94e!important;
}
.ask-echo-shell.is-answered .ask-echo-question-saved strong,
.ask-echo-shell.is-answered .ask-echo-answer section span{
  color:#542064!important;
  -webkit-text-fill-color:#542064!important;
  text-shadow:none!important;
}
.ask-echo-shell.is-answered .ask-echo-question-saved p,
.ask-echo-shell.is-answered .ask-echo-answer section p{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  color:#321a3a!important;
  -webkit-text-fill-color:#321a3a!important;
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
  font-size:.96rem!important;
  font-weight:600!important;
  line-height:1.58!important;
  letter-spacing:0!important;
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
}
.ask-echo-shell.is-answered .ask-echo-question-saved p{
  color:#4b3154!important;
  -webkit-text-fill-color:#4b3154!important;
  font-style:italic!important;
  font-weight:600!important;
}
.ask-echo-shell.is-answered .ask-echo-focus p{
  color:#39280f!important;
  -webkit-text-fill-color:#39280f!important;
  font-weight:800!important;
}
.ask-echo-shell.is-answered .ask-echo-limit-note{
  color:#e7d9ec!important;
  -webkit-text-fill-color:#e7d9ec!important;
}
@media(max-width:520px){
  .ask-echo-shell.is-answered{padding:14px!important}
  .ask-echo-shell.is-answered .ask-echo-answer{gap:10px!important}
  .ask-echo-shell.is-answered .ask-echo-question-saved,
  .ask-echo-shell.is-answered .ask-echo-answer section{padding:13px 14px!important}
  .ask-echo-shell.is-answered .ask-echo-question-saved p,
  .ask-echo-shell.is-answered .ask-echo-answer section p{font-size:.94rem!important;line-height:1.55!important}
}


/* Version 13.84 — History / My Journal journey view */
.history-view-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 18px;
  padding:6px;
  border:1px solid rgba(248,229,163,.24);
  border-radius:18px;
  background:rgba(19,2,30,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.history-view-tab{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#d9cde2;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

.history-view-tab b{
  min-width:28px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:inherit;
  font-size:.75rem;
  line-height:1.2;
}

.history-view-tab.active{
  border-color:#e7c85f;
  background:linear-gradient(180deg,#fff0ad,#f4ce55);
  color:#3b1450;
  box-shadow:0 7px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.78);
}

.history-view-tab:focus-visible{
  outline:3px solid rgba(248,229,163,.35);
  outline-offset:2px;
}

.journal-library-intro{
  margin-bottom:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(248,229,163,.24);
  background:linear-gradient(145deg,rgba(118,53,143,.28),rgba(43,9,62,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.journal-library-intro div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.journal-library-intro span{
  color:#f8e5a3;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.journal-library-intro strong{
  color:#fff3c2;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.24rem;
}

.journal-library-intro p{
  margin:8px 0 0;
  color:#dfd3e8;
  line-height:1.55;
}

.journal-library-list{
  display:grid;
  gap:14px;
}

.journal-library-entry{
  overflow:hidden;
  border-radius:19px;
  border:1px solid #d9c4e8;
  background:#fff;
  color:#2f163d;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.journal-library-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 12px;
  border-bottom:1px solid #eadff2;
  background:linear-gradient(180deg,#fbf7fd,#f4eafb);
}

.journal-library-head h3{
  margin:4px 0 0;
  color:#421255;
  font-size:1.08rem;
  line-height:1.25;
}

.journal-source-label{
  color:#7a3f91;
  font-size:.71rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.journal-library-head time{
  flex:0 0 auto;
  color:#796582;
  font-size:.72rem;
  line-height:1.35;
  text-align:right;
}

.journal-library-context,
.journal-library-cards{
  margin:12px 16px 0;
  padding:9px 11px;
  border-radius:11px;
  background:#f5eef9;
  color:#674875;
  font-size:.82rem;
  line-height:1.45;
}

.journal-library-cards{
  margin-top:8px;
  border:1px solid #eadcf2;
  background:#fff;
  color:#765282;
  font-weight:800;
}

.journal-library-note{
  margin:12px 16px;
  padding:15px;
  border:1px solid #ead17a;
  border-radius:14px;
  background:linear-gradient(180deg,#fff9df,#fff4c8);
  color:#4f3a0b;
  font-size:.96rem;
  line-height:1.65;
  overflow-wrap:anywhere;
}

.journal-library-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 16px;
}

.journal-library-actions .btn{
  flex:1 1 125px;
}

.journal-library-actions .delete-journal-entry{
  flex:0 1 auto;
}

.journal-library-empty{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:28px 20px;
  border:1px dashed rgba(248,229,163,.3);
  border-radius:18px;
  background:rgba(255,255,255,.055);
  color:#e6d9ed;
  text-align:center;
}

.journal-library-empty span{
  font-size:1.8rem;
}

.journal-library-empty strong{
  color:#fff0b7;
  font-size:1.05rem;
}

.journal-library-empty p{
  max-width:390px;
  margin:0;
  line-height:1.55;
}

.journal-saved-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.journal-view-link{
  flex:0 0 auto;
  border:0;
  border-bottom:1px solid currentColor;
  padding:2px 0;
  background:transparent;
  color:#6e2d89;
  font:inherit;
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
}

.journal-view-link:hover{
  color:#431253;
}

.history-item-highlight{
  animation:historyJournalHighlight 1.7s ease;
}

@keyframes historyJournalHighlight{
  0%,100%{box-shadow:0 12px 28px rgba(0,0,0,.22)}
  35%{box-shadow:0 0 0 4px rgba(248,229,163,.72),0 16px 34px rgba(0,0,0,.3)}
}

@media(max-width:560px){
  .history-view-switch{
    margin-top:2px;
  }

  .history-view-tab{
    padding:11px 8px;
    font-size:.92rem;
  }

  .journal-library-head{
    flex-direction:column;
  }

  .journal-library-head time{
    text-align:left;
  }

  .journal-saved-note{
    align-items:flex-start;
    flex-direction:column;
  }
}