:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,sans-serif;color:#eaf0f4;background:#0d1b25;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 80% 0%,rgba(49,100,113,.24),transparent 36rem),#0d1b25}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible{outline:2px solid #d5b66b;outline-offset:3px}.page-shell{width:min(100% - 40px,1080px);margin:0 auto}.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(211,229,236,.13)}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.03em}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#d5b66b;color:#142530;font-size:20px}.topbar-label,.menu-count{color:#9eafb9;font-size:13px}.hero{padding:clamp(52px,9vw,88px) 0 44px;max-width:760px}.eyebrow{margin:0 0 14px;color:#d5b66b;font-size:11px;font-weight:800;letter-spacing:.18em}h1,h2,h3,p{margin-top:0}h1{margin-bottom:18px;font-size:clamp(32px,6vw,58px);line-height:1.2;letter-spacing:-.045em}.hero-copy{max-width:620px;margin-bottom:26px;color:#afbec7;font-size:16px;line-height:1.9}.hero-note{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(213,182,107,.3);border-radius:999px;color:#e0d0a4;font-size:12px}.status-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#d5b66b}.api-note{flex-wrap:wrap;max-width:100%}.api-note--connected{border-color:#63be916b;color:#a9e4c5}.api-note--connected .status-dot{background:#63be91}.api-note--error{border-color:#ee77777a;color:#ffb7b7}.api-note--error .status-dot{background:#e77}.api-note--checking .status-dot{background:#d5b66b}.api-checked-at{color:#9eafb9;font-size:11px}.api-retry{border:1px solid rgba(211,229,236,.25);border-radius:999px;padding:5px 9px;background:#ffffff0a;color:inherit;font-size:11px;cursor:pointer}.api-retry:hover:not(:disabled){background:#ffffff1a}.api-retry:disabled{cursor:wait;opacity:.65}.api-retry:focus-visible{outline:2px solid #d5b66b;outline-offset:3px}.quiz-intro,.quiz-panel,.result-panel{margin-bottom:24px;border:1px solid rgba(211,229,236,.14);border-radius:20px;background:linear-gradient(145deg,#1c313ef5,#12222df0)}.quiz-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:32px;padding:clamp(24px,5vw,42px)}.quiz-intro-copy h2,.result-panel h2{margin-bottom:14px;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.035em}.quiz-intro-copy>p:not(.eyebrow),.result-copy{max-width:560px;margin-bottom:18px;color:#afbec7;font-size:14px;line-height:1.8}.quiz-benefits{display:grid;gap:10px;margin:0 0 26px;padding:0;list-style:none;color:#c8d3d9;font-size:13px}.quiz-benefits li{display:flex;gap:10px;align-items:flex-start}.quiz-benefits li:before{content:"✓";color:#8ed4ae;font-weight:800}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:46px;padding:0 19px;border:1px solid #d5b66b;border-radius:10px;background:#d5b66b;color:#142530;font-weight:800;font-size:13px;cursor:pointer;transition:background .15s ease,transform .15s ease}.primary-button:hover:not(:disabled){background:#e4c77e;transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.45}.quiz-preview{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:240px;padding:24px;border:1px solid rgba(213,182,107,.17);border-radius:14px;background:radial-gradient(ellipse at center,rgba(213,182,107,.12),transparent 70%),#08151d59}.preview-label{color:#9eafb9;font-size:9px;font-weight:800;letter-spacing:.18em}.tile-row{display:flex;gap:8px;margin:26px 0 20px}.tile-row span{display:grid;place-items:center;width:48px;height:64px;border-radius:5px;border:1px solid #d3dbe0;background:linear-gradient(135deg,#fffef8,#dce5e5);color:#176b51;font-family:serif;font-size:27px;box-shadow:0 4px #a9b4b6}.preview-rule{width:70%;height:1px;background:#d5b66b52}.quiz-preview p{margin:18px 0 0;color:#afbec7;font-size:11px}.quiz-panel,.result-panel{padding:clamp(22px,4.5vw,38px)}.quiz-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.quiz-heading .eyebrow{margin-bottom:7px}.quiz-heading h2{margin-bottom:0;font-size:25px}.question-counter{color:#e4c77e;font-weight:800;font-size:22px;white-space:nowrap}.question-counter span{color:#9eafb9;font-size:12px;font-weight:500}.progress-track{overflow:hidden;height:5px;margin:24px 0 22px;border-radius:999px;background:#d3e5ec1a}.progress-track span{display:block;height:100%;border-radius:inherit;background:#d5b66b;transition:width .2s ease}.question-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#8ea1ac;font-size:11px}.category-tag{padding:5px 9px;border-radius:6px;background:#d5b66b1f;color:#e4c77e}.question-prompt{max-width:780px;margin-bottom:24px;font-size:clamp(20px,3.3vw,27px);line-height:1.65;letter-spacing:-.025em}.choice-list{display:grid;gap:10px}.choice-button{display:flex;align-items:center;gap:13px;width:100%;min-height:58px;padding:11px 15px;border:1px solid rgba(211,229,236,.17);border-radius:11px;background:#06131b3d;color:#eaf0f4;text-align:left;font-size:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.choice-button:hover:not(:disabled){border-color:#d5b66b99;background:#d5b66b0f}.choice-button.is-selected{border-color:#d5b66b;background:#d5b66b1a}.choice-button:disabled{cursor:default}.choice-letter{display:grid;flex:0 0 29px;place-items:center;width:29px;height:29px;border:1px solid rgba(211,229,236,.2);border-radius:8px;color:#c1cdd3;font-size:11px;font-weight:800}.is-selected .choice-letter{border-color:#d5b66b;color:#e4c77e}.choice-mark{margin-left:auto;font-weight:900;font-size:19px}.choice-button.is-correct{border-color:#63be91;background:#63be911a}.choice-button.is-correct .choice-letter,.choice-button.is-correct .choice-mark{color:#8ed4ae}.choice-button.is-wrong{border-color:#e77;background:#ee777714}.choice-button.is-wrong .choice-letter,.choice-button.is-wrong .choice-mark{color:#faa}.explanation-box{margin-top:20px;padding:17px 19px;border:1px solid rgba(211,229,236,.16);border-radius:12px;background:#06131b47}.explanation-box strong{font-size:14px}.explanation-box p{margin:8px 0 0;color:#c2cdd3;font-size:13px;line-height:1.85}.explanation-box--correct{border-color:#63be9161}.explanation-box--correct strong{color:#8ed4ae}.explanation-box--wrong{border-color:#ee777759}.explanation-box--wrong strong{color:#faa}.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:25px}.text-button{padding:10px 0;border:0;background:transparent;color:#aebdc6;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:#e4c77e}.result-panel{text-align:center}.result-panel .eyebrow{margin-bottom:10px}.result-copy{margin-right:auto;margin-left:auto}.result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;margin:28px auto 18px}.result-stat{display:flex;flex-direction:column;gap:9px;padding:20px 10px;border:1px solid rgba(211,229,236,.14);border-radius:12px;background:#06131b3d}.result-stat span{color:#9eafb9;font-size:12px}.result-stat strong{color:#e4c77e;font-size:30px}.result-stat small{color:#9eafb9;font-size:13px;font-weight:500}.result-note{margin:0 0 24px;color:#8ea1ac;font-size:11px;line-height:1.7}.footer{padding:30px 0 32px;color:#758994;font-size:12px;line-height:1.7}.footer p{margin-bottom:0}@media(max-width:700px){.page-shell{width:min(100% - 28px,1080px)}.topbar{min-height:64px}.topbar-label{font-size:11px}.hero{padding:52px 0 36px}.hero-copy{font-size:14px}.quiz-intro{grid-template-columns:1fr;gap:24px}.quiz-preview{min-height:180px}.tile-row{margin:18px 0 15px}.tile-row span{width:42px;height:56px}.api-note{border-radius:14px;align-items:flex-start}.api-checked-at{flex-basis:100%;padding-left:16px}.quiz-actions{align-items:stretch}}@media(max-width:430px){.quiz-actions{flex-direction:column-reverse}.quiz-actions .primary-button{width:100%}.text-button{align-self:center}.result-stats{gap:7px}.result-stat{padding:15px 5px}.result-stat strong{font-size:25px}}
