@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=ZCOOL+QingKe+HuangYou&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap";:root{--wall-deep:#0f0f0f;--wall:#1a1a1a;--wall-light:#252525;--wall-hi:#333;--poster:#f5efe6;--poster-hover:#efe7dc;--spray-orange:#ff6b35;--spray-orange-dim:#ff6b3526;--spray-yellow:gold;--spray-cyan:#00e5ff;--spray-magenta:#ff2d55;--spray-green:#39ff14;--chalk:#e8e4dc;--chalk-dim:#8a8680;--ink:#1a1a1a;--ink-secondary:#555;--ink-dim:#999;--border-thick:3px solid #1a1a1a;--border-thick-white:3px solid #f5efe6;--shadow-chunky:6px 6px 0 -1px #f5efe6, 6px 6px 0 2px #1a1a1a;--shadow-chunky-sm:4px 4px 0 -1px #f5efe6, 4px 4px 0 1px #1a1a1a;--font-display-cn:"ZCOOL QingKe HuangYou", sans-serif;--font-display-en:"Bebas Neue", sans-serif;--font-body:"Noto Sans SC", sans-serif;--font-body-en:"Space Grotesk", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{touch-action:manipulation;width:100%;min-height:100vh;overflow-x:hidden}body{font-family:var(--font-body);background:var(--wall);color:var(--chalk);-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.6}.screen{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.wall-bg{z-index:0;background:radial-gradient(ellipse at 80% 20%, #ff6b350f 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, #00e5ff0a 0%, transparent 50%), linear-gradient(180deg, var(--wall-deep) 0%, var(--wall) 40%, var(--wall-light) 100%);position:fixed;inset:0}.halftone{z-index:0;pointer-events:none;opacity:.04;background-image:radial-gradient(circle,#fff 1px,#0000 1px);background-size:4px 4px;position:fixed;inset:0}.spray-splash{z-index:0;pointer-events:none;filter:blur(40px);opacity:.12;border-radius:50%;position:fixed}.spray-splash.tl{background:var(--spray-orange);width:300px;height:300px;top:-80px;left:-80px}.spray-splash.br{background:var(--spray-cyan);width:250px;height:250px;bottom:-60px;right:-60px}.rough-stripe{z-index:0;pointer-events:none;position:fixed}.poster-card{background:var(--poster);border:var(--border-thick);box-shadow:var(--shadow-chunky);border-radius:20px;position:relative}.poster-card:after{content:"";pointer-events:none;border:1px solid #0000000f;border-radius:16px;position:absolute;inset:4px}.tag-badge{font-family:var(--font-display-en);letter-spacing:.04em;color:var(--spray-orange);border:2px solid var(--spray-orange);background:#ff6b351f;border-radius:0;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex;position:relative}.welcome-screen{text-align:center;padding:40px 24px}.welcome-content{z-index:1;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:420px;display:flex;position:relative}.welcome-tag{font-family:var(--font-display-en);letter-spacing:.08em;color:var(--spray-orange);border:2px solid var(--spray-orange);background:#ff6b351a;padding:6px 18px;font-size:14px;font-weight:600;position:relative}.welcome-tag:before{content:"";background:var(--spray-orange);height:2px;position:absolute;top:-4px;left:8px;right:8px}.welcome-tag:after{content:"";background:var(--spray-orange);height:2px;position:absolute;bottom:-4px;left:8px;right:8px}.welcome-title{font-family:var(--font-display-cn);color:var(--poster);letter-spacing:.02em;text-shadow:3px 3px 0 var(--spray-orange), -1px -1px 0 #0000004d;font-size:52px;font-weight:400;line-height:1.15}.welcome-title .highlight{color:var(--spray-orange);text-shadow:3px 3px 0 var(--ink), -1px -1px 0 #0000004d}.welcome-desc{color:var(--chalk-dim);max-width:320px;margin-top:4px;font-size:15px;line-height:1.8}.welcome-dimensions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.dimension-pill{color:var(--chalk-dim);letter-spacing:.03em;background:#ffffff08;border:1.5px solid #ffffff1f;padding:5px 14px;font-size:12px;font-weight:500;position:relative}.dimension-pill:before{content:"";opacity:0;border:1px solid #ff6b3526;transition:opacity .2s;position:absolute;inset:-1px}.dimension-pill:hover:before{opacity:1}.start-btn{font-family:var(--font-display-en);letter-spacing:.06em;color:var(--ink);background:var(--spray-orange);border:3px solid var(--ink);cursor:pointer;box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;border-radius:0;align-items:center;gap:10px;margin-top:8px;padding:16px 52px;font-size:22px;font-weight:600;transition:all .15s;display:inline-flex;position:relative}.start-btn:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.start-btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.start-btn svg{width:22px;height:22px;transition:transform .2s}.start-btn:hover svg{transform:translate(5px)}.welcome-footer{text-align:center;z-index:1;font-family:var(--font-display-en);letter-spacing:.06em;color:var(--chalk-dim);font-size:12px;position:fixed;bottom:28px;left:0;right:0}.welcome-footer span{border:1px solid #ffffff14;padding:4px 16px;display:inline-block}.quiz-screen{padding:60px 24px 40px}.back-btn{top:calc(20px + env(safe-area-inset-top,0));z-index:10;background:var(--poster);border:3px solid var(--ink);cursor:pointer;width:44px;height:44px;box-shadow:3px 3px 0 var(--ink);color:var(--ink);justify-content:center;align-items:center;transition:all .15s;display:flex;position:absolute;left:16px}.back-btn:hover{box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}.back-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.progress-area{top:calc(20px + env(safe-area-inset-top,0));z-index:10;background:var(--poster);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);align-items:center;gap:10px;padding:8px 14px 8px 16px;display:flex;position:absolute;right:16px}.progress-track{border:1px solid var(--ink);background:#0000001a;width:100px;height:8px;position:relative;overflow:hidden}.progress-fill{background:var(--spray-orange);height:100%;transition:width .35s cubic-bezier(.34,1.56,.64,1);position:relative}.progress-fill:after{content:"";background:var(--ink);width:4px;position:absolute;top:-2px;bottom:-2px;right:0}.progress-text{font-family:var(--font-mono);color:var(--ink);letter-spacing:.03em;font-size:13px;font-weight:600}.question-card{z-index:1;flex-direction:column;gap:24px;width:100%;max-width:480px;display:flex;position:relative}.question-header{align-items:center;gap:10px;margin-bottom:4px;display:flex}.question-number-box{font-family:var(--font-mono);color:var(--poster);background:var(--ink);letter-spacing:.05em;padding:4px 10px;font-size:12px;font-weight:700}.question-tagline{font-family:var(--font-display-en);letter-spacing:.08em;color:var(--chalk-dim);text-transform:uppercase;font-size:12px;font-weight:600}.question-body{background:var(--poster);border:var(--border-thick);box-shadow:var(--shadow-chunky);padding:28px 24px}.question-text{font-family:var(--font-display-cn);color:var(--ink);letter-spacing:.01em;font-size:22px;font-weight:400;line-height:1.4}.question-options{flex-direction:column;gap:12px;display:flex}.option-btn{width:100%;font-family:var(--font-body);text-align:left;color:var(--ink);background:var(--poster);border:3px solid var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);align-items:flex-start;gap:14px;padding:16px 18px;font-size:15px;font-weight:400;line-height:1.5;transition:all .15s;display:flex;position:relative}.option-btn:hover{box-shadow:6px 6px 0 var(--ink);background:var(--poster-hover);transform:translate(-1px,-1px)}.option-btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.option-label{width:30px;height:30px;font-family:var(--font-display-en);color:var(--ink);letter-spacing:.02em;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;font-weight:600;display:flex}.option-btn:first-child .option-label{background:#ff6b35}.option-btn:nth-child(2) .option-label{background:#00e5ff}.option-btn:nth-child(3) .option-label{background:gold}.option-btn:nth-child(4) .option-label{background:#ff2d55}.option-text{flex:1;padding-top:3px}.result-screen{--pers-accent:var(--spray-orange);--pers-accent-2:var(--spray-cyan);flex-direction:column;align-items:center;min-height:100vh;padding:0;display:flex;position:relative;overflow-x:hidden}.result-bg{z-index:0;transition:background 1.2s cubic-bezier(.16,1,.3,1);position:fixed;inset:0}.result-splash-blob{z-index:0;pointer-events:none;filter:blur(50px);opacity:.35;border-radius:50%;transition:opacity 1.5s,transform 1s;position:fixed}.result-splash-blob.b1{width:500px;height:500px;top:-140px;left:-120px}.result-splash-blob.b2{width:420px;height:420px;top:10%;right:-160px}.result-splash-blob.b3{width:360px;height:360px;bottom:15%;left:0}.result-splash-blob.b4{width:300px;height:300px;bottom:50%;right:10%}.result-spatter{z-index:0;pointer-events:none;opacity:.12;width:100%;height:100%;position:fixed}.result-bg-dots{z-index:0;pointer-events:none;opacity:.03;background-image:radial-gradient(circle,#fff 1px,#0000 1px);background-size:3px 3px;position:fixed;inset:0}.result-content{z-index:1;flex-direction:column;align-items:center;width:100%;max-width:480px;display:flex;position:relative}.result-card{flex-direction:column;align-items:center;width:100%;padding:20px 20px 0;display:flex}.result-stage{z-index:2;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.result-art-overflow{z-index:3;justify-content:center;align-items:flex-end;width:100%;margin-bottom:-50px;display:flex;position:relative}.result-art-image{object-fit:contain;filter:drop-shadow(0 12px 48px #0000008c);width:min(95%,380px);max-height:380px;transform:translate(var(--art-tx,0px), var(--art-ty,0px));transition:transform 80ms ease-out;display:block;position:relative}.result-abstract{flex-direction:column;align-items:center;gap:12px;width:100%;padding-top:40px;display:flex}.result-abstract-burst{justify-content:center;align-items:center;width:200px;height:200px;display:flex;position:relative}.result-abstract-burst:before{content:"";background:conic-gradient(from 0deg, color-mix(in srgb, var(--pers-accent) 40%, transparent), color-mix(in srgb, var(--pers-accent-2) 30%, transparent), color-mix(in srgb, var(--pers-accent) 20%, transparent), color-mix(in srgb, var(--pers-accent-2) 40%, transparent), color-mix(in srgb, var(--pers-accent) 30%, transparent), transparent, color-mix(in srgb, var(--pers-accent-2) 25%, transparent), color-mix(in srgb, var(--pers-accent) 35%, transparent));opacity:.6;width:200px;height:200px;animation:12s linear infinite burstSpin;position:absolute}.result-abstract-burst:after{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--pers-accent) 15%, transparent) 0%, transparent 70%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:50%;position:absolute;inset:30px}@keyframes burstSpin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.1)}to{transform:rotate(360deg)scale(1)}}.result-abstract-burst span{z-index:1;font-family:var(--font-display-en);color:var(--poster);text-shadow:0 0 40px color-mix(in srgb, var(--pers-accent) 50%, transparent);font-size:40px;font-weight:700;position:relative}.result-id-float{-webkit-backdrop-filter:blur(8px);z-index:4;background:#1a1a1acc;border:1.5px solid #ffffff1f;align-items:center;gap:2px;padding:2px 12px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}.result-id-float .id-char{font-family:var(--font-display-en);letter-spacing:.06em;color:var(--pers-accent);font-size:18px;font-weight:600}.result-name-area{text-align:center;z-index:2;position:relative}.result-name{font-family:var(--font-display-cn);color:var(--poster);letter-spacing:.02em;text-shadow:3px 3px 0 #0009, 0 0 60px color-mix(in srgb, var(--pers-accent) 40%, transparent);font-size:42px;font-weight:400;line-height:1.1}.result-anchors{font-family:var(--font-display-en);letter-spacing:.1em;color:color-mix(in srgb, var(--pers-accent) 70%, var(--chalk));text-transform:uppercase;margin-top:4px;font-size:12px;font-weight:600;display:block}.result-panel{z-index:2;-webkit-backdrop-filter:blur(16px);background:#f5efe6f0;border:2px solid #1a1a1a26;width:100%;margin-top:8px;padding:20px;position:relative}.result-panel:before{content:"";background:var(--pers-accent);height:4px;position:absolute;top:0;left:0;right:0}.result-panel:after{content:"";background:var(--pers-accent);width:3px;height:8px;box-shadow:60px 2px 0 -.5px var(--pers-accent), 120px 5px 0 -.5px var(--pers-accent), 200px 1px 0 -.5px var(--pers-accent), 80px 2px 0 -.5px color-mix(in srgb, var(--pers-accent) 60%, transparent), 160px 4px 0 -.5px color-mix(in srgb, var(--pers-accent) 50%, transparent);opacity:.7;border-radius:0 0 3px 3px;position:absolute;top:4px;left:30px}.result-desc{color:var(--ink-secondary);text-align:left;margin-bottom:14px;font-size:14px;line-height:1.7}.result-dims{flex-direction:column;gap:6px;display:flex}.dim-row{align-items:center;gap:6px;display:flex}.dim-label{font-family:var(--font-display-en);color:var(--ink-dim);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;min-width:32px;font-size:9px;font-weight:700}.dim-label.active{color:var(--ink)}.dim-label.right{text-align:right}.dim-track{background:#0000000d;border:1px solid #0000001f;flex:1;height:6px;overflow:hidden}.dim-fill{height:100%;transition:width .5s cubic-bezier(.34,1.56,.64,1)}.dim-fill.left{background:var(--pers-accent)}.dim-fill.right{background:var(--pers-accent-2)}.result-tags{flex-wrap:wrap;gap:5px;margin:10px 0 0;display:flex}.tag-pill{font-family:var(--font-display-en);letter-spacing:.04em;color:color-mix(in srgb, var(--pers-accent) 80%, var(--ink));background:color-mix(in srgb, var(--pers-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--pers-accent) 30%, transparent);text-transform:uppercase;padding:3px 9px;font-size:9px;font-weight:700}.result-tip{-webkit-backdrop-filter:blur(8px);border-left:3px solid var(--pers-accent);background:#f5efe6b3;width:100%;padding:14px 16px}.result-tip h3{font-family:var(--font-display-en);letter-spacing:.08em;color:var(--pers-accent);text-transform:uppercase;margin-bottom:4px;font-size:11px;font-weight:700}.result-tip p{color:var(--ink-secondary);font-size:13px;line-height:1.6}.result-actions{width:100%;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0));flex-direction:column;gap:10px;display:flex}.result-btn{width:100%;font-family:var(--font-display-en);letter-spacing:.06em;cursor:pointer;text-transform:uppercase;border:2.5px solid var(--ink);justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:16px;font-weight:600;transition:all .15s;display:flex}.result-btn:disabled{opacity:.5;pointer-events:none}.result-btn.share{color:var(--ink);background:var(--spray-orange);box-shadow:5px 5px 0 var(--ink)}.result-btn.share:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.result-btn.share:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.result-btn.save{color:var(--ink);background:var(--poster);box-shadow:5px 5px 0 var(--ink)}.result-btn.save:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.result-btn.save:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.result-btn.save.saving{background:var(--chalk-dim);color:var(--poster)}.result-btn.retry{color:var(--poster);border-color:var(--poster);box-shadow:4px 4px 0 var(--poster);background:0 0}.result-btn.retry:hover{box-shadow:6px 6px 0 var(--poster);background:#ffffff0d;transform:translate(-1px,-1px)}.result-btn.retry:active{box-shadow:2px 2px 0 var(--poster);transform:translate(2px,2px)}.result-btn svg{width:20px;height:20px}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes slideLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes bounceUp{0%{opacity:0;transform:translateY(40px)scale(.92)}60%{opacity:1;transform:translateY(-6px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes paintDrip{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.welcome-content>*{opacity:0;animation:.5s ease-out forwards fadeUp}.welcome-content>:first-child{animation-delay:50ms}.welcome-content>:nth-child(2){animation-delay:.12s}.welcome-content>:nth-child(3){animation-delay:.2s}.welcome-content>:nth-child(4){animation-delay:.28s}.welcome-content>:nth-child(5){animation-delay:.36s}.question-card>*{opacity:0;animation:.4s ease-out forwards fadeUp}.question-card>:first-child{animation-delay:30ms}.question-card>:nth-child(2){animation-delay:80ms}.question-card>:nth-child(3){animation-delay:.14s}.option-btn{transition:transform .15s,box-shadow .15s,background .15s}.result-screen.entered .result-bg{opacity:1}.result-screen.entered .result-stage{animation:.55s cubic-bezier(.34,1.56,.64,1) 50ms both popIn}.result-screen.entered .result-panel{animation:.5s ease-out .35s both fadeUp}.result-screen.entered .result-tip{animation:.5s ease-out .55s both fadeUp}.result-screen.entered .result-actions{animation:.5s ease-out .7s both fadeUp}.result-screen.entered .result-actions .result-btn{animation:popIn .4s cubic-bezier(.34, 1.56, .64, 1) calc(.8s + var(--btn-delay,0s)) both}.result-screen.entered .result-actions .result-btn:first-child{--btn-delay:0s}.result-screen.entered .result-actions .result-btn:nth-child(2){--btn-delay:70ms}.result-screen.entered .result-actions .result-btn:nth-child(3){--btn-delay:.14s}@media (width<=375px){.welcome-title{font-size:38px}.question-text{font-size:20px}.question-body{padding:22px 18px}.result-name{font-size:34px}.option-btn{padding:14px;font-size:14px}.welcome-screen{padding:32px 20px}.quiz-screen{padding:56px 20px 32px}.result-screen{padding:0}.result-content{padding:24px 0}.result-info-panel{padding:0 16px 20px}.progress-track{width:72px}}