:root { font: 100%/1.6 system-ui,sans-serif; color: #2a2a2a; background: #f3f1ee; color-scheme: light; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 600px; margin: auto; padding: 24px 16px; }
h1 { color: #c3090a; font-size: clamp(30px,8vw,46px); line-height: 1.1; } .eyebrow { font-weight: 800; font-size: 12px; }
button { min-width: 48px; min-height: 48px; padding: 12px 18px; border: 2px solid #2a2a2a; border-radius: 12px; background: #fbce02; color: #2a2a2a; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
button:disabled { background: #e2dfd7; cursor: default; } :focus-visible { outline: 3px solid #006aab; outline-offset: 4px; } a { color: #8e0607; }
.board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.board button { background: white; font-size: 44px; min-height: 100px; } .controls { display: flex; flex-wrap: wrap; gap: 16px; }
[hidden] { display: none !important; } #status { min-height: 52px; } details { margin-top: 24px; } summary { min-height: 44px; cursor: pointer; }