:root {
    --deep:  #070b1e;
    --ink:   #d2d9f2;
    --moon:  #eef2ff;
    --faint: #98a3c9;
    --gold:  #e8c478;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans:  "Quicksand", Verdana, sans-serif;
  }
  * { box-sizing: border-box; }

  
  [hidden] { display: none !important; }

  
  
  body { margin: 0; overflow-x: hidden; background: var(--deep); color: var(--ink);
         font: 17.5px/1.72 var(--sans);
         transition: opacity .4s ease; }
  body.leaving { opacity: 0; pointer-events: none; }

  
  html { scrollbar-color: #39457f #0a0e22; scrollbar-width: thin; }

  
  html { scrollbar-gutter: stable; }
  @supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
  }

  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: #0a0e22;
    border-left: 1px solid rgba(255,255,255,.06); }
  ::-webkit-scrollbar-thumb {
    border-radius: 999px; border: 3px solid #0a0e22;
    background: linear-gradient(#4a5699, #39457f); }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(var(--gold), #c9a45c); }

  
  .sky { position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% -20%, #1b2550 0%, transparent 60%),
      radial-gradient(90% 70% at 12% 112%, #221a42 0%, transparent 55%),
      linear-gradient(#0e1430, #070b1e 72%); }
  .stars { position: absolute; inset: -80px;
    background-image:
      radial-gradient(circle, #fff 1.1px, transparent 1.5px),
      radial-gradient(circle, #cfd8ff .9px, transparent 1.3px),
      radial-gradient(circle, #fff .8px, transparent 1.2px);
    background-position: 30px 50px, 170px 120px, 90px 230px;
    background-size: 260px 260px, 330px 330px, 410px 410px;
    opacity: .5; animation: twinkle 9s ease-in-out infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .5 } 50% { opacity: .22 } }
  body.answering .moon { opacity: 0; }
  .fog { position: absolute; left: -35%; right: -35%; height: 48vh;
         filter: blur(46px); pointer-events: none; }
  .fog.a { bottom: -12vh; opacity: .5;
    background: radial-gradient(58% 100% at 30% 50%, #35408a, transparent 70%);
    animation: drift 52s ease-in-out infinite alternate; }
  .fog.b { bottom: 14vh; opacity: .34;
    background: radial-gradient(52% 100% at 72% 50%, #4d3b84, transparent 70%);
    animation: drift 78s ease-in-out infinite alternate-reverse; }
  @keyframes drift { from { transform: translateX(-11%) } to { transform: translateX(11%) } }
  
  .moon { transition: opacity 1.4s ease;
          position: absolute; top: 6vh; right: 11vw; width: 86px; height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 31%, #fff, #c9d4ff 58%, #8f9ddb);
    box-shadow: 0 0 64px 20px rgba(176,198,255,.2); opacity: .92; }

  
  .q { position: relative; z-index: 1; min-height: 100vh;
       display: grid; place-items: center; padding: 10vh 22px; }
  .inner { width: 100%; max-width: 640px; text-align: center; }
  .q.scene .inner { max-width: 980px; }
  
  
  .flourish { display: block; width: 240px; max-width: 70%; height: 40px;
              margin: 0 auto 2vh; overflow: visible; opacity: 0; }
  .flourish path { fill: none; stroke: var(--gold); stroke-width: 1.3;
                   stroke-linecap: round; }
  .f-l, .f-r { stroke-dasharray: 96; stroke-dashoffset: 96; }
  .f-d { fill: var(--gold); fill-opacity: 0; stroke-dasharray: 46; stroke-dashoffset: 46; }

  .q.here .flourish { animation: f-fade 3.4s ease-out forwards; }
  .q.here .f-l, .q.here .f-r { animation: f-draw 1.5s cubic-bezier(.2,.8,.3,1) forwards; }
  .q.here .f-d { animation: f-draw 1s ease-out .8s forwards,
                            f-ink .7s ease-out 1.6s forwards; }
  @keyframes f-draw { to { stroke-dashoffset: 0 } }
  @keyframes f-ink  { to { fill-opacity: .9 } }
  @keyframes f-fade { 0% { opacity: 0 } 18% { opacity: 1 }
                      62% { opacity: 1 } 100% { opacity: .18 } }

  
  
  
  .vine { position: absolute; top: 0; height: 100%;
          width: clamp(84px, 15vw, 190px);
          pointer-events: none; z-index: 0; }
  .vine.left { left: 0; }
  .vine.right { right: 0; transform: scaleX(-1); }

  
  .lf .blade { fill: #5b8a5f; }
  .lf .rib { fill: none; stroke: #40684a; stroke-width: .9; opacity: .55; }
  
  .lf:nth-child(odd) .blade { fill: #6f9e6f; }
  .lf:nth-child(odd) .rib { stroke: #4c7d57; }

  .lf .open { opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; }
  #intro.growing .lf .open {
    animation: unfurl .8s cubic-bezier(.2,.9,.3,1) both;
  }
  @keyframes unfurl {
    from { opacity: 0; transform: scale(.08) rotate(-18deg); }
    to   { opacity: .9; transform: none; }
  }

  
  .lf .blade, .lf .rib {
    transform-box: fill-box; transform-origin: 0% 50%;
    animation: flutter 6s ease-in-out infinite;
  }
  .lf:nth-child(2) .blade, .lf:nth-child(2) .rib { animation-duration: 7.4s; animation-delay: -1.2s }
  .lf:nth-child(3) .blade, .lf:nth-child(3) .rib { animation-duration: 5.2s; animation-delay: -3.1s }
  .lf:nth-child(4) .blade, .lf:nth-child(4) .rib { animation-duration: 8.1s; animation-delay: -0.6s }
  .lf:nth-child(5) .blade, .lf:nth-child(5) .rib { animation-duration: 6.6s; animation-delay: -4.4s }
  .lf:nth-child(6) .blade, .lf:nth-child(6) .rib { animation-duration: 9s;   animation-delay: -2.3s }
  .lf:nth-child(7) .blade, .lf:nth-child(7) .rib { animation-duration: 7s;   animation-delay: -5.5s }
  @keyframes flutter {
    0%, 100% { transform: rotate(-4deg) scaleY(1) }
    35%      { transform: rotate(3.5deg) scaleY(.94) }
    68%      { transform: rotate(-1.5deg) scaleY(1.03) }
  }

  
  .stem { fill: none; stroke: #5b8a5f; stroke-width: 3.1; stroke-linecap: round; }
  
  #intro.growing .stem { animation: grow 2.6s linear .25s forwards; }
  @keyframes grow { to { stroke-dashoffset: 0 } }
  

  

  #intro .inner { position: relative; z-index: 1; }

  
  #intro .set { max-width: 48ch; }

  
  #intro { position: relative; z-index: 1; min-height: 100vh;
           display: grid; place-items: center; padding: 10vh 22px;
           text-align: center; }
  
  .title { font: 600 clamp(44px, 8vw, 78px)/1.08 var(--serif);
           color: var(--moon); margin: 3vh 0 0; text-wrap: balance;
           text-shadow: 0 0 18px rgba(232,196,120,.5),
                        0 0 52px rgba(232,196,120,.28),
                        0 0 90px rgba(232,196,120,.14); }
  
  .q h2 { text-shadow: 0 0 14px rgba(232,196,120,.34),
                       0 0 40px rgba(232,196,120,.16); }

  
  .whose { color: inherit; text-decoration: none;
           border-bottom: 1px solid rgba(232,196,120,.26);
           padding-bottom: 2px; transition: color .3s, border-color .3s; }
  .whose:hover, .whose:focus-visible {
    color: var(--gold); border-color: rgba(232,196,120,.8); }
  .title > span { display: inline-block;
                  animation: float-a 9s ease-in-out 1.6s infinite;
                  will-change: transform; }
  
  .btn { position: relative; overflow: hidden; cursor: pointer;
         border: 1px solid rgba(232,196,120,.42); border-radius: 999px;
         background: linear-gradient(rgba(232,196,120,.13), rgba(232,196,120,.025));
         color: var(--gold); font-family: var(--sans); text-transform: uppercase;
         box-shadow: inset 0 1px 0 rgba(255,245,220,.14),
                     0 14px 34px -18px rgba(232,196,120,.75);
         transition: border-color .3s, background .3s, transform .3s,
                     box-shadow .3s, color .3s; }
  .btn::before { content: ""; position: absolute; inset: 4px;
                 border: 1px solid rgba(232,196,120,.16);
                 border-radius: 999px; pointer-events: none; }
  .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                background: linear-gradient(105deg, transparent 40%,
                            rgba(255,246,224,.34) 50%, transparent 60%);
                transform: translateX(-135%);
                transition: transform .75s cubic-bezier(.3,.8,.4,1); }
  .btn:hover { transform: translateY(-3px); color: #fff5e0;
               border-color: rgba(232,196,120,.85);
               background: linear-gradient(rgba(232,196,120,.24), rgba(232,196,120,.07));
               box-shadow: inset 0 1px 0 rgba(255,245,220,.22),
                           0 20px 44px -18px rgba(232,196,120,.95); }
  .btn:hover::after { transform: translateX(135%); }
  .btn:active { transform: translateY(-1px); }

  .begin { margin: 5vh auto 0; padding: 18px 44px 20px;
           font-size: 14.5px; font-weight: 500; letter-spacing: .34em; }
  .begin span { display: block; margin-top: 11px; font-size: 20px;
                letter-spacing: 0; animation: nudge 1.9s ease-in-out infinite; }

  #intro .step, #intro .title, #intro .set, #intro .begin {
    opacity: 0; transform: translateY(18px); }
  #intro.here .step, #intro.here .title, #intro.here .set, #intro.here .begin {
    opacity: 1; transform: none;
    transition: opacity 1.2s cubic-bezier(.2,.8,.3,1),
                transform 1.2s cubic-bezier(.2,.8,.3,1); }
  #intro.here .title { transition-delay: .25s }
  #intro.here .set   { transition-delay: .55s }
  #intro.here .begin { transition-delay: .9s }

  .step { margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .3em;
          text-transform: uppercase; color: var(--faint); }
  .bar { width: min(320px, 70%); height: 2px; margin: 14px auto 0;
         background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
  .bar i { display: block; height: 100%;
           background: linear-gradient(90deg, #39457f, var(--gold)); }

  
  
  
  
  .set { font: 400 25px/1.68 var(--serif); color: #bcc6e8;
         max-width: 34ch; margin: 5vh auto 12px; text-wrap: balance;
         letter-spacing: .022em; word-spacing: .08em; }
  h2 { font: 600 39px/1.26 var(--serif); color: var(--moon); margin: 4vh 0 0;
       text-wrap: balance; letter-spacing: .015em; word-spacing: .05em; }
  .set + h2 { margin-top: 0; }

  
  .illus { display: block; width: min(420px, 88%); height: auto;
           margin: 3vh auto 0; overflow: visible; }
  
  .illus + .set { margin-top: 14px; }

  .choices { display: grid; gap: 11px; margin: 36px auto 0; }
  
  .choices.stack:has(> .c:nth-child(6)) { gap: 8px; margin-top: 26px; }
  .choices.stack:has(> .c:nth-child(6)) .c { padding: 12px 17px; }
  
  .choices.grid { grid-template-columns: 1fr 1fr; }
  .choices.grid .c { font-size: 17.5px; padding: 14px 17px; }

  
  .choices.pair { grid-template-columns: 1fr 1fr; gap: 16px; }
  .choices.pair .c { flex-direction: column; align-items: center;
                     justify-content: center; text-align: center; gap: 0;
                     padding: 38px 26px; font-size: 20.5px; min-height: 200px; }
  .choices.pair .c b { display: none; }
  .choices.pair .c:hover { transform: translateY(-5px); }

  @media (max-width: 640px) {
    .choices.grid, .choices.pair { grid-template-columns: 1fr; }
    .choices.pair .c { min-height: 0; padding: 26px 22px; }
  }
  .c { display: flex; align-items: flex-start; gap: 15px; padding: 15px 19px;
       text-align: left; cursor: pointer; color: var(--ink);
       border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
       background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.015));
       font: 500 18.5px/1.62 var(--sans);
       letter-spacing: .015em; word-spacing: .05em;
       transition: border-color .25s, background .25s, transform .25s,
                   opacity .4s; }
  .c b { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid;
         place-items: center; background: rgba(255,255,255,.07);
         color: var(--gold); font: 600 13px/1 var(--serif); transition: .25s; }
  .c:hover { transform: translateX(5px); border-color: rgba(232,196,120,.5);
             background: linear-gradient(rgba(232,196,120,.13), rgba(232,196,120,.04)); }

  
  
  .q.scene:has(.picks) .inner { max-width: 1100px; }
  .picks { display: grid; gap: 12px; margin: 38px auto 0; max-width: 1060px;
           grid-template-columns: repeat(6, 1fr); }
  @media (max-width: 1080px) {
    .picks { grid-template-columns: repeat(3, 1fr); max-width: 660px; }
  }
  @media (max-width: 560px) {
    .picks { grid-template-columns: repeat(2, 1fr); }
  }
  .p { display: grid; gap: 10px; justify-items: center; cursor: pointer;
       padding: 16px 10px 13px; border-radius: 16px;
       border: 1px solid rgba(255,255,255,.1);
       background: linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.01));
       transition: border-color .25s, background .25s, transform .3s,
                   opacity .4s, filter .4s; }
  
  .p svg { width: 100%; height: 190px; overflow: visible; }
  
  @media (max-height: 900px) { .picks .p svg { height: 156px; } }
  @media (max-height: 740px) { .picks .p svg { height: 128px; } }
  .p em { font: 500 15px/1.35 var(--sans); font-style: normal;
          text-wrap: balance;
          letter-spacing: .04em; color: var(--faint); transition: color .25s; }
  
  .p:hover { transform: translateY(-6px) scale(1.05);
             border-color: rgba(232,196,120,.45);
             background: linear-gradient(rgba(232,196,120,.1), rgba(232,196,120,.03));
             box-shadow: 0 16px 34px -14px rgba(0,0,0,.75); }
  .p:hover em { color: var(--moon); }

  
  .sigil { width: 72px; height: 72px; margin-bottom: 4px; }
  .choices.pair .c.side-light {
    border-color: rgba(232,196,120,.34);
    background: linear-gradient(rgba(232,196,120,.12), rgba(232,196,120,.02)); }
  .choices.pair .c.side-light:hover {
    border-color: rgba(232,196,120,.8);
    background: linear-gradient(rgba(232,196,120,.24), rgba(232,196,120,.06));
    box-shadow: 0 0 44px -10px rgba(232,196,120,.7); }
  .choices.pair .c.side-dark {
    border-color: rgba(150,166,220,.26);
    background: linear-gradient(rgba(20,26,56,.75), rgba(8,11,26,.85)); }
  .choices.pair .c.side-dark:hover {
    border-color: rgba(185,196,234,.65);
    background: linear-gradient(rgba(30,38,76,.85), rgba(12,16,36,.9));
    box-shadow: 0 0 44px -12px rgba(140,160,230,.5); }

  .mood-split::before {
    background: radial-gradient(90% 80% at 50% 44%,
                rgba(232,196,120,.1) 0%, rgba(10,14,34,.2) 55%,
                rgba(10,14,34,.45) 100%); }

  
  .mood-split::before { transition: background 1.6s ease; }
  .took-light::before { background: radial-gradient(90% 80% at 50% 44%,
      rgba(255,232,180,.26) 0%, rgba(236,196,128,.1) 55%, rgba(236,196,128,0) 100%) !important; }
  .took-dark::before { background: radial-gradient(90% 80% at 50% 44%,
      rgba(26,32,66,.2) 0%, rgba(5,7,18,.62) 55%, rgba(5,7,18,.78) 100%) !important; }

  
  .lanterns { position: absolute; inset: 0; z-index: -1; pointer-events: none;
              opacity: 0; transition: opacity 1.6s ease; }
  .took-dark .lanterns { opacity: 1; }
  .lantern { position: absolute; width: 26px; height: 34px; }
  .lantern i { position: absolute; inset: 0; display: block; border-radius: 4px 4px 6px 6px;
               background: linear-gradient(#f3dba6, #e8a94e);
               box-shadow: 0 0 26px 10px rgba(232,180,100,.4),
                           0 0 70px 26px rgba(232,180,100,.16);
               animation: lanternlight 3.4s ease-in-out infinite; }
  .lantern::before { content: ""; position: absolute; left: 50%; top: -14px;
                     width: 1px; height: 14px; margin-left: -.5px;
                     background: rgba(232,196,120,.4); }
  .lantern:nth-child(1) { left: 7%;  top: 16%; animation: sway 7s ease-in-out infinite }
  .lantern:nth-child(2) { left: 20%; top: 52%; animation: sway 9s ease-in-out infinite -2s }
  .lantern:nth-child(3) { right: 9%; top: 24%; animation: sway 8s ease-in-out infinite -4s }
  .lantern:nth-child(4) { right: 22%; top: 62%; animation: sway 10s ease-in-out infinite -6s }
  .lantern:nth-child(2) i { animation-delay: -1.1s }
  .lantern:nth-child(3) i { animation-delay: -2.3s }
  .lantern:nth-child(4) i { animation-delay: -.6s }
  @keyframes lanternlight { 0%, 100% { opacity: .78 } 50% { opacity: 1 } }
  @keyframes sway {
    0%, 100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) }
  }

  
  
  .picks.four { display: flex; gap: 0; max-width: 720px; margin-inline: auto;
                border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 26px 60px -30px rgba(0,0,0,.9); }
  .picks.four .p { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
                   padding: 0; border: 0; border-radius: 0; background: none;
                   display: block; transition: opacity .45s ease, filter .45s ease; }
  .picks.four .p + .p { border-left: 1px solid rgba(255,255,255,.14); }
  .picks.four .p svg { display: block; width: 100%; height: 330px;
                       border-radius: 0; }

  
  .picks.four .p em { position: absolute; left: 0; right: 0; bottom: 0;
                      margin: 0; padding: 30px 8px 11px; font-size: 12.5px;
                      background: linear-gradient(transparent, rgba(4,6,16,.9));
                      color: #cdd6f2; }

  
  .picks.four:hover .p { opacity: .45; filter: saturate(.6) brightness(.72); }
  .picks.four .p:hover { opacity: 1; filter: none; transform: none; }
  .picks.four .p:hover em { color: #fff6e0; }
  .q.done .picks.four .p.picked { opacity: 1; filter: none; }

  
  .picks.four .p.picked,
  .picks.four .p:has(input:checked) {
    border-color: rgba(255,255,255,.14);
    background: none;
  }

  @media (max-width: 720px) {
    .picks.four { flex-wrap: wrap; }
    .picks.four .p { flex: 1 1 50%; }
    .picks.four .p:nth-child(3) { border-left: 0; }
    .picks.four .p:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  }
  @media (max-height: 900px) { .picks.four .p svg { height: 262px; } }
  @media (max-height: 740px) { .picks.four .p svg { height: 212px; } }

  
  
  .mood-alley::before {
    background: radial-gradient(86% 76% at 50% 46%,
                rgba(0,0,0,0) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 100%);
    transition: background 1.8s ease; }

  .took-1::before { background: radial-gradient(86% 76% at 50% 46%,
      rgba(255,226,166,.26) 0%, rgba(228,178,96,.1) 58%, rgba(228,178,96,0) 100%) !important; }
  .took-2::before { background: radial-gradient(86% 76% at 50% 46%,
      rgba(20,24,52,.22) 0%, rgba(4,6,16,.66) 58%, rgba(4,6,16,.8) 100%) !important; }
  .took-3::before { background: radial-gradient(86% 76% at 50% 46%,
      rgba(198,208,238,.22) 0%, rgba(120,134,180,.12) 58%, rgba(120,134,180,0) 100%) !important; }
  .took-4::before { background: radial-gradient(86% 76% at 50% 46%,
      rgba(110,160,112,.2) 0%, rgba(28,48,34,.4) 58%, rgba(28,48,34,.2) 100%) !important; }

  
  .q.fading::before {
    background: radial-gradient(86% 76% at 50% 46%,
                rgba(0,0,0,0) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 100%) !important; }
  .q.fading .lanterns { opacity: 0 !important; }

  
  .took-1 .lanterns { opacity: 1; }

  
  
  .picks.six { grid-template-columns: repeat(6, 1fr); max-width: 1060px;
                  gap: 10px; }
  @media (max-width: 1080px) {
    .picks.six { grid-template-columns: repeat(3, 1fr); max-width: 660px; }
  }
  @media (max-width: 560px) {
    .picks.six { grid-template-columns: repeat(2, 1fr); }
  }
  .picks.six .p svg { height: 150px; }
  .picks.six .p em { display: block; font-size: 16px; color: #e9eeff;
                        letter-spacing: .03em; }
  .picks.six .p em small { display: block; margin-top: 5px;
                              font-size: 13.5px; line-height: 1.45;
                              letter-spacing: 0; color: var(--faint);
                              text-wrap: pretty; }
  .picks.six .p:hover em small { color: #b6c0e4; }
  @media (max-height: 900px) { .picks.six .p svg { height: 122px; } }
  @media (max-height: 740px) {
    .picks.six .p svg { height: 100px; }
    .picks.six .p em small { display: none; }
  }

  
  .steam { opacity: 0; animation: steam 3.6s ease-out infinite; }
  .s2 { animation-delay: -1.2s } .s3 { animation-delay: -2.4s }
  @keyframes steam {
    0%   { opacity: 0; transform: translateY(6px) scaleX(.8) }
    30%  { opacity: .75 }
    100% { opacity: 0; transform: translateY(-14px) scaleX(1.25) }
  }

  .bub { animation: rise-bub 2.8s ease-in infinite; }
  .b2 { animation-duration: 3.4s; animation-delay: -1.1s }
  .b3 { animation-duration: 2.3s; animation-delay: -1.8s }
  .b4 { animation-duration: 3.9s; animation-delay: -.6s }
  @keyframes rise-bub {
    0%   { opacity: 0; transform: translateY(0) }
    20%  { opacity: .9 }
    100% { opacity: 0; transform: translateY(-46px) }
  }

  .glint { animation: glint-still 7s ease-in-out infinite; }

  
  .fleck { animation: hang 5.5s ease-in-out infinite; }
  .f2 { animation-duration: 7.2s; animation-delay: -1.9s }
  .f3 { animation-duration: 4.6s; animation-delay: -3.1s }
  .f4 { animation-duration: 6.4s; animation-delay: -.8s }
  .f5 { animation-duration: 8.1s; animation-delay: -4.4s }
  .f6 { animation-duration: 5.1s; animation-delay: -2.6s }
  @keyframes hang {
    0%, 100% { opacity: .25; transform: translateY(0) }
    50%      { opacity: 1;   transform: translateY(-3px) }
  }
  @keyframes glint-still { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

  .glow { animation: honeyglow 4.2s ease-in-out infinite; }
  @keyframes honeyglow { 0%, 100% { opacity: .14 } 50% { opacity: .3 } }
  .swirl { transform-box: fill-box; transform-origin: 50% 50%;
           animation: turn-over 9s linear infinite; }
  @keyframes turn-over {
    0%   { transform: translateX(-5px) scale(1) }
    50%  { transform: translateX(5px) scale(1.25) }
    100% { transform: translateX(-5px) scale(1) }
  }

  .drip { animation: drip 4.4s ease-in infinite; }
  @keyframes drip {
    0%, 55% { opacity: 0; transform: translateY(-14px) }
    62%     { opacity: .9; transform: translateY(-10px) }
    100%    { opacity: 0; transform: translateY(26px) }
  }
  .star { transform-box: fill-box; transform-origin: 50% 50%;
          animation: glint 5s ease-in-out infinite; }

  .mood-bar::before {
    background: radial-gradient(78% 64% at 50% 86%, rgba(232,196,120,.12),
                rgba(10,14,34,.3) 62%, transparent 86%); }

  

  
  .air-smoke::after {
    content: ""; position: absolute; inset: -14% -30%; z-index: -1;
    pointer-events: none; filter: blur(72px); opacity: .24;
    background:
      radial-gradient(52% 38% at 24% 68%, rgba(96,108,170,.34), transparent 78%),
      radial-gradient(48% 34% at 72% 42%, rgba(74,62,116,.3), transparent 78%),
      radial-gradient(40% 30% at 50% 86%, rgba(110,120,180,.24), transparent 78%);
    animation: smoke 48s ease-in-out infinite alternate; }
  
  @keyframes smoke {
    from { transform: translate3d(-3%, 1.5%, 0) scale(1) }
    to   { transform: translate3d(3%, -2%, 0) scale(1.08) }
  }

  
  
  .air-clouds::after {
    content: ""; position: absolute; inset: -14% -26%; z-index: -1;
    pointer-events: none; filter: blur(60px); opacity: .2;
    background:
      radial-gradient(44% 28% at 20% 24%, rgba(150,168,220,.3), transparent 78%),
      radial-gradient(38% 24% at 62% 16%, rgba(128,146,205,.26), transparent 78%),
      radial-gradient(46% 30% at 84% 34%, rgba(142,160,214,.22), transparent 78%);
    animation: clouds 72s linear infinite; }
  @keyframes clouds {
    from { transform: translateX(-12%) }
    to   { transform: translateX(12%) }
  }

  

  
  .q[class*="mood-"]::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: -1;

    
    -webkit-mask-image: linear-gradient(transparent 0%, #000 20%,
                                        #000 80%, transparent 100%);
    mask-image: linear-gradient(transparent 0%, #000 20%,
                                #000 80%, transparent 100%); }

  .mood-corridor::before {
    background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 26%,
                transparent 74%, rgba(0,0,0,.55)),
                radial-gradient(56% 72% at 50% 0%, rgba(232,196,120,.09), transparent 70%); }

  .mood-warm::before {
    background: radial-gradient(74% 62% at 50% 102%, rgba(232,196,120,.16), transparent 72%); }

  .mood-cold::before {
    background: radial-gradient(78% 72% at 50% 14%, rgba(143,168,216,.14), transparent 72%),
                linear-gradient(transparent 46%, rgba(10,16,40,.42) 88%, transparent); }

  .mood-close::before {
    background: radial-gradient(84% 84% at 50% 48%, transparent 26%, rgba(0,0,0,.6)); }

  .mood-ground::before {
    background: radial-gradient(70% 46% at 50% 96%, rgba(120,98,70,.2), transparent 70%),
                linear-gradient(transparent 52%, rgba(8,6,14,.46) 90%, transparent); }

  

  
  .p-rain-on-the-glass path[stroke] { animation: rainfall 2.6s linear infinite; }
  
  @keyframes rainfall {
    0%   { transform: translateY(-8px); opacity: 0 }
    7%   { opacity: .72 }
    93%  { opacity: .72 }
    100% { transform: translateY(10px); opacity: 0 }
  }

  
  .p-a-sky-full-of-stars circle { animation: blink 3.4s ease-in-out infinite; }
  .p-a-sky-full-of-stars circle:nth-of-type(2) { animation-duration: 4.6s; animation-delay: -.8s }
  .p-a-sky-full-of-stars circle:nth-of-type(3) { animation-duration: 2.9s; animation-delay: -1.9s }
  .p-a-sky-full-of-stars circle:nth-of-type(4) { animation-duration: 5.1s; animation-delay: -2.6s }
  .p-a-sky-full-of-stars circle:nth-of-type(5) { animation-duration: 3.7s; animation-delay: -.4s }
  .p-a-sky-full-of-stars circle:nth-of-type(6) { animation-duration: 4.2s; animation-delay: -3.1s }
  .p-a-sky-full-of-stars circle:nth-of-type(7) { animation: none }
  @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .28 } }

  
  .p-the-one-left-open path[opacity] { animation: flicker 3.1s ease-in-out infinite; }
  @keyframes flicker {
    0%, 100% { opacity: .55 } 18% { opacity: .38 } 31% { opacity: .62 }
    47% { opacity: .42 } 63% { opacity: .66 } 81% { opacity: .46 }
  }

  
  .p-something-growing-on-the-sill path[fill="#6f8f6a"] {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: lean 6.5s ease-in-out infinite; }
  @keyframes lean {
    0%, 100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) }
  }

  
  .p-the-overgrown-one circle { animation: lean 5.4s ease-in-out infinite;
    transform-box: fill-box; transform-origin: 50% 100%; }
  .p-the-overgrown-one circle:nth-of-type(2) { animation-delay: -1.8s }
  .p-the-overgrown-one circle:nth-of-type(3) { animation-delay: -3.4s }

  
  .p-the-one-standing-open circle { animation: blink 2.6s ease-in-out infinite; }
  .p-the-one-standing-open circle:nth-of-type(2) { animation-delay: -.9s }
  .p-the-one-standing-open circle:nth-of-type(3) { animation-delay: -1.7s }
  .p-the-one-standing-open path:last-of-type {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: glint 4.2s ease-in-out infinite; }
  @keyframes glint {
    0%, 100% { transform: scale(.8) rotate(0deg); opacity: .7 }
    50%      { transform: scale(1.15) rotate(90deg); opacity: 1 }
  }

  
  .p-a-crack-across-the-pane path[stroke] {
    stroke-dasharray: 150;
    animation: splinter 6.5s cubic-bezier(.9,0,1,1) infinite; }
  @keyframes splinter {
    0%,  14% { stroke-dashoffset: 150 }
    18%, 40% { stroke-dashoffset: 104 }
    44%, 62% { stroke-dashoffset: 58 }
    66%, 88% { stroke-dashoffset: 18 }
    92%, 97% { stroke-dashoffset: 0; opacity: 1 }
    100%     { stroke-dashoffset: 0; opacity: 0 }
  }
  .p-a-crack-across-the-pane svg { animation: flinch 6.5s ease-out infinite; }
  @keyframes flinch {
    0%, 15%, 41%, 63%, 89%, 100% { transform: translate(0, 0) }
    17%  { transform: translate(.7px, -.5px) }
    43%  { transform: translate(-.6px, .4px) }
    65%  { transform: translate(.5px, .5px) }
    91%  { transform: translate(-.4px, -.4px) }
  }

  
  .p-the-tall-one circle:nth-of-type(2) { animation: flicker 2.7s ease-in-out infinite; }
  .p-the-tall-one circle:nth-of-type(3) { animation: blink 4.1s ease-in-out infinite; }

  
  .p-the-double-one circle { animation: blink 4.4s ease-in-out infinite; }
  .p-the-double-one circle:nth-of-type(2) { animation-delay: -2.2s }

  
  .p-the-one-with-all-the-locks rect[fill="#e8c478"] { animation: blink 5s ease-in-out infinite; }
  .p-the-one-with-all-the-locks rect[fill="#e8c478"]:nth-of-type(2) { animation-delay: -2.5s }
  .p-the-one-that-s-locked rect[fill="#e8c478"] { animation: blink 4.6s ease-in-out infinite; }
  .p-the-plain-one rect:last-of-type { animation: blink 5.4s ease-in-out infinite; }
  .p-the-one-bound-in-iron rect:last-of-type { animation: blink 6.2s ease-in-out infinite; }
  .p-the-low-one circle { animation: blink 5.8s ease-in-out infinite; }

  
  .p-the-little-one circle { transform-box: fill-box; transform-origin: 50% 50%;
                             animation: glint 3.6s ease-in-out infinite; }

  
  .p-the-curtains-nearly-shut rect[opacity] {
    animation: breathe 7.5s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { opacity: .85 } 50% { opacity: .42 } }

  
  .p-books-stacked-against-it circle {
    animation: moonlight 5.5s ease-in-out infinite; }
  @keyframes moonlight {
    0%, 100% { opacity: .78; filter: drop-shadow(0 0 1px rgba(243,219,166,.5)) }
    50%      { opacity: 1;   filter: drop-shadow(0 0 7px rgba(243,219,166,.95)) }
  }

  
  .side-light.up .sigil circle:first-of-type { animation: pulse 2.8s ease-in-out 1.1s infinite; }
  .side-light.up .sigil path { animation: pulse 2.8s ease-in-out 1.5s infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

  
  .side-dark.up .sigil path { animation: moonglow 5.2s ease-in-out 1.1s infinite; }
  @keyframes moonglow { 0%, 100% { opacity: .82 } 50% { opacity: 1 } }

  .side-dark .sigil circle { transform-box: fill-box; transform-origin: 50% 50%; }
  .side-dark.up .sigil circle { animation: starshine 3.1s ease-in-out 1.2s infinite; }
  .side-dark.up .sigil circle:nth-of-type(2) { animation-duration: 4.3s; animation-delay: 1.5s }
  .side-dark.up .sigil circle:nth-of-type(3) { animation-duration: 2.7s; animation-delay: 1.35s }
  @keyframes starshine {
    0%, 100% { opacity: .35; transform: scale(.75) }
    50%      { opacity: 1;   transform: scale(1.25) }
  }

  
  .illus .coin { animation: gleam 2.6s ease-in-out infinite; }
  .illus .coin:nth-of-type(2) { animation-delay: -.7s }
  .illus .coin:nth-of-type(3) { animation-delay: -1.5s }
  .illus .coin:nth-of-type(4) { animation-delay: -2.1s }
  @keyframes gleam { 0%, 100% { opacity: .82 } 50% { opacity: 1 } }

  .illus .spark { transform-box: fill-box; transform-origin: 50% 50%;
                  animation: pop 3.2s ease-in-out infinite; }
  .illus .s2 { animation-duration: 4.1s; animation-delay: -1.1s }
  .illus .s3 { animation-duration: 3.6s; animation-delay: -2.4s }
  .illus .s4 { animation-duration: 4.6s; animation-delay: -3.3s }
  @keyframes pop {
    0%, 62%, 100% { transform: scale(0) rotate(0deg); opacity: 0 }
    78%           { transform: scale(1) rotate(45deg); opacity: 1 }
    88%           { transform: scale(.72) rotate(70deg); opacity: .7 }
  }

  
  
  .rise { opacity: 0; transform: translateY(20px); pointer-events: none; }
  .rise.up { pointer-events: auto; }

  
  
  
  .choices > .rise:not(.up):nth-child(odd)  { transform: translateX(-46px); }
  .choices > .rise:not(.up):nth-child(even) { transform: translateX(46px); }
  .picks   > .rise:not(.up):nth-child(odd)  { transform: translate(-40px, 16px); }
  .picks   > .rise:not(.up):nth-child(even) { transform: translate(40px, 16px); }

  
  
  .picks.four.rise:not(.up) { transform: none; }

  
  .choices.pair .c { will-change: transform, opacity; }
  .choices.pair > .rise:not(.up):nth-child(odd)  { transform: translateX(-78px); }
  .choices.pair > .rise:not(.up):nth-child(even) { transform: translateX(78px); }
  .rise.up { opacity: 1; transform: none;
             transition: opacity 1.05s cubic-bezier(.2,.8,.3,1),
                         transform 1.05s cubic-bezier(.2,.8,.3,1); }
  

  
  .q.done .c, .q.done .p { opacity: .5; }
  .q.done .c:hover, .q.done .p:hover { opacity: 1; }
  .q.done .c.picked, .q.done .p.picked { opacity: 1;
    border-color: var(--gold);
    background: linear-gradient(rgba(232,196,120,.2), rgba(232,196,120,.06)); }
  .q.done .c.picked b { background: var(--gold); color: #1a1430; }
  .q.done .p.picked em { color: var(--gold); }

  
  .q.done .c.picked, .q.done .p.picked {
    box-shadow: 0 0 0 1px var(--gold), 0 0 38px -10px rgba(232,196,120,.6); }
  .q.done .c:not(.picked):hover,
  .q.done .p:not(.picked):hover,
  .q.done .choices.pair .c.side-light:not(.picked):hover,
  .q.done .choices.pair .c.side-dark:not(.picked):hover {
    border-color: rgba(255,255,255,.34);
    background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.028));
    box-shadow: 0 16px 34px -14px rgba(0,0,0,.75); }
  
  .q.done .picks.four .p.picked { box-shadow: none; }

  
  .q.locked .c, .q.locked .p { pointer-events: none; opacity: .26;
                               filter: saturate(.45); transform: none; }
  .q.locked .c.picked, .q.locked .p.picked { opacity: .95; filter: none; }
  .q.locked .onward.shown { animation: none; opacity: .45; }

  
  @keyframes float-a { 0%, 100% { transform: translateY(0) }
                        50% { transform: translateY(-7px) } }
  @keyframes float-b { 0%, 100% { transform: translateY(0) }
                        50% { transform: translateY(-5px) } }

  
  .q h2 > span, .q .set > span, #result .name { display: inline-block; }
  .q.here h2 > span   { animation: float-a 7s ease-in-out 2.4s infinite;
                        will-change: transform; }
  .q.here .set > span { animation: float-b 9s ease-in-out 2.6s infinite;
                        will-change: transform; }

  

  #result.here .halo { animation: float-b 8s ease-in-out 2.3s infinite;
                       will-change: transform; }

  
  #result.here .halo svg { animation: mark-adrift 13s ease-in-out 2.7s infinite;
                           will-change: transform; }
  @keyframes mark-adrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg) }
    30%      { transform: translate(2.5px, -3px) rotate(1.1deg) }
    62%      { transform: translate(-2px, 2.5px) rotate(-.9deg) }
  }

  
  #result.here .halo { animation: float-b 8s ease-in-out 2.3s infinite,
                                  halo-breathe 9.5s ease-in-out 2.3s infinite; }
  @keyframes halo-breathe {
    0%, 100% { box-shadow: 0 0 90px -8px color-mix(in oklab, var(--lit1) 62%, transparent) }
    50%      { box-shadow: 0 0 118px -4px color-mix(in oklab, var(--lit1) 85%, transparent) }
  }
  #result.here .name > span { display: inline-block;
                              animation: float-a 10s ease-in-out 2.6s infinite,
                                         shine 6.5s ease-in-out 1.2s infinite;
                              will-change: transform; }

  .onward { display: block; margin: 36px auto 0; padding: 13px 26px 15px;
            font-size: 12px; font-weight: 500; letter-spacing: .3em;

            
            visibility: hidden; opacity: 0;
            transition: opacity .6s cubic-bezier(.2,.8,.3,1),
                        visibility 0s linear .6s,
                        border-color .3s, background .3s,
                        transform .3s, box-shadow .3s, color .3s; }
  .onward.shown { visibility: visible; opacity: 1;
                  transition: opacity .6s cubic-bezier(.2,.8,.3,1),
                              visibility 0s linear 0s,
                              border-color .3s, background .3s,
                              transform .3s, box-shadow .3s, color .3s; }
  .onward span { display: block; margin-top: 8px; font-size: 19px;
                 letter-spacing: 0; animation: nudge 1.9s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(6px) } }

  
  #result { position: relative; z-index: 1; min-height: 100vh;
            display: grid; place-items: center; padding: 12vh 22px; text-align: center; }
  
  
  
  #chant::after {
    content: ""; position: absolute; inset: -10% -25%; z-index: -1;
    pointer-events: none; filter: blur(40px); opacity: .55;
    background:
      radial-gradient(46% 34% at 30% 62%, rgba(104,116,184,.6), transparent 70%),
      radial-gradient(40% 28% at 70% 38%, rgba(84,68,130,.55), transparent 70%);
    animation: smoke 26s ease-in-out infinite alternate; }

  #chant { position: relative; z-index: 1; min-height: 100vh;
           display: grid; place-items: center; padding: 10vh 22px;
           text-align: center; }
  
  .chant { font: 400 clamp(19px, 3.5vw, 46px)/1.4 var(--serif);
           color: #cdd6f2; margin: 0; letter-spacing: .02em;

           
           white-space: nowrap; max-width: none; }

  
  .chant span { display: inline-block; opacity: 0;
                transform: translateY(14px); filter: blur(7px); }
  #chant.here .chant span {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity 1.25s cubic-bezier(.22,.7,.3,1),
                transform 1.25s cubic-bezier(.22,.7,.3,1),
                filter 1.25s cubic-bezier(.22,.7,.3,1); }

  #chant.here .chant span:nth-child(1) { transition-delay: .3s }
  #chant.here .chant span:nth-child(2) { transition-delay: .72s }
  #chant.here .chant span:nth-child(3) { transition-delay: 1.14s }
  #chant.here .chant span:nth-child(4) { transition-delay: 1.56s }
  #chant.here .chant span:nth-child(5) { transition-delay: 1.98s }
  #chant.here .chant span:nth-child(6) { transition-delay: 2.4s }

  
  .chant .dot { color: var(--gold); margin-left: .16em; }
  #chant.here .chant .dot:nth-child(7) { transition-delay: 2.95s }
  #chant.here .chant .dot:nth-child(8) { transition-delay: 3.35s }
  #chant.here .chant .dot:nth-child(9) { transition-delay: 3.75s }
  #chant.here .chant .dot { animation: think 1.7s ease-in-out infinite; }
  #chant.here .chant .dot:nth-child(7) { animation-delay: 4.1s }
  #chant.here .chant .dot:nth-child(8) { animation-delay: 4.3s }
  #chant.here .chant .dot:nth-child(9) { animation-delay: 4.5s }
  @keyframes think { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

  
  .card { position: relative; max-width: 580px; margin: 104px auto 0;
          padding: 0 clamp(22px, 5vw, 44px) 42px;
          border: 1px solid rgba(232,196,120,.3); border-radius: 24px;
          background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.015));
          box-shadow: 0 34px 90px -34px rgba(0,0,0,.85),
                      inset 0 1px 0 rgba(255,255,255,.07); }
  .card::before { content: ""; position: absolute; inset: 7px;
                  border: 1px solid rgba(232,196,120,.15);
                  border-radius: 18px; pointer-events: none; }

  
  
  #result { --a1: #4a4258; --a2: #8e86a0;      
            --lit1: #9c90bd; --lit2: #cdc6dd;  
            --disc: #ded7ea; }
  .halo { width: 200px; height: 200px; margin: -100px auto 0; border-radius: 50%;
          display: grid; place-items: center;
          
          background: radial-gradient(circle at 38% 30%,
                        #fff 0%, var(--disc) 34%,
                        var(--disc2, var(--disc)) 72%, var(--lit1) 100%);
          box-shadow: 0 0 90px -8px color-mix(in oklab, var(--lit1) 62%, transparent);
          opacity: 0; transform: scale(.7); }
  #result.here .halo { opacity: 1; transform: none;
    transition: opacity 1.3s cubic-bezier(.2,.8,.3,1),
                transform 1.5s cubic-bezier(.2,.8,.3,1); }
  .halo svg { width: 142px; height: 142px; grid-area: 1 / 1; }
  
  
  .halo .s0 { stop-color: color-mix(in oklab, var(--a2) 72%, var(--a1)); }
  .halo .s1 { stop-color: var(--a1); }
  .halo .line { fill: none; stroke: var(--a1); stroke-opacity: .85; stroke-width: 1.1;
                stroke-dasharray: 460; stroke-dashoffset: 460; }
  #result.here .halo .line { animation: draw 1.3s ease-out .3s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0 } }
  
  #result .eyebrow, #result .name, #result .says, #result .more-btn,
  #result .after {
    opacity: 0; transform: translateY(14px); }
  #result.here .eyebrow, #result.here .name, #result.here .says,
  #result.here .more-btn, #result.here .after {
    opacity: 1; transform: none;
    transition: opacity 1.1s cubic-bezier(.2,.8,.3,1),
                transform 1.1s cubic-bezier(.2,.8,.3,1); }
  
  #result.here .eyebrow  { transition-delay: 1.0s }
  #result.here .name     { transition-delay: 1.25s }
  #result.here .says     { transition-delay: 1.55s }
  #result.here .more-btn { transition-delay: 1.9s }
  #result.here .after    { transition-delay: 2.1s }

  .halo .solid { fill: url(#pelt); fill-opacity: 0; }
  #result.here .halo .solid { animation: ink .75s ease-out 1.0s forwards; }
  @keyframes ink { to { fill-opacity: .9 } }

  .eyebrow { margin: 32px 0 0; font: 500 12px/1 var(--sans); letter-spacing: .3em;
             text-transform: uppercase; color: var(--faint); }
  
  
  .name { font: 600 64px/1.15 var(--serif); margin: 6px 0 2px;
          color: var(--lit1); }
  
  .name > span {
    padding: .1em .06em .2em; margin: -.1em -.06em -.2em;
    background: linear-gradient(100deg,
                  var(--lit1) 0%, var(--lit2) 22%, #fff 32%,
                  var(--lit2) 42%, var(--lit1) 64%, var(--lit1) 100%);
    background-size: 320% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 18px color-mix(in oklab, var(--lit1) 45%, transparent)); }
  @keyframes shine {
    0%        { background-position: 108% 0 }
    55%, 100% { background-position: -22% 0 }
  }
  
  .says { max-width: 42ch; margin: 14px auto 0; font-size: 19px;
          line-height: 1.68; text-wrap: pretty;
          letter-spacing: .018em; word-spacing: .06em; }

  
  .scroll { margin-top: 22px; padding: 22px clamp(18px, 4vw, 26px) 24px;
            border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
            background: rgba(4,7,20,.45);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  #result .card { opacity: 0; transform: translateY(20px); }
  #result.here .card { opacity: 1; transform: none;
    transition: opacity 1.6s cubic-bezier(.2,.8,.3,1),
                transform 1.6s cubic-bezier(.2,.8,.3,1); }

  .more-btn { display: block; margin: 26px auto 0; padding: 12px 24px 14px;
              font-size: 12px; font-weight: 500; letter-spacing: .28em; }
  .more-btn span { display: inline-block; margin-left: 7px; letter-spacing: 0;
                   transition: transform .4s cubic-bezier(.2,.8,.3,1); }
  .more-btn[aria-expanded="true"] span { transform: rotate(180deg); }
  .more { display: grid; grid-template-rows: 0fr;
          transition: grid-template-rows .55s cubic-bezier(.2,.8,.3,1); }
  .more.open { grid-template-rows: 1fr; }
  .more > div { overflow: hidden; }
  .long { margin: 0; font-size: 17px; line-height: 1.78; color: var(--faint);
          text-align: left; letter-spacing: .018em; word-spacing: .06em; }

  
  .q.scene:has(.picks.six) .inner { max-width: 1100px; }
  .picks.six { grid-template-columns: repeat(6, 1fr); max-width: 1060px;
               gap: 10px; }
  @media (max-width: 1080px) {
    .picks.six { grid-template-columns: repeat(3, 1fr); max-width: 660px; }
  }
  @media (max-width: 560px) { .picks.six { grid-template-columns: repeat(2, 1fr); } }
  .picks.six .p svg { height: 150px; }
  .picks.six .p em { display: block; font-size: 16px; color: #e9eeff;
                     letter-spacing: .03em; }
  .picks.six .p em small { display: block; margin-top: 5px; font-size: 13.5px;
                           line-height: 1.45; letter-spacing: 0;
                           color: var(--faint); text-wrap: pretty; }
  .picks.six .p:hover em small { color: #b6c0e4; }
  @media (max-height: 900px) { .picks.six .p svg { height: 122px; } }
  @media (max-height: 740px) {
    .picks.six .p svg { height: 100px; }
    .picks.six .p em small { display: none; }
  }

  
  .fears .pebble { animation: fg-fall 4.2s cubic-bezier(.4,0,.9,.5) infinite; }
  .fears .p-b    { animation-duration: 5.6s; animation-delay: -2.4s; }
  @keyframes fg-fall {
    0%       { transform: translateY(0);    opacity: 0 }
    10%      { opacity: 1 }
    80%      { opacity: .5 }
    100%     { transform: translateY(72px); opacity: 0 }
  }

  
  .fears .flame { transform-box: fill-box; transform-origin: 50% 100%;
                  animation: fg-gutter 3.4s ease-in-out infinite; }
  .fears .shine, .fears .pool { animation: fg-dim 3.4s ease-in-out infinite; }
  .fears .creep { animation: fg-closein 3.4s ease-in-out infinite; }
  @keyframes fg-gutter {
    0%, 100% { transform: scaleY(1) scaleX(1);     opacity: 1 }
    42%      { transform: scaleY(.52) scaleX(.86); opacity: .7 }
    58%      { transform: scaleY(.66) scaleX(.92); opacity: .8 }
  }
  @keyframes fg-dim    { 0%, 100% { opacity: .2 }  46% { opacity: .07 } }
  @keyframes fg-closein { 0%, 100% { opacity: .5 } 46% { opacity: 1 } }

  
  .fears .bug { transform-box: fill-box; transform-origin: 50% 50%;
                animation: fg-crawl 6s ease-in-out infinite; }
  .fears .b2 { animation-duration: 7.4s; animation-delay: -2.1s }
  .fears .b3 { animation-duration: 5.2s; animation-delay: -3.6s }
  .fears .b4 { animation: fg-skitter 4.4s ease-in-out infinite; }
  @keyframes fg-crawl {
    0%, 100% { transform: translate(0, 0) rotate(0deg) }
    25%      { transform: translate(5px, -4px) rotate(9deg) }
    50%      { transform: translate(-3px, -9px) rotate(-7deg) }
    75%      { transform: translate(-6px, -3px) rotate(4deg) }
  }
  @keyframes fg-skitter {
    0%, 62%, 100% { transform: translate(0, 0) }
    70%           { transform: translate(-7px, 3px) rotate(-14deg) }
    82%           { transform: translate(-3px, 8px) rotate(8deg) }
  }

  
  .fears .underlight, .fears .underglow {
    animation: fg-passing 7.5s ease-in-out infinite; }
  .fears .underglow { animation-name: fg-passing-soft; }
  @keyframes fg-passing {
    0%, 52%, 100% { opacity: .2 }
    60%           { opacity: .85 }
    68%           { opacity: .25 }
    78%           { opacity: 1 }
    88%           { opacity: .2 }
  }
  @keyframes fg-passing-soft {
    0%, 52%, 100% { opacity: .05 }
    60%           { opacity: .16 }
    68%           { opacity: .06 }
    78%           { opacity: .22 }
    88%           { opacity: .05 }
  }

  
  .fears .w-l { animation: fg-squeeze-l 9s ease-in-out infinite; }
  .fears .w-r { animation: fg-squeeze-r 9s ease-in-out infinite; }
  @keyframes fg-squeeze-l { 0%, 100% { transform: none } 50% { transform: translateX(4px) } }
  @keyframes fg-squeeze-r { 0%, 100% { transform: none } 50% { transform: translateX(-4px) } }
  .fears .mote { animation: fg-dust 7s ease-in-out infinite; }
  .fears .m-2 { animation-duration: 9.5s; animation-delay: -3s }
  .fears .m-3 { animation-duration: 8.2s; animation-delay: -5.5s }
  @keyframes fg-dust {
    0%, 100% { transform: translate(0, 0);      opacity: .25 }
    50%      { transform: translate(2px, -14px); opacity: .9 }
  }

  
  .fears .eye { transform-box: fill-box; animation: fg-blink 6s ease-in-out infinite; }
  .fears .e1 { animation-duration: 5.2s;  animation-delay: -0.4s }
  .fears .e2 { animation-duration: 7.1s;  animation-delay: -2.8s }
  .fears .e3 { animation-duration: 6.4s;  animation-delay: -1.3s }
  .fears .e4 { animation-duration: 8.3s;  animation-delay: -4.9s }
  .fears .e5 { animation-duration: 5.7s;  animation-delay: -3.5s }
  .fears .e6 { animation-duration: 7.8s;  animation-delay: -0.9s }
  .fears .e7 { animation-duration: 6.9s;  animation-delay: -5.6s }
  .fears .e8 { animation-duration: 9.1s;  animation-delay: -2.2s }
  .fears .e9 { animation-duration: 5.9s;  animation-delay: -6.3s }
  .fears .e10 { animation-duration: 8.7s; animation-delay: -1.8s }
  @keyframes fg-blink {
    0%, 88%, 100% { transform: scaleY(1) }
    92%           { transform: scaleY(.06) }
    96%           { transform: scaleY(1) }
  }

  
  .flowers .head { animation: fl-nod 6.5s ease-in-out infinite; }
  @keyframes fl-nod {
    0%, 100% { transform: rotate(-3.5deg) }
    50%      { transform: rotate(3.5deg) }
  }
  .flowers .warm { animation: fl-warm 5s ease-in-out infinite; }
  @keyframes fl-warm { 0%, 100% { opacity: .13 } 50% { opacity: .26 } }

  .flowers .bell { transform-box: fill-box; transform-origin: 50% 0;
                   animation: fl-open 7s ease-in-out infinite; }
  .flowers .b-2 { animation-delay: -.6s }
  @keyframes fl-open {
    0%, 100% { transform: scale(.78) }
    50%      { transform: scale(1.06) }
  }
  .flowers .pollen { animation: fl-shed 5.5s ease-in-out infinite; }
  .flowers .pl-2 { animation-duration: 7s;   animation-delay: -2.4s }
  .flowers .pl-3 { animation-duration: 6.2s; animation-delay: -4.1s }
  @keyframes fl-shed {
    0%       { transform: translateY(0);    opacity: 0 }
    20%      { opacity: .95 }
    100%     { transform: translateY(26px); opacity: 0 }
  }
  .flowers .shed { animation: fl-fall 8s ease-in-out infinite; }
  @keyframes fl-fall {
    0%, 55%  { transform: translate(0, 0) rotate(28deg); opacity: .9 }
    100%     { transform: translate(7px, 34px) rotate(140deg); opacity: 0 }
  }
  .flowers .glint-t { animation: fl-edge 4.6s ease-in-out infinite; }
  @keyframes fl-edge { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

  
  .choices.pair .c.side-warm {
    border-color: rgba(232,196,120,.34);
    background: linear-gradient(rgba(232,196,120,.12), rgba(232,196,120,.02)); }
  .choices.pair .c.side-warm:hover {
    border-color: rgba(232,196,120,.8);
    background: linear-gradient(rgba(232,196,120,.24), rgba(232,196,120,.06));
    box-shadow: 0 0 44px -10px rgba(232,196,120,.7); }
  .choices.pair .c.side-cool {
    border-color: rgba(150,166,220,.26);
    background: linear-gradient(rgba(20,26,56,.75), rgba(8,11,26,.85)); }
  .choices.pair .c.side-cool:hover {
    border-color: rgba(185,196,234,.65);
    background: linear-gradient(rgba(30,38,76,.85), rgba(12,16,36,.9));
    box-shadow: 0 0 44px -12px rgba(140,160,230,.5); }

  
  .keepsake.up .settled { animation: fl-warm 6s ease-in-out infinite; }
  .keepsake.up .s-2 { animation-duration: 8s; animation-delay: -3s }
  .keepsake.up .s-3 { animation-duration: 7s; animation-delay: -5s }

  .burning .fire { transform-box: fill-box; transform-origin: 50% 100%; }
  .burning.up .fire { animation: fg-gutter 1.9s ease-in-out infinite; }
  .burning.up .f-mid  { animation-duration: 1.4s; animation-delay: -.5s }
  .burning.up .f-core { animation-duration: 1.1s; animation-delay: -.8s }

  .seeing .iris { transform-box: fill-box; transform-origin: 50% 50%; }
  .seeing.up .iris { animation: fp-widen 5.4s ease-in-out infinite; }
  @keyframes fp-widen { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.14) } }

  
  .stillness.up .ring { animation: fp-ripple 6s ease-in-out infinite; }
  .stillness.up .r-2 { animation-delay: -2s }
  .stillness.up .r-3 { animation-delay: -4s }
  @keyframes fp-ripple {
    0%   { transform: scale(.45); opacity: 0 }
    30%  { opacity: .85 }
    100% { transform: scale(1.12); opacity: 0 }
  }
  .stillness .ring { transform-box: fill-box; transform-origin: 50% 50%; }

  .leading.up .onwards { animation: fp-step 2.4s ease-in-out infinite; }
  @keyframes fp-step {
    0%, 100% { transform: translateY(0);   opacity: .85 }
    50%      { transform: translateY(4px); opacity: 1 }
  }
  .trailing .hangback { transform-box: fill-box; transform-origin: 50% 50%; }
  .trailing.up .hangback { animation: fp-hesitate 4.6s ease-in-out infinite; }
  @keyframes fp-hesitate {
    0%, 100% { transform: translateY(0);     opacity: .7 }
    50%      { transform: translateY(-3px);  opacity: 1 }
  }

  .highup.up .peakstar { animation: fp-widen 3.6s ease-in-out infinite; }
  .highup .peakstar { transform-box: fill-box; transform-origin: 50% 50%; }
  .faraway.up .wave { animation: fp-swell 5s ease-in-out infinite; }
  .faraway.up .w-2 { animation-duration: 6.4s; animation-delay: -1.7s }
  .faraway.up .w-3 { animation-duration: 7.6s; animation-delay: -3.4s }
  @keyframes fp-swell {
    0%, 100% { transform: translateX(0) }
    50%      { transform: translateX(-11px) }
  }

  
  .mote {
    position: absolute; bottom: -12px; border-radius: 50%;
    background: #cfd8f2; opacity: 0;
    animation: rise linear infinite;
    will-change: transform, opacity;
  }
  @keyframes rise {
    0%   { transform: translate(0, 0) scale(.7);   opacity: 0 }
    12%  { opacity: var(--lit, .4) }
    82%  { opacity: calc(var(--lit, .4) * .55) }
    100% { transform: translate(var(--sway, 20px), -104vh) scale(1);
           opacity: 0 }
  }

  
  .fly {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #ffeaa8; box-shadow: 0 0 7px 1.5px rgba(255,214,120,.5);
    opacity: 0; will-change: transform, opacity;
  }
  .fly i {
    position: absolute; inset: 0; border-radius: 50%;
    background: inherit; box-shadow: inherit;
  }
  @keyframes blink {
    0%, 100% { opacity: 0 }
    18%      { opacity: var(--lit, .8) }
    34%      { opacity: .08 }
    52%      { opacity: var(--lit, .8) }
    74%      { opacity: .12 }
  }
  
  @keyframes wander-a {
    0%, 100% { transform: translate(0, 0) }
    25%      { transform: translate(34px, -22px) }
    50%      { transform: translate(12px, -46px) }
    75%      { transform: translate(-26px, -18px) }
  }
  @keyframes wander-b {
    0%, 100% { transform: translate(0, 0) }
    30%      { transform: translate(-30px, -28px) }
    60%      { transform: translate(18px, -52px) }
    85%      { transform: translate(28px, -10px) }
  }
  @keyframes wander-c {
    0%, 100% { transform: translate(0, 0) }
    20%      { transform: translate(22px, 18px) }
    45%      { transform: translate(-18px, 34px) }
    70%      { transform: translate(-34px, -14px) }
  }

  
  @media (max-height: 900px) {
    .q { padding: 6vh 22px; }
    
    .illus { width: min(300px, 70%); margin-top: 1.4vh; }
    .flourish { height: 34px; margin-bottom: 1vh; }
    .set { font-size: 22px; margin: 3vh auto 8px; }
    h2 { font-size: 33px; margin: 3vh 0 0; }
    .choices { margin-top: 26px; gap: 9px; }
    .c { padding: 12px 17px; font-size: 15.5px; }
    .c b { flex-basis: 25px; height: 25px; }
    .picks { margin-top: 28px; }
    .p { padding: 12px 8px 10px; }
    .p svg { height: 124px; }
    .onward { margin-top: 26px; padding: 11px 23px 13px; }
    .onward span { margin-top: 6px; font-size: 17px; }
    .title { margin-top: 1vh; }
    .begin { margin-top: 3.5vh; padding: 15px 38px 17px; }
  }

  @media (max-height: 740px) {
    .q { padding: 4.5vh 22px; }
    .illus { width: min(230px, 58%); margin-top: .8vh; }
    .flourish { height: 28px; margin-bottom: .5vh; }
    .set { font-size: 20px; margin: 2vh auto 6px; }
    h2 { font-size: 28px; margin: 2vh 0 0; }
    .choices { margin-top: 20px; gap: 7px; }
    .c { padding: 10px 15px; font-size: 14.5px; }
    .p svg { height: 104px; }
    .onward { margin-top: 20px; }
  }

  
  .after { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
           margin-top: 30px; padding-top: 26px;
           border-top: 1px solid rgba(255,255,255,.1); }
  .way { padding: 12px 24px 14px; font-size: 11.5px; font-weight: 500;
         letter-spacing: .26em; text-decoration: none; }
  @media (max-width: 480px) { .after { flex-direction: column; } }

  
  @media (max-width: 560px) {
    .q, #result { padding: 7vh 16px; }
    .inner, .q.scene .inner { max-width: 100%; }

    .set { font-size: 18px; line-height: 1.55; margin: 3vh auto 10px; }
    h2 { font-size: 26px; line-height: 1.24; }
    .illus { width: min(260px, 76%); }

    .c { padding: 13px 15px; font-size: 16px; line-height: 1.5; gap: 11px; }
    .choices.grid .c { font-size: 15.5px; }
    .choices.pair .c { font-size: 17.5px; padding: 22px 18px; min-height: 0; }
    .sigil { width: 56px; height: 56px; }
    .p em { font-size: 13px; }
    .picks.six .p em { font-size: 14px; }

    
    .halo { width: 128px; height: 128px; margin: -64px auto 0; }
    .halo svg { width: 92px; height: 92px; }
    .card { margin-top: 68px; padding: 0 18px 30px; border-radius: 18px; }
    .eyebrow { margin-top: 22px; font-size: 10.5px; letter-spacing: .22em; }
    .name { font-size: 40px; margin: 4px 0 2px; }
    .says { font-size: 16.5px; line-height: 1.6; margin-top: 11px; }
    .more-btn { padding: 11px 18px 13px; font-size: 11px; letter-spacing: .18em; }
    .long { font-size: 15.5px; line-height: 1.7; }

    .chant { font-size: clamp(21px, 7vw, 32px); }
  }

  
  @media (max-width: 380px) {
    h2 { font-size: 23px; }
    .set { font-size: 17px; }
    .name { font-size: 34px; }
    .halo { width: 112px; height: 112px; margin: -56px auto 0; }
    .halo svg { width: 80px; height: 80px; }
    .more-btn { letter-spacing: .12em; font-size: 10.5px; }
  }

  .note { position: relative; z-index: 1; max-width: 70ch; margin: 0 auto;
          padding: 0 22px 14vh; font-size: 15.5px; color: var(--faint); }
  .note b { color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    #intro .step, #intro .title, #intro .set, #intro .begin,
    .illus .coin, .illus .spark,
    .steam, .bub, .glint, .fleck, .glow, .swirl, .drip, .star,
    .p-the-tall-one circle, .p-the-double-one circle,
    .p-the-one-with-all-the-locks rect, .p-the-one-that-s-locked rect,
    .p-the-plain-one rect, .p-the-one-bound-in-iron rect,
    .p-the-low-one circle, .p-the-little-one circle,
    .p-the-curtains-nearly-shut rect, .p-books-stacked-against-it circle,
    .p-a-crack-across-the-pane svg,
    .p-rain-on-the-glass path, .p-a-sky-full-of-stars circle,
    .p-the-one-left-open path, .p-something-growing-on-the-sill path,
    .p-the-overgrown-one circle, .p-the-one-standing-open circle,
    .p-the-one-standing-open path, .p-a-crack-across-the-pane path,
    .side-light .sigil circle, .side-light .sigil path,
    .side-dark .sigil circle, .side-dark .sigil path,
    .chant span,
    .q .step, .q .bar, .q .set, .q h2, .q .c, .q .p, .flourish,
    .halo, #result .card, #result .eyebrow, #result .name, #result .says,
    #result .more-btn {
      opacity: 1 !important; transform: none !important; }
    
    .q h2 > span, .q .set > span, .p svg, .stem, .lf,
    .fears *, .flowers *, .sigil * { animation: none !important; }
    .lf { opacity: .75 } .stem { stroke-dashoffset: 0 }
    .air-smoke::after, .air-clouds::after,
    #chant::after { animation: none !important; }
    .f-l, .f-r, .f-d, .halo .line { stroke-dashoffset: 0 }
    .f-d { fill-opacity: .9 }
    .halo .solid { fill-opacity: .9 }
  }

  
  .c > input, .p > input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .c:has(input:focus-visible), .p:has(input:focus-visible) {
    outline: 2px solid var(--gold); outline-offset: 3px;
  }
  
  .c:has(input:checked), .p:has(input:checked) {
    border-color: var(--gold);
    background: linear-gradient(rgba(232,196,120,.2), rgba(232,196,120,.06));
  }
  .c:has(input:checked) b { background: var(--gold); color: #1a1430; }
  .p:has(input:checked) em { color: var(--gold); }

  

  
  .trail { position: fixed; inset: 0; pointer-events: none; z-index: 60;
           overflow: hidden; }
  .trail-leaf {
    position: absolute;
    
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: leaf-trail .66s cubic-bezier(.2,.8,.3,1) forwards;
    will-change: transform, opacity;
  }
  @keyframes leaf-trail {
    0%   { opacity: 0;
           transform: translate(-50%, -50%) scale(.55) rotate(0deg); }
    
    18%  { opacity: .55; }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--drift, 0px)),
                                calc(-50% + var(--drop, 12px)))
                      scale(.92) rotate(var(--turn, 90deg)); }
  }

  
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-40 12 12)'%3E%3Cpath d='M12 2c4 3.5 6 7 6 10.5S15.3 20 12 22c-3.3-2-6-6-6-9.5S8 5.5 12 2z' fill='%238fbf86' stroke='%231b2a1c' stroke-width='1.1'/%3E%3Cpath d='M12 5v14' stroke='%231b2a1c' stroke-width='.9' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") 6 5, auto;
  }
  
  a, button, summary, label.c, label.p, input[type="range"], .begin, .onward {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-24 12 12)'%3E%3Cpath d='M12 2c4 3.5 6 7 6 10.5S15.3 20 12 22c-3.3-2-6-6-6-9.5S8 5.5 12 2z' fill='%23e8c478' stroke='%233a2c12' stroke-width='1.1'/%3E%3Cpath d='M12 5v14' stroke='%233a2c12' stroke-width='.9' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") 7 4, pointer;
  }

  
  .soundbox { position: fixed; left: 18px; top: 18px; z-index: 60; }

  .soundbtn {
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    display: grid; place-items: center; position: relative;
    border: 1px solid rgba(232,196,120,.22); border-radius: 50%;
    background: rgba(10,14,34,.72); color: var(--gold);
    backdrop-filter: blur(6px); opacity: .72;
    transition: opacity .3s, border-color .3s, background .3s, transform .3s;
  }
  .soundbtn:hover, .soundbtn:focus-visible, .soundbox.open .soundbtn {
    opacity: 1; border-color: rgba(232,196,120,.6);
    background: rgba(16,22,48,.86);
  }
  .soundbtn:active { transform: scale(.93); }
  .soundbtn svg { width: 21px; height: 21px; fill: currentColor; }
  .soundbtn svg [fill="none"] { stroke: currentColor; stroke-width: 1.9;
                                stroke-linecap: round; }

  
  .soundbox .x { display: none; }
  .soundbox.muted .x { display: block; }
  .soundbox.muted .w1, .soundbox.muted .w2 { display: none; }
  .soundbox.muted .soundbtn { color: var(--faint); }

  
  .soundbtn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 100%; top: 50%;
    transform: translate(8px, -50%);
    white-space: nowrap; pointer-events: none;
    font: 500 10.5px/1 var(--sans); letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink);
    background: rgba(8,11,26,.92);
    border: 1px solid rgba(232,196,120,.22);
    border-radius: 999px; padding: 6px 11px 7px;
    box-shadow: 0 10px 26px -14px #000;
    opacity: 0; transition: opacity .25s, transform .25s;
  }
  .soundbtn:hover::after { opacity: 1; transform: translate(12px, -50%); }
  .soundbox.open .soundbtn::after { content: none; }

  .soundpanel {
    position: absolute; left: 0; top: calc(100% + 10px);
    width: 196px; box-sizing: border-box;
    padding: 13px 15px 15px;
    display: grid; gap: 13px;
    border: 1px solid rgba(232,196,120,.2); border-radius: 15px;
    background: rgba(8,11,26,.92); backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px -22px #000;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .28s, transform .28s cubic-bezier(.2,.8,.3,1);
  }
  .soundbox.open .soundpanel { opacity: 1; transform: none; pointer-events: auto; }

  .soundrow { display: block; cursor: pointer; }
  .soundname {
    display: block; margin-bottom: 7px;
    font: 500 10.5px/1 var(--sans); letter-spacing: .16em;
    text-transform: uppercase; color: var(--faint);
    transition: color .25s;
  }
  .soundrow:hover .soundname { color: var(--gold); }
  .soundrow.nothing { opacity: .4; }
  .soundrow.nothing .soundbar { cursor: not-allowed; }

  
  .soundbar {
    display: block; width: calc(100% - 14px); margin: 0 7px;
    padding: 0; appearance: none; -webkit-appearance: none;
    background: none; cursor: pointer; height: 16px;
  }
  .soundbar::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(232,196,120,.85), rgba(232,196,120,.18));
  }
  .soundbar::-moz-range-track {
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(232,196,120,.85), rgba(232,196,120,.18));
  }
  .soundbar::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; margin-top: -5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold); border: 0;
    box-shadow: 0 0 12px -2px rgba(232,196,120,.9);
  }
  .soundbar::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold); border: 0;
    box-shadow: 0 0 12px -2px rgba(232,196,120,.9);
  }
  .soundbar:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

  
  @media (pointer: fine) {
    body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
    
    svg, img { -webkit-user-drag: none; user-select: none; }
  }

  
  .stillbox { position: fixed; left: 66px; top: 18px; z-index: 60; }
  .stillbtn {
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    display: grid; place-items: center; position: relative;
    border: 1px solid rgba(232,196,120,.22); border-radius: 50%;
    background: rgba(10,14,34,.72); color: var(--gold);
    backdrop-filter: blur(6px); opacity: .72;
    transition: opacity .3s, border-color .3s, background .3s, transform .3s;
  }
  .stillbtn:hover, .stillbtn:focus-visible {
    opacity: 1; border-color: rgba(232,196,120,.6);
    background: rgba(16,22,48,.86);
  }
  .stillbtn:active { transform: scale(.93); }
  .stillbtn svg { width: 21px; height: 21px; }
  .stillbtn svg [fill="none"] { stroke: currentColor; stroke-width: 1.9;
                                stroke-linecap: round; }
  
  .stillbtn .x { display: none; }
  html[data-still] .stillbtn { color: var(--faint); }
  html[data-still] .stillbtn .x { display: block; }

  .stillbtn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 100%; top: 50%;
    transform: translate(8px, -50%);
    white-space: nowrap; pointer-events: none;
    font: 500 10.5px/1 var(--sans); letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink);
    background: rgba(8,11,26,.92);
    border: 1px solid rgba(232,196,120,.22);
    border-radius: 999px; padding: 6px 11px 7px;
    box-shadow: 0 10px 26px -14px #000;
    opacity: 0; transition: opacity .25s, transform .25s;
  }
  .stillbtn:hover::after { opacity: 1; transform: translate(12px, -50%); }

  
  html[data-still] .title > span,
  html[data-still] .q.here h2 > span,
  html[data-still] .q.here .set > span,
  html[data-still] .choices.words .c span,
  html[data-still] #result.here .halo,
  html[data-still] #result.here .halo svg,
  html[data-still] .lantern {
    animation: none !important; transform: none !important; }
  
  html[data-still] #result.here .name > span {
    animation: shine 6.5s ease-in-out 1.2s infinite !important;
    transform: none !important; }
  
  html[data-still] .mote { display: none; }

  
  html[data-moved] .title > span,
  html[data-moved] .q.here h2 > span,
  html[data-moved] .q.here .set > span,
  html[data-moved] #result.here .halo,
  html[data-moved] #result.here .halo svg,
  html[data-moved] #result.here .name > span {
    animation-delay: -2.4s !important; }

  
  @media (max-width: 560px) {
    .soundbox { left: 10px; top: 10px; }
    .soundpanel { width: 172px; }
    .stillbox { left: 48px; top: 10px; }
    .soundbtn, .stillbtn { width: 32px; height: 32px; opacity: .6; }
    .soundbtn svg, .stillbtn svg { width: 17px; height: 17px; }
    .soundbtn[data-tip]::after, .stillbtn[data-tip]::after { content: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .soundpanel, .soundbtn, .soundbtn::after, .stillbtn { transition: none; }
  }

  
  .wink { position: fixed; inset: 0; z-index: 60;
          display: grid; place-items: center; padding: 24px;
          background: rgba(4, 6, 16, .74);
          opacity: 0; transition: opacity .45s ease; }
  
  .wink[hidden] { display: none; }
  
  .wink { pointer-events: none; }
  .wink.here { opacity: 1; pointer-events: auto; }
  .wink-card { position: relative; z-index: 1;
               max-width: 430px; text-align: center;
               padding: 34px 32px 30px; border-radius: 18px;
               border: 1px solid rgba(232,196,120,.3);
               background: linear-gradient(rgba(22,27,54,.97), rgba(10,13,30,.98));
               box-shadow: 0 30px 70px -24px rgba(0,0,0,.9);
               transform: translateY(16px) scale(.96);
               transition: transform .5s cubic-bezier(.2,.8,.3,1),
                           opacity .5s cubic-bezier(.2,.8,.3,1);
               opacity: 0; }
  
  .wink.here .wink-card { transform: none; opacity: 1;
                          transition-delay: .12s; }
  .wink-mark { display: block; width: 76px; height: 76px; margin: 0 auto 18px;
               fill: var(--gold);
               filter: drop-shadow(0 0 22px rgba(232,196,120,.4)); }
  .wink-card p { margin: 0 0 24px; color: var(--moon);
                 font: 400 21px/1.52 var(--serif);
                 letter-spacing: .02em; text-wrap: balance; }
  .wink-card .btn { font-size: 12px; padding: 12px 24px 14px; }
  @media (prefers-reduced-motion: reduce) {
    .wink, .wink-card { transition: none; }
  }

  
  
  .choices.words {
    display: grid; grid-template-columns: repeat(3, 1fr);
    justify-items: center; align-items: center;
    gap: clamp(30px, 7vh, 76px) clamp(24px, 5vw, 70px);
    margin: 52px auto 0; max-width: 820px;
  }
  @media (max-width: 620px) {
    .choices.words { grid-template-columns: repeat(2, 1fr); }
  }

  
  .choices.words .c:nth-child(1) { margin-top: 0 }
  .choices.words .c:nth-child(2) { margin-top: 30px }
  .choices.words .c:nth-child(3) { margin-top: -16px }
  .choices.words .c:nth-child(4) { margin-top: 20px }
  .choices.words .c:nth-child(5) { margin-top: -10px }
  .choices.words .c:nth-child(6) { margin-top: 34px }

  .choices.words .c {
    display: inline-block; padding: 10px 6px 12px;
    border: 0; background: none; border-radius: 0;
    font: 400 clamp(26px, 4.2vw, 44px)/1.2 var(--serif);
    letter-spacing: .04em; color: var(--moon);
    text-shadow: 0 0 20px rgba(232,196,120,.34),
                 0 0 54px rgba(232,196,120,.16);
    transition: color .35s, text-shadow .35s;
  }
  .choices.words .c b { display: none; }

  
  .choices.words .c span {
    display: inline-block;
    --r: 6px;
    animation: word-orbit 13s linear infinite;
    will-change: transform;
  }

  
  .choices.words .c:nth-child(1) span { --r: 7px;   animation-duration: 15s;   animation-delay: -2s }
  .choices.words .c:nth-child(2) span { --r: 4.5px; animation-duration: 11s;   animation-delay: -7s;
                                        animation-direction: reverse }
  .choices.words .c:nth-child(3) span { --r: 8px;   animation-duration: 18s;   animation-delay: -11s }
  .choices.words .c:nth-child(4) span { --r: 5.5px; animation-duration: 13.5s; animation-delay: -4s;
                                        animation-direction: reverse }
  .choices.words .c:nth-child(5) span { --r: 9px;   animation-duration: 16.5s; animation-delay: -13s }
  .choices.words .c:nth-child(6) span { --r: 5px;   animation-duration: 12.5s; animation-delay: -9s;
                                        animation-direction: reverse }

  
  @keyframes word-orbit {
    0%     { transform: translate(var(--r), 0) }
    12.5%  { transform: translate(calc(var(--r) * .707), calc(var(--r) * .707)) }
    25%    { transform: translate(0, var(--r)) }
    37.5%  { transform: translate(calc(var(--r) * -.707), calc(var(--r) * .707)) }
    50%    { transform: translate(calc(var(--r) * -1), 0) }
    62.5%  { transform: translate(calc(var(--r) * -.707), calc(var(--r) * -.707)) }
    75%    { transform: translate(0, calc(var(--r) * -1)) }
    87.5%  { transform: translate(calc(var(--r) * .707), calc(var(--r) * -.707)) }
    100%   { transform: translate(var(--r), 0) }
  }

  
  .choices.words .c:hover,
  .choices.words .c:has(input:checked),
  .choices.words .c.picked { transform: none; }

  .choices.words .c:hover,
  .choices.words .c:has(input:focus-visible) {
    color: var(--gold);
    text-shadow: 0 0 24px rgba(232,196,120,.8),
                 0 0 70px rgba(232,196,120,.4);
  }
  .q.done .choices.words .c { opacity: .32; }
  .q.done .choices.words .c:hover { opacity: .75; }
  .q.done .choices.words .c.picked,
  .choices.words .c:has(input:checked) {
    opacity: 1; color: var(--gold); background: none; border: 0;
    text-shadow: 0 0 26px rgba(232,196,120,.9),
                 0 0 80px rgba(232,196,120,.45);
  }
  
  .choices.words > .rise:not(.up) {
    transform: translateY(16px); filter: blur(10px); }
  .choices.words > .rise.up {
    filter: blur(0);
    transition: opacity 1.5s cubic-bezier(.22,.7,.3,1),
                transform 1.5s cubic-bezier(.22,.7,.3,1),
                filter 1.5s cubic-bezier(.22,.7,.3,1),
                color .35s, text-shadow .35s; }

  
  .q.done .choices.words .c.picked,
  .q.done .choices.words .c:not(.picked):hover {
    background: none; box-shadow: none; }

  @media (prefers-reduced-motion: reduce) {
    .choices.words .c { animation: none; }
    .choices.words > .rise:not(.up) { filter: none; }
  }

  
  .picks.plain { grid-template-columns: repeat(6, 1fr); max-width: 1020px;
                 gap: 14px; }
  @media (max-width: 1080px) {
    .picks.plain { grid-template-columns: repeat(3, 1fr); max-width: 540px; }
  }
  .picks.plain .p { padding: 0; border: 0; background: none; overflow: hidden;
                    border-radius: 14px; }
  
  .picks.plain .p svg { display: block; width: 100%; height: auto;
                        aspect-ratio: 80 / 120;
                        border-radius: 14px;
                        outline: 1px solid rgba(255,255,255,.12);
                        outline-offset: -1px; }
  .picks.plain .p:hover svg { outline-color: rgba(232,196,120,.6); }
  .picks.plain .p:has(input:checked) svg,
  .picks.plain .p.picked svg { outline: 2px solid var(--gold); }
  
  @media (max-height: 900px) { .picks.plain { max-width: 860px; } }
  @media (max-height: 740px) { .picks.plain { max-width: 700px; } }

  
  .el-w { animation: el-swell 7s ease-in-out infinite; }
  .el-w.w2 { animation-duration: 9s;  animation-delay: -2s }
  .el-w.w3 { animation-duration: 11s; animation-delay: -4s }
  .el-w.w4 { animation-duration: 13s; animation-delay: -6s }
  @keyframes el-swell {
    0%, 100% { transform: translateX(0) }
    50%      { transform: translateX(-14px) }
  }
  .el-moon { animation: el-breathe 6s ease-in-out infinite; }
  @keyframes el-breathe { 0%, 100% { opacity: .85 } 50% { opacity: 1 } }

  
  .el-f { transform-box: fill-box; transform-origin: 50% 100%;
          animation: el-burn 2.4s ease-in-out infinite; }
  .el-f.f2 { animation-duration: 1.7s; animation-delay: -.6s }
  .el-f.f3 { animation-duration: 1.2s; animation-delay: -.9s }
  @keyframes el-burn {
    0%, 100% { transform: scaleY(1) scaleX(1) }
    40%      { transform: scaleY(.84) scaleX(1.08) }
    70%      { transform: scaleY(1.06) scaleX(.94) }
  }
  .el-spark { transform-box: fill-box; transform-origin: 50% 50%;
              animation: el-rise 3.6s ease-out infinite; }
  .el-spark.s2 { animation-duration: 4.4s; animation-delay: -1.5s }
  .el-spark.s3 { animation-duration: 5s;   animation-delay: -3s }
  @keyframes el-rise {
    0%   { transform: translateY(0) scale(.6);     opacity: 0 }
    25%  { opacity: .9 }
    100% { transform: translateY(-34px) scale(.2); opacity: 0 }
  }

  
  .el-g { animation: el-gust 5s ease-in-out infinite; }
  .el-g.g2 { animation-duration: 6.6s; animation-delay: -1.8s }
  .el-g.g3 { animation-duration: 8s;   animation-delay: -3.4s }
  @keyframes el-gust {
    0%, 100% { transform: translateX(-6px); opacity: .5 }
    50%      { transform: translateX(10px); opacity: 1 }
  }
  .el-leaf { transform-box: fill-box; transform-origin: 50% 50%;
             animation: el-blow 6.5s ease-in-out infinite; }
  .el-leaf.l2 { animation-duration: 8.2s; animation-delay: -2.6s }
  .el-leaf.l3 { animation-duration: 7.1s; animation-delay: -4.8s }
  @keyframes el-blow {
    0%, 100% { transform: translate(-8px, 4px) rotate(-12deg) }
    50%      { transform: translate(12px, -6px) rotate(16deg) }
  }

  
  .el-stalk { transform-box: fill-box; transform-origin: 50% 100%;
              animation: el-lean 8s ease-in-out infinite; }
  @keyframes el-lean {
    0%, 100% { transform: rotate(-1.6deg) }
    50%      { transform: rotate(1.6deg) }
  }
  .el-lf { transform-box: fill-box; transform-origin: 50% 50%;
           animation: el-open 7s ease-in-out infinite; }
  .el-lf.b { animation-duration: 8.6s; animation-delay: -2.2s }
  .el-lf.c { animation-duration: 6.2s; animation-delay: -4.1s }
  @keyframes el-open {
    0%, 100% { transform: rotate(-3deg) scaleX(1) }
    50%      { transform: rotate(3deg) scaleX(1.04) }
  }
  .el-dew { animation: el-breathe 4.4s ease-in-out infinite; }

  
  .el-st { transform-box: fill-box; transform-origin: 50% 50%;
           animation: el-catch 3.4s ease-in-out infinite; }
  .el-st.s2  { animation-duration: 4.6s; animation-delay: -.7s }
  .el-st.s3  { animation-duration: 2.9s; animation-delay: -1.9s }
  .el-st.s4  { animation-duration: 5.2s; animation-delay: -3.3s }
  .el-st.s5  { animation-duration: 3.8s; animation-delay: -2.4s }
  .el-st.s6  { animation-duration: 4.1s; animation-delay: -.3s }
  .el-st.s7  { animation-duration: 5.8s; animation-delay: -4.6s }
  .el-st.s8  { animation-duration: 3.2s; animation-delay: -1.2s }
  .el-st.s9  { animation-duration: 4.9s; animation-delay: -2.8s }
  .el-st.s10 { animation-duration: 3.6s; animation-delay: -3.9s }
  .el-st.s11 { animation-duration: 5.5s; animation-delay: -1.6s }
  @keyframes el-catch {
    0%, 100% { transform: scale(.3) rotate(0deg);    opacity: .15 }
    45%      { transform: scale(1.1) rotate(45deg);  opacity: 1 }
    70%      { transform: scale(.75) rotate(70deg);  opacity: .5 }
  }

  
  .el-glint { animation: el-shine 5.5s ease-in-out infinite; }
  @keyframes el-shine {
    0%, 100% { opacity: .2 }
    50%      { opacity: 1 }
  }

  @media (prefers-reduced-motion: reduce) {
    .picks.plain svg * { animation: none !important; }
  }

  
  .opens { display: block; margin: 26px 0 0; }
  .opens .more-btn { margin: 18px auto 0; }

  
  .ends { display: flex; flex-wrap: wrap; justify-content: center;
          gap: 10px; margin-top: 18px; }
  .ends .more-btn { margin: 0; }
  .again { text-decoration: none; }
  @media (max-width: 460px) {
    .ends { flex-direction: column; align-items: stretch; }
  }

  
  .leave { position: fixed; left: 18px; bottom: 16px; z-index: 40;
           font: 500 10.5px/1 var(--sans); letter-spacing: .2em;
           text-transform: uppercase; text-decoration: none;
           color: var(--faint); opacity: .62;
           padding: 9px 11px; border-radius: 10px;
           transition: opacity .3s, color .3s, background .3s; }
  .leave:hover, .leave:focus-visible {
    opacity: 1; color: var(--gold);
    background: rgba(232,196,120,.08); }
  
  .leave { animation: leave-in 1s ease 2.3s both; }
  @keyframes leave-in { from { opacity: 0 } to { opacity: .62 } }
  @media (max-width: 560px) {
    .leave { left: 10px; bottom: 10px; font-size: 10px; letter-spacing: .16em; }
  }

  
  .traits {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
    margin: 16px auto 0; padding: 0; max-width: 40ch; list-style: none;
  }
  .trait {
    padding: 5px 12px 6px;
    font: 500 12.5px/1 var(--sans); letter-spacing: .1em;
    color: var(--lit2, #cdc6dd);
    border: 1px solid color-mix(in oklab, var(--lit1, #9c90bd) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--lit1, #9c90bd) 11%, transparent);
  }
  
  #result .traits { opacity: 0; transform: translateY(14px); }
  #result.here .traits {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.2,.8,.3,1) 1.2s,
                transform .7s cubic-bezier(.2,.8,.3,1) 1.2s;
  }
  @media (max-width: 480px) {
    .trait { padding: 4px 10px 5px; font-size: 11.5px; letter-spacing: .07em; }
  }

  
  .plainly { position: relative; z-index: 2; padding: 6vh 22px 12vh;
             text-align: center; }

  
  .spread { margin-top: 26px; text-align: left; }
  .spread > summary { display: inline-flex; cursor: pointer; list-style: none;
                      margin: 0 auto; }
  .spread > summary::-webkit-details-marker { display: none; }
  .spread[open] > summary span { transform: rotate(180deg); }
  .spread > summary span { display: inline-block; margin-left: 7px;
                           transition: transform .4s cubic-bezier(.2,.8,.3,1); }

  .spread-body { margin-top: 20px; padding: 20px clamp(16px, 4vw, 24px) 22px;
                 border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
                 background: rgba(4,7,20,.45); }
  .spread-note { margin: 0 0 16px; font-size: 13px; color: var(--faint);
                 letter-spacing: .02em; }
  .spread-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
  
  .spread-row { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 3.4em;
                align-items: center; gap: 10px; font-size: 14px; }
  .spread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 color: var(--faint); }
  .spread-bar { display: block; height: 9px; border-radius: 999px;
                background: rgba(255,255,255,.06);
                border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
  
  .spread-bar i { display: block; height: 100%; border-radius: 999px;
                  background: var(--lit1, #9c90bd); transform-origin: left center;
                  animation: spread-grow .7s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes spread-grow { from { transform: scaleX(0) } to { transform: none } }
  .spread-pc { text-align: right; font-size: 12.5px; color: var(--faint);
               font-variant-numeric: tabular-nums; }
  .spread-row.is-mine .spread-name,
  .spread-row.is-mine .spread-pc { color: var(--moon); font-weight: 600; }

  @media (max-width: 480px) {
    .spread-row { grid-template-columns: minmax(0, 6.5em) 1fr 3.2em; gap: 7px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .spread-bar i { animation: none; }
    .spread > summary span { transition: none; }
  }

  
  .wink-fun { position: absolute; inset: 0; overflow: hidden;
              pointer-events: none; }
  .clown { position: absolute; line-height: 1;
           opacity: .5; will-change: transform; }
  .confetti { position: absolute; top: -8%; display: block;
              border-radius: 1px; will-change: transform; }
  @keyframes clown-drift {
    0%, 100% { transform: translate(0, 0) rotate(-8deg) }
    25%      { transform: translate(14px, -18px) rotate(6deg) }
    50%      { transform: translate(-6px, -30px) rotate(-4deg) }
    75%      { transform: translate(-16px, -14px) rotate(9deg) }
  }
  @keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg) }
    100% { transform: translateY(122vh) rotate(760deg) }
  }
  .clown.k1 { left: 8%; top: 72%; font-size: 46px;
               animation: clown-drift 11.0s ease-in-out -1.7s infinite; }
  .clown.k2 { left: 19%; top: 22%; font-size: 34px;
               animation: clown-drift 13.5s ease-in-out -3.4s infinite; }
  .clown.k3 { left: 34%; top: 84%; font-size: 40px;
               animation: clown-drift 12.2s ease-in-out -5.1s infinite; }
  .clown.k4 { left: 52%; top: 14%; font-size: 30px;
               animation: clown-drift 15.0s ease-in-out -6.8s infinite; }
  .clown.k5 { left: 68%; top: 66%; font-size: 44px;
               animation: clown-drift 11.6s ease-in-out -8.5s infinite; }
  .clown.k6 { left: 81%; top: 30%; font-size: 36px;
               animation: clown-drift 14.2s ease-in-out -10.2s infinite; }
  .clown.k7 { left: 92%; top: 78%; font-size: 32px;
               animation: clown-drift 12.8s ease-in-out -11.9s infinite; }
  .confetti.f1 { left: 97%; width: 6px; height: 11px;
                  background: #d96a7a;
                  animation: confetti-fall 4.05s linear -0.31s infinite; }
  .confetti.f2 { left: 94%; width: 7px; height: 13px;
                  background: #6fa8dc;
                  animation: confetti-fall 4.50s linear -0.62s infinite; }
  .confetti.f3 { left: 91%; width: 8px; height: 15px;
                  background: #8fbf86;
                  animation: confetti-fall 4.95s linear -0.93s infinite; }
  .confetti.f4 { left: 88%; width: 5px; height: 17px;
                  background: #c58fd8;
                  animation: confetti-fall 5.40s linear -1.24s infinite; }
  .confetti.f5 { left: 85%; width: 6px; height: 9px;
                  background: #f0e4a8;
                  animation: confetti-fall 5.85s linear -1.55s infinite; }
  .confetti.f6 { left: 82%; width: 7px; height: 11px;
                  background: #e8c478;
                  animation: confetti-fall 6.30s linear -1.86s infinite; }
  .confetti.f7 { left: 79%; width: 8px; height: 13px;
                  background: #d96a7a;
                  animation: confetti-fall 3.60s linear -2.17s infinite; }
  .confetti.f8 { left: 76%; width: 5px; height: 15px;
                  background: #6fa8dc;
                  animation: confetti-fall 4.05s linear -2.48s infinite; }
  .confetti.f9 { left: 73%; width: 6px; height: 17px;
                  background: #8fbf86;
                  animation: confetti-fall 4.50s linear -2.79s infinite; }
  .confetti.f10 { left: 70%; width: 7px; height: 9px;
                  background: #c58fd8;
                  animation: confetti-fall 4.95s linear -3.10s infinite; }
  .confetti.f11 { left: 67%; width: 8px; height: 11px;
                  background: #f0e4a8;
                  animation: confetti-fall 5.40s linear -3.41s infinite; }
  .confetti.f12 { left: 64%; width: 5px; height: 13px;
                  background: #e8c478;
                  animation: confetti-fall 5.85s linear -3.72s infinite; }
  .confetti.f13 { left: 61%; width: 6px; height: 15px;
                  background: #d96a7a;
                  animation: confetti-fall 6.30s linear -4.03s infinite; }
  .confetti.f14 { left: 58%; width: 7px; height: 17px;
                  background: #6fa8dc;
                  animation: confetti-fall 3.60s linear -4.34s infinite; }
  .confetti.f15 { left: 55%; width: 8px; height: 9px;
                  background: #8fbf86;
                  animation: confetti-fall 4.05s linear -4.65s infinite; }
  .confetti.f16 { left: 52%; width: 5px; height: 11px;
                  background: #c58fd8;
                  animation: confetti-fall 4.50s linear -4.96s infinite; }
  .confetti.f17 { left: 49%; width: 6px; height: 13px;
                  background: #f0e4a8;
                  animation: confetti-fall 4.95s linear -5.27s infinite; }
  .confetti.f18 { left: 46%; width: 7px; height: 15px;
                  background: #e8c478;
                  animation: confetti-fall 5.40s linear -5.58s infinite; }
  .confetti.f19 { left: 43%; width: 8px; height: 17px;
                  background: #d96a7a;
                  animation: confetti-fall 5.85s linear -5.89s infinite; }
  .confetti.f20 { left: 40%; width: 5px; height: 9px;
                  background: #6fa8dc;
                  animation: confetti-fall 6.30s linear -6.20s infinite; }
  .confetti.f21 { left: 37%; width: 6px; height: 11px;
                  background: #8fbf86;
                  animation: confetti-fall 3.60s linear -6.51s infinite; }
  .confetti.f22 { left: 34%; width: 7px; height: 13px;
                  background: #c58fd8;
                  animation: confetti-fall 4.05s linear -6.82s infinite; }
  .confetti.f23 { left: 31%; width: 8px; height: 15px;
                  background: #f0e4a8;
                  animation: confetti-fall 4.50s linear -7.13s infinite; }
  .confetti.f24 { left: 28%; width: 5px; height: 17px;
                  background: #e8c478;
                  animation: confetti-fall 4.95s linear -7.44s infinite; }
  @media (prefers-reduced-motion: reduce) {
    .clown, .confetti { animation: none; }
    .confetti { display: none; }
  }