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

:root {
  --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --border: 240 5.9% 90%;
  --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --radius: .65rem;
}
* { box-sizing:border-box; }
body { margin:0; background:hsl(var(--muted)); color:hsl(var(--foreground)); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:2px; }
.app-shell { max-width:1040px; margin:auto; padding:24px 24px 48px; }.topbar { display:flex; align-items:center; justify-content:space-between; height:48px; margin-bottom:38px; }.brand { display:flex; align-items:center; gap:9px; color:hsl(var(--foreground)); text-decoration:none; font-size:16px; font-weight:700; letter-spacing:-.5px; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); font:700 14px/1 Inter,sans-serif; }.topbar-actions { display:flex; align-items:center; gap:5px; }.icon-button,.avatar,.close-button { border:0; background:transparent; color:hsl(var(--foreground)); }.icon-button { width:36px; height:36px; border:1px solid transparent; border-radius:6px; font-family:Georgia,serif; }.icon-button:hover { border-color:hsl(var(--border)); background:hsl(var(--secondary)); }.avatar { width:32px; height:32px; margin-left:2px; border-radius:50%; background:#27272a; color:white; font-size:10px; font-weight:600; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }.eyebrow { margin:0 0 8px; color:hsl(var(--muted-foreground)); font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }.hero h1,.why-section h2,.progress-section h2 { margin:0; color:hsl(var(--foreground)); font-size:clamp(33px,5vw,52px); font-weight:700; line-height:1.08; letter-spacing:-.045em; }.hero-copy { max-width:500px; margin:12px 0 0; color:hsl(var(--muted-foreground)); font-size:16px; }.streak-card { display:flex; flex:none; align-items:center; gap:10px; min-width:150px; padding:12px 14px; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); box-shadow:0 1px 2px rgb(0 0 0 / .04); }.streak-flame { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:hsl(48 96% 89%); color:hsl(35 92% 33%); }.streak-card strong,.streak-card span { display:block; }.streak-card strong { font-size:13px; }.streak-card div span { color:hsl(var(--muted-foreground)); font-size:11px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 18px; overflow:hidden; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); box-shadow:0 1px 2px rgb(0 0 0 / .04); }.stats div { padding:14px 18px; border-right:1px solid hsl(var(--border)); }.stats div:last-child { border:0; }.stats span { display:block; color:hsl(var(--muted-foreground)); font-size:12px; }.stats strong { display:block; margin-top:2px; font-size:21px; letter-spacing:-.03em; }.stats small { color:hsl(var(--muted-foreground)); font-size:11px; font-weight:400; }
.challenge-card { padding:26px; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); box-shadow:0 1px 3px rgb(0 0 0 / .06); }.challenge-topline,.challenge-footer,.challenge-meta,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }.challenge-tag { padding:3px 8px; border-radius:999px; background:hsl(var(--secondary)); color:hsl(var(--foreground)); font-size:11px; font-weight:600; }.challenge-topline > span:last-child,.author-line,.challenge-meta { color:hsl(var(--muted-foreground)); font-size:12px; }.challenge-card h2 { margin:29px 0 5px; font-size:clamp(28px,4vw,39px); font-weight:700; line-height:1.1; letter-spacing:-.04em; }.author-line { margin:0; }.challenge-meta { margin-top:15px; }.dot { color:hsl(var(--muted-foreground)); }.challenge-footer { margin-top:27px; }.target-pill { display:flex; align-items:baseline; gap:8px; }.target-pill span { color:hsl(var(--muted-foreground)); font-size:12px; }.target-pill strong { font-size:14px; }.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:6px; font-size:13px; font-weight:500; transition:background .15s,box-shadow .15s; }.primary-button { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }.primary-button:hover { background:hsl(240 5.9% 18%); }.primary-button:active { transform:translateY(1px); }.primary-button span { font-size:17px; line-height:0; }.secondary-button { border-color:hsl(var(--input)); background:hsl(var(--background)); color:hsl(var(--foreground)); box-shadow:0 1px 2px rgb(0 0 0 / .04); }.secondary-button:hover { background:hsl(var(--secondary)); }
.why-section { padding:70px 0 56px; }.why-section h2 { max-width:640px; font-size:clamp(29px,4vw,40px); }.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:29px; }.method-grid article { min-height:176px; padding:19px; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); }.method-grid span { display:grid; place-items:center; width:25px; height:25px; border-radius:5px; background:hsl(var(--secondary)); color:hsl(var(--muted-foreground)); font:500 10px "DM Mono",monospace; }.method-grid h3 { margin:26px 0 7px; font-size:14px; }.method-grid p { margin:0; color:hsl(var(--muted-foreground)); font-size:13px; line-height:1.55; }
.progress-section { padding:31px 0; border-top:1px solid hsl(var(--border)); }.section-heading h2 { font-size:26px; letter-spacing:-.04em; }.section-heading > span { color:hsl(var(--muted-foreground)); font-size:12px; }.chart { display:flex; align-items:end; gap:9px; height:154px; margin-top:24px; padding:12px 8px 0; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); }.bar-wrap { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:end; height:100%; gap:7px; }.bar { width:min(38px,100%); min-height:4px; border-radius:4px 4px 0 0; background:hsl(var(--border)); }.bar.complete { background:hsl(var(--primary)); }.bar-wrap span { color:hsl(var(--muted-foreground)); font-size:10px; }.chart-caption { margin:10px 0 0; color:hsl(var(--muted-foreground)); font-size:12px; } footer { margin-top:24px; color:hsl(var(--muted-foreground)); font-size:12px; }.text-button { border:0; padding:0; background:transparent; color:hsl(var(--foreground)); text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
dialog { width:100%; max-width:none; height:100%; margin:0; padding:0; border:0; background:rgb(0 0 0 / .52); } dialog::backdrop { background:rgb(0 0 0 / .52); }.reader-dialog { overflow-y:auto; }.reader-wrap { width:min(100%,920px); min-height:100%; margin:auto; padding:20px clamp(24px,6vw,72px); background:hsl(var(--background)); }.reader-header { display:flex; align-items:center; justify-content:space-between; min-height:36px; color:hsl(var(--muted-foreground)); font-size:12px; }.close-button { flex:0 0 34px; width:34px; height:34px; border-radius:6px; font-size:27px; line-height:1; }.close-button:hover { background:hsl(var(--secondary)); }.reader-header > span { min-width:0; padding:0 16px; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.reader-progress { height:3px; margin:12px 0 0; overflow:hidden; border-radius:999px; background:hsl(var(--secondary)); }.reader-progress div { width:0%; height:100%; background:hsl(var(--primary)); transition:width .2s; }.reader-intro { width:100%; max-width:560px; padding:90px 0 30px; }.reader-intro h2,.quiz h2,.result h2 { margin:0 0 12px; font-size:clamp(31px,5vw,46px); font-weight:700; line-height:1.08; letter-spacing:-.045em; }.reader-intro p:not(.eyebrow) { max-width:480px; color:hsl(var(--muted-foreground)); font-size:16px; }.reader-intro .primary-button { margin-top:18px; }.passage { width:100%; max-width:655px; margin:43px auto 105px; color:hsl(var(--foreground)); font-family:Georgia,serif; font-size:var(--reader-size,20px); line-height:var(--reader-leading,1.9); }.passage.focus-mode p { margin-bottom:2.45em; }.passage p { margin:0 0 1.45em; }.reader-controls { position:fixed; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; gap:13px; padding:14px; border-top:1px solid hsl(var(--border)); background:hsl(0 0% 100% / .92); backdrop-filter:blur(10px); }.timer { font:500 15px "DM Mono",monospace; }.timer-note { color:hsl(var(--muted-foreground)); font-size:12px; }.quiz,.result { width:100%; max-width:570px; padding:55px 0; }.quiz > p,.result > p { color:hsl(var(--muted-foreground)); }.question { margin:28px 0; padding-bottom:24px; border-bottom:1px solid hsl(var(--border)); }.question h3 { margin:0 0 13px; font-size:16px; line-height:1.35; }.option { display:block; margin:8px 0; padding:11px 12px; border:1px solid hsl(var(--input)); border-radius:6px; cursor:pointer; font-size:13px; }.option:hover { background:hsl(var(--secondary)); }.option:has(input:checked) { border-color:hsl(var(--foreground)); background:hsl(var(--secondary)); }.option input { margin-right:7px; accent-color:hsl(var(--primary)); }.score { display:inline-block; margin:0 0 12px; padding:4px 8px; border-radius:5px; background:hsl(var(--secondary)); color:hsl(var(--foreground)); font-size:12px; font-weight:600; }.result .primary-button { margin-top:15px; }.settings-dialog { display:grid; place-items:center; padding:22px; }.settings-panel { width:min(470px,100%); padding:23px; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); box-shadow:0 20px 50px rgb(0 0 0 / .2); }.dialog-title { display:flex; align-items:start; justify-content:space-between; }.dialog-title h2 { margin:0; font-size:23px; letter-spacing:-.03em; }.settings-panel label:not(.toggle-row) { display:grid; grid-template-columns:1fr 2fr 43px; align-items:center; gap:12px; margin:27px 0 0; font-size:13px; font-weight:500; }.settings-panel output { color:hsl(var(--muted-foreground)); font:11px "DM Mono",monospace; }.settings-panel input[type=range] { accent-color:hsl(var(--primary)); }.toggle-row { display:flex; align-items:center; justify-content:space-between; margin:27px 0; padding:15px 0; border-block:1px solid hsl(var(--border)); }.toggle-row span { display:grid; font-size:13px; }.toggle-row small { color:hsl(var(--muted-foreground)); font-weight:400; }.toggle-row input { width:36px; height:20px; accent-color:hsl(var(--primary)); }.settings-panel .primary-button { width:100%; }
@media (max-width:650px) { .app-shell { padding:17px 17px 36px; }.topbar { margin-bottom:28px; }.hero { align-items:start; flex-direction:column; gap:19px; }.hero h1 { font-size:42px; }.hero-copy { font-size:15px; }.streak-card { min-width:0; }.stats div { padding:13px 11px; }.stats strong { font-size:18px; }.stats span { font-size:10px; }.challenge-card { padding:20px; }.challenge-card h2 { margin-top:24px; }.challenge-footer { align-items:stretch; flex-direction:column; }.primary-button { width:100%; }.why-section { padding:52px 0 38px; }.why-section h2 { font-size:31px; }.method-grid { grid-template-columns:1fr; }.method-grid article { min-height:0; }.method-grid h3 { margin-top:16px; }.section-heading { align-items:start; flex-direction:column; gap:7px; }.reader-wrap { padding:13px 22px; }.reader-intro { padding-top:67px; }.reader-intro h2,.quiz h2,.result h2 { font-size:37px; }.passage { margin-top:31px; }.reader-controls { justify-content:space-between; }.timer-note { display:none; }.settings-panel { padding:21px; } }

/* Timed practice modes */
.reader-intro { max-width:630px; }
.practice-intro-copy strong { color:hsl(var(--foreground)); }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:25px; }
.mode-card { display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:start; min-height:126px; padding:17px; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); color:hsl(var(--foreground)); text-align:left; transition:border-color .15s,background .15s,transform .15s; }
.mode-card:hover { border-color:hsl(var(--foreground)); background:hsl(var(--secondary)); transform:translateY(-1px); }
.mode-card strong,.mode-card small { display:block; }.mode-card strong { margin:1px 0 6px; font-size:14px; }.mode-card small { color:hsl(var(--muted-foreground)); font-size:12px; line-height:1.45; }.mode-card b { padding-top:2px; font-size:17px; font-weight:400; }
.mode-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:6px; background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); font:500 22px/1 Georgia,serif; }.mode-lines { font:500 22px/21px Georgia,serif; }
.practice-status { display:flex; align-items:center; gap:10px; margin:31px auto 0; padding:9px 11px; border:1px solid hsl(var(--border)); border-radius:7px; color:hsl(var(--muted-foreground)); font-size:12px; }.practice-status strong { margin-left:auto; color:hsl(var(--foreground)); font:500 12px "DM Mono",monospace; }.practice-status span:last-child { font:11px "DM Mono",monospace; }
.word-flash { display:grid; place-items:center; min-height:calc(100vh - 245px); padding:44px 10px 112px; text-align:center; }.word-flash span { max-width:100%; overflow-wrap:anywhere; color:hsl(var(--foreground)); font-family:Georgia,serif; font-size:clamp(30px,4vw,44px); line-height:1.2; }.word-arrival { animation:word-arrival .12s ease-out; } @keyframes word-arrival { from { opacity:.25; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.paced-word { border-radius:3px; transition:background-color .12s,color .12s,box-shadow .12s; }.paced-word.is-current { background:hsl(48 96% 87%); box-shadow:0 0 0 2px hsl(48 96% 87%); color:hsl(var(--foreground)); }
.settings-panel label:not(.toggle-row) { grid-template-columns:1fr 2fr 62px; }.settings-panel input[type=number] { width:100%; padding:6px 8px; border:1px solid hsl(var(--input)); border-radius:5px; }
@media (max-width:650px) { .mode-grid { grid-template-columns:1fr; }.practice-status { flex-wrap:wrap; gap:6px 10px; }.practice-status strong { margin-left:auto; }.practice-status span:last-child { width:100%; }.word-flash { min-height:calc(100vh - 270px); }.settings-panel label:not(.toggle-row) { grid-template-columns:1fr 1fr 54px; gap:8px; } }