@property --bg{syntax:"<color>";inherits:true;initial-value:#241634}@property --glow{syntax:"<color>";inherits:true;initial-value:#6b3a6f}@property --ink{syntax:"<color>";inherits:true;initial-value:#fdf2ff}@property --muted{syntax:"<color>";inherits:true;initial-value:#cdb6d8}@property --accent{syntax:"<color>";inherits:true;initial-value:#f2c96b}@property --on-accent{syntax:"<color>";inherits:true;initial-value:#241634}@property --card{syntax:"<color>";inherits:true;initial-value:#ffffff14}:root{--serif:"Playfair Display", Georgia, serif;--script:"Great Vibes", "Snell Roundhand", cursive;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font:16px/1.5 var(--sans);color:var(--ink);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;transition:--bg .9s,--glow .9s,--ink .9s,--muted .9s,--accent .9s,--on-accent .9s,--card .9s}*,:before,:after{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,p{margin:0}button,input{font:inherit}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){:root{transition:none}*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:radial-gradient(120% 60% at 50% 0%, var(--glow), transparent 75%), var(--bg);justify-content:center;display:flex;position:relative;overflow-x:hidden}.screen{z-index:1;flex-direction:column;gap:18px;width:100%;max-width:460px;animation:.5s both rise;display:flex;position:relative}.screen-start,.screen-finale{text-align:center;justify-content:center}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.78rem;font-weight:600}.title{font-family:var(--serif);font-size:clamp(2.2rem,11vw,3rem);font-weight:700;line-height:1.05}.title-version{color:var(--accent);margin-top:6px;font-size:.5em;font-style:italic;font-weight:500;display:block}.era-header{text-align:center}.era-name{font-family:var(--serif);margin-top:4px;font-size:clamp(1.6rem,8vw,2.1rem);font-style:italic;font-weight:500;line-height:1.15}.era-tagline{font-family:var(--serif);color:var(--muted);font-size:.95rem}.question{font-family:var(--serif);font-size:clamp(1.3rem,5.6vw,1.6rem);font-weight:500;line-height:1.3}.card{border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);background:var(--card);-webkit-backdrop-filter:blur(10px);border-radius:24px;flex-direction:column;gap:18px;padding:24px 20px;display:flex;box-shadow:0 18px 40px -24px #00000073}.intro{text-align:left;gap:10px}.button{background:var(--accent);width:100%;min-height:54px;color:var(--on-accent);cursor:pointer;box-shadow:0 10px 24px -12px var(--accent);border:none;border-radius:999px;justify-content:center;align-items:center;padding:12px 22px;font-size:1.05rem;font-weight:600;transition:transform .15s,opacity .2s;display:inline-flex}.button:active{transform:scale(.98)}.button:disabled{cursor:default;opacity:.55}.button:focus-visible,.answer-input:focus-visible,.review summary:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent);outline-offset:3px}.button-ghost{color:var(--ink);border:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);box-shadow:none;background:0 0}.error{color:var(--ink);background:#d62d3a24;border-radius:12px;padding:10px 14px;font-size:.92rem}.answer-form{flex-direction:column;gap:12px;display:flex}.answer-input{border:1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);background:color-mix(in srgb, var(--ink) 5%, transparent);width:100%;min-height:54px;color:var(--ink);border-radius:16px;padding:12px 18px;font-size:1.05rem}.answer-input::placeholder{color:var(--muted)}.answer-input:focus{border-color:var(--accent)}.thinking{align-items:center;gap:10px;display:inline-flex}.vinyl{background:radial-gradient(circle, var(--on-accent) 0 2px, var(--accent) 2.5px 6px, transparent 6.5px), repeating-radial-gradient(circle, #111 0 1.5px, #2b2b2b 1.5px 3px);border-radius:50%;width:26px;height:26px;animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result{border-radius:16px;flex-direction:column;gap:8px;padding:16px;animation:.4s both rise;display:flex}.result-correct{background:#2faa6b29}.result-wrong{background:#d62d3a21}.result-title{font-family:var(--serif);font-size:1.35rem;font-weight:700}.result-answer{color:var(--muted);font-size:.88rem}.result-solution{border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);padding-top:8px}.bracelet{width:100%;display:block;overflow:visible}.bracelet-string{stroke:color-mix(in srgb, var(--ink) 30%, transparent);stroke-width:1.5px}.bead circle{fill:color-mix(in srgb, var(--ink) 8%, var(--bg));stroke:color-mix(in srgb, var(--ink) 18%, transparent);stroke-width:1px;transition:fill .5s}.bead text{font:700 13px var(--sans);fill:var(--muted)}.bead-correct circle,.bead-wrong circle{stroke:#00000026}.bead-wrong text{fill:var(--ink)}.bead-current circle{stroke:var(--accent);stroke-width:2.5px;animation:1.6s ease-in-out infinite pulse}.bead-current text{fill:var(--ink)}@keyframes pulse{50%{stroke-width:5px}}.birthday{flex-direction:column;gap:4px;font-weight:400;display:flex}.birthday-line{font-family:var(--serif);font-size:clamp(1.5rem,7vw,2rem);font-style:italic;font-weight:500}.birthday-name{font-family:var(--script);background:linear-gradient(100deg,#d9468c,#f2a93b,#b9a8ec,#2f86bb,#d9468c) 0 0/250% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(4rem,20vw,5.5rem);line-height:1.1;animation:6s linear infinite shimmer}@keyframes shimmer{to{background-position:250% 0}}.birthday-heart{font-family:var(--serif);font-size:.55em;font-style:italic}.finale-note{font-family:var(--serif);color:var(--muted);font-size:1.05rem}.score{gap:6px}.score-number{font-family:var(--serif);font-size:3rem;font-weight:700;line-height:1}.score-number span{color:var(--muted);font-size:1rem;font-weight:500}.score-title{color:var(--accent);font-size:1.2rem;font-weight:600}.review{text-align:left;gap:0;padding:0}.review summary{cursor:pointer;border-radius:24px;padding:18px 20px;font-weight:600}.review ol{flex-direction:column;gap:14px;margin:0;padding:0 20px 20px;list-style:none;display:flex}.review li{gap:12px;font-size:.92rem;display:flex}.review li>span{width:1.2em;color:var(--accent);flex:none;font-weight:700}.review-answer{color:var(--muted);font-weight:600}.confetti{z-index:10;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.sparkles{pointer-events:none;position:fixed;inset:0}.sparkles span{color:var(--accent);opacity:0;animation:4s ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{50%{opacity:.45;transform:scale(1.15)}}.gift-stage{--w:150px;--h:112px;--lw:166px;--lh:34px;--paper:radial-gradient(circle, #ffffff4d 0 1.4px, transparent 2px) 0 0 / 14px 14px, radial-gradient(circle, #f2c96b66 0 1px, transparent 1.6px) 7px 7px / 14px 14px, linear-gradient(160deg, #3353c4, #1c2f82);--ribbon-v:linear-gradient(90deg, transparent calc(50% - 12px), #a8741f calc(50% - 12px), #f7e09a 45%, #d9ab4c 55%, #a8741f calc(50% + 12px), transparent calc(50% + 12px));--ribbon-h:linear-gradient(180deg, transparent calc(50% - 12px), #a8741f calc(50% - 12px), #f7e09a 45%, #d9ab4c 55%, #a8741f calc(50% + 12px), transparent calc(50% + 12px));--inside:linear-gradient(180deg, #f6e4b0, #c99d52);place-items:center;min-height:480px;margin:4px 0;display:grid;position:relative}.gift-rays{aspect-ratio:1;opacity:0;pointer-events:none;background:radial-gradient(closest-side, #fffae1f2, #ffecaa80 35%, transparent 70%), repeating-conic-gradient(#fff0beb3 0 6deg, transparent 6deg 18deg);width:580px;transition:opacity .8s,scale 1.3s cubic-bezier(.2,.8,.2,1);position:absolute;top:48%;left:50%;translate:-50% -50%;scale:.2;-webkit-mask:radial-gradient(closest-side,#000 20%,#0000);mask:radial-gradient(closest-side,#000 20%,#0000)}.is-opened .gift-rays{opacity:1;animation:40s linear infinite rays-turn;scale:1}@keyframes rays-turn{to{rotate:360deg}}.gift-button{color:inherit;cursor:pointer;perspective:900px;perspective-origin:50% 25%;background:0 0;border:none;padding:0;transition:opacity .7s .15s,transform .9s cubic-bezier(.4,0,.2,1) .15s;position:absolute;inset:0}.gift-button:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent);outline-offset:-6px;border-radius:32px}.is-revealed .gift-button{opacity:0;pointer-events:none;transform:translateY(60px)scale(.8)}.gift-shadow{background:radial-gradient(closest-side,#3c143261,#0000);border-radius:50%;width:250px;height:56px;animation:3.2s ease-in-out infinite gift-shadow;position:absolute;top:calc(58% + 92px);left:50%;translate:-50% -50%}@keyframes gift-shadow{50%{opacity:.65;scale:.82}}.gift-sparkle{color:#e0a93a;opacity:0;font-size:1.1rem;animation:3.2s ease-in-out infinite twinkle;position:absolute}.is-opened .gift-sparkle{display:none}.gift-float,.gift-wiggle,.gift-rig,.gift-body,.gift-lid,.gift-bow,.gift-beams{transform-style:preserve-3d;position:absolute}.gift-float{transition:scale .3s;animation:3.2s ease-in-out infinite gift-float;top:58%;left:50%}.gift-button:hover .gift-float{scale:1.05}@keyframes gift-float{50%{transform:translateY(-14px)}}.gift-wiggle{animation:4.5s ease-in-out 1.2s infinite gift-hop}@keyframes gift-hop{0%,72%,to{transform:none}78%{transform:translateY(-22px)rotate(-7deg)}84%{transform:translateY(0)rotate(5deg)}89%{transform:rotate(-3deg)}94%{transform:rotate(1deg)}}.is-shaking .gift-wiggle{animation:.8s ease-in-out both gift-shake}@keyframes gift-shake{0%{transform:none}12%{transform:translate(-6px)rotate(-8deg)}24%{transform:translate(6px)rotate(8deg)}36%{transform:translate(-7px)rotate(-9deg)scale(1.03)}48%{transform:translate(7px)rotate(9deg)scale(1.05)}60%{transform:translate(-5px)rotate(-6deg)scale(1.07)}72%{transform:translate(5px)rotate(6deg)scale(1.08)}86%{transform:translateY(8px)scale(1.12,.9)}to{transform:translateY(-6px)scale(.98,1.04)}}.is-opened .gift-wiggle{animation:none;transform:translateY(-6px)scale(.98,1.04)}.gift-rig{animation:9s ease-in-out infinite gift-sway;transform:rotateX(-22deg)rotateY(-30deg)}@keyframes gift-sway{0%,to{transform:rotateX(-24deg)rotateY(-38deg)}50%{transform:rotateX(-18deg)rotateY(38deg)}}.gift-face{--fw:var(--w);--fh:var(--h);--tint:transparent;width:var(--fw);height:var(--fh);margin:calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2);background:linear-gradient(var(--tint), var(--tint)), var(--ribbon-v), var(--paper);backface-visibility:hidden;position:absolute;top:0;left:0}.gift-body-front{transform:translateZ(calc(var(--w) / 2))}.gift-body-right{--tint:#0a0a2829;transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}.gift-body-left{--tint:#0a0a284d;transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}.gift-body-back{--tint:#0a0a2861;transform:rotateY(180deg) translateZ(calc(var(--w) / 2))}.gift-body-bottom{--fh:var(--w);--tint:#0a0a2880;background:linear-gradient(var(--tint), var(--tint)), var(--ribbon-v), var(--ribbon-h), var(--paper);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}.gift-body-in-front,.gift-body-in-back,.gift-body-in-left,.gift-body-in-right,.gift-body-in-floor{background:linear-gradient(var(--tint), var(--tint)), var(--inside)}.gift-body-in-front{--tint:#5a320047;transform:rotateY(180deg) translateZ(calc(var(--w) / -2 + 1px))}.gift-body-in-back{transform:translateZ(calc(var(--w) / -2 + 1px))}.gift-body-in-left{--tint:#5a32001f;transform:rotateY(90deg) translateZ(calc(var(--w) / -2 + 1px))}.gift-body-in-right{--tint:#5a320033;transform:rotateY(-90deg) translateZ(calc(var(--w) / -2 + 1px))}.gift-body-in-floor{--fh:var(--w);--tint:#5a320040;transform:rotateX(90deg) translateZ(calc(var(--h) / -2 + 1px))}.gift-body-in-floor:after{content:"";opacity:0;background:radial-gradient(closest-side,#fffbe8,#ffde8cb3 45%,#0000);transition:opacity .6s .2s;position:absolute;inset:0}.is-opened .gift-body-in-floor:after{opacity:1}.gift-lid{transform:translateY(calc(var(--h) / -2 - var(--lh) / 2 + 10px));transition:transform 1.25s cubic-bezier(.15,.8,.3,1)}.is-opened .gift-lid{transform:translateY(calc(var(--h) / -2 - var(--lh) / 2 + 10px)) translate3d(110px, -250px, 80px) rotateZ(38deg) rotateX(-35deg) rotateY(160deg)}.gift-lid .gift-face{--fw:var(--lw);--fh:var(--lh);box-shadow:inset 0 -4px #00001e38}.gift-lid .gift-lid-top{--fh:var(--lw);--tint:#ffffff1a;background:linear-gradient(var(--tint), var(--tint)), var(--ribbon-v), var(--ribbon-h), var(--paper);box-shadow:none;transform:rotateX(90deg) translateZ(calc(var(--lh) / 2))}.gift-lid-front{transform:translateZ(calc(var(--lw) / 2))}.gift-lid-right{--tint:#0a0a2829;transform:rotateY(90deg) translateZ(calc(var(--lw) / 2))}.gift-lid-left{--tint:#0a0a284d;transform:rotateY(-90deg) translateZ(calc(var(--lw) / 2))}.gift-lid-back{--tint:#0a0a2861;transform:rotateY(180deg) translateZ(calc(var(--lw) / 2))}.gift-lid .gift-lid-under{--fh:var(--lw);--tint:#5a32004d;background:linear-gradient(var(--tint), var(--tint)), var(--inside);box-shadow:none;transform:rotateX(-90deg) translateZ(calc(var(--lh) / 2))}.gift-lid .gift-face,.gift-bow>*{transition:opacity .45s}.is-opened .gift-lid .gift-face,.is-opened .gift-bow>*{opacity:0;transition-delay:.6s}.gift-bow{transform:translateY(calc(var(--lh) / -2))}.gift-bow-loop{transform-origin:50% 90%;width:124px;height:76px;position:absolute;top:-72px;left:-62px;overflow:visible}.gift-bow-loop:nth-child(2){transform:rotateY(42deg)}.gift-bow-loop:nth-child(3){transform:rotateY(-48deg)}.gift-bow-tails{width:140px;height:140px;position:absolute;top:-70px;left:-70px;transform:rotateX(90deg)translateZ(1px)}.gift-beams{transform:translateY(calc(var(--h) / -2))}.gift-beam{transform-origin:50% 100%;opacity:0;clip-path:polygon(24% 100%,76% 100%,100% 0,0 0);background:linear-gradient(#0000,#ffe29666 55%,#fff6d2f2);width:160px;height:340px;transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s,opacity .4s .15s;position:absolute;top:-340px;left:-80px;transform:rotateY(45deg)scaleY(0);-webkit-mask:linear-gradient(90deg,#0000,#000 35% 65%,#0000);mask:linear-gradient(90deg,#0000,#000 35% 65%,#0000)}.gift-beam+.gift-beam{transform:rotateY(-45deg)scaleY(0)}.is-opened .gift-beam{opacity:.9;transform:rotateY(45deg)scaleY(1)}.is-opened .gift-beam+.gift-beam{transform:rotateY(-45deg)scaleY(1)}.gift-motes span{color:#e9b949;text-shadow:0 0 8px #fff0bee6;opacity:0;animation:1.6s ease-out both mote-rise;position:absolute;top:44%;left:50%}@keyframes mote-rise{0%{opacity:0;transform:translate(-50%,20px)scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx)), -190px) scale(1.2) rotate(180deg)}}.gift-hint{font-family:var(--serif);color:var(--muted);font-size:1.05rem;font-style:italic;animation:.6s both rise;position:absolute;bottom:-6px;left:0;right:0}.is-closed .gift-hint{animation:2.4s ease-in-out infinite hint-pulse}@keyframes hint-pulse{50%{opacity:.55}}.is-shaking .gift-hint,.is-open .gift-hint{opacity:0;transition:opacity .3s}.is-revealed .gift-hint{animation:.8s 1.4s both rise}.voucher{z-index:1;perspective:1100px;touch-action:pan-y;width:min(100%,330px);margin-bottom:28px;animation:.35s both voucher-fade;position:relative}@keyframes voucher-fade{0%{opacity:0}}.voucher-tilt{transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease-out}.voucher-card{transform-style:preserve-3d;animation:1.7s cubic-bezier(.2,.75,.25,1) both voucher-in;position:relative}@keyframes voucher-in{0%{transform:translateY(70px)scale(.15)rotateY(-720deg)}65%{transform:translateY(-14px)scale(1.05)rotateY(8deg)}82%{transform:translateY(4px)scale(.99)rotateY(-3deg)}to{transform:translateY(0)scale(1)rotateY(0)}}.voucher-side{backface-visibility:hidden;filter:drop-shadow(0 24px 28px #3c143259)}.voucher-back{position:absolute;inset:0;transform:rotateY(180deg)}.voucher-paper{--notch:calc(100% - 70px);height:100%;-webkit-mask:radial-gradient(circle 11px at 0 var(--notch), transparent 97%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle 11px at 100% var(--notch), transparent 97%, #000) right / 50.5% 100% no-repeat;-webkit-mask:radial-gradient(circle 11px at 0 var(--notch), transparent 97%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle 11px at 100% var(--notch), transparent 97%, #000) right / 50.5% 100% no-repeat;mask:radial-gradient(circle 11px at 0 var(--notch), transparent 97%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle 11px at 100% var(--notch), transparent 97%, #000) right / 50.5% 100% no-repeat;background:#fbf6ea;border-radius:20px;padding:12px;position:relative;overflow:hidden}.voucher-frame{text-align:center;color:#1d2f6f;border:1.5px solid #c9a24a;border-radius:12px;flex-direction:column;gap:8px;padding:14px 14px 0;display:flex}.voucher-eyebrow{letter-spacing:.32em;text-transform:uppercase;color:#b08a35;font-size:.72rem;font-weight:700}.voucher-photo{aspect-ratio:5/4;background:#e9e4dc;border-radius:10px;position:relative;overflow:hidden}.voucher-photo img{object-fit:cover;object-position:45% 26%;width:100%;height:100%;display:block}.voucher-photo:after{content:"";border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #c9a24a99,inset 0 -30px 40px -30px #1d2f6f59}.voucher-title{font-family:var(--serif);letter-spacing:.16em;margin-top:6px;font-size:1.12rem;font-weight:700;line-height:1.2}.voucher-sub{font-family:var(--script);color:#2c4bb0;margin-top:-6px;font-size:2.3rem;line-height:1.1}.voucher-stub{letter-spacing:.12em;text-transform:uppercase;color:#7a7f9e;border-top:2px dashed #1d2f6f38;justify-content:space-between;align-items:center;gap:8px;height:56px;margin:2px -14px 0;padding:0 18px;font-size:.66rem;font-weight:600;display:flex}.voucher-stub strong{color:#1d2f6f}.voucher-shine{pointer-events:none;background:linear-gradient(115deg,#0000 38%,#ffffffa6 48%,#ffe8a059 52%,#0000 62%) 0 0/300% 100%;background-position:var(--shine,0%) 0;transition:background-position .3s ease-out;animation:1.3s ease-in-out 1.5s backwards voucher-sweep;position:absolute;inset:0}@keyframes voucher-sweep{0%{background-position:100% 0}to{background-position:0 0}}.voucher-back .voucher-paper{background:var(--paper);place-items:center;display:grid}.voucher-seal{aspect-ratio:1;width:112px;font-family:var(--script);color:#6d4610;background:radial-gradient(circle at 35% 30%,#fff1bf,#e2b457 45%,#9c6a1e);border-radius:50%;place-items:center;font-size:3.6rem;display:grid;box-shadow:0 6px 16px #00001e66,inset 0 0 0 6px #ffffff2e}