:root{--ink:#161512;--paper:#f4f0e8;--line:#16151238;--red:#ff4f38;--blue:#4169e1;--yellow:#f3c943;--green:#2c9b70;--violet:#8d65d6;--font-geist-sans:"Geist";--font-geist-mono:"Geist Mono"}*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);margin:0}button{color:inherit;font:inherit}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Arial,Helvetica,sans-serif}[data-quiz-root]{min-height:100%}.index-link{z-index:10;border:1px solid var(--line);background:color-mix(in srgb, var(--paper) 88%, transparent);color:var(--ink);font:11px var(--font-geist-mono), monospace;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px);border-radius:999px;padding:8px 11px;text-decoration:none;position:fixed;top:18px;right:20px}.index-link:hover,.index-link:focus-visible{border-color:var(--ink);outline:none}.quiz-page,.result-page{grid-template-rows:1fr auto;min-height:100svh;padding:24px 30px 20px;display:grid}.finish-button,.text-button{cursor:pointer;background:0 0;border:0;padding:8px 0}.finish-button{border:1px solid var(--ink);color:var(--ink);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:10px 14px}.finish-button span{margin-left:8px}.question-card{place-self:center;width:min(760px,100%);padding:48px 0 56px;animation:.45s both arrive}.question-card h1,.result-wrap h1{max-width:740px;font:500 clamp(32px, 5vw, 64px) / 1.02 var(--font-geist-sans), sans-serif;letter-spacing:-.045em;margin:0}.note{color:#16151294;margin:18px 0 0;font-size:14px}.answers{border-top:1px solid var(--line);margin-top:48px}.answers button{border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;background:0 0;grid-template-columns:28px 1fr auto;align-items:center;gap:14px;width:100%;min-height:67px;transition:background .18s,padding .18s;display:grid}.answers button:hover,.answers button:focus-visible{background:#ffffff8c;outline:none;padding-left:10px}.letter{font:11px var(--font-geist-mono), monospace;opacity:.55}.answer-label{font-size:17px}.arrow{opacity:0;font-size:20px;transition:all .18s;transform:translate(-8px)}.answers button:hover .arrow,.answers button:focus-visible .arrow{opacity:1;transform:none}.quiz-page footer{color:#16151280;justify-content:space-between;align-items:center;gap:24px;width:min(760px,100%);margin:0 auto;font-size:11px;display:flex}.footer-notes{gap:28px;margin-left:auto;display:flex}.result-page{grid-template-rows:1fr}.result-wrap{text-align:center;flex-direction:column;place-self:center;align-items:center;padding:48px 0;display:flex}.info-button{aspect-ratio:1;border:1px solid var(--line);cursor:pointer;width:38px;font:13px var(--font-geist-mono), monospace;background:0 0;border-radius:50%;margin-top:18px;transition:background .18s,border-color .18s}.info-button:hover,.info-button:focus-visible{border-color:var(--ink);background:#ffffff80;outline:none}.info-overlay{z-index:20;backdrop-filter:blur(7px);background:#0a0a099e;place-items:center;padding:24px;animation:.2s both info-in;display:grid;position:fixed;inset:0}.info-panel{color:#161512;text-align:left;background:#f4f0e8;border-radius:24px;width:min(620px,100%);max-height:calc(100svh - 48px);padding:36px 38px 32px;position:relative;overflow:auto;box-shadow:0 24px 80px #0000004d}.info-close{aspect-ratio:1;cursor:pointer;background:#16151214;border:0;border-radius:50%;width:34px;font-size:22px;line-height:1;position:absolute;top:18px;right:20px}.info-kicker{font:11px var(--font-geist-mono), monospace;letter-spacing:.09em;text-transform:uppercase;opacity:.55;margin:0 0 18px}.info-panel h2{max-width:470px;font:500 clamp(30px, 5vw, 48px) / 1.02 var(--font-geist-sans), sans-serif;letter-spacing:-.04em;margin:0 0 30px}.info-steps{border-top:1px solid #16151233}.info-steps p{border-bottom:1px solid #16151233;grid-template-columns:30px 1fr;gap:16px;margin:0;padding:17px 0;font-size:15px;line-height:1.45;display:grid}.info-steps span{font:10px var(--font-geist-mono), monospace;opacity:.45;padding-top:3px}.info-footnote{color:#1615129e;max-width:510px;margin:24px 0 0;font-size:12px;line-height:1.5}.portrait{aspect-ratio:1;transform-origin:50% 55%;background:#e8dfd0;width:clamp(210px,32vw,390px);margin-bottom:42px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #1615121a}.portrait:hover{animation-duration:3.6s}.portrait--order{border-radius:18% 31% 22% 27%/24% 18% 32% 26%;animation:8s steps(4,end) infinite order-motion}.portrait--energy{clip-path:polygon(48% 0,88% 11%,100% 50%,82% 100%,27% 91%,0 57%,10% 16%);border-radius:0;animation:4.8s cubic-bezier(.6,0,.25,1) infinite energy-motion}.portrait--warmth{border-radius:58% 42% 46% 54%/43% 62% 38% 57%;animation:7s ease-in-out infinite warmth-motion}.portrait--wonder{border-radius:37% 63% 72% 28%/64% 34% 66% 36%;animation:9s ease-in-out infinite wonder-motion}.piece{--i:0;--push-x:0px;--push-y:0px;aspect-ratio:1;width:48%;translate:var(--push-x) var(--push-y);will-change:translate;transition:translate .15s cubic-bezier(.2,.8,.2,1);position:absolute;top:24%;left:24%}.portrait--order .piece:first-child{width:64%;top:4%;left:3%}.portrait--order .piece:nth-child(2){width:54%;top:7%;left:48%}.portrait--order .piece:nth-child(3){width:60%;top:47%;left:5%}.portrait--order .piece:nth-child(4){width:68%;top:39%;left:40%}.portrait--order .piece:nth-child(5){width:74%;top:15%;left:15%}.portrait--order .piece:nth-child(6){width:58%;top:53%;left:22%}.portrait--order .piece:nth-child(7){width:66%;top:22%;left:41%}.portrait--energy .piece:first-child{width:70%;top:5%;left:-5%}.portrait--energy .piece:nth-child(2){width:58%;top:12%;left:48%}.portrait--energy .piece:nth-child(3){width:76%;top:30%;left:10%}.portrait--energy .piece:nth-child(4){width:62%;top:49%;left:49%}.portrait--energy .piece:nth-child(5){width:82%;top:48%;left:-2%}.portrait--energy .piece:nth-child(6){width:64%;top:-6%;left:31%}.portrait--energy .piece:nth-child(7){width:76%;top:43%;left:34%}.portrait--warmth .piece:first-child{width:68%;top:14%;left:-3%}.portrait--warmth .piece:nth-child(2){width:56%;top:5%;left:49%}.portrait--warmth .piece:nth-child(3){width:72%;top:28%;left:14%}.portrait--warmth .piece:nth-child(4){width:66%;top:45%;left:42%}.portrait--warmth .piece:nth-child(5){width:78%;top:50%;left:-2%}.portrait--warmth .piece:nth-child(6){width:62%;top:-5%;left:28%}.portrait--warmth .piece:nth-child(7){width:70%;top:37%;left:38%}.portrait--wonder .piece:first-child{width:58%;top:2%;left:7%}.portrait--wonder .piece:nth-child(2){width:78%;top:9%;left:37%}.portrait--wonder .piece:nth-child(3){width:64%;top:38%;left:-4%}.portrait--wonder .piece:nth-child(4){width:72%;top:46%;left:35%}.portrait--wonder .piece:nth-child(5){width:84%;top:24%;left:2%}.portrait--wonder .piece:nth-child(6){width:68%;top:-4%;left:46%}.portrait--wonder .piece:nth-child(7){width:72%;top:52%;left:18%}.piece--a{background:var(--red);border-radius:50%}.piece--b{background:var(--blue);transform:rotate(calc(18deg + var(--i) * 7deg))}.piece--c{background:var(--yellow);border-radius:50% 50% 8%}.piece--d{background:var(--green);clip-path:polygon(50% 0,100% 100%,0 100%)}.piece--e{background:conic-gradient(var(--red), var(--yellow), var(--green), var(--blue), var(--violet));border-radius:42% 58% 60% 40%}.piece--patterned{background:0 0;overflow:hidden}.piece-pattern{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.portrait-eye{aspect-ratio:1;background:#161512;border-radius:50%;width:9%;position:absolute;top:26%;right:18%;box-shadow:inset -5px -4px #f4f0e8}.result-wrap h1{font-size:clamp(38px,5vw,66px)}.result-copy{color:#1615129e;max-width:470px;margin:18px auto 28px;line-height:1.5}.result-actions{align-items:center;gap:22px;display:flex}.primary{border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;border-radius:999px;padding:13px 20px}.text-button{border-bottom:1px solid var(--ink)}.loading{background:var(--paper);min-height:100svh}@keyframes arrive{0%{opacity:0;transform:translateY(10px)}}@keyframes info-in{0%{opacity:0}}@keyframes order-motion{0%,to{border-radius:18% 31% 22% 27%/24% 18% 32% 26%;transform:translate(0)rotate(0)}25%{border-radius:22% 27% 18% 31%/20% 25% 27% 30%;transform:translate(5px,-5px)rotate(1deg)}50%{border-radius:26% 20% 29% 18%/28% 20% 24% 22%;transform:translate(5px,3px)rotate(0)}75%{border-radius:20% 29% 24% 25%/22% 28% 20% 30%;transform:translate(-4px,3px)rotate(-1deg)}}@keyframes energy-motion{0%,to{clip-path:polygon(48% 0,88% 11%,100% 50%,82% 100%,27% 91%,0 57%,10% 16%);transform:translateY(0)rotate(-2deg)scale(.98)}35%{clip-path:polygon(55% 0,94% 20%,96% 61%,70% 96%,18% 100%,2% 45%,20% 9%);transform:translate(7px,-10px)rotate(3deg)scale(1.03)}68%{clip-path:polygon(40% 2%,82% 3%,100% 41%,91% 89%,38% 98%,0 67%,5% 24%);transform:translate(-6px,3px)rotate(-4deg)scale(1.01)}}@keyframes warmth-motion{0%,to{border-radius:58% 42% 46% 54%/43% 62% 38% 57%;transform:translateY(0)rotate(0)scale(1)}50%{border-radius:45% 55% 58% 42%/58% 45% 55% 42%;transform:translateY(-10px)rotate(-2deg)scale(1.035,.98)}}@keyframes wonder-motion{0%,to{border-radius:37% 63% 72% 28%/64% 34% 66% 36%;transform:translate(0)rotate(-3deg)scale(1)}30%{border-radius:61% 39% 48% 52%/38% 66% 34% 62%;transform:translate(8px,-9px)rotate(2deg)scale(1.02,.97)}65%{border-radius:44% 56% 29% 71%/58% 41% 59% 42%;transform:translate(-7px,-2px)rotate(-5deg)scale(.98,1.03)}}@media (prefers-color-scheme:dark){:root{--ink:#eee9df;--paper:#11110f;--line:#eee9df33;--red:#ff654f;--blue:#6f8dff;--yellow:#e9c94f;--green:#49b98c;--violet:#a889e8}.answers button:hover,.answers button:focus-visible{background:#ffffff12}.info-button:hover,.info-button:focus-visible{background:#ffffff14}.portrait{background:#e8dfd0;box-shadow:inset 0 0 0 1px #ffffff38}}@media (width<=640px){.index-link{top:12px;right:12px}.quiz-page,.result-page{padding:18px 18px 16px}.question-card{place-self:start center;margin-top:8vh;padding:42px 0 34px}.question-card h1{font-size:clamp(30px,9vw,44px)}.answers{margin-top:34px}.answers button{grid-template-columns:20px 1fr auto;gap:10px;min-height:62px}.answer-label{font-size:15px}.footer-notes span:last-child{display:none}.result-wrap{padding-top:70px}.info-overlay{align-items:end;padding:10px}.info-panel{border-radius:20px;max-height:calc(100svh - 20px);padding:30px 24px 24px}.info-panel h2{margin-bottom:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
