:root { color-scheme: light; font: 100%/1.5 system-ui, sans-serif; color: #261c21; background: #f7f2f1; --accent: #861c39; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 42rem; margin: auto; padding: clamp(1rem, 5vw, 3rem) 1rem; }
header { border-top: .35rem solid var(--accent); padding: 1rem 0 .75rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.15; margin: .4rem 0; letter-spacing: -.04em; }
h2 { font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.25; margin: .45rem 0 1rem; }
.eyebrow { color: var(--accent); font-size: .8rem; font-weight: 750; letter-spacing: .05em; }
.muted, footer { color: #63545b; }
nav, .row { display: flex; flex-wrap: wrap; gap: .6rem; }
nav { margin: .4rem 0 .85rem; }
button { font: inherit; font-weight: 650; min-height: 46px; padding: .6rem .85rem; border-radius: .7rem; border: 1px solid #c6aeb6; color: #572439; background: #fff; cursor: pointer; }
button:hover { border-color: var(--accent); background: #faeef1; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #196d86; outline-offset: 3px; }
button[aria-pressed="true"], button.primary { color: white; background: var(--accent); border-color: var(--accent); }
.row button { flex: 1 1 8.5rem; }
.card { background: white; border: 1px solid #e9d9dd; border-radius: 1.25rem; padding: clamp(1rem, 5vw, 1.8rem); box-shadow: 0 .5rem 2rem #4f1c3210; }
#task { margin-top: 1rem; }
#solution { border-left: .25rem solid var(--accent); background: #faf1f3; padding: .85rem; border-radius: .35rem; margin: .9rem 0; }
#answer { font-size: 1.35rem; font-weight: 700; }
#tip { margin: .4rem 0 .75rem; }
#feedback:not(:empty) { margin: .85rem 0; font-weight: 650; }
#navigation { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e9d9dd; }
footer { margin-top: 1rem; font-size: .9rem; }
footer p + p { margin-top: .25rem; }
[hidden] { display: none !important; }