:root{color-scheme:light;--ink:#302537;--paper:#fffaf0;--accent:#755586}*{box-sizing:border-box}body{margin:0;background:#eee8db;color:var(--ink);font-family:Georgia,'Times New Roman',serif;background-image:radial-gradient(#73604515 .7px,transparent .7px);background-size:6px 6px}header{max-width:1300px;margin:auto;padding:29px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #30253724}a{color:inherit;text-decoration:none}.brand{font:700 13px Arial,sans-serif;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand span{font-size:29px}.back{font:12px Arial,sans-serif}main{max-width:1200px;margin:60px auto 50px;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.eyebrow,.tiny{font:10px 'Courier New',monospace;letter-spacing:2px}.eyebrow{color:#786149;margin-bottom:25px}h1{font-size:clamp(60px,6.5vw,91px);line-height:.99;font-weight:400;letter-spacing:-4px;margin:0 0 23px}h1 em{color:#785889}.dek{font-size:18px;line-height:1.6;color:#716575}.illustration{position:relative;max-width:360px;margin:3px 0 0}#hat{width:100%;display:block;transform-origin:50% 75%}.hat-note{display:block;text-align:center;font-size:12px;font-style:italic;color:#897889;margin-top:-12px}.orbit{position:absolute;color:#a98244}.one{top:25%;left:4%;font-size:25px}.two{top:18%;right:5%;font-size:39px}.paper{position:relative;background:var(--paper);border:1px solid #c2b6a2;box-shadow:7px 7px 0 #ded5c4,8px 8px 0 #b7aa99;padding:26px 32px;min-height:470px;transform:rotate(1deg)}.paper-top,.paper-bottom{display:flex;justify-content:space-between;align-items:center;font:9px 'Courier New',monospace;letter-spacing:1px}.paper-top{padding-bottom:23px;border-bottom:1px solid #c7bdac}.paper-top span:last-child{font-size:26px}.progress-label{display:flex;justify-content:space-between;font:9px 'Courier New',monospace;margin-top:29px;color:#847687}.progress{height:3px;background:#e7dfd4;margin:12px 0 30px}.progress i{display:block;background:#82618c;height:100%;width:20%;transition:width .3s}h2{font-weight:400;font-size:36px;letter-spacing:-1px;line-height:1.16;margin:25px 0 18px;min-height:84px;outline:none}.aside{font-size:14px;font-style:italic;color:#8a7a88}.answers{display:flex;gap:12px;margin:29px 0 0}button{border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:#fffaf0;padding:17px 20px;font:15px Georgia,serif;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:transform .15s,background .15s}button:hover{transform:translateY(-3px);background:#594260}button:focus-visible,a:focus-visible{outline:3px solid #b18435;outline-offset:5px}button:disabled{cursor:wait;opacity:.6;transform:none}.answers button{width:50%}.answers button:nth-child(2){background:transparent;color:var(--ink)}.answers button:nth-child(2):hover{background:#e9e0d5}.fine{font:10px 'Courier New',monospace;color:#897c87;text-align:center;line-height:1.6;margin:20px 0 30px}.paper-bottom{border-top:1px solid #c7bdac;padding-top:19px;color:#8a7d70;font-size:8px}footer{max-width:1200px;margin:0 auto;padding:20px 48px;display:flex;justify-content:space-between;font:10px 'Courier New',monospace;color:#8a7d70}#thinking-screen,#result-screen{text-align:center;padding-top:28px}#thinking-screen h2{margin-top:48px}.thinking-stars{font-size:40px;color:#9e7b45;margin:35px;animation:pulse 1s ease-in-out infinite}.thinking #hat{animation:wiggle 1s ease-in-out infinite}#seal{font-size:38px;margin:17px auto 8px;color:var(--accent);border:1px solid var(--accent);width:70px;height:70px;border-radius:50%;display:grid;place-items:center}#result-screen h2{color:var(--accent);min-height:0;font-size:37px;margin-top:12px}#flavor{line-height:1.65;font-size:16px;min-height:54px}#retry{width:100%;margin-top:24px}#result-screen{animation:reveal .65s ease-out}.muggle .paper{background:#f2f2ef;transform:rotate(0)}.muggle #seal{border-radius:0}.muggle #hat{filter:grayscale(1)}[hidden]{display:none!important}@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-5px)}}@keyframes pulse{50%{opacity:.35}}@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:800px){header{padding:20px 24px}main{gap:30px;padding:0 25px;margin-top:35px}.paper{padding:22px}h2{font-size:29px}.progress-label{font-size:8px}.progress-label span:last-child{display:none}}@media(max-width:620px){main{grid-template-columns:1fr;max-width:470px;margin-top:26px;gap:20px}.intro{text-align:center}.eyebrow{font-size:8px;margin-bottom:16px}h1{font-size:62px}h1 br{display:none}h1 em{display:block}.dek{font-size:16px;margin:12px}.illustration{width:210px;margin:-15px auto 13px}.hat-note{font-size:10px}.paper{min-height:440px}.brand{font-size:10px;letter-spacing:1px}.back{font-size:10px}footer{padding:25px;gap:15px;font-size:8px;line-height:1.5}.paper-top{font-size:8px}h2{font-size:33px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
