@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#202522; --muted:#737a71; --paper:#f5f5ef; --panel:#fffef9; --lime:#d8f36a; --line:#dfe2d8; --red:#f07167; --blue:#b9dce0; }
:root body.dark-mode { --ink:#f2f3e9; --muted:#a3aa9e; --paper:#171a18; --panel:#202522; --lime:#b8d94c; --line:#39413a; --red:#ff8a7e; --blue:#294247; }
:root body.pink-mode { --ink:#3d2733; --muted:#956f82; --paper:#fff1f7; --panel:#fffafd; --lime:#ffafd0; --line:#f0c7d9; --red:#d94f78; --blue:#e9c5df; }
* { box-sizing:border-box; }
html { min-width:320px; overflow-x:hidden; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--paper); font-family:'Space Grotesk', sans-serif; overflow-x:hidden; transition:background .25s ease, color .25s ease; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(#8c9887 0.7px, transparent .7px); background-size:18px 18px; }
.app-shell { position:relative; display:grid; grid-template-columns:minmax(280px, .72fr) minmax(500px, 1.28fr); min-height:100vh; max-width:1440px; margin:auto; }
.intro-panel { position:relative; display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(34px, 5vh, 64px) 8vw 8vw; border-right:1px solid var(--line); }
.theme-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 44px; } .theme-toggle,.pink-theme-button { min-height:34px; border:1px solid var(--line); padding:8px 11px; color:var(--ink); background:transparent; font-family:'DM Mono', monospace; font-size:10px; letter-spacing:.04em; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } .theme-toggle:hover,.pink-theme-button:hover { transform:translateY(-1px); box-shadow:2px 2px 0 var(--ink); } .theme-toggle span { margin-left:5px; text-transform:uppercase; } .pink-theme-button { border-color:#d76b9c; color:#8f315e; background:#ffafd0; }
.eyebrow { margin:0 0 22px; color:#737a71; font-family:'DM Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:28px; font-size:clamp(54px, 7vw, 104px); line-height:.84; letter-spacing:-.07em; font-weight:600; } h1 span { color:#899b4d; } h2 { margin-bottom:30px; font-size:clamp(32px, 4vw, 56px); line-height:.94; letter-spacing:-.06em; }
.intro-copy { max-width:290px; color:var(--muted); font-size:16px; line-height:1.55; }
.quick-facts { display:flex; gap:28px; margin-top:70px; } .quick-facts div { display:flex; flex-direction:column; gap:5px; } .quick-facts strong { font-family:'DM Mono', monospace; font-size:22px; } .quick-facts span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.developer-credit { margin-top:clamp(72px, 14vh, 180px); color:var(--muted); font-family:'DM Mono', monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; } .developer-credit strong { color:var(--ink); font-weight:500; }
.workspace { display:flex; align-items:flex-start; padding:clamp(34px, 5vh, 64px) 7vw 7vw; } .view { width:100%; max-width:680px; margin:0 auto; } .hidden { display:none; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; } .text-button { border:0; border-bottom:1px solid var(--ink); padding:4px 0; color:var(--ink); background:none; font-family:inherit; font-size:12px; cursor:pointer; }
.settings-grid { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:34px 0 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px 0 14px; } .language-choice { display:flex; flex-wrap:wrap; gap:7px; border:0; padding:0; margin:0; } .language-choice legend,.time-choice { display:block; width:100%; margin-bottom:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; } .language-choice label { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:9px 13px; color:var(--muted); background:rgba(255,254,249,.38); font-size:12px; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .language-choice label:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-1px); } .language-choice input { position:absolute; opacity:0; width:1px; height:1px; } .language-choice input:checked + label,.language-choice label:has(input:checked) { border-color:var(--ink); color:var(--ink); background:var(--lime); box-shadow:2px 2px 0 var(--ink); } .language-choice label:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:3px; } .time-choice { width:190px; flex:none; } .time-choice span { display:flex; align-items:center; border-bottom:1px solid var(--ink); } .time-choice input { width:100%; border:0; outline:0; padding:5px 0; color:var(--ink); background:transparent; font-family:'DM Mono', monospace; font-size:16px; } .time-choice b { color:var(--muted); font-family:'DM Mono', monospace; font-size:11px; font-weight:400; }
.row-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:9px; margin:0 0 32px; } .row-card { position:relative; } .row-card input { position:absolute; opacity:0; } .row-card label { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100px; border:1px solid var(--line); background:rgba(255,254,249,.7); cursor:pointer; transition:.18s ease; } .row-card label:hover { transform:translateY(-3px); border-color:var(--ink); } .row-card input:checked + label { border-color:var(--ink); background:var(--lime); box-shadow:4px 4px 0 var(--ink); } .row-name { font-family:'DM Mono', monospace; font-size:10px; } .row-kana { margin-top:9px; font-size:21px; }
.row-grid.both-mode { grid-template-columns:repeat(4, 1fr); } .row-grid.both-mode .row-name { font-size:9px; } .row-grid.both-mode .row-kana { font-size:21px; }
.setup-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; } .shuffle-option { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; cursor:default; } .shuffle-option input { appearance:none; width:17px; height:17px; margin:0; border:1px solid var(--muted); background:transparent; opacity:1; } .shuffle-option input:checked { border-color:var(--ink); background:var(--lime); box-shadow:2px 2px 0 var(--ink); } .shuffle-option input:checked::after { content:'✓'; display:block; color:var(--ink); font-size:12px; line-height:15px; text-align:center; } .always-on { color:var(--muted); font-family:'DM Mono', monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.primary-button,.secondary-button { border:1px solid var(--ink); padding:17px 21px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:.18s ease; } .primary-button { color:var(--panel); background:var(--ink); } .primary-button:hover { color:var(--ink); background:var(--lime); box-shadow:4px 4px 0 var(--ink); } .primary-button span { margin-left:20px; font-size:18px; } .secondary-button { color:var(--ink); background:transparent; } .secondary-button:hover { background:var(--blue); }
.message { min-height:18px; margin:16px 0 0; color:var(--red); font-size:12px; }
.test-topline { display:flex; align-items:center; gap:20px; } .icon-button { border:0; color:var(--ink); background:none; font-size:30px; line-height:1; cursor:pointer; } .progress-wrap { flex:1; } .progress-label { display:flex; justify-content:space-between; margin-bottom:9px; color:var(--muted); font-family:'DM Mono', monospace; font-size:11px; text-transform:uppercase; } .progress-track { height:5px; background:var(--line); } .progress-bar { width:0; height:100%; background:var(--ink); transition:width .25s ease; } .score-chip { white-space:nowrap; font-family:'DM Mono', monospace; font-size:11px; }
.question-area { position:relative; display:flex; flex-direction:column; align-items:center; padding:70px 0 20px; text-align:center; } .question-area .eyebrow { margin-bottom:12px; } .character { display:flex; align-items:flex-end; justify-content:center; min-height:155px; font-size:clamp(120px, 17vw, 190px); line-height:1; } .both-character { gap:clamp(28px, 7vw, 80px); } .both-character span { display:flex; flex-direction:column; align-items:center; } .both-character small { margin-bottom:14px; color:var(--muted); font-family:'DM Mono', monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; } .timer-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; width:72px; height:72px; margin:20px 0 34px; border:2px solid var(--ink); border-radius:50%; font-family:'DM Mono', monospace; } .timer-ring.warning { color:var(--red); border-color:var(--red); } .timer-ring span { font-size:17px; } .timer-ring small { font-size:9px; color:var(--muted); } .answer-form { width:min(100%, 370px); text-align:left; } .answer-form label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; } .input-row { display:flex; border-bottom:2px solid var(--ink); } .input-row input { width:100%; border:0; outline:0; padding:12px 0; color:var(--ink); background:transparent; font-family:'DM Mono', monospace; font-size:20px; } .submit-button { border:0; color:var(--ink); background:none; font-size:25px; cursor:pointer; } .feedback { min-height:20px; margin:15px 0 0; color:var(--muted); font-family:'DM Mono', monospace; font-size:12px; } .feedback.good { color:#5c842f; } .feedback.bad { color:var(--red); }
#result-view { text-align:left; } #result-view h2 { margin-bottom:12px; } .result-score { margin:28px 0 36px; font-family:'DM Mono', monospace; font-size:84px; line-height:1; } .result-score small { color:var(--muted); font-size:15px; } .result-message { max-width:360px; color:var(--muted); line-height:1.5; } .result-stats { display:flex; gap:0; margin:40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .result-stats div { flex:1; padding:18px 0; border-right:1px solid var(--line); } .result-stats div:last-child { border:0; padding-left:18px; } .result-stats div:not(:first-child) { padding-left:18px; } .result-stats span,.result-stats small { display:block; } .result-stats span { font-family:'DM Mono', monospace; font-size:22px; } .result-stats small { margin-top:7px; color:var(--muted); font-size:11px; text-transform:uppercase; } .result-actions { display:flex; gap:12px; }
@media (max-width:760px) { .app-shell { display:block; } .intro-panel { min-height:0; padding:22px 7vw 30px; border-right:0; border-bottom:1px solid var(--line); } .theme-actions { margin-bottom:28px; } .theme-toggle,.pink-theme-button { min-height:42px; padding:9px 12px; } h1 { margin-bottom:18px; font-size:clamp(54px, 17vw, 68px); } .intro-copy { max-width:32ch; font-size:15px; } .quick-facts { gap:24px; margin-top:28px; } .developer-credit { margin-top:42px; } .workspace { padding:24px 7vw 40px; } .section-heading { gap:14px; } h2 { margin-bottom:22px; font-size:clamp(30px, 9vw, 42px); } .text-button { min-height:40px; } .settings-grid { align-items:flex-start; flex-direction:column; gap:18px; margin:24px 0 24px; padding:14px 0; } .language-choice { gap:8px; } .language-choice label { min-height:42px; padding:9px 12px; } .time-choice { width:100%; } .time-choice input { min-height:38px; font-size:18px; } .row-grid,.row-grid.both-mode { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; } .row-card label { min-height:78px; padding:8px 3px; } .row-name,.row-grid.both-mode .row-name { max-width:100%; overflow:hidden; font-size:8px; text-align:center; text-overflow:ellipsis; white-space:nowrap; } .row-kana,.row-grid.both-mode .row-kana { margin-top:7px; font-size:19px; } .setup-footer { align-items:stretch; flex-direction:column; gap:18px; } .shuffle-option { min-height:42px; } .primary-button,.secondary-button { min-height:50px; width:100%; } .test-topline { align-items:flex-start; gap:10px; } .icon-button { flex:0 0 40px; min-width:40px; min-height:42px; padding:0; } .progress-wrap { min-width:0; padding-top:5px; } .progress-label { gap:8px; font-size:9px; } .progress-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .score-chip { flex:0 0 auto; padding-top:9px; font-size:9px; } .question-area { padding:48px 0 12px; } .question-area .eyebrow { margin-bottom:8px; } .character { min-height:120px; font-size:clamp(92px, 29vw, 145px); } .both-character { gap:clamp(18px, 8vw, 34px); } .both-character small { margin-bottom:8px; font-size:8px; } .timer-ring { width:66px; height:66px; margin:18px 0 28px; } .timer-ring span { font-size:15px; } .answer-form { width:100%; } .answer-form label { margin-bottom:7px; } .input-row { min-height:52px; } .input-row input { min-width:0; min-height:48px; padding:10px 0; font-size:19px; } .submit-button { min-width:48px; min-height:48px; } .feedback { min-height:36px; margin-top:12px; font-size:11px; } #result-view { padding-top:8px; } .result-score { margin:22px 0 28px; font-size:64px; } .result-stats { margin:30px 0; } .result-stats div { padding:15px 0; } .result-stats div:not(:first-child),.result-stats div:last-child { padding-left:10px; } .result-stats span { font-size:19px; } .result-stats small { font-size:9px; } .result-actions { flex-direction:column; } }
@media (max-width:760px) { body.quiz-active .intro-panel { display:none; } body.quiz-active .workspace { min-height:100dvh; padding-top:12px; padding-bottom:20px; } body.quiz-active .test-view { min-height:calc(100dvh - 32px); } }
@media (max-width:760px) and (max-height:620px) { .keyboard-open .workspace { padding-top:12px; padding-bottom:16px; } .keyboard-open .test-topline { gap:6px; } .keyboard-open .question-area { padding-top:14px; } .keyboard-open .question-area .eyebrow { margin-bottom:2px; } .keyboard-open .character { min-height:72px; font-size:clamp(68px, 22vw, 104px); } .keyboard-open .both-character { gap:20px; } .keyboard-open .both-character small { margin-bottom:4px; font-size:7px; } .keyboard-open .timer-ring { width:48px; height:48px; margin:8px 0 12px; } .keyboard-open .timer-ring span { font-size:12px; } .keyboard-open .timer-ring small { font-size:7px; } .keyboard-open .answer-form label { margin-bottom:2px; } .keyboard-open .input-row { min-height:44px; } .keyboard-open .input-row input { min-height:40px; padding:6px 0; } .keyboard-open .submit-button { min-width:42px; min-height:42px; } .keyboard-open .feedback { min-height:20px; margin-top:4px; } }