:root { --paper:#F0E9D6; --paper-light:#FAF4E2; --paper-dark:#DDD2B8; --ink:#181410; --ink-soft:#4F4636; --ink-meta:#6B604C; --rule:rgba(24,20,16,0.16); --coral:#E84A2C; --phosphor:#FFA64D; --amber:#F2A839; --bezel:#1A1612;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif; --pixel:'VT323','JetBrains Mono',monospace; --mono:'JetBrains Mono',monospace; --bit:'Bitcount Prop Single',var(--mono); }
* { box-sizing: border-box; }
::selection { background: var(--coral); color: var(--paper-light); }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--display); font-size: 15px; line-height: 1.6; background: var(--paper) radial-gradient(rgba(120,100,70,0.16) 1px, transparent 1.2px) 0 0 / 14px 14px; }
.strip { background: var(--bezel); color: var(--phosphor); font-family: var(--pixel); font-size: 18px; letter-spacing: 0.08em; padding: 6px var(--s5); display: flex; gap: var(--s4); flex-wrap: wrap; }
.strip a { color: var(--phosphor); text-decoration: none; }
.strip a:hover { text-decoration: underline; }
.strip i { font-style: normal; color: #968B76; }
.wrap { max-width: 860px; margin: 0 auto; padding: var(--s7) var(--s5) 72px; }
.window { background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); margin: 0 0 var(--s6); }
.win-bar { display: flex; align-items: center; gap: 10px; padding: 5px var(--s3); border-bottom: 1px solid var(--ink); font-family: var(--pixel); font-size: 18px; line-height: 1.2; background: repeating-linear-gradient(90deg, rgba(24,20,16,0.08) 0 1px, transparent 1px 4px), var(--paper); }
.sq { width: 14px; height: 14px; border: 3px solid var(--coral); background: var(--paper-light); flex: none; }
.win-body { padding: var(--s6) 36px 36px; }
h1 { font-family: var(--bit); font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 0 0 var(--s4); text-wrap: balance; }
p { margin: 0 0 var(--s3); color: var(--ink-soft); }
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.card { display: block; text-decoration: none; background: #F3DC8A; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: var(--s5); transition: transform 120ms; }
.card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.card b { display: block; font-family: var(--bit); font-weight: 600; font-size: 22px; margin-bottom: var(--s2); }
.card span { color: #4A3D12; font-size: 14.5px; }
.screen { background: var(--bezel); padding: var(--s3); border-bottom: 1px solid var(--ink); }
canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: max(320px, calc(100vh - 270px)); max-height: max(320px, calc(100dvh - 270px)); margin: 0 auto; background: #14100c; touch-action: none; image-rendering: pixelated; }
.pad { display: flex; gap: var(--s3); padding: var(--s3); justify-content: center; }
.pad button { flex: 1; max-width: 160px; font-family: var(--pixel); font-size: 22px; letter-spacing: 0.08em; padding: 8px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button:active { transform: translate(2px,2px); box-shadow: none; background: var(--amber); }
.keys { font-family: var(--pixel); font-size: 18px; letter-spacing: 0.06em; color: var(--ink-meta); margin: var(--s3) 0 0; text-align: center; }
footer { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--ink); font-family: var(--pixel); font-size: 19px; letter-spacing: 0.06em; }
footer a { margin-right: var(--s5); }
@media (max-width: 700px) { .cards { grid-template-columns: minmax(0, 1fr); } .wrap { padding: var(--s5) var(--s3) var(--s7); } .win-body { padding: var(--s5); } }