/* ============================================================
     SCREEN WRAPPER
  ============================================================ */
  .screen{ min-height:100vh; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
  .is-hidden{ display:none !important; }

  /* Fade curtain: FULL BLACK, NO BLUR */
  .fade-curtain{
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    background: rgba(0,0,0,1);
    transition: opacity 520ms cubic-bezier(.18,.9,.2,1); /* JS overrides per hop */
  }
  .fade-curtain.is-on{ opacity: 1; }

  /* ============================================================
     WELCOME (parchment + brown ink)
  ============================================================ */
  .welcome{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 2.5rem 1.75rem;
    color: #3a2a18; /* dark brown ink */
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    background:
      radial-gradient(120% 120% at 50% 40%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%),
      radial-gradient(120% 120% at 50% 50%, rgba(90,70,40,0.10) 0%, rgba(0,0,0,0) 62%),
      radial-gradient(140% 140% at 18% 0%, rgba(255,252,242,0.98) 0%, rgba(249,238,214,0.98) 44%, rgba(235,216,176,0.98) 100%),
      radial-gradient(70% 55% at 72% 26%, rgba(160,120,70,0.13), rgba(0,0,0,0) 62%),
      radial-gradient(70% 70% at 28% 74%, rgba(120,80,40,0.11), rgba(0,0,0,0) 64%),
      repeating-linear-gradient(0deg,
        rgba(60,40,20,0.020),
        rgba(60,40,20,0.020) 2px,
        rgba(255,255,255,0) 3px,
        rgba(255,255,255,0) 7px
      ),
      repeating-linear-gradient(90deg,
        rgba(60,40,20,0.016),
        rgba(60,40,20,0.016) 2px,
        rgba(255,255,255,0) 3px,
        rgba(255,255,255,0) 9px
      );
    position: relative;
    overflow:hidden;
  }

  .welcome::before{
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;
    opacity:0.22;
    background:
      radial-gradient(1px 1px at 12% 18%, rgba(60,40,20,0.30) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 22% 62%, rgba(60,40,20,0.22) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 38% 35%, rgba(60,40,20,0.18) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 46% 78%, rgba(60,40,20,0.20) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 64% 22%, rgba(60,40,20,0.20) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 78% 66%, rgba(60,40,20,0.18) 40%, rgba(0,0,0,0) 60%),
      radial-gradient(1px 1px at 88% 34%, rgba(60,40,20,0.16) 40%, rgba(0,0,0,0) 60%);
    transform: rotate(-2deg) scale(1.2);
    filter: blur(0.2px);
  }

  /* WELCOME CARD — pastel pink */
  .welcome-card{
    width: min(44rem, 92vw);
    border-radius: 1.2rem;
    border: 1px solid rgba(58,42,24,0.14);
    background: rgba(255, 214, 229, 0.78); /* pastel pink */
    box-shadow:
      0 28px 72px rgba(0,0,0,0.14),
      inset 0 0 0 1px rgba(255,255,255,0.55),
      inset 0 22px 70px rgba(255,255,255,0.18);
    padding: 2.4rem 2rem;
    text-align:center;
    position: relative;
    overflow:hidden;
  }

  .welcome-card::before{
    content:"";
    position:absolute;
    inset:-42%;
    background:
      radial-gradient(40% 30% at 34% 36%, rgba(255,255,255,0.40), rgba(255,255,255,0) 60%),
      radial-gradient(40% 30% at 72% 56%, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
      radial-gradient(60% 50% at 45% 76%, rgba(140,70,90,0.10), rgba(0,0,0,0) 65%),
      radial-gradient(30% 30% at 62% 28%, rgba(255,235,245,0.26), rgba(0,0,0,0) 65%);
    transform: rotate(-6deg);
    pointer-events:none;
  }

  .welcome-title{
    margin:0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: 0.01em;
  }

  .welcome-sub{
    margin: 1rem 0 0 0;
    font-style: italic;
    font-size: 1.08rem;
    opacity: 0.92;
  }

  /* “yes” button: plain text weight */
  .btn-simple{
    margin-top: 1.15rem;
    padding:0.78rem 1.55rem;
    border-radius:0.85rem;
    border:1px solid rgba(58,42,24,0.32);
    background: rgba(255,255,255,0.80);
    cursor:pointer;
    font-weight: 500; /* plain */
    user-select:none;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    box-shadow: 0 18px 46px rgba(0,0,0,0.12);
    transition: transform 160ms ease, filter 180ms ease;
    color: #3a2a18;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .btn-simple:hover{ transform: translateY(-2px); filter: brightness(1.02); }
  .btn-simple:focus{ outline:3px solid rgba(58,42,24,0.18); outline-offset:4px; }

  /* ============================================================
     SHARED PANEL SYSTEM
  ============================================================ */
  :root{
    --rail-w: 20.25rem;
    --gap: 1.75rem;
    --radius: 1.1rem;
    --line: rgba(0,0,0,0.10);
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }

  .page{
    min-height:100vh;
    display:grid;
    grid-template-columns: var(--rail-w) 1fr;
    gap: var(--gap);
    padding: 1.75rem;
    align-items: stretch;
  }

  .panel{
    background: var(--rail-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow:
      0 18px 46px rgba(0,0,0,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.55),
      inset 0 18px 50px rgba(255,255,255,0.22);
    position: relative;
  }

  .panel::before{
    content:"";
    position:absolute;
    left:-20%;
    right:-20%;
    top:-40px;
    height: 140px;
    background:
      radial-gradient(60% 120% at 50% 50%, rgba(255,255,255,0.58), rgba(255,255,255,0) 70%),
      linear-gradient(180deg, var(--panel-sheen), rgba(0,0,0,0));
    transform: rotate(-3deg);
    opacity: 0.9;
    pointer-events:none;
  }

  .rail{
    position: sticky;
    top: 1.75rem;
    align-self:start;
    padding: 1.25rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-height: calc(100vh - 3.5rem);
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    color: var(--ink);
  }

  .rail-card{
    width:100%;
    max-width: 17.25rem;
    padding: 1.4rem 1.1rem 1.25rem;
    border-radius: 1.05rem;
    background: rgba(255,255,255,0.46);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.55),
      inset 0 18px 55px rgba(255,255,255,0.22);
    backdrop-filter: blur(2px);
    position: relative;
  }

  .kicker{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--muted-rgb),0.95);
    margin: 0 0 0.35rem 0;
  }

  .title{
    margin:0 0 1.15rem 0;
    font-size:1.6rem;
    letter-spacing:0.02em;
    font-weight: 800;
    color: var(--ink);
  }

  .q{
    font-size:1.06rem;
    line-height:1.5;
    margin: 0 0 1.35rem 0;
    max-width: 18rem;
    color: rgba(var(--ink-rgb),0.84);
  }
  .q em{
    display:block;
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.95;
  }

  .field{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    width:100%;
    max-width: 15rem;
    margin:0 auto;
  }

  label{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-size:0.86rem;
    color: var(--muted);
    font-weight: 650;
  }

  .input-wrap{ position:relative; width:100%; }

  input[type="text"]{
    width:100%;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    border:1px solid var(--line);
    border-radius:0.9rem;
    padding:0.9rem;
    background: rgba(255,255,255,0.92);
    color: var(--input-ink, rgba(0,0,0,0.86));
    outline:none;
    text-align:center;
    font-size:1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
    caret-color: var(--input-ink, rgba(0,0,0,0.86));
  }
  input[type="text"]::placeholder{ color: rgba(0,0,0,0.38); }

  input[type="text"]:focus{
    border-color: rgba(var(--focus-rgb),0.70);
    box-shadow: 0 0 0 4px rgba(var(--focus-rgb),0.18);
    transform: translateY(-1px);
  }

  .tip{
    position:absolute;
    left:50%;
    bottom: calc(100% + 0.75rem);
    opacity:0;
    pointer-events:none;

    color: var(--tip-ink);
    font-size:0.82rem;
    line-height:1.35;
    padding: 0.6rem 0.75rem;
    border-radius: 0.85rem;

    background: linear-gradient(180deg, var(--tip-bg1), var(--tip-bg2));
    border: 1px solid var(--tip-border);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.34),
      0 0 0 6px rgba(var(--focus-rgb),0.14),
      0 0 28px var(--tip-glow);

    white-space: nowrap;
    z-index: 5;

    transform: translateX(-50%) translateY(16px) scale(0.88);
    filter: blur(0.6px);
    transition:
      opacity 220ms ease,
      transform 520ms cubic-bezier(.18,1.08,.2,1),
      filter 420ms ease;
  }

  .tip::after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: var(--tip-arrow);
    border-right: 1px solid var(--tip-border);
    border-bottom: 1px solid var(--tip-border);
    rotate: 45deg;
    margin-top: -7px;
    box-shadow: 10px 10px 22px rgba(0,0,0,0.18);
  }

  .input-wrap:hover .tip{
    opacity:1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
    animation: tipBounceSlow 980ms cubic-bezier(.18,1.06,.2,1) 1;
  }

  @keyframes tipBounceSlow{
    0%   { transform: translateX(-50%) translateY(0)  scale(1); }
    38%  { transform: translateX(-50%) translateY(-4px) scale(1.03); }
    68%  { transform: translateX(-50%) translateY(2px)  scale(0.995); }
    86%  { transform: translateX(-50%) translateY(-1px) scale(1.007); }
    100% { transform: translateX(-50%) translateY(0)    scale(1); }
  }

  .btn{
    margin-top:0.55rem;
    width:72%;
    align-self:center;
    border-radius: 0.95rem;
    padding: 0.62rem 0.9rem;
    font-size: 0.92rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82));
    border: 1px dashed rgba(var(--focus-rgb),0.55);
    box-shadow: 0 14px 28px rgba(0,0,0,0.08);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    cursor:pointer;
    transition: transform 160ms ease, filter 180ms ease, opacity 180ms ease;
  }
  .btn:hover{ transform: translateY(-2px); filter: brightness(1.02); }

  .rhs{
    padding: 1.6rem;
    min-height: calc(100vh - 3.5rem);
    display:flex;
    flex-direction:column;
    gap: 1.1rem;
    color: var(--ink);
    overflow: hidden;
  }

  .rhs h2{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--muted-rgb),0.95);
    font-weight: 800;
  }

  .img-ph{
    flex: 1 1 auto;
    border-radius: 1rem;
    border: 2px dashed rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.30);
    min-height: 18rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 1.25rem;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--muted);
    line-height: 1.6;
    gap: 0.9rem;
  }

  .rhs-center{
    flex: 1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 18rem;
  }

  .rhs-img{
    width: min(980px, 100%);
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 18px 44px rgba(0,0,0,0.14);
    background: rgba(255,255,255,0.18);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0.75rem;
  }

  .rhs-img img{
    display:block;
    max-width:100%;
    width:auto;
    height:auto;
    max-height: min(82vh, 720px);
    object-fit: contain;
    border-radius: 0.75rem;
  }

  .video-wrap{ width:100%; max-width: 980px; display:none; }
  .video-wrap.is-on{ display:block; }

  video{
    width:100%;
    height:auto;
    max-height: min(82vh, 720px);
    object-fit: contain;
    border-radius: 0.9rem;
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 18px 44px rgba(0,0,0,0.16);
    background: rgba(0,0,0,0.05);
  }

  @media (max-width: 900px){
    .page{ grid-template-columns: 1fr; }
    .rail{ position:relative; top:0; min-height:auto; }
    .rail-card{ max-width: 22rem; margin: 0 auto; }
    .rhs{ min-height:auto; overflow: visible; }
    .rhs-img img{ max-height: 60vh; }
  }

  /* ============================================================
     INCORRECT ANSWER FX (ONLY the answer field shakes)
  ============================================================ */
  input.fx-wiggle{ animation: fxWiggle 240ms ease 1; }
  @keyframes fxWiggle{
    0%{ transform: translateX(0); }
    25%{ transform: translateX(-7px); }
    50%{ transform: translateX(7px); }
    75%{ transform: translateX(-5px); }
    100%{ transform: translateX(0); }
  }

  /* ============================================================
     THEMES
  ============================================================ */
  .theme-16{
    --ink:#1f2f3f; --muted:#4c6b86; --rail-bg:#d7ecff; --focus:#2d7dbf; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(45,125,191,0.35);
    --tip-bg1: rgba(18,46,74,0.96); --tip-bg2: rgba(12,30,48,0.96); --tip-arrow: rgba(12,30,48,0.96);
    --panel-sheen: rgba(45,125,191,0.22);
    --ink-rgb: 31,47,63; --muted-rgb: 76,107,134; --focus-rgb: 45,125,191;
    background: radial-gradient(120% 120% at 20% 0%, #eaf6ff 0%, #cfeaff 45%, #b6dcff 100%);
  }

  .theme-17{
    --ink:#342c3d; --muted:#6f5f7d; --rail-bg:#ebe4f2; --focus:#7b5fa6; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(123,95,166,0.30);
    --tip-bg1: rgba(43,20,57,0.96); --tip-bg2: rgba(26,12,38,0.96); --tip-arrow: rgba(26,12,38,0.96);
    --panel-sheen: rgba(123,95,166,0.22);
    --ink-rgb: 52,44,61; --muted-rgb: 111,95,125; --focus-rgb: 123,95,166;
    background: radial-gradient(120% 120% at 20% 0%, #3b2a44 0%, #2b1f33 45%, #1f1726 100%);
  }

  .theme-18{
    --ink:#3a351c; --muted:#7a6f36; --rail-bg:#fff0b8; --focus:#c79a1a; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(199,154,26,0.35);
    --tip-bg1: rgba(62,47,10,0.96); --tip-bg2: rgba(40,30,6,0.96); --tip-arrow: rgba(40,30,6,0.96);
    --panel-sheen: rgba(199,154,26,0.22);
    --ink-rgb: 58,53,28; --muted-rgb: 122,111,54; --focus-rgb: 199,154,26;
    background: radial-gradient(120% 120% at 20% 0%, #fff6cf 0%, #ffe9a6 45%, #ffd97a 100%);
  }

  .theme-19{
    --ink:#1f2f3f; --muted:#4c6b86; --rail-bg:#d7ecff; --focus:#2d7dbf; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(45,125,191,0.35);
    --tip-bg1: rgba(18,46,74,0.96); --tip-bg2: rgba(12,30,48,0.96); --tip-arrow: rgba(12,30,48,0.96);
    --panel-sheen: rgba(45,125,191,0.22);
    --ink-rgb: 31,47,63; --muted-rgb: 76,107,134; --focus-rgb: 45,125,191;
    background: radial-gradient(120% 120% at 20% 0%, #eaf6ff 0%, #cfeaff 45%, #b6dcff 100%);
  }

  .theme-20{
    --ink:#3a2a18; --muted:#7b5e44; --rail-bg:#efe3d2; --focus:#a1693a; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(161,105,58,0.32);
    --tip-bg1: rgba(56,34,18,0.96); --tip-bg2: rgba(36,22,12,0.96); --tip-arrow: rgba(36,22,12,0.96);
    --panel-sheen: rgba(161,105,58,0.20);
    --ink-rgb: 58,42,24; --muted-rgb: 123,94,68; --focus-rgb: 161,105,58;
    background: radial-gradient(120% 120% at 20% 0%, #f6ede2 0%, #ead6c0 45%, #dbc3a5 100%);
  }

  .theme-21{
    --ink:#f0f0f0; --muted:#b9b9b9; --rail-bg: rgba(70,70,70,0.46); --focus:#a7a7a7; --bad:#ff6b6b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(255,255,255,0.16);
    --tip-bg1: rgba(30,30,30,0.96); --tip-bg2: rgba(14,14,14,0.96); --tip-arrow: rgba(14,14,14,0.96);
    --panel-sheen: rgba(255,255,255,0.10);
    --ink-rgb: 240,240,240; --muted-rgb: 185,185,185; --focus-rgb: 167,167,167;
    --input-ink: rgba(0,0,0,0.88);
    background: radial-gradient(120% 120% at 20% 0%, #262626 0%, #1b1b1b 45%, #0f0f0f 100%);
  }

  .theme-22{
    --ink:#2a2a2a; --muted:#6b6b6b; --rail-bg:#f4f1ea; --focus:#8b7a67; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(139,122,103,0.22);
    --tip-bg1: rgba(48,38,28,0.96); --tip-bg2: rgba(28,22,16,0.96); --tip-arrow: rgba(28,22,16,0.96);
    --panel-sheen: rgba(139,122,103,0.16);
    --ink-rgb: 42,42,42; --muted-rgb: 107,107,107; --focus-rgb: 139,122,103;
    background: radial-gradient(120% 120% at 20% 0%, #fbfaf7 0%, #f2efe9 45%, #e8e2d8 100%);
  }

  .theme-27{
    --ink:#173323; --muted:#4b6a57; --rail-bg:#d9eadf; --focus:#2f6b45; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(47,107,69,0.32);
    --tip-bg1: rgba(18,48,30,0.96); --tip-bg2: rgba(10,30,18,0.96); --tip-arrow: rgba(10,30,18,0.96);
    --panel-sheen: rgba(47,107,69,0.18);
    --ink-rgb: 23,51,35; --muted-rgb: 75,106,87; --focus-rgb: 47,107,69;
    background: radial-gradient(120% 120% at 20% 0%, #eaf6ee 0%, #cfe8d8 45%, #b7d8c1 100%);
  }

  /* PURE WHITE + GREEN FLECKS */
  .theme-32{
    --ink:#1b1b1b; --muted:#5a5a5a; --rail-bg:#ffffff; --focus:#2b2b2b; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(0,0,0,0.18);
    --tip-bg1: rgba(28,28,28,0.96); --tip-bg2: rgba(10,10,10,0.96); --tip-arrow: rgba(10,10,10,0.96);
    --panel-sheen: rgba(0,0,0,0.06);
    --ink-rgb: 27,27,27; --muted-rgb: 90,90,90; --focus-rgb: 43,43,43;

    background:
      radial-gradient(1px 1px at 12% 18%, rgba(36,120,72,0.18) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 22% 62%, rgba(36,120,72,0.16) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 38% 35%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 46% 78%, rgba(36,120,72,0.16) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 64% 22%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 78% 66%, rgba(36,120,72,0.13) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 88% 34%, rgba(36,120,72,0.12) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(120% 120% at 50% 50%, rgba(60,160,95,0.05) 0%, rgba(0,0,0,0) 70%),
      #ffffff;
  }

  /* Add flecks to the actual panel backgrounds too (rail + rhs) */
  .theme-32 .panel{
    background:
      radial-gradient(1px 1px at 14% 20%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 28% 66%, rgba(36,120,72,0.12) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 42% 38%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 62% 26%, rgba(36,120,72,0.11) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 78% 74%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(120% 120% at 50% 50%, rgba(60,160,95,0.04) 0%, rgba(0,0,0,0) 70%),
      #ffffff;
  }

  .theme-32 .rail-card{
    background:
      radial-gradient(1px 1px at 16% 22%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 34% 72%, rgba(36,120,72,0.08) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 62% 34%, rgba(36,120,72,0.08) 45%, rgba(0,0,0,0) 70%),
      rgba(255,255,255,0.56);
  }