.katakana-page{--katakana-ink:#191d32;--katakana-accent:#435bfe;--katakana-line:#dce0f1;--katakana-paper:#f8f9ff;background:var(--katakana-paper);color:var(--katakana-ink)}.katakana-page[data-paper-theme=warm],[data-paper-theme=warm] .katakana-page{--katakana-paper:#f7f0e6;--katakana-line:#d8d0c4}.katakana-main{max-width:1160px;margin:0 auto;padding:66px 40px 32px}.katakana-intro{justify-content:space-between;align-items:center;gap:32px;padding-bottom:48px;display:flex}.katakana-eyebrow,.katakana-edition small,.katakana-set-label,.katakana-question-number,.katakana-result>span{letter-spacing:.1em;font:600 11px/1.5 IBM Plex Mono,monospace}.katakana-eyebrow{color:var(--katakana-accent);margin:0 0 20px}.katakana-intro h1{letter-spacing:-.055em;margin:0 0 22px;font:600 clamp(36px,4.8vw,62px)/1.07 Space Grotesk,sans-serif}.katakana-intro h1 em{color:var(--katakana-accent);font-style:normal}.katakana-intro p:not(.katakana-eyebrow){color:#676d85;margin:0;font-size:15px;line-height:1.7}.katakana-edition{border-left:1px solid var(--katakana-line);flex-direction:column;justify-content:center;align-self:stretch;gap:16px;min-width:210px;padding-left:48px;display:flex}.katakana-edition>span{writing-mode:vertical-rl;color:var(--katakana-accent);font:900 38px/1.4 Noto Sans JP,sans-serif}.katakana-edition small{color:#6b7290;font-size:9px}.katakana-picker{border-top:1px solid var(--katakana-line);justify-content:space-between;align-items:center;gap:24px;padding:22px 0;display:flex}.katakana-levels{gap:6px;display:flex}.katakana-levels button{color:var(--katakana-ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:baseline;gap:12px;padding:12px 16px;font-size:19px;font-weight:700;display:flex}.katakana-levels button[aria-pressed=true]{border-color:var(--katakana-accent);color:var(--katakana-accent);background:#eef0ff}.katakana-levels button span{font-size:11px;font-weight:500}.katakana-set-label{letter-spacing:.04em;color:#676d85;align-items:center;gap:12px;display:flex}.katakana-set-label select{border:1px solid var(--katakana-line);color:var(--katakana-ink);background:0 0;border-radius:6px;max-width:200px;padding:12px 32px 12px 12px;font:500 13px Space Grotesk,sans-serif}.katakana-progress{z-index:5;border-top:1px solid var(--katakana-line);border-bottom:1px solid var(--katakana-line);box-sizing:border-box;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#f8f9ff38;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:16px 0;display:flex;position:sticky;top:0}.katakana-progress>div{flex:240px;min-width:0;max-width:50%}.katakana-progress>button{white-space:nowrap;flex-shrink:0}.katakana-progress strong{font:500 12px IBM Plex Mono,monospace}.katakana-completion{color:#676d85;margin:4px 0 20px;font-size:12px;line-height:1.6}.katakana-meter{background:#e4e7fb;height:3px;margin-top:10px;overflow:hidden}.katakana-meter span{background:var(--katakana-accent);height:100%;transition:width .15s;display:block}.katakana-grade,.katakana-reset{border:1px solid var(--katakana-accent);background:var(--katakana-accent);color:#fff;cursor:pointer;border-radius:5px;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:12px 18px;font:600 13px Space Grotesk,sans-serif;display:inline-flex}.katakana-grade:disabled{color:#7e859f;cursor:default;background:#e9ebf6;border-color:#e9ebf6}.katakana-reset{color:var(--katakana-accent);background:0 0}.katakana-questions{margin:0;padding:0;list-style:none}.katakana-question{border-bottom:1px solid var(--katakana-line);padding:36px 0 34px}.katakana-question fieldset{border:0;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:48px;min-width:0;margin:0;padding:0;display:grid;position:relative}.katakana-question-heading{flex-direction:column;gap:14px;min-width:0;display:flex;position:relative}.katakana-question-number{color:#7d839c}.katakana-question-word{letter-spacing:-.045em;overflow-wrap:anywhere;font:700 clamp(23px,2.4vw,33px)/1.6 Noto Sans JP,sans-serif}.katakana-listen{color:var(--katakana-accent);cursor:pointer;background:0 0;border:0;align-self:flex-start;align-items:center;gap:7px;margin:0;padding:4px 0;font-size:11px;display:inline-flex}.katakana-listen svg{width:17px;height:17px}.katakana-choices{grid-area:1/2;grid-template-columns:1fr 1fr;align-content:center;gap:10px;display:grid}.katakana-choice{border:1px solid var(--katakana-line);cursor:pointer;overflow-wrap:anywhere;background:#ffffff70;border-radius:6px;align-items:center;gap:10px;min-width:0;min-height:64px;padding:14px;font-size:13px;line-height:1.5;display:flex;position:relative}.katakana-choice input{opacity:0;width:1px;height:1px;position:absolute}.katakana-choice:has(input:focus-visible){outline-offset:3px;outline:3px solid #435bfe}.katakana-choice-letter{border:1px solid var(--katakana-line);color:#747d9c;border-radius:50%;flex:0 0 23px;place-items:center;height:23px;font:500 10px IBM Plex Mono,monospace;display:grid}.katakana-choice:hover:not(:has(input:disabled)){background:#fff;border-color:#a2adff}.katakana-choice.is-selected{border-color:var(--katakana-accent);background:#eef0ff}.katakana-choice.is-selected .katakana-choice-letter{background:var(--katakana-accent);color:#fff;border-color:var(--katakana-accent)}.katakana-choice.is-answer{background:#e8edff;border-color:#435bfe}.katakana-choice.is-wrong{background:#f9ece5;border-color:#ba5e49}.katakana-answer-note{color:var(--katakana-accent);grid-column:2;margin:14px 0 0;font-size:12px}.is-missed .katakana-answer-note{color:#a34c37}.katakana-result{outline-offset:4px;background:#eef0ff;border-radius:8px;margin:26px 0;padding:34px}.katakana-result h2{letter-spacing:-.06em;margin:18px 0;font:500 68px/1 Space Grotesk,sans-serif}.katakana-result h2 small{color:#7d86ae;font-size:30px}.katakana-result p{margin:0 0 20px;font-size:14px}.katakana-finish{justify-content:space-between;align-items:center;gap:24px;padding:36px 0;display:flex}.katakana-finish p,.katakana-credit{color:#6b7390;font-size:12px;line-height:1.7}.katakana-credit{border-top:1px solid var(--katakana-line);margin-top:25px;padding-top:24px}.katakana-credit a{color:inherit;text-decoration:underline}@media (width<=700px){.katakana-main{padding:34px 20px 24px}.katakana-intro{gap:15px;padding-bottom:30px}.katakana-intro h1{font-size:clamp(32px,7vw,42px)}.katakana-intro p:not(.katakana-eyebrow){font-size:13px}.katakana-edition{min-width:0;padding-left:16px}.katakana-edition>span{font-size:28px}.katakana-edition small{display:none}.katakana-picker{flex-direction:column;align-items:stretch;gap:16px;padding:20px 0}.katakana-levels button{flex:1;justify-content:space-between}.katakana-set-label{justify-content:space-between}.katakana-set-label select{width:210px;max-width:75%}.katakana-progress{gap:12px}.katakana-progress strong{font-size:10px}.katakana-grade,.katakana-reset{gap:12px;padding:10px 12px;font-size:12px}.katakana-question{padding:26px 0}.katakana-question fieldset{display:block}.katakana-question-heading{gap:8px;padding-right:65px}.katakana-question-word{font-size:clamp(23px,6vw,30px)}.katakana-listen{margin:0;position:absolute;top:21px;right:0}.katakana-choices{gap:8px;margin-top:22px}.katakana-choice{gap:8px;min-height:66px;padding:11px;font-size:12px}.katakana-choice-letter{flex-basis:20px;height:20px;font-size:9px}.katakana-finish{flex-direction:column;align-items:stretch;gap:12px}.katakana-finish p{margin:0}.katakana-answer-note{margin-top:12px}}@media (prefers-reduced-motion:reduce){.katakana-meter span{transition:none}}
