/* "See it in your venue": pick a name and colour, watch it build, choose a door. */
main.exp-main{padding-block:clamp(28px,6vh,72px) 64px}
.h1{font-family:var(--display);font-weight:600;font-size:clamp(42px,5.6vw,80px);line-height:1;letter-spacing:-.045em;margin:0;text-wrap:balance}
.stage{display:none}
body[data-stage="pick"] .s-pick,body[data-stage="build"] .s-build,body[data-stage="doors"] .s-doors{display:block;animation:stageIn .8s var(--ease)}
.no-js .s-pick{display:block}
@keyframes stageIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.s-build{max-width:820px}
.s-build ol{list-style:none;margin:40px 0 0;padding:0;font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);letter-spacing:.03em}
.s-build li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--ease)}
.s-build li.in{opacity:1;transform:none}
.s-build li b{font-weight:500;color:var(--brand-text);opacity:0;transition:opacity .3s}
.s-build li.ok b{opacity:1}

.doors{display:flex;gap:14px;height:min(62svh,600px);margin-top:32px}
.door{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;text-align:left;padding:clamp(20px,3vw,44px);border-radius:28px;border:1px solid var(--ghost);background:var(--ink);cursor:pointer;overflow:hidden;text-decoration:none;transition:flex-grow .8s var(--ease),border-color .4s,opacity .4s}
.door::before{content:"";position:absolute;right:-12%;top:-12%;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid var(--dc);opacity:.5;transition:transform .9s var(--ease),opacity .5s}
.door::after{content:"";position:absolute;right:20%;top:30%;width:14px;height:14px;border-radius:50%;background:var(--dc);transition:transform .9s var(--ease)}
.door-g{--dc:var(--brand)}
.door-o{--dc:var(--gold)}
.door .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.door-t{font-family:var(--display);font-weight:600;font-size:clamp(44px,5.2vw,84px);line-height:.95;letter-spacing:-.05em}
.door-s{max-width:32ch;color:var(--stone)}
.door ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.door li{font-size:12px;padding:5px 10px;border:1px solid var(--ghost);border-radius:999px;color:var(--stone)}
.fine .doors:hover .door{opacity:.55}
.fine .doors .door:hover{flex-grow:1.6;opacity:1;border-color:var(--dc)}
.fine .door:hover::before{transform:scale(1.25) rotate(20deg);opacity:1}
.fine .door:hover::after{transform:translate(-40px,60px) scale(1.6)}
.again{margin-top:24px;background:none;border:0;color:var(--stone);text-decoration:underline;text-underline-offset:4px;min-height:44px;cursor:pointer}
.again:hover{color:var(--ivory)}
@media (max-width:700px){.doors{flex-direction:column;height:auto}.door{min-height:34svh}}