:root { color-scheme:light dark; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --bg:#f7f8f5; --surface:#fff; --soft:#eef2ed; --ink:#202d27; --muted:#5c6962; --line:#d6dfd8; --accent:#255e49; }
* { box-sizing:border-box; }
button,.button,p,h1,h2,h3 { overflow-wrap:anywhere; }
body { margin:0 auto; max-width:880px; padding:20px max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:var(--bg); color:var(--ink); }
h1 { font-size:28px; line-height:1.25; margin:24px 0 12px; letter-spacing:-.03em; } h2 { font-size:21px; line-height:1.35; }
a { color:var(--accent); text-underline-offset:4px; }
button,input,select,textarea { font:inherit; color:inherit; }
button,.button,select,input[type=search],input[type=number],textarea { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
button,.button,select { min-height:44px; cursor:pointer; }
.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
button:disabled { opacity:.45; cursor:default; }
button.primary,.button.primary,button[aria-pressed=true] { background:var(--accent); color:#fff; border-color:var(--accent); }
button.quiet,.button.quiet { background:transparent; color:var(--accent); }
button[aria-pressed]::before { content:'○ '; } button[aria-pressed=true]::before { content:'✓ '; }
button.word::before { content:none; }
:focus-visible { outline:3px solid #548dd5; outline-offset:3px; }
.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.muted,small { color:var(--muted); } small { font-size:13px; }
.eyebrow { text-transform:uppercase; font-size:11px; letter-spacing:.1em; color:var(--muted); }
summary { cursor:pointer; padding:14px 0; min-height:44px; font-weight:550; }
textarea,input[type=search] { width:100%; } textarea { display:block; resize:vertical; min-height:90px; }
.card,.entry,.deck { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; margin:16px 0; }
.tag { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:6px 12px; margin:3px; font-size:13px; }
.tag::before { content:'# '; } button.tag { min-height:44px; }
.metadata { font-size:14px; overflow-wrap:anywhere; }
[hidden] { display:none !important; }
#app-status { border-top:1px solid var(--line); margin-top:24px; font-size:14px; }
#app-status > summary { color:var(--muted); }
#app-status .download-row { border-bottom:1px solid var(--line); padding-bottom:16px; }
.app-notice { margin:12px 0; font-size:14px; }
@media(prefers-color-scheme:dark) { :root { --bg:#151c18; --surface:#202a24; --soft:#29362e; --ink:#e8f0ea; --muted:#adbcaf; --line:#405347; --accent:#a8d5b9; } button.primary,.button.primary,button[aria-pressed=true] { color:#15271b; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

.dialogue-turn { border-left:3px solid var(--line); padding:8px 16px; margin:12px 0; }
.dialogue-turn p { margin:8px 0; }

body { max-width: 760px; padding-bottom:calc(var(--study-height,250px) + 32px); }
.page-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.page-header h1 { flex:1; font-size:18px; margin:0; }
#study-panel { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(760px,100%); z-index:20; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); margin:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 4px 18px #0000000a; }
#gesture-zone { touch-action:pan-y; }
.progress-row { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
.progress-row p { margin:0; }
.audio-row { display:flex; gap:8px; margin-top:8px; }
#pause { flex:1; min-width:0; }
#speed { width:82px; }
.seek-row { display:flex; align-items:center; gap:10px; }
#seek { min-width:0; flex:1; min-height:44px; accent-color:var(--accent); }
#timer { font-size:12px; font-variant-numeric:tabular-nums; }
.study-actions { display:grid; grid-template-columns:44px minmax(0,1fr) max-content; gap:8px; }
.study-actions button { padding:8px; }
#next { white-space:nowrap; }
#status { font-size:13px; margin:4px 0 0; }
#status:empty { display:none; }
#study-body { padding:20px 4px; }
#study-body :is(button,summary,a,textarea) { scroll-margin-bottom:var(--study-height,230px); }
#hint-area { margin-bottom:16px; }
#hint-panel { background:var(--soft); padding:12px 16px; border-radius:12px; margin-top:12px; }
#hint-panel p { margin:6px 0; }
#hint-hanzi { font-size:28px; }
#answer { scroll-margin-bottom:var(--study-height,230px); }
#hanzi { font-size:clamp(28px,6vw,36px); line-height:1.6; margin:8px 0; }
#pinyin { font-size:21px; color:var(--accent); margin:8px 0; }
#english { font-size:19px; margin:12px 0; }
#marks { padding:16px 0; border-bottom:1px solid var(--line); margin-bottom:16px; }
#answer details { border-bottom:1px solid var(--line); }
#answer details p { margin:12px 0 16px; }
#text-input { margin:16px 0; }
#idle-note { padding:24px 0; color:var(--muted); }
#preferences { margin:24px 0; }
#preferences > div { padding:16px 0; }
#preferences label { display:block; padding:8px 0; }
#browser { margin-top:24px; }
#sources,.metadata { font-size:14px; overflow-wrap:anywhere; }
#study-panel.flow { position:relative; left:auto; transform:none; width:100%; }
#study-panel.flow .study-actions { grid-template-columns:1fr 1fr; }
#study-panel.flow #reveal { grid-column:1/-1; grid-row:1; }
@media (max-height:450px) { #study-panel { position:relative; left:auto; transform:none; width:100%; } }
button.word{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px dotted currentColor;border-radius:0;padding:0;min-height:0;cursor:help;line-height:inherit}
button.word:hover,button.word:focus-visible{background:color-mix(in srgb,CanvasText 12%,Canvas);outline:2px solid #608cde;outline-offset:2px}
.word-popup{position:fixed;z-index:1000;box-sizing:border-box;max-height:calc(100vh - 24px);overflow:auto;padding:16px;border:1px solid #888;border-radius:12px;background:Canvas;color:CanvasText;box-shadow:0 6px 24px #0004;font:16px/1.5 system-ui,sans-serif;text-align:left}
.word-popup strong{display:block;font-size:20px}.word-popup p{margin:10px 0}.word-popup small{font-size:12px;opacity:.8}.word-popup button.word-close{float:right;font:14px system-ui;padding:6px;min-height:32px}.word-popup a{color:#1d4ed8}@media(prefers-color-scheme:dark){.word-popup a{color:#93c5fd}}

@media(max-width:600px){.word-popup{left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-height:55dvh;border-radius:18px;padding:20px}.word-popup button.word-close{min-width:44px;min-height:44px}.word-popup summary{min-height:44px;padding:12px 0}}