:root { color-scheme: light; --bg:#f4f7f1; --surface:#fff; --surface-muted:#e9f0e7; --ink:#17231d; --muted:#5a6b61; --line:#c7d7c8; --green:#1e6b48; --green-dark:#12442e; --mint:#ccebd8; --gold:#bd7f13; --danger:#a63030; --focus:#005fcc; font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif; }
* { box-sizing:border-box; } html { background:var(--bg); } body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at 100% 0,#d9eedc 0,transparent 30rem),var(--bg); color:var(--ink); } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } [hidden] { display:none !important; }
.skip-link { position:fixed; z-index:20; left:12px; top:-80px; background:#000; color:#fff; padding:10px; border-radius:8px; }.skip-link:focus { top:12px; }.app-shell { width:min(720px,100%); min-height:100dvh; margin:0 auto; padding:max(18px,env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom)); }.app-header,.section-title-row,.task-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }.app-header { margin-bottom:12px; }.eyebrow { margin:0 0 5px; color:var(--green); font-size:.7rem; letter-spacing:.12em; font-weight:850; } h1,h2 { margin:0; letter-spacing:-.035em; } h1 { font-size:clamp(1.7rem,8vw,2.5rem); } h2 { font-size:clamp(1.35rem,5vw,1.85rem); line-height:1.08; } p { line-height:1.45; }
.round-button { width:43px; height:43px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font-weight:850; }.accessibility-panel { display:flex; gap:16px; margin:-4px 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }.switch-row { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.9rem; }.switch-row input { accent-color:var(--green); inline-size:18px; block-size:18px; }.connection-status { min-height:1.3em; margin:0 2px 10px; color:var(--muted); font-size:.82rem; }.connection-status.error { color:var(--danger); }
.hero-card,.task-card,.result-card,.settings-card { background:linear-gradient(135deg,#edf7ee,#fff); border:1px solid var(--line); border-radius:22px; padding:clamp(20px,6vw,32px); box-shadow:0 10px 28px #1a3b2510; }.hero-card > p:not(.eyebrow):not(.helper-text) { margin:10px 0 18px; color:var(--muted); }.day-progress,.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.day-progress { margin:18px 0; }.day-progress > div,.metric-grid article { padding:11px 8px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:13px; text-align:center; }.day-progress span,.metric-grid span { display:block; color:var(--muted); font-size:.63rem; font-weight:800; letter-spacing:.05em; }.day-progress strong,.metric-grid strong { display:block; margin:3px 0 0; color:var(--green-dark); font-size:clamp(1rem,5vw,1.35rem); overflow-wrap:anywhere; }.metric-grid small { display:block; margin-top:2px; color:var(--muted); font-size:.68rem; }.button { min-height:48px; padding:10px 16px; border:2px solid transparent; border-radius:13px; font-weight:850; letter-spacing:.01em; }.button.primary { width:100%; background:var(--green); color:#fff; }.button.primary:hover { background:var(--green-dark); }.button.secondary { background:var(--surface); border-color:var(--green); color:var(--green-dark); }.helper-text,.muted { color:var(--muted); font-size:.83rem; }.helper-text { margin:10px 0 0; }.section-block { margin-top:22px; }.section-title-row h2,.achievements h2 { font-size:1.15rem; }.tag { display:inline-block; padding:4px 8px; border-radius:999px; background:var(--mint); color:var(--green-dark); font-size:.72rem; font-weight:800; white-space:nowrap; }
.journey-map { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:0; margin:12px 0 0; list-style:none; }.journey-map li { min-height:58px; display:grid; place-content:center; gap:2px; border:1px solid var(--line); border-radius:12px; text-align:center; background:var(--surface); color:var(--muted); font-size:.75rem; }.journey-map strong { font-size:1rem; color:var(--ink); }.journey-map .done { border-color:var(--green); background:var(--mint); color:var(--green-dark); }.journey-map .current { border:2px solid var(--gold); background:#fff8e9; }.journey-map .locked { opacity:.62; }.personal-board { padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }.achievement-list { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }.achievement-list li { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:.8rem; }.achievement-list .empty { color:var(--muted); border-style:dashed; }
.view { animation:appear .22s ease-out both; }.text-button { padding:5px 0; margin:0 0 12px; border:0; background:transparent; color:var(--green-dark); font-weight:750; }.task-card,.result-card,.settings-card { min-height:420px; }.task-card > h2,.result-card > h2,.settings-card > h2 { margin-top:3px; }.task-stage { min-height:96px; margin:24px 0 12px; padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--line); }.task-stage .prompt { margin:0; font-size:clamp(1.5rem,7vw,2.4rem); line-height:1.1; font-weight:850; text-align:center; }.task-stage .task-copy { margin:0; white-space:pre-line; }.timer { margin:14px 0 0; color:var(--green-dark); font-size:1.4rem; font-weight:850; font-variant-numeric:tabular-nums; text-align:center; }.answer-form { margin-top:12px; }.answer-form label { display:block; font-weight:750; }.answer-form input { width:100%; min-height:50px; margin-top:6px; padding:8px 12px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-size:1.3rem; text-align:center; }.numeric-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }.numeric-keypad button { min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); color:var(--ink); font-size:1.1rem; font-weight:800; }.answer-actions { display:grid; grid-template-columns:.78fr 1.22fr; gap:8px; margin-top:12px; }.task-feedback { min-height:1.4em; margin:14px 0 0; font-weight:720; }.task-feedback.correct { color:var(--green-dark); }.task-feedback.incorrect { color:var(--danger); }.new-achievements { margin-top:14px; padding:12px; border-radius:12px; background:var(--mint); color:var(--green-dark); }.settings-card form { display:grid; gap:14px; margin-top:22px; } fieldset { display:grid; gap:8px; padding:12px; margin:0; border:1px solid var(--line); border-radius:12px; } legend { padding:0 4px; font-weight:750; } fieldset label { display:flex; gap:8px; } input[type="radio"] { accent-color:var(--green); } input[type="time"] { min-height:46px; padding:8px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.bottom-nav { position:fixed; z-index:5; left:50%; bottom:max(8px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); width:min(688px,calc(100% - 24px)); padding:6px; gap:4px; border:1px solid var(--line); border-radius:16px; background:#fffffff2; box-shadow:0 8px 26px #17302222; backdrop-filter:blur(12px); }.nav-button { min-height:48px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:.72rem; font-weight:750; }.nav-button span { display:block; margin-bottom:2px; font-size:1.15rem; }.nav-button.active { background:var(--mint); color:var(--green-dark); } @keyframes appear { from { opacity:.4; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } } @media (max-width:380px) { .app-shell { padding-inline:11px; }.day-progress,.metric-grid { gap:5px; }.day-progress > div,.metric-grid article { padding-inline:4px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } } html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } html[data-contrast="high"] { --bg:#fff; --surface:#fff; --surface-muted:#fff; --ink:#000; --muted:#171717; --line:#000; --green:#004d2b; --green-dark:#002b18; --mint:#d7ffda; --gold:#804500; --focus:#0000e8; } html[data-contrast="high"] .hero-card,html[data-contrast="high"] .task-card,html[data-contrast="high"] .result-card,html[data-contrast="high"] .settings-card { background:#fff; box-shadow:none; }
.task-card { min-height:0; }.exercise-panel { display:grid; gap:18px; padding:8px 0 0; }.exercise-prompt { padding:20px 14px; border-radius:18px; background:linear-gradient(135deg,#e3f2e6,#fff); font-size:clamp(2.35rem,12vw,4rem) !important; letter-spacing:-.06em; }.answer-label { display:grid !important; gap:7px; color:var(--muted); font-size:.85rem; font-weight:800 !important; }.answer-label input { margin:0 !important; min-height:58px !important; font-size:1.7rem !important; font-weight:850; }.training-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }.training-keypad button { min-height:52px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font-size:1.35rem; font-weight:850; box-shadow:0 3px 0 #bed4c1; }.training-keypad button:active { transform:translateY(2px); box-shadow:0 1px 0 #bed4c1; }.training-keypad .key-clear { color:var(--green-dark); font-size:.84rem; }.next-answer { margin-top:14px; }.stroop-word { min-height:3.1rem; padding:12px; border:2px solid currentColor; border-radius:14px; background:#fff; text-transform:uppercase; }.color-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.color-grid .c-choice { display:inline-flex; align-items:center; gap:8px; min-height:50px; border-color:var(--choice-color); color:var(--ink); }.color-dot { width:15px; height:15px; flex:0 0 15px; border:1px solid #17231d; border-radius:50%; background:var(--choice-color); }

/* Mobile task deck: every unit has its own bounded, tactile tile. */
html, body { max-width:100%; overflow-x:clip; }
.app-shell { overflow-x:clip; }
.home-stack { display:grid; gap:12px; }
.home-hero,.route-tile,.insight-tile,.achievement-tile,.practice-tile,.task-meta-tile,.prompt-tile,.answer-tile,.keypad-tile,.stroop-instruction-tile { min-width:0; max-width:100%; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#fff,#f0f7ef); box-shadow:0 7px 0 #d8e7d9,0 15px 25px #16332912; }
.home-hero { padding:20px; }
.new-chip { display:inline-flex; align-items:center; min-height:26px; margin:0 0 10px; padding:4px 9px; border-radius:999px; background:#e2f5e8; color:var(--green-dark); font-size:.68rem; font-weight:900; letter-spacing:.08em; }
.raised-action { box-shadow:0 4px 0 #10422b,0 10px 18px #1e6b4826; transition:transform .14s ease,box-shadow .14s ease; }
.raised-action:active { transform:translateY(3px); box-shadow:0 1px 0 #10422b,0 4px 9px #1e6b4820; }
.metric-tiles { gap:10px; }
.metric-tiles article { min-height:96px; padding:13px 7px; border-radius:17px; background:linear-gradient(160deg,#fff,#eef7ef); box-shadow:0 5px 0 #d6e4d6,0 10px 18px #17302210; }
.route-tile,.insight-tile,.achievement-tile { padding:16px; }
.practice-tile { display:flex; align-items:center; gap:12px; padding:16px; }
.practice-tile > div { flex:1 1 auto; min-width:0; }
.practice-tile .button { flex:0 0 132px; }
.compact-text-button { margin:0; min-height:34px; white-space:nowrap; }
.task-card.task-workspace { display:grid; gap:12px; padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.task-meta-tile { padding:14px; }
.task-status-row { display:flex; align-items:center; gap:10px; margin-top:7px; }
.progress-wrap { flex:1 1 0; min-width:0; display:grid; gap:5px; color:var(--muted); font-size:.73rem; font-weight:800; }
.progress-track { height:8px; overflow:hidden; border-radius:999px; background:#dce9dc; box-shadow:inset 0 1px 2px #17302220; }
.progress-track span { display:block; height:100%; min-width:3px; border-radius:inherit; background:linear-gradient(90deg,#3fa56c,#1e6b48); transition:width .2s ease; }
.timer-chip { flex:0 0 auto; margin:0; padding:7px 10px; border:1px solid #acd2b5; border-radius:12px; background:#f9fffa; font-size:1rem; line-height:1; box-shadow:0 3px 0 #d4e4d5; }
.task-content { min-width:0; }
.exercise-panel { gap:12px; padding:0; }
.prompt-tile { padding:18px 12px; }
.exercise-prompt { min-width:0; margin:0; padding:0; background:transparent; font-size:clamp(2.25rem,13vw,3.6rem) !important; overflow-wrap:anywhere; }
.prompt-tile.count .exercise-prompt { font-size:clamp(1.7rem,8.5vw,2.45rem) !important; line-height:1.12; }
.answer-tile { padding:12px; background:#fff; }
.answer-label input { width:100%; min-width:0; max-width:100%; border-color:#9ebfa5 !important; box-shadow:inset 0 1px 2px #17302215; }
.answer-label input::placeholder { color:#94a69a; font-size:.88rem; font-weight:700; }
.keypad-tile { padding:10px; background:linear-gradient(145deg,#edf7ed,#fff); }
.training-keypad { margin:0; gap:8px; }
.training-keypad button { min-width:0; min-height:54px; border-color:#c3d5c5; background:linear-gradient(160deg,#fff,#eef5ef); box-shadow:0 4px 0 #bed4c1,0 7px 11px #17302212; transition:transform .1s ease,box-shadow .1s ease; }
.training-keypad button:active { transform:translateY(3px); box-shadow:0 1px 0 #bed4c1,0 3px 5px #17302212; }
.next-answer { min-height:54px; margin:2px 0 0; }
.answer-status { min-height:1.3em; margin:0 5px; color:var(--green-dark); font-size:.82rem; font-weight:750; }
.stroop-instruction-tile { padding:14px; background:#fff; }
.stroop-instruction-tile .task-copy { margin:0; }
.stroop-word { margin:0; min-height:0; padding:6px; border:0; background:transparent; font-size:clamp(2rem,11vw,3.25rem) !important; }
.color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.color-grid .c-choice { min-width:0; min-height:56px; padding:8px 10px; justify-content:flex-start; overflow:hidden; border-width:2px; border-radius:16px; background:linear-gradient(145deg,#fff,#f3f8f3); box-shadow:0 4px 0 color-mix(in srgb,var(--choice-color) 28%,#fff),0 8px 13px #1730220d; font-size:.86rem; }
.color-grid .c-choice.selected,.color-grid .c-choice:active { transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb,var(--choice-color) 28%,#fff); }
.color-grid .c-choice:last-child:nth-child(odd) { grid-column:1 / span 2; }
.color-dot { width:17px; height:17px; flex:0 0 17px; }
@media (max-width:380px) { .app-shell { padding-inline:12px; } .home-hero,.route-tile,.insight-tile,.achievement-tile { padding:14px; } .metric-tiles { gap:7px; } .metric-tiles article { padding-inline:4px; } .metric-tiles strong { font-size:1rem; } .practice-tile { display:grid; } .practice-tile .button { width:100%; flex:auto; } .task-status-row { gap:7px; } .timer-chip { padding-inline:8px; font-size:.9rem; } .color-grid { gap:8px; } .color-grid .c-choice { padding-inline:7px; font-size:.78rem; } }
@media (prefers-reduced-motion: no-preference) { .new-chip { animation:newGlow 2.3s ease-in-out infinite; } @keyframes newGlow { 50% { transform:translateY(-1px); box-shadow:0 0 0 5px #d7f0dc; } } }
html[data-reduced-motion="true"] .new-chip { animation:none; }
html[data-contrast="high"] .home-hero,html[data-contrast="high"] .route-tile,html[data-contrast="high"] .insight-tile,html[data-contrast="high"] .achievement-tile,html[data-contrast="high"] .practice-tile,html[data-contrast="high"] .task-meta-tile,html[data-contrast="high"] .prompt-tile,html[data-contrast="high"] .answer-tile,html[data-contrast="high"] .keypad-tile,html[data-contrast="high"] .stroop-instruction-tile,html[data-contrast="high"] .metric-tiles article { background:#fff; box-shadow:0 3px 0 #000; }