:root { --soft:#f0e7f2; --focus-size:1; }
html[data-theme="dark"] { color-scheme:dark; --canvas:#1c1622; --paper:#292030; --ink:#f5edf8; --muted:#c3afcc; --line:#4a3953; --purple:#d5b2ee; --stage:#130e19; --soft:#3b2b47; }
html[data-theme="dark"] .button-reset, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .drop-zone, html[data-theme="dark"] .tab[aria-selected="true"], html[data-theme="dark"] .history-jump, html[data-theme="dark"] .practice-card, html[data-theme="dark"] .study-source, html[data-theme="dark"] .study-visual-card { background:var(--paper); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .tabs, html[data-theme="dark"] .private-tag, html[data-theme="dark"] .step, html[data-theme="dark"] .state, html[data-theme="dark"] .study-launch, html[data-theme="dark"] .meaning-table td, html[data-theme="dark"] .meaning-table th, html[data-theme="dark"] .meaning-select, html[data-theme="dark"] .study-choice { background:var(--soft); color:var(--ink); }
html[data-theme="dark"] .brand-mark, html[data-theme="dark"] .button-ink { background:#9b73b5; color:#fff; }
select { font:inherit; padding:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:9px; }
.theme-toggle { margin-left:auto; margin-right:10px; }
.welcome-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 25px; border:1px solid var(--line); border-radius:22px; background:var(--paper); margin-bottom:20px; }
.welcome-tools h2 { font-size:1.28rem; letter-spacing:-.03em; margin:0; }
.welcome-tools p:not(.eyebrow) { color:var(--muted); margin:8px 0 0; font-size:.88rem; line-height:1.6; }
.welcome-actions { display:flex; flex-wrap:wrap; gap:9px; flex-shrink:0; }
.resume-banner, .section-ready { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; background:var(--soft); border:1px solid var(--line); border-radius:16px; margin:0 0 18px; }
.resume-banner div { flex:1; min-width:180px; }.resume-banner p { margin:4px 0 0; font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.pdf-options { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:16px 0 0; }.pdf-options legend { font-size:.78rem; font-weight:750; }.pdf-options label { display:flex; align-items:flex-start; gap:8px; font-size:.75rem; line-height:1.5; margin:7px 0; }.pdf-options input { flex:none; margin-top:3px; }.pdf-options p { font-size:.72rem; color:var(--muted); line-height:1.5; margin:9px 0 0; }
.tempo-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.tempo-presets button { flex:1; min-height:40px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--muted); font:650 .74rem system-ui; padding:7px; }.tempo-presets button[aria-pressed="true"] { border-color:var(--purple); background:var(--soft); color:var(--purple); }
.check-row { display:flex; align-items:center; gap:8px; margin:14px 0 5px; font-size:.8rem; font-weight:650; }input[type="checkbox"] { accent-color:#805796; width:17px; height:17px; }
.setting-hint { display:block; font-size:.73rem; line-height:1.5; color:var(--muted); margin:5px 0; }.reader-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:13px; }.reader-tools label { display:flex; align-items:center; gap:7px; font-size:.76rem; margin-left:auto; }.reader-tools .setting-hint { flex-basis:100%; margin:0; }
.reader-quick { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:15px; }.section-ready { font-size:.8rem; margin:12px 0 0; }.section-ready span { flex:1; }
#focus-word { font-size:calc(clamp(2.2rem,4.8vw,3.85rem) * var(--focus-size)); }#focus-word.is-long { font-size:calc(clamp(1.25rem,3.5vw,2.45rem) * var(--focus-size)); }
body.focus-mode { overflow:hidden; }body.focus-mode #reader { position:fixed; inset:0; z-index:50; width:100%; height:100dvh; overflow:auto; border:0; border-radius:0; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:var(--canvas); display:flex; }.focus-mode #reader .stage { min-height:40dvh; max-height:65dvh; flex:1; }.focus-mode #reader .history, .focus-mode #study-open, .focus-mode .reader-quick, .focus-mode .section-ready { display:none; }.focus-mode #reader .transport { position:sticky; bottom:0; padding:12px 0 4px; background:var(--canvas); }.focus-mode #reader .button-play { flex:1; min-height:55px; font-size:1rem; }.focus-mode #focus-word { font-size:calc(clamp(2.8rem,8vw,6rem) * var(--focus-size)); }.focus-mode #focus-word.is-long { font-size:calc(clamp(1.4rem,5vw,3.2rem) * var(--focus-size)); }
dialog { width:min(760px,calc(100% - 28px)); max-height:88dvh; overflow:auto; padding:25px; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--ink); box-shadow:0 30px 100px #140c2640; }dialog::backdrop { background:#190c26a8; backdrop-filter:blur(5px); }.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }.dialog-heading h2 { margin:0; font-size:1.4rem; letter-spacing:-.04em; }dialog p { line-height:1.7; font-size:.92rem; }dialog button { white-space:normal!important; }dialog fieldset { border:1px solid var(--line); border-radius:13px; padding:13px; margin:14px 0; }dialog legend { padding:0 5px; font-size:.85rem; font-weight:700; }dialog fieldset label { display:flex; gap:10px; padding:9px 3px; align-items:flex-start; font-size:.88rem; line-height:1.55; }dialog input[type="radio"] { flex:none; margin-top:5px; accent-color:#805796; }dialog textarea { min-height:95px; height:95px; }.calibration-copy { padding:18px; border-radius:15px; background:var(--soft); line-height:1.85; font-size:1rem; white-space:pre-line; }.timer-line { display:flex; justify-content:space-between; gap:12px; align-items:center; position:sticky; top:-25px; padding:12px 0; background:var(--paper); z-index:1; }.timer-line strong { font-variant-numeric:tabular-nums; font-size:1.5rem; }.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }.result-box { padding:20px; background:var(--soft); border-radius:16px; margin:16px 0; }.result-box strong { display:block; font-size:2rem; color:var(--purple); }.source-evidence { border-left:3px solid var(--purple); padding:10px 15px; margin:12px 0; background:var(--soft); font-size:.85rem; line-height:1.7; white-space:pre-wrap; max-height:220px; overflow:auto; }.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.stat { padding:15px; border-radius:15px; background:var(--soft); }.stat b { display:block; font-size:1.9rem; color:var(--purple); }.stat span { font-size:.75rem; color:var(--muted); }.week-chart { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin:24px 0; align-items:end; height:170px; }.day-column { text-align:center; display:flex; height:100%; justify-content:flex-end; flex-direction:column; gap:7px; }.day-column .bar { min-height:3px; background:#9972ad; border-radius:7px 7px 3px 3px; }.day-column span { font-size:.7rem; color:var(--muted); }.review-answer { margin:8px 0 15px; font-size:.84rem; line-height:1.6; }
@media(max-width:720px) { .welcome-tools { align-items:flex-start; flex-direction:column; padding:19px; }.welcome-actions { width:100%; }.welcome-actions button { flex:1; }.private-tag { display:none; }.theme-toggle { margin-right:0; }.stats-grid { gap:7px; }.stat { padding:12px 9px; }.stat b { font-size:1.45rem; }dialog { padding:19px; }.dialog-heading h2 { font-size:1.22rem; }.focus-mode #reader .reader-heading .step { display:none; }.focus-mode .reader-title { max-width:65%; } }
@media(prefers-reduced-motion:no-preference) { dialog[open] { animation:enter .18s ease-out; }@keyframes enter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } }