@import url('./styles.css?v=tracking1');
@import url('./spatial-surface.css?v=platform1');
.t-display{letter-spacing:var(--tracking-display)}
:root{--ease-out:cubic-bezier(.23,1,.32,1);--control-size:108px;--stone-gray:#e8e8e8}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}body{min-width:320px}#main{width:100%;height:100%;min-height:0}.screen{height:100%;min-height:0;max-width:1200px;margin:auto;padding:24px;display:grid;gap:12px;justify-items:center;overflow:hidden}.screen h1{max-width:100%;overflow-wrap:anywhere}.landing{position:relative;grid-template-rows:minmax(0,1fr) auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}.landing h1{max-width:1000px;position:relative;z-index:1}.landing>.blob-button{grid-row:2}.landing>.silhouette-cycle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,100%);height:min(560px,62dvh)}.silhouette-cycle{position:relative;width:min(600px,100%);height:100%;min-height:0;isolation:isolate}.silhouette-frame{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity 200ms var(--ease-out)}.silhouette-frame.is-current{opacity:1}.silhouette-frame svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}.question-mark-layer{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}.silhouette-question{display:block;transform:scale(1.4);opacity:.1;color:#000}
.blob-button{position:relative;isolation:isolate;font:var(--type-body);letter-spacing:var(--tracking-body);text-transform:none;flex:0 0 auto;display:grid;place-items:center;align-self:center;justify-self:center;width:var(--control-size);height:var(--control-size);min-width:0;min-height:0;border:0;border-radius:0;padding:16px;background:none;color:#000;text-decoration:none;text-align:center;outline:0}.blob-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--stone-gray);clip-path:var(--shape-rest);transition:clip-path 180ms var(--ease-out)}.blob-button.is-primary::before,.blob-button.is-selected::before{background:#000}.blob-button.is-primary,.blob-button.is-selected{color:#fff}.blob-button.is-small{width:60px;height:60px;padding:10px}.blob-button .control-label{max-width:100%;text-wrap:balance}.blob-button:disabled{opacity:1;cursor:default}.blob-button:focus-visible{outline:0}.blob-button:focus-visible .control-label{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.flow-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:nowrap}.result-screen{grid-template-rows:auto auto minmax(0,1fr) auto}.result-stage{width:min(1000px,100%);height:100%;min-height:0}.flow-note{max-width:90%;text-wrap:balance}.quiz-screen{grid-template-rows:auto minmax(0,1fr) minmax(0,1.4fr);max-width:1200px;padding-block:36px 18vh;gap:24px}.question-dots{display:flex;gap:12px;align-items:center;justify-content:center;height:16px}.question-dots i{width:11px;height:11px;background:var(--stone-gray);clip-path:var(--shape-rest)}.question-dots i.done{background:#000}.quiz-screen h1{max-width:780px;margin:auto}.quiz-screen .question-options{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;width:100%;max-width:1040px;min-height:0;border:0;margin:0;padding:0}.quiz-screen .option{flex:1 1 0;aspect-ratio:1;width:auto;height:auto;min-width:0;max-width:220px;min-height:0;border:0;border-radius:0;padding:30px;font:var(--type-body);letter-spacing:var(--tracking-body);text-transform:none;background:none;outline:0}.quiz-screen .option .control-label{max-width:13ch}.quiz-screen .option::before{background:var(--stone-gray)}.quiz-screen .option.is-selected::before{background:#000}.reveal-loading{grid-template-rows:auto minmax(0,1fr);padding-block:12vh}.reveal-loading .silhouette-cycle{max-width:450px}.toast{bottom:16px;transition:opacity 180ms ease;max-width:80vw}.screen .spatial-stage canvas:focus-visible{outline:0}.result-screen:has(canvas:focus-visible) h1{text-decoration:underline;text-decoration-thickness:2px}
.error-screen{place-content:center;gap:24px}
@media(hover:hover) and (pointer:fine){.blob-button:not(:disabled):hover::before{clip-path:var(--shape-hover)}}
@media(max-width:700px){:root{--control-size:88px}.screen{padding:16px;gap:12px}.flow-actions{gap:12px}.quiz-screen{padding-block:24px 18vh;gap:20px}.quiz-screen .question-options{gap:6px}.quiz-screen .option{padding:9px;font:var(--type-body)}.quiz-screen .option .control-label{max-width:100%}.why-content{gap:14px;inset:16% 15% 24%}.why-choices,.why-disclosure{display:none}.dialog-actions{gap:6px}.dialog-actions .blob-button.is-small{width:50px;height:50px;padding:8px}.share-content{inset:12% 17% 24%;gap:10px}}
@media(max-width:480px){.screen{padding-inline:12px}.quiz-screen .option{padding:7px}.quiz-screen h1{max-width:94%}.why-content{inset:16% 14% 24%;gap:10px}.why-content .t-body{max-width:27ch}.share-content h2{font:var(--type-heading)}}
@media(max-height:650px){:root{--control-size:80px}.screen{padding-block:12px;gap:8px}.quiz-screen{padding-bottom:14vh}.quiz-screen .option{max-width:160px}.why-content{gap:10px;inset:15% 14% 25%}.why-choices,.why-disclosure{display:none}.share-content{gap:8px}}
@media(max-height:460px){:root{--control-size:60px}.screen{padding:8px 16px;gap:6px}.landing h1 br{display:none}.quiz-screen{grid-template-rows:auto auto minmax(0,1fr);padding-bottom:12vh;gap:10px}.quiz-screen .question-options{gap:16px;max-width:700px}.quiz-screen .option{max-width:min(140px,35dvh);padding:18px}.flow-actions{gap:16px}.why-content{inset:16% 14% 24%;gap:10px}.dialog-actions .blob-button.is-small{width:44px;height:44px}.reveal-loading{padding-block:16px}}
@media(max-width:480px) and (max-height:650px){}
@media(prefers-reduced-motion:reduce){.blob-button::before{transition:none}.silhouette-frame{transition:none}.silhouette-question{transform:none}.stone-dialog{transform:none!important}}

/* Single-line questions stay directly below the progress indicators. */
.quiz-screen{grid-template-rows:16px auto minmax(0,1fr);padding-block:24px;gap:10px}
.quiz-screen h1{font:var(--type-heading);letter-spacing:var(--tracking-question);line-height:1;white-space:nowrap;overflow-wrap:normal;max-width:100%;margin:0;align-self:start}
.is-accelerating .silhouette-frame{transition:none}

/* Loading has no header: caption and silhouettes share the viewport centre. */
.reveal-loading{position:relative;display:block;max-width:none;padding:0}
.reveal-loading h1{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;margin:0;font:var(--type-heading);letter-spacing:var(--tracking-question);white-space:nowrap}
.reveal-loading .silhouette-cycle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,100%);height:min(450px,62dvh);max-width:none}
.reveal-loading .silhouette-frame path{fill:var(--stone-gray)}

#main{position:relative}.reveal-outgoing{position:absolute;inset:0;z-index:4;pointer-events:none;background:transparent}.reveal-outgoing h1{opacity:1}.result-stage{transform-origin:center}

.has-living-shape::before{display:none}.living-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.living-shape path{fill:var(--stone-gray)}.is-primary>.living-shape path,.is-selected>.living-shape path{fill:#000}
/* Poster and WebGL both fit the specimen to 91% of the stage. */
.result-stage>img{inset:4.5%;width:91%;height:91%}
/* Five-question stone-first flow. */
.name-form{display:flex;align-items:center;justify-content:center;gap:20px;width:min(520px,100%);align-self:center}.name-input{min-width:0;width:100%;border:0;outline:0;background:transparent;border-radius:0;font:var(--type-heading);letter-spacing:var(--tracking-question);text-align:center;padding:16px 0;color:#000}.name-input::placeholder{color:rgb(0 0 0/.25);opacity:1}
.region-option::before{display:none}.quiz-screen .region-option{height:220px;aspect-ratio:auto;padding:0}.continent-shape{position:absolute;inset:0;width:100%;height:calc(100% - 38px);pointer-events:none}.continent-shape path{fill:var(--stone-gray);transform-origin:center;transform-box:fill-box;transition:fill 160ms ease}.region-option.is-selected .continent-shape path{fill:#000}.region-option.is-selected{color:#000}.quiz-screen .region-option .control-label{position:absolute;bottom:0;left:0;right:0;max-width:none}
.quiz-screen .question-options.color-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;max-width:1000px;align-content:center}.quiz-screen .color-option{width:100%;height:118px;max-width:110px;aspect-ratio:auto;padding:0;justify-self:center}.color-option>.living-shape{height:calc(100% - 28px)}.color-option>.living-shape path,.color-option.is-selected>.living-shape path{fill:var(--swatch)}.color-option.is-selected{color:#000}.quiz-screen .color-option .control-label{position:absolute;bottom:0;left:0;right:0;max-width:none;font:var(--type-body)}
@media(hover:hover) and (pointer:fine){.region-option:hover .continent-shape path{fill:#000}}
@media(max-width:700px){.name-form{gap:12px;max-width:360px}.quiz-screen .region-option{height:150px}.quiz-screen .question-options.color-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px;max-width:400px}.quiz-screen .color-option{height:92px;max-width:84px}.color-option>.living-shape{height:calc(100% - 24px)}}
@media(max-height:460px){.quiz-screen .question-options.color-options{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:700px}.quiz-screen .color-option{height:84px}.quiz-screen .region-option{height:145px}}
@media(prefers-reduced-motion:reduce){.continent-shape path{transition:none}.region-option:hover .continent-shape path{transform:none}}
.name-form{position:relative;display:block}.name-input{padding-inline:0}


/* Landing and name submit share the same bottom anchor and control dimensions. */
:root{--screen-action-bottom:max(20px,env(safe-area-inset-bottom))}
@media(max-width:700px){:root{--screen-action-bottom:16px}}
@media(max-height:650px){:root{--screen-action-bottom:12px}}
@media(max-height:460px){:root{--screen-action-bottom:8px}}
.screen.landing{padding-bottom:var(--screen-action-bottom)}.name-screen{position:relative}.name-screen>[data-action="name-next"]{position:absolute;left:50%;bottom:var(--screen-action-bottom);transform:translateX(-50%)}.name-screen>[data-action="name-next"]{transition:opacity 160ms ease}.name-screen>[data-action="name-next"]:disabled{opacity:0;visibility:hidden;pointer-events:none}.name-input{caret-color:transparent}
.visual-option::before{display:none}.quiz-screen .visual-option{height:220px;aspect-ratio:auto;padding:0}.choice-visual{position:absolute;inset:0;width:100%;height:calc(100% - 42px);pointer-events:none;color:var(--stone-gray);transform-origin:center;transition:transform 280ms var(--ease-out)}.company-visual{transition:color 160ms ease}.company-visual path{fill:currentColor}.gender-visual{inset:28%;width:44%;height:44%;color:#000;fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;transition:none}.gender-icon-option.is-selected .gender-visual{color:#fff}.visual-option.is-selected{color:#000}.visual-option.is-selected .choice-visual{color:#000}.quiz-screen .company-option .control-label{position:absolute;bottom:0;left:0;right:0;max-width:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.gender-icon-option:focus-visible::after{content:'';position:absolute;bottom:0;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#000}
@media(hover:hover) and (pointer:fine){.company-option:hover .company-visual{color:#000}}
@media(max-width:700px){.quiz-screen .visual-option{height:150px}}
@media(max-height:460px){.quiz-screen .visual-option{height:140px}}
@media(prefers-reduced-motion:reduce){.choice-visual{transition:none}.visual-option:hover .choice-visual{transform:none}}

/* Opt-in sensor control, only mounted on touch devices with motion support. */
.result-stage .tilt-control{position:absolute;right:8px;bottom:8px;z-index:3;width:60px;height:60px;padding:8px;touch-action:manipulation}.tilt-control[hidden]{display:none}.tilt-control[aria-pressed=true]::before{background:#000}.tilt-control[aria-pressed=true]{color:#fff}.collection-photo{transform-origin:50% 50%;backface-visibility:hidden}
.tilt-control[aria-pressed=true]>.living-shape path{fill:#000}

/* Square export preview; the same canvas pixels become the downloaded file. */
.share-screen{position:relative;max-width:none;align-content:center;grid-template-rows:auto auto auto;gap:24px;padding:32px 24px}.share-back{position:absolute;top:20px;left:24px;padding:12px 0;font:var(--type-body);letter-spacing:var(--tracking-body)}.share-themes{display:flex;align-items:center;justify-content:center;gap:24px}.share-themes button{font:var(--type-body);letter-spacing:var(--tracking-body);padding:10px 4px;opacity:.35}.share-themes button[aria-pressed=true]{opacity:1}.share-back:focus-visible,.share-themes button:focus-visible{outline:0;text-decoration:underline;text-underline-offset:4px}.share-card{width:min(600px,calc(100vw - 48px),calc(100dvh - 258px));aspect-ratio:1;box-shadow:0 18px 60px rgb(0 0 0 / .16);background:#fff}.share-canvas{display:block;width:100%;height:100%;aspect-ratio:1}.share-screen .blob-button:disabled,.share-screen .blob-button[aria-disabled=true]{opacity:.35;cursor:default}.share-status{position:absolute;left:16px;right:16px;bottom:8px;color:#777}.share-status:empty{display:none}
@media(max-width:700px){.share-screen{padding:24px 16px;gap:20px}.share-back{top:12px;left:16px}.share-card{width:min(600px,calc(100vw - 40px),calc(100dvh - 230px))}}
@media(max-height:460px){.share-screen{padding:12px;gap:10px}.share-card{width:min(600px,calc(100vw - 40px),calc(100dvh - 160px))}.share-themes button{padding-block:4px}.share-back{top:8px}.share-status{font-size:10px}}

/* The result and postcard use the same fixed bottom action anchor. */
:root{--result-action-bottom:24px}.result-screen{position:relative;grid-template-rows:auto auto minmax(0,1fr);padding-bottom:calc(var(--result-action-bottom) + var(--control-size) + 12px)}.result-screen>.flow-actions,.share-screen>.flow-actions{position:absolute;left:50%;bottom:var(--result-action-bottom);transform:translateX(-50%)}.share-screen{grid-template-rows:minmax(0,1fr);align-content:stretch;align-items:center;gap:0;padding:80px 24px calc(var(--result-action-bottom) + var(--control-size) + 24px)}.share-themes{position:absolute;top:20px;right:24px}.share-themes button{padding:12px 0}.share-card{width:min(600px,calc(100vw - 48px),calc(100dvh - var(--control-size) - var(--result-action-bottom) - 104px))}
@media(max-width:700px){:root{--result-action-bottom:16px}.share-screen{padding:64px 16px calc(var(--result-action-bottom) + var(--control-size) + 24px)}.share-themes{top:12px;right:16px}.share-card{width:min(600px,calc(100vw - 40px),calc(100dvh - var(--control-size) - var(--result-action-bottom) - 88px))}}
@media(max-height:650px){:root{--result-action-bottom:12px}}
@media(max-height:460px){:root{--result-action-bottom:8px}.share-screen{padding-top:52px}.share-themes{top:8px}.share-themes button{padding:12px 0}.share-card{width:min(600px,calc(100vw - 40px),calc(100dvh - var(--control-size) - var(--result-action-bottom) - 76px))}}