:root { --paper:#f5f1e8; --ink:#252823; --muted:#65695f; --line:#d9d1c3; --accent:#315f58; --accent-dark:#234842; --soft:#e7eee9; --danger:#9b4338; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid #d0923b; outline-offset:3px; }
.app-shell { width:min(100%, 640px); margin:auto; padding:max(22px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
.brand { margin:3px 0 30px; letter-spacing:.13em; font-size:.75rem; font-weight:800; color:var(--accent); }
h1 { font-size:clamp(2rem, 8vw, 2.8rem); margin:0 0 8px; line-height:1.02; letter-spacing:-.045em; }
h2 { font-size:1.2rem; margin:28px 0 12px; }
p { line-height:1.52; margin:8px 0; } .muted, .status { color:var(--muted); }
.home-lede { font-size:1.08rem; max-width:34rem; margin-bottom:25px; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mode { min-height:92px; border:1px solid var(--line); border-radius:15px; padding:15px; text-align:left; background:#fbf9f4; transition:background .15s,border-color .15s; }
.mode:hover { border-color:var(--accent); background:#fffdf9; } .mode strong { font-size:1.8rem; display:block; color:var(--accent); line-height:1; margin-bottom:6px; } .mode span { font-size:.9rem; color:var(--muted); }
.mode.mixed { grid-column:span 2; min-height:64px; display:flex; align-items:center; gap:12px; }.mode.mixed strong { margin:0; }
.card { background:#fbf9f4; border:1px solid var(--line); border-radius:18px; padding:22px; }
.progress-row { display:flex; justify-content:space-between; gap:12px; font-size:.88rem; color:var(--muted); margin-bottom:42px; }.skill-mark { color:var(--accent); font-weight:800; letter-spacing:.13em; }
.prompt { text-align:center; padding:10px 0 20px; }.context-label { font-size:clamp(2.2rem, 11vw, 3.6rem); letter-spacing:-.045em; font-weight:720; line-height:1.05; }.instruction { font-size:1.25rem; margin:18px 0 0; }.instruction strong { color:var(--accent); font-size:1.38em; }
.actions { display:grid; gap:10px; margin-top:20px; }.button { min-height:52px; border-radius:12px; border:1px solid var(--accent); padding:10px 16px; background:transparent; font-weight:700; }.button.primary { background:var(--accent); color:#fff; }.button.primary:hover { background:var(--accent-dark); }.button:disabled { cursor:not-allowed; opacity:.48; }
.answer { text-align:center; background:var(--soft); border-radius:13px; padding:16px; margin:18px 0 12px; }.answer-note { font-size:2.1rem; color:var(--accent); font-weight:750; line-height:1.15; }.ratings { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.rating { min-height:68px; border:1px solid var(--line); border-radius:12px; background:#fffdf8; font-size:.78rem; font-weight:700; padding:6px; }.rating b { display:block; font-size:1.35rem; margin-bottom:2px; }.rating:hover { border-color:var(--accent); }.rating.missed b { color:var(--danger); }
.small-note { font-size:.84rem; color:var(--muted); margin-top:20px; }.callout { border-left:3px solid var(--accent); padding:3px 0 3px 13px; margin:21px 0; color:var(--muted); }.history { margin-top:31px; border-top:1px solid var(--line); padding-top:4px; }.history-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.history-grid div { padding:10px 4px; text-align:center; border-radius:9px; background:#ebe7dd; font-size:.75rem; }.history-grid strong { display:block; font-size:1.05rem; color:var(--accent); margin-top:3px; }.resume { margin:0 0 18px; background:var(--soft); border-radius:12px; padding:13px; }.resume .button { width:100%; margin-top:9px; min-height:44px; }
.results-head { margin-bottom:22px; }.results-head p { font-size:1.05rem; }.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.result { border-radius:12px; padding:13px 8px; text-align:center; background:#ebe7dd; }.result strong { display:block; font-size:1.45rem; color:var(--accent); }.result span { font-size:.77rem; color:var(--muted); }.breakdown { margin:25px 0; }.breakdown-row { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }.breakdown-row b { color:var(--accent); }.need-list { margin:0; padding-left:19px; line-height:1.7; }.error { color:var(--danger); font-size:.88rem; min-height:1.3em; text-align:center; }
@media (min-width:600px) { .app-shell { padding-top:44px; }.mode-grid { grid-template-columns:repeat(4,1fr); }.mode.mixed { grid-column:2 / span 2; }.card { padding:30px; } }