:root[data-accent]{--a-l:#16120E;--a-d:#FF8D6E;--bg:light-dark(#D3F35B,#14110E);--display:"Bricolage Grotesque",var(--sans);--k0:#16120E;--k1:#FF6B4A;--k2:#B8A4FF;--k3:#FFF8EC;--k4:#FF9CC9;--k5:#7CCBFF}
.topbar{border-bottom:2px solid var(--ink)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:12px;margin:0;font:800 1.5rem/1 var(--display);letter-spacing:-.04em}
.mark{width:30px;height:30px;border-radius:50%;color:transparent;background:conic-gradient(var(--k1) 25%,var(--k2) 0 50%,var(--k3) 0 75%,var(--k4) 0)}
main{padding-block:32px 64px;display:block}
.progress{height:6px;margin-bottom:48px;border-radius:9px;background:color-mix(in oklab,var(--ink) 12%,transparent);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--ink);transition:width var(--dur-2) var(--ease)}
section{display:grid;gap:24px;justify-items:start;align-content:start;max-width:820px;margin-inline:auto}
section[hidden]{display:none}
.kicker{margin:0;padding:8px 14px;border-radius:99px;background:var(--ink);color:var(--bg);font:700 var(--t-sm)/1 var(--sans)}
h1{font:800 clamp(2.75rem,1.5rem + 4.6vw,6rem)/1 var(--display);letter-spacing:-.045em;max-width:13ch;text-wrap:balance}
h1 em{font:inherit;letter-spacing:inherit;color:#D3F35B;background:var(--k0);padding:0 .18em;margin:0 .04em;-webkit-box-decoration-break:clone}
.lead{margin:0;font:400 1.25rem/1.5 var(--sans);color:var(--ink);max-width:44ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;font:700 var(--t-sm)/1.4 var(--sans)}
#view-start{max-width:1180px;grid-template-columns:1.1fr 1fr;column-gap:64px}
#view-start>*{grid-column:1}
#typestrip{grid-column:2;grid-row:1/7;align-self:stretch;width:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:28px;overflow:hidden}
.typestrip span{--m:36%;position:relative;isolation:isolate;overflow:hidden;padding:28px 28px 46%;background:var(--k1);color:var(--k0);font:800 clamp(1.5rem,.9rem + 1.5vw,2.25rem)/.98 var(--display);letter-spacing:-.03em}
.typestrip span:nth-child(5n+2){background:var(--k2);--sh:0 50% 50%;--rt:-14deg;--x:16%;--y:26%;--m:0%}
.typestrip span:nth-child(5n+3){background:var(--k3);--sh:50% 50% 0 0;--rt:9deg;--e:28%;--m:12%}
.typestrip span:nth-child(5n+4){background:var(--k4);--sh:30% 50% 50% 30%/50%;--rt:-8deg;--x:36%;--m:26%}
.typestrip span:nth-child(5n+4) i{box-shadow:-22px 0 0 -9px #16120E59,-40px 0 0 -18px #16120E2E}
.typestrip span:nth-child(5n){background:var(--k5);--sh:50% 0;--x:40%}
.typestrip span:nth-child(odd):last-child{grid-column:1/-1}
.typestrip i{position:absolute;z-index:-1;right:-6%;bottom:-10%;width:min(58%,220px);aspect-ratio:1;rotate:var(--rt,12deg);border-radius:var(--sh,50%);background:radial-gradient(var(--f,#fff) 40%,#0000 45%) var(--x,30%) var(--y,40%)/var(--e,18%) var(--e,18%) no-repeat,radial-gradient(var(--f,#fff) 40%,#0000 45%) calc(var(--x,30%) + 40%) var(--y,40%)/var(--e,18%) var(--e,18%) no-repeat,radial-gradient(circle at 50% 0,var(--f,#fff) 48%,#0000 50%) 50% 72%/var(--m,0%) 20% no-repeat,var(--b,var(--k0))!important}#typestrip:has(:nth-child(5)) i{width:40%}
#begin,.btn-primary{min-height:56px;padding-inline:32px;border:0;border-radius:99px;background:var(--ink);color:var(--bg);font:700 1.125rem/1 var(--sans)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:8px}
.opt{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;width:100%;min-height:96px;padding:24px;border:0;border-radius:22px;background:color-mix(in oklab,var(--ink) 6%,var(--bg));color:var(--ink);font:600 1.0625rem/1.35 var(--sans);text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.opt:hover{background:var(--k3);color:var(--k0)}
.opt .key{font:800 2rem/1 var(--display);letter-spacing:-.04em}
.opt.picked{background:var(--ink);color:var(--bg)}
.qnav{display:flex;gap:12px}
.desc{margin:0;color:var(--ink-2);max-width:60ch}
.traits{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.traits div{padding:8px 16px;border-radius:99px;border:2px solid var(--ink);font:700 var(--t-sm)/1.3 var(--sans)}
.traits dt,.traits dd{display:inline}
#r-h,#r-tag{justify-self:stretch;max-width:none;margin-inline:-12px;padding-inline:24px;background:var(--k1);color:var(--k0)}
#r-h{margin-top:-12px;padding-top:48px;border-radius:28px 28px 0 0;font-size:clamp(3rem,1.6rem + 5vw,6.5rem)}
#r-tag{margin-top:-24px;padding-bottom:32px;border-radius:0 0 28px 28px;font:700 1.375rem/1.35 var(--display)}
#q-h{font-size:clamp(2.25rem,1.4rem + 2.8vw,3.75rem);max-width:20ch}
.match{width:100%;display:grid;gap:12px;margin-top:16px;padding-top:24px;border-top:2px solid var(--ink)}
.match h2{font:800 1.5rem/1.1 var(--display);letter-spacing:-.03em}
.bars{display:grid;gap:12px}
.brow{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;align-items:center;gap:12px;font-size:var(--t-sm)}
.brow .bv{font:800 1.125rem/1 var(--display)}
.btrack{height:14px;border-radius:99px;background:color-mix(in oklab,var(--ink) 10%,transparent);overflow:hidden}
.btrack span{display:block;height:100%;border-radius:inherit;background:var(--ink-2)}
.brow.top .btrack span{background:var(--ink)}
.share{width:100%;display:grid;gap:16px;padding:24px;margin-top:12px;border:0;border-radius:22px;box-shadow:none;background:color-mix(in oklab,var(--ink) 6%,var(--bg))}
.share-line{margin:0;font:700 1.125rem/1.45 var(--display)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.toast{margin:0;font-size:var(--t-sm);color:var(--good);font-weight:700}
.c-footer{display:grid;gap:12px;padding-block:24px 48px;border-top:2px solid var(--ink);font-size:var(--t-sm);color:var(--ink-2)}
.base,.credits{margin:0}
.btn{border-radius:99px}
.btn-secondary,.btn-ghost{min-height:48px;padding-inline:24px;border:2px solid var(--ink);background:none;color:var(--ink);font-weight:700}
@media (max-width:760px){#view-start{grid-template-columns:1fr}#typestrip{grid-column:1;grid-row:7}.typestrip span{padding:16px 16px 56%}.typestrip i{width:50%}.options{grid-template-columns:1fr}.opt{min-height:72px}#r-h,#r-tag{margin-inline:0}}
@media (prefers-reduced-motion:reduce){.opt,.progress span{transition:none}}html{scrollbar-gutter:stable}.progress:has(+#view-start:not([hidden])){display:none}.kicker:empty:before{content:"\a0"}main:has(#typestrip:empty){min-height:912px}@media(min-width:761px){main:has(#typestrip:empty){min-height:660px}}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}