*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#16161f;--surface-2:#1e1e2e;--border:#2a2a3a;--text:#e8e8f0;--text-2:#9090a8;--accent:#fa541c;--radius:14px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,SF Pro Display,PingFang SC,Noto Sans SC,sans-serif;line-height:1.6}.app-shell{max-width:460px;min-height:100dvh;margin:0 auto;padding:0 20px}.welcome{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:100dvh;padding:40px 0;display:flex}.welcome-hero{flex-direction:column;align-items:center;gap:8px;display:flex}.welcome-title{letter-spacing:8px;font-size:72px;font-weight:900;line-height:1}.title-d{color:#ff4d4f}.title-b{color:#fa541c}.title-t{color:#1677ff}.title-i{color:#722ed1}.welcome-subtitle{letter-spacing:2px;color:var(--text-2);text-transform:uppercase;font-size:13px}.welcome-tagline{color:var(--text);margin-top:4px;font-size:20px;font-weight:600}.welcome-info{flex-direction:column;align-items:center;gap:20px;display:flex}.welcome-desc{color:var(--text-2);font-size:15px}.dimension-tags{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.dimension-tag{background:var(--surface);border:1px solid var(--border);border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;display:flex}.tag-label{color:var(--text);font-weight:600}.tag-desc{color:var(--text-2)}.welcome-meta{color:var(--text-2);align-items:center;gap:10px;font-size:13px;display:flex}.meta-dot{background:var(--text-2);border-radius:50%;width:3px;height:3px}.btn-start{background:var(--accent);color:#fff;cursor:pointer;letter-spacing:1px;border:none;border-radius:50px;padding:14px 48px;font-size:17px;font-weight:600;transition:all .2s}.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 24px #fa541c59}.btn-start:active{transform:translateY(0)}.btn-gallery{color:var(--text-2);border:1px solid var(--border);cursor:pointer;letter-spacing:1px;background:0 0;border-radius:50px;padding:10px 32px;font-size:14px;font-weight:500;transition:all .2s}.btn-gallery:hover{border-color:var(--text-2);color:var(--text)}.welcome-footer{color:var(--text-2);opacity:.6;font-size:12px}.gallery{min-height:100dvh;padding:20px 0 40px}.gallery-header{align-items:center;gap:12px;margin-bottom:28px;display:flex}.gallery-title{flex:1;font-size:20px;font-weight:700}.gallery-count{color:var(--text-2);background:var(--surface);border:1px solid var(--border);font-variant-numeric:tabular-nums;border-radius:12px;padding:2px 10px;font-size:13px}.gallery-group{margin-bottom:24px}.gallery-group-title{color:var(--text-2);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;font-size:13px;font-weight:600}.gallery-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.gallery-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;border-top:3px solid var(--theme,var(--border));flex-direction:column;align-items:center;gap:4px;padding:14px 8px;text-decoration:none;transition:all .2s;display:flex}.gallery-card:hover{border-color:var(--theme,var(--accent));transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.gallery-card-code{color:var(--theme,var(--text));letter-spacing:1px;font-size:15px;font-weight:800}.gallery-card-name{color:var(--text);font-size:12px;font-weight:500}.gallery-card-dim{color:var(--text-2);letter-spacing:1px;font-size:10px}.gallery-card-hidden{border:2px dashed var(--border);border-top:3px dashed var(--border);cursor:not-allowed;opacity:.4;background:0 0}.gallery-card-hidden:hover{box-shadow:none;border-color:var(--border);transform:none}.gallery-card-hidden .gallery-card-code{color:var(--text-2);font-size:20px}.quiz{flex-direction:column;min-height:100dvh;padding:20px 0;display:flex}.quiz-topbar{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.topbar-home{letter-spacing:2px;cursor:pointer;background:0 0;border:none;align-items:center;gap:1px;padding:4px 0;font-size:20px;font-weight:900;transition:opacity .2s;display:flex}.topbar-home:hover{opacity:.7}.logo-d{color:#ff4d4f}.logo-b{color:#fa541c}.logo-t{color:#1677ff}.logo-i{color:#722ed1}.topbar-github{color:var(--text-2);border-radius:8px;align-items:center;padding:6px;transition:color .2s,background .2s;display:flex}.topbar-github:hover{color:var(--text);background:var(--surface)}.quiz-header{flex-shrink:0;align-items:center;gap:12px;margin-bottom:24px;display:flex}.btn-back{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;transition:opacity .2s;display:flex}.btn-back:disabled{opacity:.3;cursor:default}.progress-bar{background:var(--surface);border-radius:3px;flex:1;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#ff4d4f,#fa541c,#722ed1);border-radius:3px;height:100%;transition:width .4s}.progress-text{color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums;min-width:42px;font-size:13px}.quiz-card{flex-direction:column;flex:1;display:flex}.card-enter{animation:.3s forwards cardIn}.card-exit{animation:.3s forwards cardOut}@keyframes cardIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes cardOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}.question-badge{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);letter-spacing:1px;border-radius:8px;align-self:flex-start;margin-bottom:16px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.question-text{margin-bottom:28px;font-size:19px;font-weight:600;line-height:1.5}.options{flex-direction:column;gap:10px;display:flex}.option-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-align:left;cursor:pointer;padding:14px 16px;font-size:15px;line-height:1.5;transition:all .2s}@media (hover:hover){.option-btn:hover:not(:disabled){border-color:var(--text-2);background:var(--surface-2)}}.option-selected{padding:13px 15px;box-shadow:0 0 0 1px #fa541c4d,0 4px 12px #fa541c33;border-color:var(--accent)!important;color:#fff!important;background:#fa541c1f!important;border-width:2px!important}.option-answered{border-color:var(--accent);background:#fa541c14;border-width:2px;padding:13px 15px}.result{flex-direction:column;align-items:center;gap:24px;min-height:100dvh;padding:40px 0;display:flex}.result-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;width:100%;padding:32px 24px;position:relative;overflow:hidden}.result-card:before{content:"";background:var(--theme);height:4px;position:absolute;top:0;left:0;right:0}.result-hero{border-bottom:1px solid var(--border);margin-bottom:0;padding:20px 0 24px}.result-code{letter-spacing:6px;color:var(--theme);font-size:56px;font-weight:900;line-height:1.1}.result-name{color:var(--text);margin-top:6px;font-size:24px;font-weight:600}.result-tagline-box{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(135deg,#fa541c14,#722ed114);margin:24px -24px;padding:24px 28px;position:relative}.result-tagline-box:before{content:"“";color:var(--theme,var(--accent));opacity:.25;font-family:Georgia,serif;font-size:48px;font-weight:900;line-height:1;position:absolute;top:10px;left:16px}.result-tagline{background:linear-gradient(90deg, var(--theme,var(--accent)) 0%, #e8e8f0 70%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:500;line-height:1.9}.result-section{text-align:left;margin-top:28px}.result-section h3{color:var(--text-2);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:14px;font-weight:600}.portrait-text{color:var(--text);margin-bottom:12px;font-size:15px;line-height:1.8}.quote-section{background:var(--surface-2);border-radius:var(--radius);margin-left:-24px;margin-right:-24px;padding:20px}.result-quote{color:var(--text);border-left:3px solid var(--theme,var(--accent));padding-left:16px;font-size:16px;font-style:italic;line-height:1.7}.death-stars{letter-spacing:2px;color:#faad14;font-size:20px}.death-val{color:var(--accent);font-family:SF Mono,Fira Code,monospace;font-size:14px}.friend-review{color:var(--text);font-size:15px;line-height:1.7}.score-panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;padding:24px}.score-panel h3{color:var(--text-2);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;font-size:14px;font-weight:600}.dim-bar{align-items:center;gap:10px;margin-bottom:12px;display:flex}.dim-label{flex-direction:column;min-width:90px;display:flex}.dim-name{color:var(--text);font-size:13px;font-weight:600}.dim-level{color:var(--text-2);font-size:11px}.dim-track{background:var(--bg);border-radius:4px;flex:1;height:8px;overflow:hidden}.dim-fill{background:linear-gradient(90deg,#722ed1,#fa541c,#ff4d4f);border-radius:4px;height:100%;transition:width 1s}.dim-pct{color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums;min-width:36px;font-size:12px}.result-snapshot{width:100%}.result-watermark{color:var(--text-2);opacity:.4;text-align:center;letter-spacing:1px;padding:12px 0 4px;font-size:11px}.result-actions{gap:12px;width:100%;display:flex}.btn-action{cursor:pointer;border:none;border-radius:50px;flex:1;padding:14px 0;font-size:15px;font-weight:600;transition:all .2s}.btn-save{background:var(--surface);border:1px solid var(--border);color:var(--text)}.btn-save:hover:not(:disabled){border-color:var(--text-2)}.btn-save:disabled{opacity:.5;cursor:default}.btn-share{background:var(--accent);color:#fff}.btn-share:hover{transform:translateY(-1px);box-shadow:0 4px 16px #fa541c4d}.btn-retry{cursor:pointer;border:1px solid var(--border);width:100%;color:var(--text-2);background:0 0;border-radius:50px;padding:12px 0;font-size:14px;font-weight:500;transition:all .2s}.btn-retry:hover{border-color:var(--text-2);color:var(--text)}.result-footer{color:var(--text-2);opacity:.6;text-align:center;font-size:12px}.github-corner{z-index:999;display:block;position:fixed;top:0;left:0}.quiz~.github-corner{display:none}body:has(.quiz) .github-corner{display:none}.github-corner svg{transform:scaleX(-1)}.github-corner:hover .octo-arm{animation:.56s ease-in-out octocat-wave}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (width<=500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:.56s ease-in-out octocat-wave}}.snapshot-mode .result-tagline{background:0 0;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;color:var(--theme,var(--accent))}