:root {
    color-scheme: dark;
    --bg: #0e1a14;
    --panel-top: #2a3a9c;
    --panel-bot: #161c6a;
    --cream: #f4f0e0;
    --gold: #ffd84a;
    --ink: #f4f4ff;
    --dim: #a9b0e8;
    --red: #e8735a;
    --teal: #58b5a8;
    --px: "Game Numerals", "Press Start 2P", "Courier New", monospace;
    --txt: "Game Numerals", "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  }
  html, body { height: 100%; }
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.35 var(--txt); letter-spacing: .02em; overflow: hidden; }
  .app { height: 100%; display: flex; flex-direction: column; }
  header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: #0b0f2e; border-bottom: 4px solid #2a3a9c; }
  .brand { display: flex; flex-direction: column; gap: 3px; }
  h1 { margin: 0; font: 400 12px/1.2 var(--px); color: var(--gold); text-shadow: 2px 2px 0 #a3300f, 4px 4px 0 #1a0c2a; letter-spacing: .02em; word-spacing: -.28em; }
  .sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 400 15px var(--txt); color: var(--dim); }
  .sub .role-tag { font: 400 13px var(--txt); color: var(--gold); letter-spacing: .06em; text-transform: none; }
  .ahead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .ahead h2 { margin: 0; }
  .aclose { flex: none; font: 400 9px var(--px); color: #2a1a06; background: var(--gold); border: 0; padding: 7px 8px; box-shadow: 0 0 0 2px #0b0d30, 0 3px 0 2px #a5822a; cursor: pointer; }
  .aclose:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  .toggle { margin-left: auto; font: 400 9px var(--px); color: var(--ink); background: #2a3a9c; border: 0; box-shadow: 0 0 0 2px var(--cream); padding: 8px 10px; cursor: pointer; }
  .mutebtn { flex: none; font-size: 16px; line-height: 1; color: var(--ink); background: #2a3a9c; border: 0; box-shadow: 0 0 0 2px var(--cream); padding: 7px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mutebtn:hover { background: #3548c0; }
  .mutebtn, .toggle, .rulesbtn { gap: 7px; align-items: center; }
  .toggle { display: inline-flex; }
  .rulesbtn { flex: none; margin-left: auto; display: inline-flex; font: 400 9px var(--px); color: var(--ink); background: #2a3a9c; border: 0; box-shadow: 0 0 0 2px var(--cream); padding: 8px 10px; cursor: pointer; }
  .rulesbtn:hover, .toggle:hover { background: #3548c0; }
  .rulesbtn:focus-visible, .toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  header .toggle { margin-left: 0; }
  .hk { font: 400 8px var(--px); background: #0b0d30; color: var(--cream); padding: 3px 4px; box-shadow: 0 0 0 1px #5b64c8; }
  .rl-short { display: none; }
  .rules-list { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 8px; }
  .rules-list li { font: 400 17px/1.35 var(--txt); max-width: 60ch; }
  .rules-list li::marker { color: var(--gold); }
  .rules-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; font: 400 16px var(--txt); margin: 0; }
  .rules-keys dt { margin: 0; } .rules-keys dd { margin: 0; color: var(--dim); }
  .rules-h { font: 400 9px var(--px); color: var(--gold); margin: 18px 0 8px; }
  .stage { flex: 1; display: flex; min-height: 0; position: relative; }
  .map { flex: 1; position: relative; min-width: 0; overflow: hidden; background: #0e1a14; }
  #cv { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; }
  .win { background: linear-gradient(var(--panel-top), var(--panel-bot)); color: var(--ink); box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px #8a8fc8, 0 0 0 6px #0b0d30; }
  aside { width: 280px; flex: none; margin: 10px 14px 10px 10px; padding: 14px; overflow-y: auto; align-self: stretch; }
  aside h2 { font: 400 10px/1.4 var(--px); color: var(--gold); margin: 0 0 12px; }
  .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .list button { width: 100%; text-align: left; display: grid; grid-template-columns: 14px 1fr; gap: 8px; background: rgba(0,0,0,.25); color: var(--ink); border: 0; box-shadow: inset 0 0 0 2px #5b64c8; padding: 7px 8px; font: inherit; cursor: pointer; }
  .list button:hover { box-shadow: inset 0 0 0 2px var(--gold); }
  .list .dot { width: 10px; height: 10px; margin-top: 4px; background: var(--red); box-shadow: 0 0 0 2px #0b0d30; }
  .list .done .dot { background: var(--teal); }
  .list strong { display: block; font: 600 15px/1.15 var(--txt); }
  .list small { font: 400 13px var(--txt); color: var(--dim); }
  .hint { font: 400 14px/1.4 var(--txt); color: var(--dim); margin: 12px 0 0; }
  kbd { font: 400 9px var(--px); background: #0b0d30; color: var(--cream); padding: 2px 4px; }
  .hud { position: absolute; left: 12px; top: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
  .hearts { display: flex; gap: 3px; }
  .hearts img { width: 18px; height: 16px; image-rendering: pixelated; }
  .score { font: 400 9px var(--px); color: var(--cream); }
  .score b { color: var(--gold); font-weight: 400; }
  #pw { color: var(--gold); }
  .mm { position: absolute; right: 12px; bottom: 12px; width: 154px; height: 109px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px #8a8fc8, 0 0 0 6px #0b0d30; background: #0b0d30; z-index: 3; }
  .mutebtn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  .toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 7px 12px; font: 400 15px var(--txt); text-align: center; max-width: calc(100% - 32px); pointer-events: none; }
  .talk { position: absolute; left: 14px; bottom: 16px; z-index: 3; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #d8352a; color: #fff; font: 400 16px var(--px); box-shadow: 0 0 0 3px var(--cream), 0 5px 0 3px #7a1610; cursor: pointer; }
  .talk:active { transform: translateY(3px); }
  .dlg { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(660px, calc(100% - 40px)); min-height: 76px; padding: 16px 20px 14px; z-index: 6; cursor: pointer; }
  .dlg .who { position: absolute; left: 14px; top: -16px; background: var(--gold); color: #2a1a06; font: 400 9px var(--px); padding: 6px 9px; box-shadow: 0 0 0 2px #0b0d30; }
  .dlg p { margin: 0; font: 400 19px/1.3 var(--txt); letter-spacing: .03em; min-height: 50px; }
  .dlg .more { position: absolute; right: 14px; bottom: 6px; color: var(--gold); font: 400 11px var(--px); animation: blink .8s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .scrim { position: absolute; inset: 0; background: rgba(6, 8, 28, .78); display: flex; align-items: center; justify-content: center; padding: 22px 16px; z-index: 8; }
  .panel { width: min(660px, 100%); max-height: 100%; display: flex; flex-direction: column; }
  .panel-body, .cform-body { overflow-y: auto; padding: 22px 24px 16px; min-height: 0; flex: 1 1 auto; }
  .cform { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .panel > .close, .panel > .actions, .cform > .actions, .panel > .cstatus {
    flex: none; margin: 0 24px 20px;
  }
  .panel > .close { box-shadow: 0 0 0 2px #0b0d30, 0 4px 0 2px #a5822a; }
  .panel > .close, .panel > .actions .close, .panel > .actions .cta, .cform > .actions .cta { display: block; box-sizing: border-box; text-align: center; }
  .panel > .actions .close, .panel > .actions .cta, .cform > .actions .cta { width: 100%; }
  .panel > .actions, .cform > .actions { flex-direction: column; align-items: stretch; }
  .tag { font: 400 9px var(--px); color: var(--tone, var(--gold)); }
  .panel h3 { font: 400 19px/1.3 var(--px); color: var(--cream); margin: 12px 0 12px; text-wrap: balance; text-shadow: 2px 2px 0 #0b0d30; }
  .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 15px var(--txt); color: var(--dim); margin-bottom: 14px; }
  .meta b { color: var(--ink); font-weight: 600; }
  .blocks { display: grid; gap: 12px; }
  .blocks h4 { font: 400 9px var(--px); color: var(--tone, var(--gold)); margin: 0 0 5px; }
  .blocks p { margin: 0; font: 400 17px/1.35 var(--txt); max-width: 60ch; }
  .panel.full { width: min(760px, 100%); }
  .full .blocks { gap: 22px; }
  .full .sec { display: grid; gap: 9px; padding-top: 16px; border-top: 2px dashed #5b64c8; }
  .full .sec:first-child { border-top: 0; padding-top: 0; }
  .full h4 { margin-bottom: 2px; }
  .full h5 { font: 600 17px/1.3 var(--txt); color: var(--cream); margin: 6px 0 0; }
  .full ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 62ch; }
  .full li { font: 400 16px/1.35 var(--txt); }
  .full li::marker { color: var(--tone, var(--gold)); }
  .full blockquote { margin: 4px 0; padding: 10px 14px; background: rgba(0,0,0,.25); box-shadow: inset 4px 0 0 var(--tone, var(--gold)); max-width: 62ch; }
  .full blockquote p { font-style: italic; }
  .full cite { display: block; margin-top: 6px; font: 400 14px var(--txt); color: var(--dim); font-style: normal; }
  .full figure { margin: 6px 0 4px; min-width: 0; }
  .full .sec > * { min-width: 0; }
  .full .scroll { overflow-x: auto; padding: 2px; }
  .full figure svg { display: block; width: 100%; min-width: 540px; height: auto; box-shadow: 0 0 0 2px #5b64c8; }
  .full figcaption { margin-top: 8px; font: 400 14px/1.35 var(--txt); color: var(--dim); max-width: 62ch; }
  .full figcaption .ill { font: 400 8px var(--px); color: var(--tone, var(--gold)); margin-right: 4px; }
  .full svg text { font-family: var(--txt); }
  .full svg .h { font-size: 15px; font-weight: 600; fill: #f4f0e0; }
  .full svg .h2 { font-size: 14px; font-weight: 600; fill: #f4f0e0; }
  .full svg .s { font-size: 13px; fill: #a9b0e8; }
  .full svg .tg { font: 400 10px var(--px); fill: #ffd84a; }
  .full svg .u { font-size: 13px; fill: #3a4060; }
  .full svg .ub { font-size: 14px; font-weight: 600; fill: #1c2340; }
  .full svg .ubr { font-size: 14px; font-weight: 600; fill: #c8452e; }
  .full svg .ud { font-size: 12px; fill: #6a6f8a; }
  .full svg .uh { font-size: 20px; font-weight: 600; fill: #1c2340; }
  .full svg .pl { font-size: 12px; font-weight: 600; }
  .full svg .big { font-size: 28px; font-weight: 600; fill: #1c2340; }
  .full svg .bigr { font-size: 34px; font-weight: 600; fill: #c8452e; }
  .draft { margin: 14px 0 0; font: 400 13px var(--txt); color: var(--dim); border-top: 2px dashed #5b64c8; padding-top: 8px; }
  .close, .start, .cta { margin-top: 14px; background: var(--gold); color: #2a1a06; border: 0; padding: 11px 14px; font: 400 10px var(--px); box-shadow: 0 0 0 2px #0b0d30, 0 4px 0 2px #a5822a; cursor: pointer; }
  .close:focus-visible, .start:focus-visible, .cta:focus-visible, .list button:focus-visible, .toggle:focus-visible, .talk:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  a.cta { display: inline-block; text-decoration: none; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; }
  .actions .close, .actions .cta { margin-top: 0; }
  .ghost { background: transparent; color: var(--cream); box-shadow: 0 0 0 2px #5b64c8; }
  .cform label { display: block; font: 400 9px var(--px); color: var(--tone, var(--gold)); margin: 16px 0 7px; }
  .cform input, .cform textarea { display: block; width: 100%; box-sizing: border-box; background: #0b0d30; color: var(--ink); border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px #5b64c8; padding: 10px 12px; font: 400 17px/1.35 var(--txt); }
  .cform textarea { min-height: 120px; resize: vertical; }
  .cform input:focus, .cform textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--gold); }
  .ferr { margin: 12px 0 0; color: #ffb4a2; font: 400 16px var(--txt); }
  .msgbox { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; padding: 12px 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px #5b64c8; font: 400 16px/1.4 var(--txt); max-height: 240px; overflow: auto; user-select: text; -webkit-user-select: text; }
  .cstatus { margin: 12px 0 0; min-height: 1.4em; color: var(--dim); font: 400 15px var(--txt); }
  #nowplay { cursor: pointer; }
  #nowplay:hover { text-decoration: underline; }
  .radio-face { background: linear-gradient(#6b4128, #3a2416); box-shadow: inset 0 0 0 2px #241408, 0 0 0 2px #0b0d30; padding: 14px; margin: 4px 0 16px; }
  .radio-screen { background: #0c1a10; box-shadow: inset 0 0 0 2px #06120a, inset 0 0 10px rgba(0,0,0,.6); padding: 10px 12px 12px; margin-bottom: 14px; }
  .radio-screen .rs-top { font: 400 9px var(--px); color: #4f9a58; margin-bottom: 8px; }
  .radio-screen .rs-title { font: 600 16px/1.25 var(--txt); color: #bdf0ab; text-shadow: 0 0 6px rgba(140,224,120,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .radio-screen .rs-note { font: 400 12px var(--txt); color: #5fae66; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .radio-screen .rs-dial { position: relative; height: 20px; margin: 10px 1px 0; }
  .radio-screen .rs-dial-track { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #1d3a22; }
  .radio-screen .rs-dial-ticks { position: absolute; left: 0; right: 0; top: 5px; display: flex; justify-content: space-between; }
  .radio-screen .rs-dial-ticks span { width: 2px; height: 10px; background: #2a4a30; }
  .radio-screen .rs-needle { position: absolute; top: 0; width: 3px; height: 20px; background: #5fd06a; box-shadow: 0 0 6px rgba(95,208,106,.8); transform: translateX(-50%); transition: left .25s cubic-bezier(.3,.8,.3,1); }
  .radio-screen .rs-eq { display: block; width: 100%; height: 28px; margin-top: 9px; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 0 3px rgba(255,255,255,.35)); }
  .transport { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
  .tbtn { background: var(--gold); color: #2a1a06; border: 0; width: 42px; height: 42px; font: 400 11px var(--px); box-shadow: 0 0 0 2px #0b0d30, 0 4px 0 2px #a5822a; cursor: pointer; }
  .tbtn:active { transform: translateY(3px); box-shadow: 0 0 0 2px #0b0d30, 0 1px 0 2px #a5822a; }
  .tbtn.play { width: 56px; height: 56px; font-size: 16px; }
  .tbtn.like { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px #5b64c8; font-size: 18px; display: flex; align-items: center; justify-content: center; }
  .tbtn.like.liked { background: #e8735a; color: #fff; box-shadow: 0 0 0 2px #0b0d30, 0 4px 0 2px #a3300f; }
  .heart-icon { width: 18px; height: 16px; image-rendering: pixelated; display: block; }
  .presets { display: flex; flex-direction: column; gap: 8px; }
  @media (min-width: 700px) {
    .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  }
  .preset { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px #5b64c8; padding: 8px 10px; cursor: pointer; }
  .preset:hover, .preset:focus-visible { box-shadow: inset 0 0 0 2px var(--dim); }
  .preset.active { box-shadow: inset 0 0 0 2px var(--gold); }
  .preset .pnum { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #2a3a9c; color: var(--gold); font: 400 10px var(--px); box-shadow: 0 0 0 2px #0b0d30; }
  .preset .pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .preset .pinfo strong { font: 600 14px/1.2 var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .preset .pinfo small { font: 400 12px var(--txt); color: var(--dim); }
  .preset .pheart { flex: none; background: none; border: 0; color: var(--dim); font-size: 18px; line-height: 1; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .preset .pheart.liked { color: #e8735a; }
  .title { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; text-align: center; background: radial-gradient(ellipse at 50% 40%, rgba(20,30,110,.62), rgba(6,6,26,.9)); }
  .title .logo { font: 400 clamp(20px, 4.6vw, 42px)/1.25 var(--px); color: var(--gold); text-shadow: 3px 3px 0 #a3300f, 6px 6px 0 #1a0c2a; text-wrap: balance; word-spacing: -.38em; }
  .title .logo .role { display: block; font-size: .68em; margin-top: .35em; word-spacing: -.4em; text-shadow: .07em .07em 0 #a3300f, .14em .14em 0 #1a0c2a; }
  .title .logo .role .kern { margin-left: -.22em; }
  .title .tagline { font: 400 clamp(15px, 2.4vw, 20px) var(--txt); color: var(--cream); max-width: 34ch; text-shadow: 2px 2px 0 #0b0d30; }
  .title .start { font-size: 12px; padding: 14px 20px; animation: blink 1s steps(2) infinite; }
  .title .controls { font: 400 clamp(15px, 2.2vw, 18px)/1.6 var(--txt); color: var(--cream); max-width: min(52ch, calc(100vw - 48px)); padding: 10px 14px; background: rgba(11,13,48,.7); box-shadow: 0 0 0 2px #5b64c8; text-shadow: 1px 1px 0 #0b0d30; }
  .title .controls kbd { font-size: 12px; padding: 3px 5px; }
  .title .fine { font: 400 14px var(--txt); color: var(--dim); }
  @media (prefers-reduced-motion: reduce) { .title .start, .dlg .more { animation: none; } }
  @media (max-width: 760px) {
    aside { position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 55%; margin: 0; z-index: 7; }
    aside[hidden] { display: none; }
    .toggle { display: inline-block; }
    .desk-hint { display: none; }
    .mm { width: 110px; height: 78px; right: 8px; bottom: 76px; }
    .mutebtn { font-size: 15px; padding: 6px 8px; }
    header { gap: 8px; padding: 8px 10px; }
    .hk { display: none; }
    .rl-full { display: none; }
    .rl-short { display: inline; font-size: 12px; }
    .rulesbtn { padding: 8px 11px; }
    .toggle { padding: 8px 8px; }
    .talk { bottom: 76px; }
    .dlg { bottom: 12px; }
    header { flex-wrap: nowrap; }
    h1 { white-space: nowrap; }
    .sub { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  }

  /* Keep the mode switch at the same viewport corner as Light Mode. */
  .portfolio-mode-switch.pixel-mode-switch {
    position:fixed; right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom)); z-index:100;
  }
  .game-corner-controls {
    position:absolute; right:max(16px,env(safe-area-inset-right));
    bottom:calc(90px + env(safe-area-inset-bottom)); z-index:4;
  }
  .game-corner-controls .mm { position:static; display:block; }
  #side { margin-bottom:90px; }
  @media (max-width:760px) {
    #side { margin:0; bottom:calc(90px + env(safe-area-inset-bottom)); max-height:calc(100% - 110px - env(safe-area-inset-bottom)); }
  }

  .radio-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 24px; margin-bottom:18px; }
  .radio-controls .transport { flex:0 0 auto; margin:0; }
  .radio-volume { flex:1 1 200px; min-width:0; max-width:300px; }
  .radio-volume label { display:flex; justify-content:space-between; gap:12px; color:var(--cream); font:600 16px var(--txt); margin-bottom:8px; }
  .radio-volume input { display:block; width:100%; min-height:32px; margin:0; accent-color:var(--gold); cursor:pointer; }
  .radio-volume input:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
  .radio-volume input {
    -webkit-appearance:none; appearance:none; background:transparent;
    border-radius:0; --volume-fill:50%;
  }
  .radio-volume input::-webkit-slider-runnable-track {
    height:12px; border:2px solid #0b0d30; border-radius:0;
    background:linear-gradient(to right,var(--gold) 0 var(--volume-fill),#211b16 var(--volume-fill) 100%);
    box-shadow:0 0 0 2px #a87446,0 2px 0 2px #241408;
  }
  .radio-volume input::-webkit-slider-thumb {
    -webkit-appearance:none; width:20px; height:24px; margin-top:-8px;
    border:3px solid #0b0d30; border-radius:0; background:var(--gold);
    box-shadow:inset 3px 3px 0 #fff0a0,inset -3px -3px 0 #a5822a;
  }
  .radio-volume input::-moz-range-track {
    height:8px; border:2px solid #0b0d30; border-radius:0; background:#211b16;
    box-shadow:0 0 0 2px #a87446,0 2px 0 2px #241408;
  }
  .radio-volume input::-moz-range-progress { height:8px; border-radius:0; background:var(--gold); }
  .radio-volume input::-moz-range-thumb {
    width:14px; height:18px; border:3px solid #0b0d30; border-radius:0; background:var(--gold);
    box-shadow:inset 3px 3px 0 #fff0a0,inset -3px -3px 0 #a5822a;
  }