:root{--bg:#0a0a0a;--panel:#151515;--fg:#f2f0e8;--fg-dim:#8c8a84;--white:#fff;--red:#e4002b;--display:"Archivo Black", sans-serif;--num:"Anton", sans-serif;--mono:"Space Mono", monospace}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--fg);font-family:var(--mono);-webkit-font-smoothing:antialiased;min-height:100vh}#root{flex-direction:column;align-items:center;min-height:100vh;padding:30px 16px 60px;display:flex}button{font:inherit;color:inherit}.cutout-sm{background:var(--white);border:4px solid var(--white);box-shadow:0 0 0 2px var(--bg), 5px 5px 0 var(--red);position:relative}.cutout-art{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(0 0 0 var(--bg)) drop-shadow(3px 3px 0 var(--red))}.years-refine{text-align:center;width:100%;max-width:320px;margin:20px auto 0}.years-prompt{font-family:var(--mono);color:var(--fg-dim);margin-bottom:10px;font-size:10.5px}.years-chips{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip-secondary{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--fg);background:var(--panel);color:var(--fg);cursor:pointer;padding:6px 10px;font-size:10px}.chip-secondary.active{background:var(--red);color:#fff;border-color:var(--fg)}.site-footer{font-family:var(--mono);color:var(--fg-dim);text-align:center;margin-top:24px;font-size:11px}.site-footer a{color:var(--fg-dim);border-bottom:1px solid var(--fg-dim);text-decoration:none}.site-footer a:hover{color:var(--fg);border-bottom-color:var(--red)}.quiz-screen{text-align:center;width:100%;max-width:440px}.quiz-tag{letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;border:2px solid var(--fg);margin-bottom:22px;padding:5px 10px;font-size:11px;display:inline-block}.quiz-h1{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0;font-size:clamp(28px,7vw,40px);line-height:1.05}.quiz-h1 span{color:var(--red)}.quiz-sub{color:var(--fg-dim);margin:14px 0 34px;font-size:12px}.quiz-chips{grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none;display:grid}.quiz-chip{background:var(--panel);border:2px solid var(--fg);color:var(--fg);font-family:var(--num);letter-spacing:.01em;cursor:pointer;text-align:center;width:100%;box-shadow:5px 5px 0 var(--fg);padding:20px 10px 14px;font-size:22px;transition:transform .1s}.quiz-chip small{font-family:var(--mono);letter-spacing:.04em;color:var(--fg-dim);text-transform:uppercase;margin-top:6px;font-size:9.5px;display:block}.quiz-chip:active{box-shadow:2px 2px 0 var(--fg);transform:translate(3px,3px)}.loading-screen{flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:70vh;display:flex}.loading-spin{justify-content:center;align-items:center;width:150px;height:150px;animation:1s linear loading-spin;display:flex;position:relative}@keyframes loading-spin{0%{transform:rotate(0)}to{transform:rotate(720deg)}}.loading-spike{width:100%;height:100%;position:absolute;inset:0}.loading-spike polygon{fill:var(--red)}.loading-can{z-index:1;justify-content:center;align-items:center;width:60px;height:60px;display:flex;position:relative}.loading-can svg,.loading-can img{object-fit:contain;width:48px;height:48px}.loading-label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);font-size:12px;font-weight:700}.card{aspect-ratio:9/16;background:var(--bg);border:3px solid var(--fg);width:320px;max-width:88vw;box-shadow:8px 8px 0 var(--red);flex-direction:column;padding:22px 18px 18px;display:flex;position:relative;overflow:hidden}.card:before{content:"";pointer-events:none;background-image:radial-gradient(#ffffff08 1px,#0000 1px);background-size:5px 5px;position:absolute;inset:0}.card-top{letter-spacing:.06em;color:var(--fg-dim);text-transform:uppercase;justify-content:space-between;align-items:flex-start;font-size:9px;display:flex}.hero-can{z-index:3;justify-content:center;align-items:center;width:58px;height:58px;display:flex;position:absolute;top:22px;right:-8px;transform:rotate(-9deg)}.hero-can svg,.hero-can img{object-fit:contain;width:40px;height:40px}.card-badges{gap:8px;margin:14px 0 8px;display:flex}.badge-tile{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.badge-tile svg,.badge-tile img{object-fit:contain;width:26px;height:26px}.card-tier{font-family:var(--num);text-transform:uppercase;letter-spacing:.005em;color:var(--fg);margin-top:6px;font-size:clamp(26px,8vw,34px);line-height:.96}.card-tier span{color:var(--red)}.card-roast{font-family:var(--mono);color:var(--fg);border-left:3px solid var(--red);margin-top:10px;padding-left:8px;font-size:11.5px;font-weight:700;line-height:1.5}.card-mid{flex-direction:column;flex:1;justify-content:center;gap:12px;margin:12px 0;display:flex}.stat-block{background:var(--panel);border:2px solid var(--fg);align-items:center;gap:10px;padding:10px 12px;display:flex}.stat-icon{flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.stat-icon svg,.stat-icon img{object-fit:contain;width:22px;height:22px}.stat-text{flex:1}.stat-block .n{font-family:var(--num);color:var(--red);font-size:20px}.stat-block .l{letter-spacing:.04em;text-transform:uppercase;color:var(--fg-dim);margin-top:2px;font-size:9px}.percentile{font-family:var(--display);text-transform:uppercase;background:var(--fg);color:var(--bg);text-align:center;padding:8px 10px;font-size:12px;line-height:1.35}.percentile b{color:var(--red)}.card-footer{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);border-top:2px solid var(--fg);justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;font-size:9px;display:flex}.card-footer b{color:var(--fg);font-family:var(--display);font-size:10px}.result-screen{flex-direction:column;align-items:center;width:100%;max-width:440px;display:flex}.cta-row{gap:10px;width:100%;max-width:320px;margin-top:22px;display:flex}.cta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:center;cursor:pointer;border:2px solid var(--fg);background:var(--panel);color:var(--fg);box-shadow:4px 4px 0 var(--fg);flex:1;padding:12px 6px;font-size:10.5px}.cta.primary{background:var(--red);color:#fff;border-color:var(--fg);box-shadow:4px 4px 0 var(--fg)}.cta:active{box-shadow:2px 2px 0 var(--fg);transform:translate(2px,2px)}.cta:disabled{opacity:.6;cursor:default}.result-status{color:var(--fg-dim);text-align:center;min-height:14px;margin-top:10px;font-size:10.5px}.retake{color:var(--fg-dim);cursor:pointer;background:0 0;border:none;margin-top:16px;padding:0;font-size:11px;text-decoration:underline}