*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{color:#e2e8f0;-webkit-font-smoothing:antialiased;background:#0d1523;min-height:100svh;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif}#root{flex-direction:column;min-height:100svh;display:flex}button{cursor:pointer;font-family:inherit}a{font-family:inherit}.app{background:radial-gradient(80% 60% at 50% 40%,#6366f112 0%,#0000 70%),radial-gradient(60% 40% at 80% 80%,#2dd4bf0a 0%,#0000 60%),#0d1523;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:48px 20px;display:flex}.container{flex-direction:column;align-items:center;gap:0;width:100%;max-width:600px;display:flex}.start-screen{text-align:center;flex-direction:column;align-items:center;gap:0;display:flex}.badge{color:#ffffffa6;letter-spacing:.02em;background:#ffffff0a;border:1px solid #ffffff2e;border-radius:50px;align-items:center;gap:6px;margin-bottom:28px;padding:6px 16px;font-size:13px;display:inline-flex}.badge-icon{font-size:14px}.main-title{letter-spacing:-.02em;background:linear-gradient(135deg,#2dd4bf 0%,#60a5fa 50%,#a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:28px;font-size:52px;font-weight:800;line-height:1.2}@media (width<=480px){.main-title{font-size:36px}}.main-desc{color:#ffffffa6;max-width:480px;margin-bottom:40px;font-size:16px;line-height:1.85}.btn-start{color:#0d1523;letter-spacing:.01em;background:#fff;border:none;border-radius:50px;align-items:center;gap:10px;margin-bottom:20px;padding:18px 48px;font-size:17px;font-weight:700;transition:opacity .2s,transform .15s;display:inline-flex;box-shadow:0 4px 24px #00000040}.btn-start:hover{opacity:.92;transform:translateY(-1px)}.btn-start:active{transform:translateY(0)}.btn-arrow{font-size:18px;font-weight:400}.start-meta{color:#fff6;margin-bottom:16px;font-size:13px}.start-notice{color:#ffffff4d;text-align:center;max-width:400px;font-size:12px;line-height:1.7}.quiz-screen{width:100%}.quiz-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff17;border-radius:20px;padding:36px 32px}@media (width<=480px){.quiz-card{border-radius:16px;padding:28px 20px}}.progress-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.progress-count{color:#2dd4bf;letter-spacing:.05em;font-size:13px;font-weight:700}.progress-category{color:#fff6;letter-spacing:.05em;background:#ffffff12;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}.progress-bar-track{background:#ffffff1a;border-radius:2px;width:100%;height:3px;margin-bottom:32px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#2dd4bf,#60a5fa);border-radius:2px;height:100%;transition:width .4s}.question-text{color:#f1f5f9;min-height:66px;margin-bottom:28px;font-size:20px;font-weight:700;line-height:1.65}@media (width<=480px){.question-text{font-size:17px}}.choices{flex-direction:column;gap:10px;margin-bottom:28px;display:flex}.choice-btn{color:#ffffffbf;text-align:left;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:12px;align-items:center;gap:8px;width:100%;padding:15px 18px;font-size:15px;font-weight:500;transition:all .15s;display:flex}.choice-btn:hover:not(:disabled){color:#f1f5f9;background:#2dd4bf0f;border-color:#2dd4bf66}.choice-btn.selected{color:#2dd4bf;background:#2dd4bf26;border-color:#2dd4bf;font-weight:700;transform:scale(1.01)}.choice-btn.dimmed{opacity:.35}.choice-check{flex-shrink:0;width:18px;font-size:14px;display:inline-block}.quiz-hint{text-align:center;color:#ffffff40;letter-spacing:.02em;margin-top:16px;font-size:12px}.btn-next{color:#0d1523;letter-spacing:.01em;background:#fff;border:none;border-radius:12px;width:100%;padding:16px;font-size:16px;font-weight:700;transition:opacity .15s}.btn-next:hover:not(:disabled){opacity:.88}.btn-next:disabled{color:#ffffff40;cursor:not-allowed;background:#ffffff1f}.result-screen{text-align:center;width:100%}.result-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff17;border-radius:20px;margin-bottom:16px;padding:40px 32px}@media (width<=480px){.result-card{border-radius:16px;padding:28px 20px}}.result-eyebrow{letter-spacing:.15em;color:#ffffff59;text-transform:uppercase;margin-bottom:20px;font-size:12px;font-weight:700}.rank-wrap{justify-content:center;margin-bottom:20px;display:flex}.rank-circle{border:3px solid;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;font-size:44px;font-weight:900;display:flex;position:relative}.rank-circle.rank-A{color:#2dd4bf;background:#2dd4bf1a;border-color:#2dd4bf}.rank-circle.rank-B{color:#60a5fa;background:#60a5fa1a;border-color:#60a5fa}.rank-circle.rank-C{color:#fb923c;background:#fb923c1a;border-color:#fb923c}.rank-circle.rank-D{color:#f87171;background:#f871711a;border-color:#f87171}.result-title{margin-bottom:8px;font-size:24px;font-weight:800}.result-title.rank-A{color:#2dd4bf}.result-title.rank-B{color:#60a5fa}.result-title.rank-C{color:#fb923c}.result-title.rank-D{color:#f87171}.result-score{color:#fff6;margin-bottom:28px;font-size:14px}.result-score strong{color:#ffffffd9;font-size:22px;font-weight:800}.result-desc-box{text-align:left;border-left:3px solid;border-radius:12px;margin-bottom:28px;padding:20px}.result-desc-box.rank-A{background:#2dd4bf12;border-left-color:#2dd4bf}.result-desc-box.rank-B{background:#60a5fa12;border-left-color:#60a5fa}.result-desc-box.rank-C{background:#fb923c12;border-left-color:#fb923c}.result-desc-box.rank-D{background:#f8717112;border-left-color:#f87171}.result-desc-main{color:#e2e8f0;margin-bottom:10px;font-size:15px;font-weight:600;line-height:1.8}.result-desc-sub{color:#ffffff8c;font-size:13px;line-height:1.8}.breakdown{text-align:left;border:1px solid #ffffff14;border-radius:12px;margin-bottom:28px;overflow:hidden}.breakdown-header{letter-spacing:.1em;color:#ffffff4d;text-transform:uppercase;background:#ffffff08;border-bottom:1px solid #ffffff0f;padding:10px 16px;font-size:11px;font-weight:700}.breakdown-row{color:#ffffff59;border-bottom:1px solid #ffffff0d;align-items:center;gap:12px;padding:11px 16px;font-size:13px;display:flex}.breakdown-row:last-child{border-bottom:none}.breakdown-row.current{color:#ffffffd9;background:#ffffff0d;font-weight:700}.br-rank{flex-shrink:0;width:18px;font-size:15px;font-weight:900}.breakdown-row.current .br-rank.rank-A{color:#2dd4bf}.breakdown-row.current .br-rank.rank-B{color:#60a5fa}.breakdown-row.current .br-rank.rank-C{color:#fb923c}.breakdown-row.current .br-rank.rank-D{color:#f87171}.br-range{flex-shrink:0;width:88px;font-size:12px}.br-label{flex:1}.cta-card{text-align:center;background:#ffffff0a;border:1px solid #ffffff17;border-radius:16px;margin-bottom:16px;padding:24px}.cta-title{color:#f1f5f9;margin-bottom:8px;font-size:15px;font-weight:700}.cta-desc{color:#ffffff80;margin-bottom:16px;font-size:13px;line-height:1.75}.btn-cta{color:#0d1523;text-align:center;background:#fff;border:none;border-radius:50px;width:100%;padding:14px;font-size:14px;font-weight:700;text-decoration:none;transition:opacity .15s,transform .15s;display:block}.btn-cta:hover{opacity:.88;transform:translateY(-1px)}.btn-retry{color:#ffffff4d;cursor:pointer;background:0 0;border:none;width:100%;padding:10px;font-size:13px;text-decoration:underline;transition:color .15s;display:block}.btn-retry:hover{color:#ffffff8c}.footer{text-align:center;margin-top:32px}.footer p{color:#fff3;font-size:12px}