.quiet { color: var(--muted); font-style: italic; }
.settings-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
fieldset { border: 0; min-width: 0; margin: 0; padding: 28px 24px 28px 0; }
fieldset + fieldset { border-left: 1px solid var(--line); padding-left: 24px; }
legend { float: left; width: 100%; font-size: 12px; color: var(--muted); margin-bottom: 24px; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; margin-bottom: 16px; }
select { padding: 10px; width: 100%; font-size: 14px; }
.operations { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; clear: both; margin-bottom: 16px; }
.operations label { margin: 0; position: relative; }
.operations input { position: absolute; opacity: 0; }
.operations span { border: 1px solid var(--line); padding: 8px; }
.operations input:checked + span { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.operations input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.check { flex-direction: row; align-items: center; clear: both; font-size: 14px; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.setting-note, .hint { color: var(--muted); font-size: 12px; }
.start-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px 0; }
#settings-error { color: var(--award); }
.history-section { margin-top: 40px; }
.section-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.section-line h2 { font-size: 24px; }
.text-button { border: 0; border-bottom: 1px solid var(--line); background: none; padding: 4px 0; font-size: 12px; }
.history-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#history > p { padding: 24px 0; color: var(--muted); }
.session-top { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; }
.metrics { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.metrics div { display: flex; flex-direction: column; gap: 4px; }
.metrics strong { font-family: var(--serif); font-size: 32px; font-weight: normal; }
.metrics span { font-size: 12px; color: var(--muted); }
.equation { display: flex; justify-content: center; align-items: baseline; gap: 24px; font-size: clamp(32px, 5.8vw, 76px); font-variant-numeric: tabular-nums; line-height: 1.2; }
#answer-form { padding: 100px 0 36px; text-align: center; }
#problem { white-space: nowrap; }
#answer { font: inherit; width: 3.6ch; min-width: 2ch; padding: 0 0 8px; border: 0; border-bottom: 2px solid var(--accent); outline: none; background: transparent; text-align: center; caret-color: var(--accent-strong); }
#answer:focus { border-bottom-color: var(--accent-strong); }
#answer[aria-invalid='true'] { border-bottom-color: var(--award); }
.equals { color: var(--muted); }
#feedback { min-height: 1.65em; margin-top: 24px; font-size: 14px; color: var(--award); }
#next { min-height: 20px; margin-top: 8px; }
.practice-actions { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }
.keyboard-note { text-align: center; margin-top: 32px; }
.result-actions { display: flex; gap: 16px; margin: 32px 0; }
.review { margin: 48px 0; border-top: 1px solid var(--line); padding: 24px 0; }
.review summary { cursor: pointer; }
@media(max-width: 800px) { .settings-grid { grid-template-columns: 1fr 1fr; } fieldset:last-child { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
@media(max-width: 480px) { .settings-grid { grid-template-columns: 1fr; } fieldset + fieldset { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } fieldset { padding-right: 0; } .equation { gap: 10px; font-size: clamp(24px, 7.4vw, 36px); } #answer-form { padding: 64px 0 24px; } .metrics { gap: 12px; } .metrics strong { font-size: 28px; } .start-row { gap: 16px; } }
fieldset > label { clear: both; }
/* A quick-start desk, with the same quiet paper-and-ink palette. */
#setup .app-intro { padding-bottom:32px; }
.quick-start { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 48px; }
.quick-start > span { grid-column:1/-1; margin-bottom:4px; }
.quick-start button { text-align:left; padding:20px; border:1px solid var(--line); background:transparent; display:flex; flex-direction:column; gap:8px; transition:background .15s,transform .15s; }
.quick-start button:hover { background:color-mix(in srgb,var(--text) 5%,var(--bg)); transform:translateY(-3px); }
.quick-start strong { font:normal 23px var(--serif); }
.quick-start button span { font-size:12px; color:var(--muted); }
#settings h2 { font:normal 24px var(--serif); }
.field-label { display:block; font-size:12px; margin-bottom:10px; }
.time-presets { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.time-presets button { padding:9px 12px; border:1px solid var(--line); background:transparent; font-size:13px; min-height:40px; }
.time-presets button[aria-pressed=true] { background:var(--text); color:var(--bg); border-color:var(--text); }
.custom-value { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
input[type=number] { padding:10px; font:inherit; min-width:0; width:100%; }
.custom-value input { width:100px; font-size:16px; }
.stats-section { margin-top:40px; border-top:1px solid var(--line); padding-top:28px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:28px 0; }
.stats-grid h3 { font:normal 22px var(--serif); margin:0 0 8px; }
#trend,#operation-stats { color:var(--muted); font-size:14px; margin-top:18px; }
#trend svg { width:100%; max-height:160px; overflow:visible; }
#trend polyline { stroke:var(--text); stroke-width:2; fill:none; }
#trend circle { fill:var(--text); }
.operation-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.operation-row strong { font-weight:400; color:var(--text); font-variant-numeric:tabular-nums; }
.session-progress { height:3px; background:var(--line); }
#progress-fill { height:100%; background:var(--text); transition:width .1s linear; }
.flow-line { display:flex; justify-content:space-between; gap:16px; padding-top:18px; font-size:12px; color:var(--muted); min-height:40px; }
#flow-message { color:var(--text); }
#remaining.last-seconds { color:var(--award); }
.record-note { font-style:italic; color:var(--text); }
#answer-form { padding-top:clamp(40px,9vh,100px); }
#answer { transition:border-color .12s; }
#setup .settings-grid { grid-template-columns:1fr 1.3fr 1fr; }
@media(max-width:800px) {
 #setup .settings-grid { grid-template-columns:1fr 1fr; }
 .quick-start { gap:8px; } .quick-start button { padding:16px; } .quick-start strong { font-size:20px; }
 .stats-grid { gap:24px; } .stats-section .section-line { align-items:start; flex-direction:column; }
}
@media(max-width:540px) {
 .quick-start { grid-template-columns:1fr; margin-bottom:32px; }
 .quick-start button { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
 .quick-start strong { font-size:18px; } .quick-start button span { max-width:42%; }
 #setup .settings-grid { grid-template-columns:1fr; }
 fieldset+fieldset { border-left:0; border-top:1px solid var(--line); padding-left:0; } fieldset { padding-right:0; }
 .stats-grid { grid-template-columns:1fr; } .flow-line { font-size:11px; }
 .equation { gap:8px; font-size:clamp(22px,6.4vw,34px); } #answer { max-width:35%; }
 .session-top { padding:24px 0; } .metrics { gap:12px; } .metrics strong { font-size:28px; }
 .metrics span { font-size:11px; } .history-section { margin-top:24px; }
}
@media(prefers-reduced-motion:reduce) { .quick-start button,#progress-fill,#answer { transition:none; } }
/* Compact practice desk. Stats are visible before the settings. */
#setup { max-width:1040px; margin:auto; }
#setup .app-intro { padding:40px 0 24px; }
#setup .app-intro h1 { font-size:clamp(36px,4vw,52px); margin:8px 0 10px; }
#setup .app-intro p { font-size:14px; }
.stats-overview { margin-bottom:24px; }
.stats-overview .section-line { margin-bottom:8px; }
.stats-overview .metrics { padding:18px 0; display:grid; grid-template-columns:repeat(5,1fr); }
.stats-overview .metrics strong { font-size:30px; }
.stats-overview .metrics div+div { border-left:1px solid var(--line); padding-left:20px; }
.quick-start { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.quick-start > span { margin:0 10px 0 0; }
.quick-start button { padding:9px 14px; border-radius:24px; min-height:40px; }
.quick-start strong { font:13px var(--sans); }
#setup .settings-grid { grid-template-columns:1fr 1.25fr; border-bottom:0; }
fieldset { padding:22px 24px 10px 0; }
fieldset+fieldset { padding-left:24px; }
legend { margin-bottom:18px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
#setup fieldset:last-child { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; border-left:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
#setup fieldset:last-child legend { display:none; }
#setup fieldset:last-child label { margin:0; font-size:13px; }
.operations { grid-template-columns:repeat(3,1fr); gap:8px; }
.operations span { padding:10px 8px; text-align:center; border-radius:4px; }
.operations input:checked+span { border-color:var(--text); background:var(--text); color:var(--bg); }
.time-presets { gap:0; border:1px solid var(--line); padding:3px; width:fit-content; border-radius:5px; }
.time-presets button { border:0; border-radius:3px; padding:7px 13px; min-height:36px; }
.custom-value { justify-content:flex-start; color:var(--muted); font-size:12px; }
.custom-value input { width:76px; padding:5px 8px; font-size:13px; }
select { padding:10px; font-size:13px; }
.start-row { padding:20px 0 0; gap:18px; }
.start-row .primary { min-width:200px; }
.stats-section { margin-top:48px; }
.stats-grid { padding-top:14px; }
.stats-section h2 { font:normal 26px var(--serif); }
.stats-grid h3 { font-size:20px; }
@media(max-width:600px) {
 #setup .app-intro { padding-top:28px; }
 .stats-overview .metrics { gap:12px; grid-template-columns:repeat(3,1fr); }
 .stats-overview .metrics div+div { padding-left:0; border-left:0; }
 .stats-overview .metrics strong { font-size:27px; }
 .quick-start { gap:8px; margin-bottom:24px; } .quick-start > span { width:100%; }
 .quick-start button { padding:8px 11px; } .quick-start strong { font-size:12px; }
 #setup .settings-grid { grid-template-columns:1fr; }
 fieldset+fieldset { padding-left:0; border-left:0; border-top:1px solid var(--line); }
 fieldset { padding-right:0; }
 .operations span { font-size:12px; }
 .start-row .primary { width:100%; } .start-row { gap:10px; }
}