:root{color-scheme:light;--paper:#f7f5ed;--ink:#202b28;--muted:#59665f;--line:#d5dbd0;--green:#255a40;--lime:#def18f;--white:#fffef9;--error:#8f362b;--gold:#815c08}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
header,main,body>footer{max-width:1060px;margin:auto;padding:24px 32px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px}
.brand{font-weight:800;font-size:14px;letter-spacing:1px;text-decoration:none;color:var(--ink)}
.brand span{font-weight:400;letter-spacing:0;color:var(--muted)}
.save-status{font-size:12px;color:var(--muted)}
main{min-height:calc(100vh - 180px);padding-top:48px}
h1{font-size:clamp(40px,6vw,66px);line-height:1.1;letter-spacing:-3px;margin:12px 0 18px;font-weight:750}
h1 span{color:var(--green)}
h1 .title-dot{color:#839b23}
h2{font-size:20px;line-height:1.4;margin:0 0 12px}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:var(--green)}
.lead{font-size:19px;color:var(--muted);margin:12px 0 24px}
.intro-line{display:flex;gap:24px;font-size:12px;color:var(--muted);margin:0 0 30px;flex-wrap:wrap}
.intro-line span+span{border-left:1px solid var(--line);padding-left:24px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;margin:24px 0}
.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel-heading>span{font-size:13px;color:var(--muted)}
button,.file-button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);padding:11px 16px;min-height:44px;text-align:center;touch-action:manipulation}
button:hover,.file-button:hover{border-color:var(--green);background:#eff3e8}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.file-button:focus-within{outline:3px solid #7c9a16;outline-offset:3px}
.primary{background:var(--green);color:white;border-color:var(--green)}
.primary:hover{background:#1d4733;color:white}
.quick-picks{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px}
.quick-picks button{font-size:12px;padding:7px 13px}
.units{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.unit{padding:8px 0;font-size:17px;position:relative}
.unit small{display:block;font-size:9px;font-weight:400;color:var(--muted)}
.unit[aria-pressed=true]{background:var(--lime);border:2px solid var(--green);padding:7px 0}
.unit[aria-pressed=true] small{color:var(--ink)}
.settings{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px 0 20px}
label{display:block;font-size:13px;font-weight:600}
select{display:block;width:100%;padding:12px;border:1px solid var(--line);background:var(--white);font:inherit;color:var(--ink);border-radius:7px;margin-top:8px;min-height:46px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.muted{color:var(--muted);font-size:14px}
.small{font-size:12px}
.support{font-size:14px;color:var(--muted);padding:12px 0 30px}
.support summary{cursor:pointer;color:var(--ink);padding:12px 0}
.support a{color:var(--green)}
.file-button{position:relative;overflow:hidden;display:inline-block}
.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
body>footer{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);margin-top:28px}
.session-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.session-top p{font-size:13px;color:var(--muted);margin:7px 0 0}
.session-actions{display:flex;gap:8px}
kbd{font:inherit;font-size:10px;border:1px solid currentColor;border-radius:3px;opacity:.7;padding:1px 4px;margin-left:9px}
progress{width:100%;height:5px;appearance:none;display:block;border:0;background:var(--line);border-radius:4px}
progress::-webkit-progress-bar{background:var(--line);border-radius:4px}
progress::-webkit-progress-value{background:var(--green);border-radius:4px}
progress::-moz-progress-bar{background:var(--green)}
.study-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:36px 44px;margin-top:28px;min-height:410px}
.card-meta{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
#prompt{font-size:clamp(28px,5vw,50px);line-height:1.6;margin:35px 0 8px;overflow-wrap:anywhere;letter-spacing:-.5px}
#prompt[lang=ja]{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
rt{font-size:.4em;letter-spacing:0}
#usage{margin-bottom:24px}
.meaning{font-size:23px}
.hook{font-size:14px;color:var(--muted);border-left:3px solid var(--lime);padding:6px 0 6px 14px}
.hook:empty{display:none}
#answer{display:block;width:100%;font:inherit;font-size:22px;min-height:62px;padding:15px;border:2px solid var(--line);border-radius:9px;margin:10px 0 8px;background:white;color:var(--ink)}
.kana-preview{min-height:30px;margin:0 0 16px;padding:4px 2px;color:var(--green);font-size:22px;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
.kana-preview::before{content:"かな  ";font:600 10px system-ui,sans-serif;letter-spacing:1px;color:var(--muted)}
.result{font-weight:750;font-size:20px;color:var(--green)}
.result[data-result=Wrong]{color:var(--error)}
.result[data-result=Hard],.result[data-result=Prompted]{color:var(--gold)}
.correct-answer{font-size:22px;overflow-wrap:anywhere}
.correct-answer p{margin:8px 0}
.grade-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0 10px}
.grade-actions button[data-active="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#eff3e8}
.continue-button{width:100%;margin-top:0}
.repair{border-top:1px solid var(--line);margin-top:24px;padding-top:12px;font-size:13px}
.hint{padding:12px;background:#f3f5e9;border-radius:6px;color:var(--green)}
.footer-note{text-align:center;font-size:12px;color:var(--muted);margin-top:24px}
#notice{background:#fff0ce;border:1px solid #b28c35;border-radius:8px;padding:16px;margin-bottom:24px;font-size:14px}
.result-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px}
.stat strong{font-size:28px;display:block}
.stat span{font-size:12px;color:var(--muted)}
.repair-word{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.repair-word span:first-child{font-weight:650}
.noscript{padding:30px;text-align:center}
[hidden]{display:none!important}
@media(max-width:640px){header,main,body>footer{padding:20px}
main{padding-top:30px}
.brand span{display:none}
h1{letter-spacing:-2px}
.panel{padding:18px}
.panel-heading{display:block}
.units{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.settings{grid-template-columns:1fr;gap:14px}
.study-card{padding:22px;min-height:400px}
#prompt{margin-top:28px}
.result-counts{grid-template-columns:repeat(2,1fr)}
.intro-line{gap:12px}
.intro-line span+span{padding-left:12px}
.repair-word{display:block}
.repair-word span{display:block}
body>footer{display:block}
body>footer span{display:block;margin-top:8px}
kbd{display:none}
.actions button{flex-grow:1}
.session-top{align-items:flex-start;gap:10px}
.session-actions{flex-direction:column}
.session-actions button{min-height:38px;padding:7px 10px}
.grade-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-meta{letter-spacing:0}
#answer{font-size:20px}
.panel-heading h2{margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
}

.settings input[type=number],#account-email,#session-note{display:block;width:100%;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--white);font:inherit;color:var(--ink);margin:8px 0}
.history-row{border-bottom:1px solid var(--line);padding:14px 0}.history-row button{margin:4px;max-width:100%;overflow-wrap:anywhere}
#analytics p,#retention-comparison p{overflow-wrap:anywhere}#analytics button{margin-left:12px}
#account-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:end}#account-controls label{flex-basis:100%}
#telemetry{width:18px;height:18px;vertical-align:middle}summary{cursor:pointer}details{margin:16px 0}

.header-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.back-home{font-size:12px;color:var(--muted);text-decoration:none;border-left:1px solid var(--line);padding-left:14px}.back-home:hover{color:var(--green)}.session-actions select{display:inline-block;width:auto;min-height:44px;margin:0;padding:8px 10px;font-size:12px}.session-actions #audio-speed{min-width:68px}body>footer a{color:var(--green);text-decoration:none}
@media(max-width:640px){.session-actions select{width:100%;min-height:38px}.header-nav{gap:9px}.back-home{padding-left:9px}}