@font-face{font-family:Helvetica Now Display;src:url(/fonts/HelveticaNowDisplay-Light.otf) format("opentype");font-weight:300;font-style:normal;font-display:block}@font-face{font-family:Helvetica Now Display;src:url(/fonts/HelveticaNowDisplay-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:Helvetica Now Display;src:url(/fonts/HelveticaNowDisplay-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:block}@font-face{font-family:Helvetica Now Display;src:url(/fonts/HelveticaNowDisplay-Black.otf) format("opentype");font-weight:900;font-style:normal;font-display:block}@font-face{font-family:Helvetica Now Display;src:url(/fonts/HelveticaNowDisplay-BlackIta.otf) format("opentype");font-weight:900;font-style:italic;font-display:block}@font-face{font-family:Helvetica Now Extra;src:url(/fonts/HelveticaNowDisplay-ExtBlk.otf) format("opentype");font-weight:950;font-style:normal;font-display:block}:root{--bg-0: #05020f;--bg-1: #0b0420;--ink: #f6f0ff;--ink-dim: #b5a9d6;--ink-ghost: #6f6391;--violet: #6e2bff;--magenta: #ff2fb5;--cyan: #22f0ff;--orange: #ff7a1a;--lime: #c6ff2f;--stroke: rgba(255, 255, 255, .08);--stroke-strong: rgba(255, 255, 255, .18);--glow-violet: 0 0 40px rgba(110, 43, 255, .55);--glow-magenta: 0 0 44px rgba(255, 47, 181, .55);--glow-cyan: 0 0 36px rgba(34, 240, 255, .45);--easing: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100vh;width:100vw;background:var(--bg-0);color:var(--ink);font-family:Helvetica Now Display,Helvetica Neue,Helvetica,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{overflow:hidden;overscroll-behavior:none}#root{display:flex;flex-direction:column}button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(1200px 800px at 80% -10%,rgba(110,43,255,.35),transparent 60%),radial-gradient(900px 700px at -10% 110%,rgba(255,47,181,.28),transparent 55%),radial-gradient(600px 500px at 50% 50%,rgba(34,240,255,.12),transparent 70%),linear-gradient(180deg,#05020f,#0b0420 60%,#05020f)}.stage:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(110,43,255,.18) 40deg,transparent 90deg,rgba(255,47,181,.14) 180deg,transparent 240deg,rgba(34,240,255,.14) 300deg,transparent 360deg);animation:spin 40s linear infinite;mix-blend-mode:screen;filter:blur(40px);z-index:-3}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");opacity:.12;mix-blend-mode:overlay;z-index:-1}.grid-lines{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);background-size:96px 96px;-webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);z-index:-2}@keyframes spin{to{transform:rotate(360deg)}}.app{position:relative;height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2vh,28px) clamp(24px,3vw,40px);font-size:clamp(10px,.75vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);flex-shrink:0}.brand{display:flex;align-items:center;gap:clamp(10px,1vw,16px);font-weight:900;color:var(--ink)}.brand-logo{height:clamp(24px,2.4vw,36px);width:auto;display:block}.brand-sub{font-size:clamp(10px,.75vw,12px);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;padding-left:clamp(10px,1vw,16px);border-left:1px solid var(--stroke-strong)}.meta{display:flex;gap:28px;align-items:center}.meta span{display:inline-flex;gap:8px;align-items:center}.meta b{color:var(--ink);font-weight:500;letter-spacing:.1em}.stage-frame{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;justify-content:center;padding:0 clamp(16px,2.4vw,40px) clamp(16px,2.4vh,32px)}.card{position:relative;flex:1;max-width:1600px;border:1px solid var(--stroke-strong);border-radius:clamp(16px,1.6vw,28px);background:linear-gradient(180deg,#0b0420bf,#05020f99);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;display:flex;flex-direction:column;min-height:0}.card:before{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(135deg,rgba(110,43,255,.6),rgba(255,47,181,.3) 40%,transparent 60%,rgba(34,240,255,.5) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.progress{display:flex;gap:6px;padding:clamp(16px,1.6vh,24px) clamp(24px,3vw,40px) 0;flex-shrink:0}.progress-seg{flex:1;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden;position:relative}.progress-seg.active:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--magenta),var(--cyan));box-shadow:0 0 12px #ff2fb599;animation:fill .5s var(--easing) forwards}.progress-seg.done:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--magenta));box-shadow:0 0 10px #6e2bff99}@keyframes fill{0%{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}.stage-inner{flex:1 1 auto;padding:clamp(24px,3.2vh,48px) clamp(32px,4vw,64px) clamp(16px,2vh,32px);display:flex;flex-direction:column;gap:clamp(16px,2vh,28px);min-height:0;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:.3em;color:var(--ink-ghost);text-transform:uppercase;font-weight:500;display:flex;gap:14px;align-items:center}.eyebrow .num{color:var(--magenta);font-weight:900}.eyebrow .bar{flex:0 0 40px;height:1px;background:var(--stroke-strong)}.headline{font-family:Helvetica Now Display;font-weight:900;font-size:clamp(32px,5.2vw,80px);line-height:.95;letter-spacing:-.03em;margin:0;max-width:14ch}.headline em{font-style:italic;background:linear-gradient(120deg,var(--magenta),var(--cyan) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}.lede{font-size:clamp(14px,1.1vw,18px);line-height:1.55;color:var(--ink-dim);max-width:56ch;font-weight:300}.welcome{flex:1 1 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,4vw,64px);align-items:center;min-height:0}.welcome-left{display:flex;flex-direction:column;gap:28px}.welcome-right{position:relative;height:100%;max-height:min(60vh,560px);aspect-ratio:3 / 4;justify-self:end;border-radius:20px;overflow:hidden;isolation:isolate}.welcome-right:before,.welcome-right:after{content:"";position:absolute;inset:0}.welcome-right:before{background:radial-gradient(120% 70% at 50% 100%,var(--magenta) 0%,transparent 60%),radial-gradient(80% 60% at 30% 20%,var(--violet) 0%,transparent 55%),linear-gradient(180deg,#1a0635,#050113)}.welcome-right:after{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 48px);-webkit-mask:radial-gradient(100% 60% at 50% 100%,black 0%,transparent 65%);mask:radial-gradient(100% 60% at 50% 100%,black 0%,transparent 65%)}.welcome-right .silhouette{position:absolute;left:50%;bottom:0;transform:translate(-50%);width:62%;height:78%;background:linear-gradient(180deg,#000 0%,transparent 100%);clip-path:polygon(50% 0%,62% 12%,58% 25%,72% 38%,66% 52%,80% 64%,70% 100%,30% 100%,20% 64%,34% 52%,28% 38%,42% 25%,38% 12%);filter:drop-shadow(0 0 40px rgba(255,47,181,.6));z-index:2}.welcome-right .rays{position:absolute;inset:0;background:conic-gradient(from 270deg at 50% 100%,transparent 0deg,rgba(255,47,181,.35) 30deg,transparent 50deg,rgba(110,43,255,.35) 90deg,transparent 110deg,rgba(34,240,255,.3) 150deg,transparent 170deg);mix-blend-mode:screen;z-index:1}.welcome-right .tag{position:absolute;top:24px;left:24px;right:24px;z-index:3;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);font-weight:500}.welcome-right .tag b{color:var(--cyan);font-weight:900}.welcome-right .caption{position:absolute;bottom:24px;left:24px;right:24px;z-index:3;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);display:flex;justify-content:space-between}.cta-row{display:flex;gap:16px;align-items:center;margin-top:12px}.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:clamp(14px,1.6vh,22px) clamp(22px,2.4vw,34px);min-height:clamp(48px,5.6vh,64px);border:1px solid var(--stroke-strong);background:#ffffff05;color:var(--ink);font-size:clamp(12px,1vw,15px);letter-spacing:.2em;text-transform:uppercase;font-weight:500;border-radius:999px;transition:all .25s var(--easing);touch-action:manipulation}.btn:active{transform:scale(.97)}.btn:hover{border-color:var(--ink);background:#ffffff0f}.btn-primary{background:linear-gradient(120deg,var(--magenta),var(--violet));border-color:transparent;font-weight:900;padding:clamp(16px,1.8vh,24px) clamp(28px,3vw,44px);min-height:clamp(52px,6.4vh,72px);font-size:clamp(12px,1.05vw,16px);box-shadow:var(--glow-magenta)}.btn-primary:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,var(--cyan),var(--magenta));opacity:0;transition:opacity .3s var(--easing);z-index:-1}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 64px #ff2fb5b3}.btn-primary:hover:after{opacity:1}.btn-primary[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.btn-ghost{background:transparent;border-color:var(--stroke-strong);color:var(--ink-dim)}.btn-ghost:hover{color:var(--ink)}.arrow{display:inline-block;width:22px;height:10px;position:relative}.arrow:before,.arrow:after{content:"";position:absolute;background:currentColor}.arrow:before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}.arrow:after{right:0;top:50%;width:10px;height:10px;border-right:2px solid currentColor;border-top:2px solid currentColor;background:transparent;transform:translateY(-50%) rotate(45deg)}.slider-wrap{display:flex;flex-direction:column;gap:clamp(14px,2vh,28px);margin-top:8px;-webkit-user-select:none;user-select:none;flex-shrink:0}.slider-labels{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;padding:0 4px}.slider-labels .r{text-align:right}.slider-rail{position:relative;height:clamp(90px,12vh,140px);display:flex;align-items:center;touch-action:none;cursor:pointer;outline:none;padding:0 32px;margin:0 -32px}.slider-rail:before{content:"";position:absolute;inset:0}.slider-track{position:absolute;left:32px;right:32px;height:14px;border-radius:999px;background:#ffffff0f;border:1px solid var(--stroke-strong);box-shadow:inset 0 2px 8px #00000080}.slider-fill{position:absolute;left:32px;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 40%,var(--magenta) 80%,var(--orange) 100%);box-shadow:0 0 22px #ff2fb580,0 0 40px #6e2bff59;pointer-events:none;transition:width .16s var(--easing)}.slider-ticks{position:absolute;left:32px;right:32px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;pointer-events:none}.slider-tick{position:relative;width:0;display:flex;flex-direction:column;align-items:center}.slider-tick .dot{width:6px;height:6px;border-radius:50%;background:#ffffff40;transition:background .2s var(--easing)}.slider-tick.done .dot{background:#fff;box-shadow:0 0 8px #fff}.slider-tick .num{position:absolute;top:-34px;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--ink-ghost);transition:color .2s var(--easing)}.slider-tick.done .num{color:var(--cyan)}.slider-thumb{position:absolute;top:50%;left:0;width:clamp(64px,6.4vw,88px);height:clamp(64px,6.4vw,88px);transform:translate(-50%,-50%);margin-left:32px;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:left .16s var(--easing),opacity .2s var(--easing)}.slider-thumb.visible{opacity:1}.slider-thumb .ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0%,#ffd8f2 35%,var(--magenta) 70%,var(--violet) 100%);box-shadow:0 0 0 2px #fffc,0 12px 40px #ff2fb599,0 0 60px #6e2bff73;animation:thumb-pulse 2.2s ease-in-out infinite}.slider-thumb .core{position:relative;z-index:1;font-weight:900;font-size:24px;font-style:italic;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}@keyframes thumb-pulse{0%,to{box-shadow:0 0 0 2px #fffc,0 12px 40px #ff2fb599,0 0 60px #6e2bff73}50%{box-shadow:0 0 0 2px #fff,0 16px 56px #ff2fb5d9,0 0 80px #6e2bffa6}}.slider-readout{display:flex;align-items:baseline;gap:clamp(16px,2vw,24px);margin-top:8px}.slider-readout .n{font-weight:900;font-size:clamp(72px,10vw,140px);line-height:.85;letter-spacing:-.05em;background:linear-gradient(120deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}.slider-readout .word{font-size:clamp(18px,1.8vw,28px);letter-spacing:-.01em;font-weight:500;color:var(--ink);max-width:24ch}.choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);margin-top:4px;flex:0 1 auto;min-height:0}.choice-card{position:relative;border:1px solid var(--stroke-strong);border-radius:clamp(12px,1.4vw,20px);overflow:hidden;aspect-ratio:3 / 4;max-height:100%;cursor:pointer;background:#0a0320;transition:transform .3s var(--easing),border-color .25s var(--easing),box-shadow .3s var(--easing);display:flex;flex-direction:column;justify-content:flex-end;padding:0}.choice-card:hover{transform:translateY(-6px);border-color:#ff2fb599;box-shadow:0 20px 60px #ff2fb540}.choice-card.selected{border-color:var(--magenta);box-shadow:0 0 0 2px var(--magenta),0 0 60px #ff2fb58c;transform:translateY(-6px)}.choice-card .media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.5s var(--easing),filter .3s var(--easing);filter:saturate(1.1) brightness(.85)}.choice-card:hover .media{transform:scale(1.08);filter:saturate(1.3) brightness(1)}.choice-card .media.icon{background-size:70%;background-repeat:no-repeat;background-color:#140631;filter:none}.choice-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,2,15,.88) 100%);z-index:1}.choice-card .label{position:relative;z-index:2;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;gap:6px;text-align:left}.choice-card .label .title{font-size:clamp(14px,1.4vw,22px);font-weight:900;letter-spacing:-.01em;color:var(--ink)}.choice-card .label .kind{font-size:clamp(9px,.75vw,11px);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-ghost);font-weight:500}.choice-card:active{transform:translateY(-2px) scale(.98)}.choice-card .badge{position:absolute;top:14px;right:14px;z-index:2;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--stroke-strong);background:#05020f99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:all .25s var(--easing)}.choice-card.selected .badge{border-color:transparent;background:var(--magenta);box-shadow:var(--glow-magenta)}.choice-card.selected .badge:after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}.icon-card{aspect-ratio:1 / 1;border:1px solid var(--stroke-strong);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(110,43,255,.35) 0%,transparent 55%),radial-gradient(circle at 70% 80%,rgba(255,47,181,.3) 0%,transparent 55%),#0a0320;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;padding:0;transition:all .3s var(--easing)}.icon-card:hover{transform:translateY(-6px);border-color:var(--magenta);box-shadow:0 18px 48px #ff2fb54d}.icon-card.selected{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan),0 0 60px #22f0ff66}.icon-card .emoji{font-size:88px;filter:drop-shadow(0 8px 20px rgba(255,47,181,.45));transition:transform .4s var(--easing)}.icon-card:hover .emoji{transform:scale(1.15) rotate(-6deg)}.icon-card:active{transform:translateY(-2px) scale(.98)}.icon-card .icon-label{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:500}.icon-card.selected .icon-label{color:var(--ink)}.nav-footer{display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,1.6vh,24px) clamp(32px,4vw,64px) clamp(20px,2.4vh,40px);margin-top:auto;flex-shrink:0}.nav-footer .hint{font-size:clamp(9px,.75vw,11px);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-ghost);font-weight:500}.result-stage{position:relative;isolation:isolate}.result-stage .vibe-wash{position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 18% 28%,var(--p1) 0%,transparent 60%),radial-gradient(55% 50% at 85% 18%,var(--p2) 0%,transparent 55%),radial-gradient(70% 60% at 50% 100%,var(--p3) 0%,transparent 60%),radial-gradient(45% 40% at 95% 80%,var(--p4) 0%,transparent 55%);filter:blur(60px) saturate(1.4);opacity:.55;animation:wash-drift 18s ease-in-out infinite alternate;mix-blend-mode:screen}@keyframes wash-drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}.result{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;min-height:0}.result-card{position:relative;aspect-ratio:1 / 1;max-height:min(62vh,560px);justify-self:center;width:100%;border-radius:clamp(16px,1.6vw,28px);overflow:hidden;isolation:isolate;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 0 6px color-mix(in srgb,var(--p1) 50%,transparent),0 0 0 12px color-mix(in srgb,var(--p1) 22%,transparent),0 30px 80px -10px color-mix(in srgb,var(--p1) 70%,transparent),0 60px 160px -20px color-mix(in srgb,var(--p2) 60%,transparent);animation:card-pop .9s var(--easing) both}@keyframes card-pop{0%{transform:scale(.92) translateY(20px);opacity:0}60%{transform:scale(1.02) translateY(-4px);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}.result-card .hero-fill{position:absolute;inset:0;background:var(--p1)}.result-card .bloom{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen;pointer-events:none}.result-card .bloom-a{width:80%;height:80%;top:30%;left:40%;background:var(--p2);opacity:.85;animation:bloom-float 14s ease-in-out infinite alternate}.result-card .bloom-b{width:50%;height:50%;top:-10%;right:-10%;background:var(--p3);opacity:.7;animation:bloom-float 11s ease-in-out -4s infinite alternate-reverse}@keyframes bloom-float{0%{transform:translate(0) scale(1)}to{transform:translate(-6%,4%) scale(1.1)}}.result-card .ring{position:absolute;inset:28px;border-radius:50%;border:2px solid #000;animation:spin 32s linear infinite;z-index:1;opacity:.18}.result-card .ring:before,.result-card .ring:after{content:"";position:absolute;border-radius:50%;border:1.5px solid #000}.result-card .ring:before{inset:32px}.result-card .ring:after{inset:72px;border:2px solid #000}.result-card .colour-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;font-family:Helvetica Now Extra,Helvetica Now Display;font-weight:950;font-style:italic;font-size:clamp(120px,22vw,320px);line-height:.8;letter-spacing:-.06em;color:#fff;mix-blend-mode:overlay;opacity:.95;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:-1px 0 0 rgba(0,0,0,.2),0 0 80px rgba(255,255,255,.4)}.result-card .chip{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;background:#000;font-size:11px;letter-spacing:.3em;font-weight:900;color:#fff;text-transform:uppercase;font-family:Helvetica Now Display}.result-card .chip .dot{width:10px;height:10px;border-radius:50%;background:var(--p1);box-shadow:0 0 0 2px #000,0 0 0 3px var(--p1)}.result-card .swatches{position:absolute;bottom:0;left:0;right:0;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:0;height:clamp(44px,6vh,64px);border-top:2px solid #000}.result-card .swatches span{position:relative;display:block;border-right:2px solid #000}.result-card .swatches span:last-child{border-right:none}.result-card .swatches em{position:absolute;bottom:6px;left:8px;font-style:normal;font-weight:900;font-size:9px;letter-spacing:.16em;color:#000000b3;text-transform:uppercase;font-feature-settings:"tnum"}.result-card .stamp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:28px 28px clamp(64px,10vh,96px);z-index:4}.result-card .stamp .title{font-size:clamp(28px,3.4vw,48px);font-weight:900;font-style:italic;line-height:.95;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.55)}.result-card .stamp .sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-top:12px;color:#fff;font-weight:500;max-width:32ch;text-shadow:0 1px 8px rgba(0,0,0,.5)}.result-stage.vibe-geel .result-card .colour-mark,.result-stage.vibe-groen .result-card .colour-mark{color:#000000d9;mix-blend-mode:multiply;text-shadow:0 0 60px rgba(255,255,255,.4)}.result-stage.vibe-geel .result-card .stamp .title,.result-stage.vibe-groen .result-card .stamp .title,.result-stage.vibe-geel .result-card .stamp .sub,.result-stage.vibe-groen .result-card .stamp .sub{color:#0a0320;text-shadow:0 1px 0 rgba(255,255,255,.25)}.result-body{display:flex;flex-direction:column;gap:clamp(16px,2vh,28px);min-width:0;position:relative}.vibe-headline em{background:linear-gradient(120deg,var(--p1) 0%,var(--p2) 45%,var(--p3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--p1) 60%,transparent))}.result-body .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--stroke-strong);border:1px solid var(--stroke-strong);border-radius:20px;overflow:hidden}.result-body .stat{background:#05020fb3;padding:18px 22px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}.result-body .stat:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);box-shadow:0 0 20px var(--accent);opacity:.9}.result-body .stat .k{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:900;filter:brightness(1.15)}.result-body .stat .v{font-size:22px;font-weight:900;letter-spacing:-.01em;color:#fff}.result-body .stat .bar{margin-top:6px;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.result-body .stat .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,white));box-shadow:0 0 12px var(--accent),0 0 24px var(--accent);transform-origin:left;animation:fill .9s var(--easing) forwards}.vibe-btn.btn-primary{background:linear-gradient(120deg,var(--p1) 0%,var(--p2) 60%,var(--p3) 100%);box-shadow:0 0 0 1px color-mix(in srgb,var(--p1) 50%,transparent),0 12px 40px color-mix(in srgb,var(--p1) 55%,transparent),0 0 80px color-mix(in srgb,var(--p2) 45%,transparent)}.vibe-btn.btn-primary:after{background:linear-gradient(120deg,var(--p3),var(--p1))}.vibe-btn.btn-primary:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--p1) 70%,transparent),0 16px 56px color-mix(in srgb,var(--p1) 70%,transparent),0 0 120px color-mix(in srgb,var(--p2) 60%,transparent)}.step-enter{animation:step-in .6s var(--easing) both}@keyframes step-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.headline.enter{animation:head-in .75s var(--easing) both}@keyframes head-in{0%{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}@media(max-width:900px){html,body,#root{height:auto;min-height:100vh;min-height:100dvh;width:100%}body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:auto;touch-action:auto}.app{height:auto;min-height:100vh;min-height:100dvh;width:100%;overflow:visible}.stage-frame{padding:0 14px 14px;flex:1 1 auto;align-items:stretch}.card{min-height:0;border-radius:18px;flex:1 1 auto}.stage-inner{padding:18px 18px 14px;gap:18px;overflow:visible;flex:1 1 auto;justify-content:center}.stage-inner:has(.welcome){justify-content:flex-start}.topbar{padding:14px 18px;font-size:10px}.brand-sub{font-size:10px;padding-left:10px}.meta{gap:16px}.progress{padding:14px 18px 0}.welcome{grid-template-columns:1fr;gap:24px;align-items:stretch}.welcome-right{order:-1;height:auto;width:100%;max-height:320px;aspect-ratio:16 / 10;justify-self:stretch}.welcome-left{gap:20px}.headline{font-size:clamp(36px,9vw,56px);max-width:none}.lede{font-size:15px}.choice-grid{grid-template-columns:repeat(2,1fr);gap:12px}.choice-card{aspect-ratio:4 / 5}.icon-grid{grid-template-columns:repeat(3,1fr);gap:12px}.slider-rail{height:100px;padding:0 32px;margin:0}.slider-track,.slider-fill,.slider-ticks{left:32px;right:32px}.slider-thumb{margin-left:32px;width:64px;height:64px}.slider-thumb .core{font-size:20px}.slider-tick .num{font-size:10px;top:-28px}.slider-readout .n{font-size:clamp(64px,18vw,96px)}.slider-readout .word{font-size:18px}.result{grid-template-columns:1fr;gap:24px;align-items:stretch}.result-card{max-height:min(70vw,420px);width:100%;justify-self:stretch}.result-card .colour-mark{font-size:clamp(96px,28vw,180px)}.result-card .stamp .title{font-size:clamp(24px,6vw,36px)}.result-body .stats{grid-template-columns:1fr 1fr}.nav-footer{padding:14px 18px 18px;gap:10px}.nav-footer .hint{display:none}.btn{padding:14px 20px;min-height:48px;font-size:12px;letter-spacing:.18em}.btn-primary{padding:16px 22px;min-height:52px;font-size:13px}}@media(max-width:600px){.topbar{font-size:9px;padding:12px 14px}.meta>span:first-child{display:none}.brand{gap:8px}.brand-logo{height:22px}.brand-sub{font-size:9px;padding-left:8px;letter-spacing:.22em}.stage-frame{padding:0 10px 10px}.stage-inner{padding:14px 14px 12px;gap:14px}.progress{padding:12px 14px 0}.headline{font-size:clamp(30px,9vw,44px);line-height:1}.lede{font-size:14px;line-height:1.5}.welcome-right{max-height:220px;aspect-ratio:4 / 3}.choice-grid{gap:10px}.choice-card{border-radius:14px}.choice-card .label{padding:12px}.choice-card .label .title{font-size:14px}.choice-card .label .kind{font-size:9px;letter-spacing:.22em}.choice-card .badge{width:24px;height:24px;top:10px;right:10px}.icon-grid{grid-template-columns:repeat(2,1fr)}.slider-labels{font-size:11px;letter-spacing:.2em}.slider-rail{height:92px;padding:0 28px;margin:0}.slider-track,.slider-fill,.slider-ticks{left:28px;right:28px}.slider-thumb{margin-left:28px;width:56px;height:56px}.slider-thumb .core{font-size:18px}.slider-tick .dot{width:5px;height:5px}.slider-tick .num{font-size:9px;letter-spacing:.14em;top:-24px}.slider-readout{gap:14px}.slider-readout .n{font-size:72px}.slider-readout .word{font-size:16px}.result-card{max-height:380px;border-width:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--p1) 50%,transparent),0 0 0 8px color-mix(in srgb,var(--p1) 22%,transparent),0 18px 50px -10px color-mix(in srgb,var(--p1) 70%,transparent),0 30px 90px -20px color-mix(in srgb,var(--p2) 60%,transparent)}.result-card .ring{inset:18px}.result-card .colour-mark{font-size:clamp(80px,30vw,140px)}.result-card .stamp{padding:18px 18px 56px}.result-card .chip{font-size:9px;padding:8px 10px;letter-spacing:.22em}.result-card .swatches{height:40px}.result-body .stat{padding:14px 16px}.result-body .stat .v{font-size:18px}.cta-row{flex-wrap:wrap;gap:12px}.cta-row .hint{width:100%}.nav-footer{padding:12px 14px 16px}.btn{padding:12px 16px;min-height:44px;font-size:11px;gap:10px}.btn-primary{padding:14px 18px;min-height:48px;font-size:12px}.arrow{width:18px}}@media(max-width:360px){.choice-grid{grid-template-columns:1fr}.choice-card{aspect-ratio:16 / 9}.meta{gap:10px}}@media(max-width:900px)and (orientation:landscape)and (max-height:500px){.welcome{grid-template-columns:1.2fr .8fr;align-items:center}.welcome-right{order:0;max-height:70vh;aspect-ratio:3 / 4}.result{grid-template-columns:1fr 1fr}.result-card{max-height:70vh}}