:root{--bg: #0e0f12;--bg-2: #15171c;--bg-3: #1c1f26;--line: #2a2e38;--fg: #e9eaee;--fg-2: #a9adb8;--fg-3: #6f7482;--accent: #e8ff47;--accent-ink: #14160a;--ok: #4ade80;--ng: #fb7185;--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--sans: "Inter", "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;--serif: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;--radius: 14px;--max: 760px}*{box-sizing:border-box}html{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.7;-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;background:radial-gradient(1200px 500px at 50% -200px,rgba(232,255,71,.07),transparent 60%),var(--bg)}a{color:var(--accent)}button,a.primary{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg-3);color:var(--fg);border-radius:999px;padding:.7em 1.4em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5em;transition:transform .08s ease,background .15s ease,border-color .15s ease}button:hover,a.primary:hover{border-color:var(--fg-3)}button:active{transform:translateY(1px)}.primary,button.primary,a.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}.primary:hover,a.primary:hover{filter:brightness(1.05);border-color:var(--accent)}.primary.big{font-size:1.25rem;padding:.8em 2.4em}.page{max-width:var(--max);margin:0 auto;padding:20px 18px 80px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 22px}.brand{display:flex;align-items:baseline;gap:10px}.brand-mark{font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:.08em;color:var(--accent)}.brand-sub{font-family:var(--mono);color:var(--fg-3);font-size:.8rem}.progress{display:flex;align-items:center;gap:12px;min-width:160px}.progress-num{font-family:var(--mono);font-size:1.1rem;font-variant-numeric:tabular-nums}.dim{color:var(--fg-3)}.bar{flex:1;height:6px;background:var(--bg-3);border-radius:99px;overflow:hidden}.bar-fill{height:100%;background:var(--accent);transition:width .3s ease}.eyebrow{font-family:var(--mono);color:var(--fg-3);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 12px}.hero{padding-top:8vh}.hero h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.2;margin:0 0 20px;letter-spacing:-.01em}.accent{color:var(--accent);font-family:var(--serif);font-size:1.15em}.lead{color:var(--fg-2);font-size:1.05rem;margin:0 0 24px}.cats{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-wrap:wrap;gap:8px}.cats li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);font-size:.9rem}.cats b{font-family:var(--mono);color:var(--accent)}.hint{color:var(--fg-3);font-size:.85rem;margin:16px 0 0}.cat-tag{font-family:var(--mono);font-size:.8rem;color:var(--fg-3);margin:0 0 6px;letter-spacing:.05em}.question h2{font-size:clamp(1.4rem,4vw,1.9rem);margin:0 0 16px;line-height:1.3}.rich-p{margin:0 0 14px;color:var(--fg)}.rich-p code,.option-text code{font-family:var(--mono);font-size:.9em;background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:.08em .4em;white-space:nowrap}.rich-p strong{color:var(--accent);font-weight:700}figure.code{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden}figure.code figcaption{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);padding:6px 14px;border-bottom:1px solid var(--line);background:var(--bg-3)}figure.code pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.6;tab-size:2}figure.code code{font-family:inherit}.token.comment{color:var(--fg-3);font-style:italic}.token.string,.token.attr-value,.token.property-name,.token.header-name{color:#b5e8a0}.token.keyword,.token.tag,.token.request-line .token.property,.token.response-status{color:#9ecbff}.token.number,.token.boolean,.token.constant{color:#ffb86b}.token.function,.token.attr-name,.token.property,.token.header-name{color:#e9d8ff}.token.punctuation,.token.operator{color:var(--fg-2)}.token.regex,.token.important{color:#ffd166}.options{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}.option{width:100%;text-align:left;border-radius:var(--radius);padding:14px 16px;gap:14px;justify-content:flex-start;align-items:flex-start;background:var(--bg-2);line-height:1.55}.option:disabled{cursor:default;opacity:.85}.option-label{font-family:var(--mono);font-weight:700;color:var(--fg-3);flex:0 0 1.6em;height:1.6em;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-top:.1em}.option.is-picked .option-label{border-color:var(--fg-2);color:var(--fg)}.option.is-answer{border-color:var(--ok);background:#4ade8014;opacity:1}.option.is-answer .option-label{background:var(--ok);color:#04200f;border-color:var(--ok)}.option.is-wrong{border-color:var(--ng);background:#fb718514;opacity:1}.option.is-wrong .option-label{background:var(--ng);color:#2a0710;border-color:var(--ng)}.verdict{margin-top:26px;padding:20px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2);animation:rise .25s ease}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.verdict-head{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:0 0 12px}.verdict.ok .verdict-head{color:var(--ok)}.verdict.ng .verdict-head{color:var(--ng)}.explanation .rich-p{color:var(--fg-2)}.explanation figure.code{background:var(--bg)}.refs{margin:0 0 20px;padding-left:1.2em;font-size:.9rem}.refs li{margin:4px 0}.result{padding-top:4vh;text-align:center}.score{margin:0;font-family:var(--mono);font-size:1.4rem}.score-num{font-size:5rem;font-weight:700;color:var(--accent);line-height:1}.rank{font-family:var(--serif);font-size:clamp(2rem,7vw,3rem);margin:8px 0 12px;letter-spacing:.04em}.result .lead{max-width:520px;margin-inline:auto}.grid{display:inline-block;text-align:left;font-family:var(--mono);font-size:.95rem;line-height:1.8;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;margin:8px 0 0}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 32px}.review{text-align:left;border-top:1px solid var(--line);padding-top:16px}.review summary{cursor:pointer;color:var(--fg-2)}.review ol{list-style:none;padding:0;margin:12px 0 0}.review li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}.review-mark{font-family:var(--mono);font-weight:700;width:1.4em}.review li.ok .review-mark{color:var(--ok)}.review li.ng .review-mark{color:var(--ng)}@media(max-width:480px){.page{padding-inline:14px}.progress{min-width:120px}figure.code pre{font-size:.8rem}}
