:root {
  color-scheme: light;
  --ink: #192653;
  --blue: #263eb8;
  --blue-bright: #405ce5;
  --paper: #fff8e8;
  --page: #edf0f8;
  --coral: #f05e43;
  --lime: #d8f078;
  --line: #c9cee0;
  --mono: 'Lucida Console', 'Courier New', monospace;
  --display: Impact, 'Arial Narrow', 'Franklin Gothic Condensed', sans-serif;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--page); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(32px, calc((100vw - 1120px) / 2)); background: var(--paper); border-bottom: 3px solid var(--ink); }
.wordmark { display: flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--display); font-size: 17px; letter-spacing: .06em; }
.wordmark small { font: 10px var(--mono); letter-spacing: 0; color: #6c7591; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper); background: var(--coral); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 24px/1 var(--display); }
.top-link { display: flex; align-items: center; gap: 9px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.top-link > span:last-child { color: var(--coral); font-size: 17px; }
.start-dot,.eyebrow-dot { width: 8px; height: 8px; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; }
.hero { min-height: 590px; padding: 65px 0 75px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 50px; position: relative; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 9px; font: 10px var(--mono); letter-spacing: .06em; }
.eyebrow-rule { height: 1px; width: 24px; background: #8b94ae; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin: 27px 0 19px; color: var(--ink); font: clamp(62px, 7vw, 88px)/.9 var(--display); letter-spacing: .005em; text-transform: uppercase; }
h1 em { color: var(--coral); font-style: normal; }
.hero-intro { max-width: 390px; color: #586484; font-size: 16px; line-height: 1.65; margin-bottom: 24px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 18px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 11px var(--mono); letter-spacing: .02em; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.button-dark { background: var(--lime); color: var(--ink); }
.button-dark span { font-size: 17px; }
.hero-note { margin: 16px 0 0; color: #727c99; font: 10px var(--mono); }
.hero-note span { color: var(--coral); }
.hero-art { min-width: 0; position: relative; padding-bottom: 28px; }
.cabinet { width: min(100%, 490px); margin-inline: auto; padding: 13px; background: var(--blue); border: 3px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); transform: rotate(1deg); }
.cabinet-top { display: flex; justify-content: space-between; gap: 10px; padding: 1px 2px 11px; color: var(--paper); font: 9px var(--mono); letter-spacing: .04em; }
.cabinet-top span:first-child { display: flex; align-items: center; gap: 7px; }
.cabinet-top i { width: 8px; height: 8px; display: inline-block; background: var(--lime); border: 1px solid var(--ink); }
.cabinet-screen { padding: 13px clamp(12px, 3vw, 27px) 12px; background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px #ece5d6; }
.screen-status { display: flex; justify-content: space-between; margin-bottom: 9px; color: #52618a; font: 8px var(--mono); letter-spacing: .06em; }
.screen-status span:last-child { color: #307350; }
.hero-board { width: min(100%, 320px); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); background: #fffdf5; border: 2px solid var(--ink); }
.hero-board span { display: grid; place-items: center; border-right: 1px solid #c8ccdc; border-bottom: 1px solid #c8ccdc; color: var(--blue); font: clamp(10px, 1.4vw, 15px) var(--mono); }
.hero-board span:nth-child(3n) { border-right: 2px solid var(--ink); }
.hero-board span:nth-child(n+19):nth-child(-n+27),.hero-board span:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--ink); }
.hero-board .pencil { color: var(--ink); background: var(--lime); font-size: 8px; letter-spacing: -1px; }
.screen-message { margin-top: 10px; padding: 8px 10px; color: var(--ink); background: #e6eaf8; font: 10px var(--mono); }
.cursor-block { color: var(--coral); animation: blink 1.1s steps(2, start) infinite; }
.cabinet-controls { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 1px; color: var(--paper); }
.control-cross { position: relative; width: 40px; height: 40px; }
.control-cross::before,.control-cross::after { content: ''; position: absolute; background: var(--ink); border: 1px solid #101a3d; }
.control-cross::before { width: 40px; height: 13px; left: 0; top: 13px; }
.control-cross::after { width: 13px; height: 40px; top: 0; left: 13px; }
.control-label { color: #dce2ff; font: 8px/1.55 var(--mono); letter-spacing: .04em; }
.control-buttons { display: flex; gap: 10px; transform: rotate(-24deg); }
.control-buttons i { width: 21px; height: 21px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); box-shadow: 1px 2px 0 #17214e; }
.control-buttons i:last-child { background: var(--lime); transform: translateY(-10px); }
.hero-index { position: absolute; right: 0; bottom: 0; color: #727c99; font: 9px var(--mono); letter-spacing: .05em; }
.hero-index span { color: var(--coral); }
.rule-strip { background: var(--lime); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.rule-inner { min-height: 145px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 20px; }
.rule-inner .eyebrow { margin: 0; font-weight: 700; }
.rule-stamp { display: inline-block; margin-left: 8px; padding: 4px 5px; color: var(--paper); background: var(--coral); font: 8px var(--mono); transform: rotate(-5deg); }
.rule-inner > p:nth-child(2) { margin: 0; color: var(--ink); font: 25px/1.35 var(--display); text-transform: uppercase; }
.rule-inner strong { color: var(--blue); }
.rule-tag { display: inline-block; margin-top: 9px; padding: 5px 8px; color: var(--paper); background: var(--blue); font: 9px var(--mono); }
.rule-aside { justify-self: end; margin: 0; color: #43501b; font: 9px/1.7 var(--mono); }
.lessons { padding-top: 100px; padding-bottom: 108px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.section-heading h2,.practice-copy h2 { margin: 15px 0 0; color: var(--ink); font: clamp(46px, 5.5vw, 68px)/.92 var(--display); text-transform: uppercase; }
.section-heading h2 em { color: var(--blue); font-style: normal; }
.section-aside { max-width: 340px; margin: 0 0 4px; color: #586484; font-size: 14px; line-height: 1.7; }
.lesson-layout { display: grid; grid-template-columns: 235px 1fr; gap: 24px; align-items: stretch; }
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-tab { min-height: 80px; display: grid; grid-template-columns: 35px 1fr 16px; align-items: center; gap: 9px; padding: 12px; text-align: left; color: var(--ink); background: #e3e7f4; border: 2px solid transparent; cursor: pointer; transition: background .15s, transform .15s; }
.lesson-tab:hover { transform: translateX(3px); }
.lesson-tab.is-active { background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--coral); }
.lesson-number,.lesson-step,.lesson-kicker,.game-label,.difficulty { color: #59668e; font: 9px var(--mono); letter-spacing: .03em; }
.lesson-tab.is-active .lesson-number,.lesson-kicker { color: var(--coral); }
.lesson-tab strong { display: block; font-size: 13px; }
.lesson-tab small { display: block; margin-top: 5px; color: #707a98; font-size: 10px; }
.tab-arrow { color: var(--coral); opacity: 0; }
.lesson-tab.is-active .tab-arrow { opacity: 1; }
.lesson-card { min-width: 0; padding: 25px 27px 20px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 #c8cee2; }
.lesson-card-top { display: flex; justify-content: space-between; }
.lesson-card h3 { margin: 15px 0 8px; color: var(--ink); font: 27px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.lesson-card > p { max-width: 610px; margin-bottom: 18px; color: #586484; font-size: 13px; line-height: 1.7; }
.lesson-board-wrap { min-height: 265px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 18px; background: #e8ebf5; border: 1px dashed #8791b0; }
.lesson-board { width: min(260px, 58%); aspect-ratio: 1; flex: none; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); background: #fffdf7; border: 2px solid var(--ink); }
.grid-cell { min-width: 0; min-height: 0; display: grid; place-items: center; color: var(--blue); border-right: 1px solid #c8ccdc; border-bottom: 1px solid #c8ccdc; font: 12px var(--mono); }
.grid-cell.box-right { border-right: 2px solid var(--ink); }
.grid-cell.box-bottom { border-bottom: 2px solid var(--ink); }
.target-cell { color: var(--ink); background: var(--lime); font-size: 8px; letter-spacing: -1px; font-weight: 700; }
.candidate-note { position: relative; max-width: 165px; padding: 12px; color: var(--ink); background: #fff; border: 2px solid var(--ink); font: 10px/1.5 var(--mono); box-shadow: 3px 3px 0 var(--coral); }
.candidate-note strong { display: block; margin-bottom: 4px; font: 14px var(--display); text-transform: uppercase; }
.note-pin { position: absolute; top: -5px; right: 8px; width: 8px; height: 8px; background: var(--coral); border: 1px solid var(--ink); }
.lesson-footer { min-height: 48px; display: flex; align-items: end; justify-content: space-between; gap: 14px; color: #697495; font-size: 10px; }
.text-button,.reset-button { padding: 5px 0; color: var(--blue); background: none; border: 0; font: 700 10px var(--mono); text-transform: uppercase; cursor: pointer; }
.text-button span { color: var(--coral); font-size: 16px; margin-left: 6px; }
.practice { padding: 82px 0 90px; color: var(--paper); background: var(--blue); border-block: 4px solid var(--ink); background-image: radial-gradient(#ffffff22 1px, transparent 1.5px); background-size: 14px 14px; }
.practice-inner { display: grid; grid-template-columns: .78fr 1.22fr; gap: 58px; align-items: center; }
.practice-copy .eyebrow { color: #e0e5ff; }
.practice-copy .eyebrow-dot { background: var(--lime); }
.practice-copy h2 { color: var(--paper); font-size: clamp(48px, 5.6vw, 67px); }
.practice-copy > p:not(.eyebrow):not(.practice-feedback) { max-width: 370px; margin: 18px 0; color: #e0e5ff; font-size: 13px; line-height: 1.8; }
.practice-steps { display: grid; gap: 11px; margin: 22px 0 25px; color: #f3f2ff; font-size: 11px; }
.practice-steps span { display: flex; align-items: center; gap: 10px; }
.practice-steps b { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink); background: var(--lime); border: 1px solid var(--ink); font: 11px var(--mono); }
.practice-actions { display: flex; align-items: center; gap: 19px; flex-wrap: wrap; }
.button-cream { color: var(--ink); background: var(--lime); }
.reset-button { color: #f3f2ff; text-decoration: underline; text-underline-offset: 3px; }
.practice-feedback { min-height: 38px; margin: 17px 0 0; padding-left: 10px; color: var(--lime); border-left: 3px solid var(--coral); font-size: 11px; line-height: 1.55; }
.game-card { padding: 23px 25px 18px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.game-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 17px; }
.game-label { color: var(--coral); }
.game-heading h3 { margin: 5px 0 0; font: 20px var(--display); text-transform: uppercase; }
.difficulty { padding: 6px 8px; border: 1px solid #a8afc7; font-size: 8px; white-space: nowrap; }
.game-board { width: min(100%, 405px); aspect-ratio: 1; margin-inline: auto; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); background: #fffefa; border: 2px solid var(--ink); }
.game-cell { padding: 0; border-top: 0; border-left: 0; background: transparent; cursor: pointer; font-size: clamp(13px, 1.7vw, 19px); transition: background .12s; }
.game-cell.given { color: #525d7e; background: #e8eaf2; font-weight: 700; cursor: default; }
.game-cell.editable { color: var(--coral); }
.game-cell.peer { background: #edf0fa; }
.game-cell.selected { color: var(--ink); background: var(--lime) !important; }
.game-cell.conflict { color: #a43d2d; background: #ffd2c7; }
.game-cell:focus-visible,.number-button:focus-visible,.lesson-tab:focus-visible,.button:focus-visible,.text-button:focus-visible,.reset-button:focus-visible,.top-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; z-index: 1; }
.number-pad { width: min(100%, 405px); display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin: 13px auto 0; }
.number-button { padding: 7px 2px; color: var(--ink); background: #e8ebf5; border: 1px solid #aeb6d0; font: 14px var(--mono); cursor: pointer; }
.number-button:hover,.number-button.number-active { color: var(--paper); background: var(--blue); }
.game-legend { width: min(100%, 405px); display: flex; justify-content: space-between; gap: 8px; margin: 13px auto 0; color: #697495; font-size: 9px; }
.game-legend span { display: flex; align-items: center; gap: 5px; }
.game-legend i { width: 8px; height: 8px; background: #e8eaf2; border: 1px solid #aeb6d0; }
.game-legend .legend-selected { background: var(--lime); }
.game-legend .legend-conflict { background: #ffd2c7; }
.closing { min-height: 245px; padding-top: 65px; padding-bottom: 60px; position: relative; }
.closing-quote { margin: 20px 0 0; color: var(--ink); font: clamp(27px, 4vw, 43px)/1.25 var(--display); text-transform: uppercase; }
.closing-quote em { color: var(--coral); font-style: normal; }
.back-top { position: absolute; right: 0; bottom: 60px; color: var(--blue); font: 10px var(--mono); }
.footer { color: var(--paper); background: var(--ink); border-top: 4px solid var(--coral); }
.footer-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 9px var(--mono); letter-spacing: .04em; }
.footer-inner a { color: var(--lime); }
.footer-dot { color: var(--coral); }
@keyframes blink { to { visibility: hidden; } }

@media (max-width: 850px) {
  .hero { min-height: 520px; gap: 25px; }
  .cabinet { padding: 10px; }
  .lesson-layout { grid-template-columns: 200px 1fr; gap: 17px; }
  .lesson-card { padding: 23px 20px 17px; }
  .lesson-board-wrap { min-height: 235px; padding: 14px; }
  .practice-inner { grid-template-columns: .75fr 1.25fr; gap: 32px; }
  .game-card { padding: 19px; }
  .rule-inner { grid-template-columns: 1fr 1.2fr .9fr; }
}
@media (max-width: 650px) {
  .shell { width: min(100% - 36px, 500px); }
  .topbar { height: 62px; padding-inline: 18px; }
  .wordmark { gap: 8px; font-size: 15px; }
  .wordmark small { font-size: 8px; }
  .top-link { gap: 6px; font-size: 9px; }
  .hero { grid-template-columns: 1fr; gap: 5px; padding-top: 49px; padding-bottom: 70px; }
  h1 { margin-top: 22px; font-size: clamp(58px, 13vw, 76px); }
  .hero-intro { max-width: 410px; font-size: 14px; }
  .hero-art { padding: 11px 5px 26px; }
  .cabinet { width: min(100%, 440px); }
  .hero-board { width: min(100%, 300px); }
  .hero-index { right: 3px; }
  .rule-inner { min-height: unset; grid-template-columns: 1fr auto; gap: 11px; padding-block: 23px; }
  .rule-inner .eyebrow { grid-column: 1 / -1; }
  .rule-inner > p:nth-child(2) { font-size: 22px; }
  .rule-aside { grid-column: 2; grid-row: 2; font-size: 7px; }
  .rule-tag { font-size: 8px; }
  .lessons { padding-top: 70px; padding-bottom: 75px; }
  .section-heading { display: block; margin-bottom: 26px; }
  .section-heading h2,.practice-copy h2 { font-size: 50px; }
  .section-aside { max-width: 420px; margin: 15px 0 0; font-size: 13px; }
  .lesson-layout { grid-template-columns: 1fr; gap: 17px; }
  .lesson-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .lesson-tab { min-height: 86px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 8px; }
  .lesson-tab strong { font-size: 10px; }
  .lesson-tab small { font-size: 9px; line-height: 1.3; }
  .tab-arrow { display: none; }
  .lesson-card { padding: 18px 13px 14px; }
  .lesson-card h3 { font-size: 24px; }
  .lesson-card > p { font-size: 12px; }
  .lesson-board-wrap { min-height: unset; gap: 10px; padding: 14px 8px; }
  .lesson-board { width: min(58vw, 236px); }
  .lesson-board .grid-cell { font-size: 10px; }
  .lesson-board .target-cell { font-size: 7px; }
  .candidate-note { max-width: 120px; padding: 9px; font-size: 9px; }
  .candidate-note strong { font-size: 12px; }
  .lesson-footer { align-items: center; gap: 8px; padding-top: 11px; font-size: 9px; }
  .text-button { font-size: 9px; white-space: nowrap; }
  .practice { padding: 64px 0 70px; }
  .practice-inner { grid-template-columns: 1fr; gap: 26px; }
  .practice-copy h2 { margin-top: 12px; }
  .practice-copy > p:not(.eyebrow):not(.practice-feedback) { font-size: 13px; }
  .practice-steps { grid-template-columns: 1fr 1fr; gap: 8px; margin: 17px 0 20px; }
  .practice-steps span { font-size: 10px; }
  .practice-steps span:last-child { grid-column: 1 / -1; }
  .game-card { padding: 16px 11px 13px; }
  .game-heading { align-items: flex-start; }
  .game-heading h3 { font-size: 16px; }
  .difficulty { padding: 5px; font-size: 7px; }
  .game-cell { font-size: clamp(13px, 4.2vw, 18px); }
  .number-pad { gap: 4px; }
  .number-button { padding: 8px 2px; font-size: 13px; }
  .game-legend { font-size: 8px; }
  .closing { min-height: 220px; padding-top: 52px; }
  .closing-quote { font-size: 28px; }
  .back-top { bottom: 39px; font-size: 9px; }
  .footer-inner { min-height: 68px; flex-wrap: wrap; justify-content: flex-start; gap: 6px 18px; padding-block: 13px; font-size: 8px; }
  .footer-inner span:nth-child(2) { flex-basis: 100%; order: 2; }
}
@media (max-width: 370px) {
  .shell { width: calc(100% - 28px); }
  .topbar { padding-inline: 13px; }
  .wordmark { font-size: 13px; }
  .wordmark small { font-size: 7px; }
  .top-link { font-size: 8px; }
  h1 { font-size: 54px; }
  .lesson-tab { padding: 9px 6px; }
  .lesson-tab strong { font-size: 9px; }
  .lesson-card { padding-inline: 10px; }
  .lesson-board-wrap { gap: 6px; }
  .candidate-note { max-width: 105px; padding: 7px; font-size: 8px; }
  .candidate-note strong { font-size: 11px; }
  .game-card { padding-inline: 8px; }
  .game-heading h3 { font-size: 14px; }
  .difficulty { letter-spacing: 0; }
  .game-legend { gap: 4px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}