@font-face {
  font-family: Outfit;
  src: url("./outfit.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ink: #202238;
  --muted: #60657c;
  --paper: #f7f8fc;
  --line: #e2e5ee;
  --blue: #2345eb;
  --radius: 24px;
  font-family: Outfit, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #e07517;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.1;
}
button[hidden],
[hidden] {
  display: none !important;
}
.skip {
  position: fixed;
  left: 16px;
  top: -100px;
  background: white;
  padding: 15px;
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
.container {
  max-width: 1240px;
  margin: auto;
  padding: 0 36px;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  letter-spacing: -1.1px;
  font-size: 29px;
  font-weight: 800;
}
.logo small {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 500;
  display: block;
  line-height: 1.3;
}
.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  transform: rotate(-8deg);
}
.brand-mark i {
  display: block;
  background: var(--blue);
  border-radius: 5px;
}
.brand-mark i:nth-child(2) {
  background: #ff8059;
  border-radius: 50%;
}
.brand-mark i:nth-child(3) {
  background: #cee747;
}
.brand-mark i:nth-child(4) {
  background: #ad98e4;
}
.header-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.header-links a {
  text-decoration: none;
}
.header-links a:hover {
  color: var(--blue);
}
.availability {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
}
.availability span {
  font-size: 18px;
}
.hero {
  display: grid;
  grid-template-columns: 1fr 41%;
  align-items: center;
  gap: 50px;
  padding: 38px 0 32px;
}
.eyebrow,
.tiny-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.hero .eyebrow {
  color: var(--blue);
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(36px, 4.6vw, 65px);
  font-weight: 750;
  letter-spacing: -2.8px;
  line-height: 1.04;
  max-width: 680px;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue);
}
.hero p.description {
  font-size: 18px;
  color: var(--muted);
  max-width: 490px;
  margin: 18px 0 20px;
}
.hero img {
  width: 100%;
  height: 262px;
  object-fit: cover;
  border-radius: 36px;
  display: block;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.hero-actions small {
  font-size: 13px;
  color: var(--muted);
}
.btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  padding: 10px 15px;
  min-height: 44px;
  font-weight: 500;
  transition:
    background 0.15s,
    transform 0.15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover {
  background: #eef0f7;
  transform: translateY(-1px);
}
.btn.primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  box-shadow: 0 4px 0 #15172c20;
}
.btn.primary:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.icon-btn {
  border: 1px solid var(--line);
  background: white;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  font-size: 24px;
  flex-shrink: 0;
}
.collection-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0 20px;
}
.collection-heading h2 {
  font-size: 24px;
  letter-spacing: -0.8px;
}
.collection-heading span {
  font-size: 14px;
  color: var(--muted);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 44px;
}
.game-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px #252d4310;
}
.card-art {
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.card-copy {
  padding: 19px 21px 21px;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.new-tag {
  background: #e8edfb;
  color: var(--blue);
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-title h3 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.7px;
}
.card-title span {
  font-size: 20px;
}
.card-copy p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
.game-card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 46% 54%;
  background: #fff3e9;
  border: 1px solid #efddd0;
}
.featured .card-art {
  height: 100%;
  min-height: 269px;
  background: #ffceaf;
}
.featured .card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
}
.featured .card-title h3 {
  font-size: 42px;
  letter-spacing: -1.7px;
}
.featured .card-copy p {
  font-size: 16px;
}
.mini-tiles {
  display: grid;
  grid-template-columns: repeat(2, 65px);
  gap: 8px;
  transform: rotate(-10deg);
}
.mini-tiles b {
  height: 65px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff4df;
  font-size: 29px;
  box-shadow: 0 4px 0 #00000010;
}
.mini-tiles b:nth-child(2) {
  background: #ff8a54;
}
.mini-tiles b:nth-child(3) {
  background: #ffb069;
}
.mini-tiles b:nth-child(4) {
  background: #ee6049;
  color: white;
}
.mini-chess {
  display: grid;
  grid-template-columns: repeat(3, 43px);
  transform: rotate(-8deg);
  border: 5px solid #a3b4ff;
  border-radius: 10px;
  overflow: hidden;
}
.mini-chess span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  background: #e2e7ff;
  color: #294084;
  font-size: 36px;
  line-height: 1;
}
.mini-chess span:nth-child(odd) {
  background: #a0b5fb;
}
.mini-numbers {
  display: grid;
  grid-template-columns: repeat(3, 39px);
  gap: 2px;
  border: 4px solid #475d25;
  transform: rotate(8deg);
  border-radius: 8px;
  overflow: hidden;
}
.mini-numbers b {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  background: #f6ffe0;
  font-size: 25px;
  font-weight: 500;
}
.mini-mine {
  display: grid;
  grid-template-columns: repeat(4, 31px);
  gap: 3px;
  transform: rotate(-8deg);
}
.mini-mine b {
  width: 31px;
  height: 31px;
  background: #dcf6f5;
  box-shadow: 0 3px #4ca8b2;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #1e6771;
  font-size: 21px;
}
.mini-blocks {
  display: grid;
  grid-template-columns: repeat(5, 23px);
  grid-template-rows: repeat(4, 23px);
  gap: 4px;
  transform: rotate(8deg);
}
.mini-blocks i {
  border-radius: 4px;
  background: transparent;
}
.mini-blocks i.on {
  background: #d7ee6e;
  box-shadow: 0 3px #58467944;
}
.mini-blocks i.pink {
  background: #ff95ba;
  box-shadow: 0 3px #58467944;
}
.mini-nonogram {
  display: grid;
  grid-template-columns: repeat(5, 20px);
  gap: 3px;
  transform: rotate(-8deg);
  border: 6px solid #fff2fa;
  border-radius: 9px;
  background: #fff2fa;
}
.mini-nonogram i {
  width: 20px;
  height: 20px;
  background: #efdaea;
  border-radius: 2px;
}
.mini-nonogram i.on {
  background: #773d70;
}
.puzzle-glyph {
  font-family: "Segoe UI Symbol", serif;
  color: #402579;
  font-size: 120px;
  line-height: 1;
  transform: rotate(-10deg);
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 27px 0 35px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.site-footer strong {
  color: var(--ink);
}
.footer-links {
  display: flex;
  gap: 25px;
}
.site-footer a {
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.storage-warning {
  background: #fff0ce;
  padding: 10px 20px;
  color: #563d0b;
  font-size: 14px;
}
/* The game is the main surface, with instructions kept alongside it. */
.game-page {
  padding: 28px 0 55px;
}
.back {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 23px;
}
.back:hover {
  color: var(--blue);
}
.game-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 27px;
}
.game-heading .eyebrow {
  color: var(--muted);
  margin-bottom: 9px;
}
.game-heading h1 {
  font-size: 46px;
  letter-spacing: -1.8px;
}
.game-heading p:last-child {
  color: var(--muted);
  margin-top: 10px;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(250px, 1fr);
  gap: 48px;
  align-items: start;
}
.play-panel {
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
  box-shadow: 0 8px 35px #252d4304;
}
.toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.toolbar label {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 5px;
  letter-spacing: 0.3px;
  flex: 1;
  min-width: 0;
}
.toolbar select {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 32px 10px 12px;
  width: 100%;
  font-size: 15px;
  min-height: 44px;
}
.chess-options {
  gap: 9px;
}
.stats {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.stats > div {
  flex: 1;
  border-radius: 14px;
  background: var(--paper);
  padding: 11px 16px;
  min-width: 0;
}
.stats span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.stats strong {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
}
.game-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 7px;
}
.game-aside h2 {
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: -0.7px;
  font-weight: 600;
  margin: 12px 0;
}
.howto .tiny-label {
  color: var(--muted);
}
.howto ol {
  padding-left: 21px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.howto li {
  padding-left: 5px;
  margin: 0 0 14px;
}
.howto li::marker {
  color: var(--ink);
  font-weight: 650;
}
.tip {
  background: color-mix(in srgb, var(--accent) 16%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
  padding: 23px;
  border-radius: 20px;
}
.tip p {
  font-size: 15px;
  line-height: 1.6;
  color: #424960;
  margin-top: 12px;
}
.text-link {
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  margin-top: 16px;
}
.local-note {
  font-size: 13px;
  color: var(--muted);
  max-width: 320px;
}
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 17px;
}
.actions.wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.actions .btn {
  font-size: 14px;
}
.status {
  font-size: 14px;
  min-height: 42px;
  color: var(--muted);
  margin-top: 17px;
  line-height: 1.5;
}
.tile-board {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 10px;
  background: #dfe2ee;
  border-radius: 17px;
  padding: 10px;
  touch-action: none;
  aspect-ratio: 1;
}
.tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--tile-color);
  border-radius: 11px;
  min-width: 0;
  overflow: hidden;
}
.tile span {
  font-size: clamp(19px, 3.4vw, 40px);
  font-weight: 650;
  letter-spacing: -1px;
}
.tile[data-value="128"],
.tile[data-value="256"],
.tile[data-value="512"],
.tile[data-value="1024"],
.tile[data-value="2048"],
.tile[data-value="4096"],
.tile[data-value="8192"] {
  color: white;
}
.tile.occupied {
  box-shadow: inset 0 -4px #00000007;
  animation: appear 0.13s ease-out;
}
.dpad {
  display: flex;
  gap: 5px;
}
.dpad .btn {
  font-size: 21px;
  padding: 6px 11px;
}
.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 2px solid #414b40;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 1;
}
.sudoku-cell {
  aspect-ratio: 1;
  background: white;
  border: 0;
  border-right: 1px solid #dce2d7;
  border-bottom: 1px solid #dce2d7;
  padding: 0;
  min-width: 0;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 500;
  color: #2345be;
  display: grid;
  place-items: center;
}
.sudoku-cell.given {
  font-weight: 650;
  color: var(--ink);
  background: #f4f7ee;
}
.sudoku-cell.peer {
  background: #f0f4e6;
}
.sudoku-cell.same {
  background: #e3ecbc;
}
.sudoku-cell.selected {
  background: #d6ee53;
  box-shadow: inset 0 0 0 2px #748b13;
}
.sudoku-cell:focus-visible {
  outline-offset: -4px;
}
.pencil {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  height: 90%;
  font-size: clamp(8px, 1.1vw, 11px);
  line-height: 1;
  font-weight: 400;
  color: var(--muted);
}
.pencil span {
  display: grid;
  place-items: center;
}
.number-pad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
  margin-top: 18px;
}
.number-pad .btn {
  padding: 6px 0;
  font-size: 21px;
  background: #f0f4e6;
  border-color: #dce2d1;
}
.btn[aria-pressed="true"] {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.mines-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.mines-scroll {
  overflow-x: auto;
  padding-bottom: 7px;
}
.mines-board {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 4px;
  background: #b3dadd;
  padding: 6px;
  border-radius: 12px;
}
.mines-board.wide {
  grid-template-columns: repeat(var(--n), 30px);
  width: max-content;
  min-width: 100%;
}
.mine-cell {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid #a4cacd;
  border-bottom: 3px solid #8fc1c5;
  background: #e6f7f6;
  border-radius: 5px;
  font-size: clamp(17px, 3vw, 28px);
  padding: 0;
  font-weight: 650;
  color: #1c566b;
  min-height: 28px;
  user-select: none;
}
.mine-cell:hover {
  background: white;
}
.mine-cell.open {
  background: #edf3f4;
  border-color: #d5e2e4;
  border-bottom-width: 1px;
}
.mine-cell[data-number="1"] {
  color: #2853c3;
}
.mine-cell[data-number="2"] {
  color: #278154;
}
.mine-cell[data-number="3"] {
  color: #c04436;
}
.mine-cell.bomb {
  color: #762d2e;
  background: #f5c4bb;
}
.mine-cell.hit {
  background: #fc6f57;
  color: #201b2d;
}
.wide .mine-cell {
  font-size: 17px;
}
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  outline: 5px solid #e6eaf6;
}
.chess-cell {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
}
.chess-cell.light {
  background: #e7ecf8;
}
.chess-cell.dark {
  background: #718bd2;
}
.chess-cell.last {
  background: #cdd884;
}
.chess-cell.dark.last {
  background: #90a253;
}
.chess-cell.selected {
  box-shadow: inset 0 0 0 4px #e4a92b;
}
.chess-cell.legal::after {
  content: "";
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: #13223d45;
  position: absolute;
  pointer-events: none;
}
.chess-cell.legal:has(.piece)::after {
  width: 88%;
  height: 88%;
  background: none;
  border: 4px solid #19223865;
}
.piece {
  font-family: "Segoe UI Symbol", "DejaVu Sans", serif;
  font-size: clamp(25px, 4.2vw, 49px);
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 2px 1px #1b235344);
  pointer-events: none;
}
.piece.white {
  color: #fffaf0;
  text-shadow:
    -1px -1px 0 #303858,
    1px 1px 0 #303858,
    1px -1px 0 #303858,
    -1px 1px 0 #303858;
}
.piece.black {
  color: #202a4b;
  text-shadow: 0 1px #c1cef0;
}
.chess-cell small {
  font-size: 10px;
  color: #20315f;
  font-weight: 600;
  position: absolute;
  line-height: 1;
}
.chess-cell .rank {
  left: 3px;
  top: 3px;
}
.chess-cell .file {
  right: 3px;
  bottom: 3px;
}
.history {
  font-size: 14px;
}
.history #history {
  color: var(--muted);
  line-height: 1.9;
  max-height: 200px;
  overflow: auto;
  word-spacing: 5px;
}
.puzzle-info {
  background: #f0eafc;
  padding: 23px;
  border-radius: 20px;
}
.puzzle-info p {
  color: #544968;
  font-size: 15px;
  margin: 14px 0;
}
.puzzle-info a {
  font-size: 13px;
}
.puzzle-info .btn {
  font-size: 14px;
}
.nonogram-board {
  display: grid;
  grid-template-columns: minmax(55px, auto) repeat(var(--n), minmax(0, 1fr));
  gap: 1px;
  background: #d2bfce;
  border: 1px solid #d2bfce;
  border-radius: 7px;
  overflow: hidden;
}
.column-clue,
.row-clue,
.nono-corner {
  background: #f8edf4;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column-clue {
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 0 7px;
  line-height: 1.4;
}
.row-clue {
  justify-content: flex-end;
  padding: 0 9px;
  word-spacing: 5px;
}
.nono-corner {
  font-size: 11px;
  color: #816b7b;
}
.nono-cell {
  aspect-ratio: 1;
  border: 0;
  background: white;
  color: #8b6b7f;
  padding: 0;
  min-width: 0;
  font-size: 22px;
}
.nono-cell.painted {
  background: #583e66;
}
.nono-cell:hover {
  box-shadow: inset 0 0 0 3px #d494bb;
}
.invalid {
  background: #ffd5d4 !important;
  color: #9e243b !important;
  box-shadow: inset 0 0 0 2px #d85663 !important;
}
.clue-example {
  display: flex;
  gap: 5px;
  margin: 17px 0;
}
.clue-example b,
.clue-example span {
  width: 28px;
  height: 28px;
  border: 1px solid #c69cbe;
  border-radius: 4px;
  background: white;
  text-align: center;
}
.clue-example b {
  background: #583e66;
}
.blocks-layout {
  display: flex;
  gap: 19px;
  justify-content: center;
  align-items: flex-start;
}
.blocks-canvas-wrap {
  position: relative;
  width: 300px;
  max-width: calc(100% - 115px);
  border-radius: 11px;
  overflow: hidden;
}
.blocks-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}
.blocks-side {
  width: 92px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.blocks-side canvas {
  width: 90px;
  height: 90px;
  background: #f1edf8;
  border-radius: 9px;
  padding: 8px;
}
.blocks-side .tiny-label {
  font-size: 10px;
  letter-spacing: 1px;
}
.blocks-side .btn {
  font-size: 13px;
  min-height: 39px;
  padding: 8px;
}
.level-label span {
  font-size: 12px;
  color: var(--muted);
  display: block;
}
.level-label strong {
  font-size: 27px;
}
.blocks-overlay {
  position: absolute;
  inset: 0;
  background: #192342d9;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 25px;
  text-align: center;
  padding: 20px;
}
.blocks-overlay strong {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.2;
}
.blocks-overlay .btn.primary {
  background: #d6ee53;
  color: var(--ink);
  border: 0;
}
.block-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.block-controls .btn {
  font-size: 14px;
  padding: 8px 12px;
}
.confirm-dialog {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  max-width: calc(100vw - 32px);
  width: 470px;
  box-shadow: 0 20px 100px #20223840;
}
.confirm-dialog::backdrop {
  background: #171a3459;
  backdrop-filter: blur(3px);
}
.confirm-dialog h2 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.7px;
}
.confirm-dialog p {
  margin: 16px 0;
  color: var(--muted);
}
.confirm-dialog .actions {
  flex-wrap: wrap;
}
.game-page:fullscreen {
  background: var(--paper);
  padding: 25px;
  overflow: auto;
}
.prose {
  max-width: 760px;
  margin: 45px auto 65px;
}
.prose h1 {
  font-size: 45px;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}
.prose h2 {
  font-size: 24px;
  margin: 32px 0 16px;
}
.prose p {
  line-height: 1.75;
  margin: 16px 0;
  color: #545970;
}
.prose li {
  margin-bottom: 10px;
}
.error-state {
  text-align: center;
  padding: 100px 15px;
}
.error-state p {
  margin: 25px 0;
}
@keyframes appear {
  from {
    opacity: 0.55;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 1400px) {
  .hero h1 {
    font-size: 65px;
  }
}
@media (max-width: 1050px) {
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .game-card.featured {
    grid-column: span 1;
    display: block;
  }
  .featured .card-art {
    height: 158px;
    min-height: 0;
  }
  .featured .card-copy {
    padding: 19px 21px 21px;
  }
  .featured .card-title h3 {
    font-size: 24px;
    letter-spacing: -0.7px;
  }
  .featured .card-copy p {
    font-size: 14px;
  }
  .mini-tiles {
    grid-template-columns: repeat(2, 51px);
    gap: 6px;
  }
  .mini-tiles b {
    height: 51px;
    font-size: 24px;
  }
  .game-layout {
    gap: 28px;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  }
  .hero {
    gap: 30px;
  }
  .hero img {
    height: 245px;
  }
  .hero h1 {
    letter-spacing: -2px;
  }
  .play-panel {
    padding: 19px;
  }
  .header-links {
    gap: 18px;
  }
  .availability {
    display: none;
  }
  .game-heading h1 {
    font-size: 42px;
  }
}
@media (max-width: 760px) {
  .container {
    padding: 0 20px;
  }
  .site-header {
    min-height: 80px;
  }
  .logo {
    font-size: 26px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
  }
  .header-links a:first-child {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr 35%;
    gap: 18px;
    padding: 30px 0 20px;
  }
  .hero h1 {
    font-size: 40px;
    letter-spacing: -1.8px;
  }
  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .hero p.description {
    font-size: 15px;
    margin: 15px 0;
  }
  .hero img {
    height: 230px;
    border-radius: 23px;
    object-position: 48%;
  }
  .hero-actions small {
    display: none;
  }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .card-art,
  .featured .card-art {
    height: 142px;
  }
  .card-copy,
  .featured .card-copy {
    padding: 17px;
  }
  .card-title h3,
  .featured .card-title h3 {
    font-size: 22px;
  }
  .card-copy p,
  .featured .card-copy p {
    font-size: 13px;
  }
  .card-meta {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 630px;
    margin: auto;
  }
  .game-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .local-note {
    grid-column: 1/-1;
  }
  .game-heading {
    max-width: 630px;
    margin: 0 auto 24px;
  }
  .back {
    margin-bottom: 20px;
  }
  .game-heading h1 {
    font-size: 38px;
  }
  .game-heading p:last-child {
    font-size: 15px;
  }
  .game-heading .eyebrow {
    font-size: 10px;
  }
  .game-page {
    padding-top: 20px;
  }
  .play-panel {
    padding: 22px;
  }
  .tile span {
    font-size: clamp(27px, 7vw, 48px);
  }
  .piece {
    font-size: clamp(30px, 7.1vw, 49px);
  }
  .sudoku-cell {
    font-size: clamp(21px, 4.5vw, 30px);
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .pencil {
    font-size: 10px;
  }
  .tip {
    padding: 20px;
  }
  .game-aside h2 {
    font-size: 23px;
  }
  .chess-cell small {
    font-size: 10px;
  }
  .stats strong {
    font-size: 25px;
  }
  .prose h1 {
    font-size: 35px;
  }
}
@media (max-width: 430px) {
  .container {
    padding: 0 16px;
  }
  .site-header {
    min-height: 78px;
  }
  .header-links {
    font-size: 12px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 25px;
    gap: 20px;
  }
  .hero h1 {
    font-size: 47px;
    max-width: 360px;
  }
  .hero img {
    display: none;
  }
  .hero p.description {
    max-width: 330px;
  }
  .hero .eyebrow {
    font-size: 11px;
  }
  .collection-heading {
    padding-top: 20px;
  }
  .collection-heading h2 {
    font-size: 23px;
  }
  .collection-heading span {
    font-size: 12px;
  }
  .card-art,
  .featured .card-art {
    height: 126px;
  }
  .card-copy,
  .featured .card-copy {
    padding: 14px;
  }
  .card-title h3,
  .featured .card-title h3 {
    font-size: 22px;
  }
  .card-copy p,
  .featured .card-copy p {
    font-size: 13px;
    line-height: 1.4;
  }
  .card-meta {
    font-size: 9px;
  }
  .card-title span {
    font-size: 17px;
  }
  .new-tag {
    font-size: 9px;
  }
  .mini-chess {
    grid-template-columns: repeat(3, 33px);
  }
  .mini-chess span {
    height: 33px;
    width: 33px;
    font-size: 29px;
  }
  .mini-numbers {
    grid-template-columns: repeat(3, 30px);
  }
  .mini-numbers b {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
  .mini-mine {
    grid-template-columns: repeat(4, 24px);
  }
  .mini-mine b {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }
  .mini-nonogram {
    grid-template-columns: repeat(5, 16px);
  }
  .mini-nonogram i {
    height: 16px;
    width: 16px;
  }
  .mini-blocks {
    transform: scale(0.85) rotate(8deg);
  }
  .puzzle-glyph {
    font-size: 98px;
  }
  .play-panel {
    padding: 15px;
    border-radius: 19px;
  }
  .game-aside {
    grid-template-columns: 1fr;
  }
  .stats > div {
    padding: 10px 12px;
  }
  .stats strong {
    font-size: 22px;
  }
  .stats span {
    font-size: 11px;
  }
  .tile-board {
    gap: 7px;
    padding: 7px;
  }
  .tile {
    border-radius: 8px;
  }
  .tile span {
    font-size: clamp(21px, 7.3vw, 30px);
  }
  .dpad .btn {
    padding: 5px 9px;
  }
  .actions {
    gap: 6px;
  }
  .actions .btn {
    font-size: 12px;
    padding: 9px 11px;
  }
  .toolbar .btn {
    font-size: 12px;
    padding: 10px;
  }
  .toolbar select {
    font-size: 13px;
    padding-left: 8px;
  }
  .game-heading h1 {
    font-size: 35px;
  }
  .game-heading p:last-child {
    font-size: 14px;
  }
  .chess-options {
    flex-wrap: wrap;
  }
  .chess-options label {
    min-width: 85px;
  }
  .mines-tools .btn {
    font-size: 13px;
  }
  .number-pad {
    gap: 3px;
  }
  .number-pad .btn {
    font-size: 19px;
    min-height: 40px;
  }
  .sudoku-cell {
    font-size: 21px;
  }
  .pencil {
    font-size: 8px;
  }
  .blocks-layout {
    gap: 12px;
  }
  .blocks-side {
    width: 77px;
  }
  .blocks-side canvas {
    width: 76px;
    height: 76px;
  }
  .blocks-canvas-wrap {
    max-width: calc(100% - 89px);
  }
  .blocks-overlay strong {
    font-size: 24px;
  }
  .block-controls {
    gap: 5px;
  }
  .block-controls .btn {
    font-size: 12px;
    padding: 8px 11px;
  }
  .column-clue,
  .row-clue {
    font-size: 12px;
  }
  .nonogram-board {
    grid-template-columns: minmax(42px, auto) repeat(var(--n), minmax(0, 1fr));
  }
  .row-clue {
    padding: 0 5px;
  }
  .nono-cell {
    font-size: 17px;
  }
  .local-note {
    grid-column: auto;
  }
  .site-footer {
    font-size: 12px;
  }
  .footer-links {
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.cuy-game{--cuy-ink:#203342;--cuy-muted:#647388;--cuy-line:#d9e3e9;--cuy-cream:#fffaf1;color:var(--cuy-ink);max-width:1080px;margin:0 auto 70px}
.cuy-game *{box-sizing:border-box}
.cuy-game button{font:inherit}
.cuy-game button:focus-visible,.cuy-game canvas:focus-visible,.cuy-game summary:focus-visible{outline:3px solid #e79527;outline-offset:3px}
.cuy-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:38px 0 22px}
.cuy-heading h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.045em;color:#203342;margin:2px 0 9px}
.cuy-heading p:not(.cuy-kicker){color:var(--cuy-muted);font-size:clamp(14px,1.8vw,17px)}
.cuy-kicker{font-size:11px;letter-spacing:.18em;font-weight:850;color:#b26b42;margin:0}
.cuy-badge{border:1px solid #e7d6b8;background:#fff4dc;color:#795439;border-radius:99px;padding:8px 12px;white-space:nowrap;font-size:12px;font-weight:700}
.cuy-shell{background:#fff;border:1px solid var(--cuy-line);border-radius:24px;box-shadow:0 18px 55px #29465314;overflow:hidden}
.cuy-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;background:#fcfbf7;border-bottom:1px solid var(--cuy-line);font-size:13px}
.cuy-mission{display:flex;align-items:center;gap:9px;font-weight:800;min-width:0}
.cuy-mission>span:first-child{overflow-wrap:anywhere}
.cuy-mission>span:last-child{color:#fff;background:#775046;border-radius:99px;padding:2px 7px;white-space:nowrap;font-size:11px}
.cuy-stats{display:flex;gap:14px;color:#526579;font-size:12px;font-weight:700;white-space:nowrap}
.cuy-screen{position:relative;background:#95d2dd;overflow:hidden}
.cuy-screen canvas{display:block;width:100%;height:auto;max-height:min(65vh,630px);object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.cuy-overlay{position:absolute;z-index:6;inset:0;display:grid;place-items:center;padding:12px;background:#1a35489c;overflow:auto}
.cuy-overlay[hidden]{display:none}
.cuy-card{background:#fffaf1;border:3px solid #f3d9a2;box-shadow:0 10px 0 #1637445e,0 25px 45px #17384650;border-radius:16px;padding:18px 22px;max-width:350px;width:min(100%,350px);text-align:center}
.cuy-card-spark{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#fff0bb;color:#d88132;margin-bottom:5px}
.cuy-card h2{font-size:clamp(19px,3vw,27px);margin:5px 0 8px;color:#203342}
.cuy-card>p:not(.cuy-kicker){font-size:13px;line-height:1.4;color:#586b78}
.cuy-card .cuy-card-tip{font-weight:700;color:#795439!important;margin-top:9px}
.cuy-card-actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.cuy-primary,.cuy-secondary{border:0;border-radius:9px;min-height:39px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer}
.cuy-primary{background:#226a67;color:#fff;margin-top:14px;box-shadow:0 3px 0 #174b4a}
.cuy-card-actions .cuy-primary{margin-top:0}
.cuy-primary:hover{background:#1b5755}
.cuy-secondary{background:#f4e4c7;color:#5e4838}
.cuy-secondary:hover{background:#ebd5af}
.cuy-status{min-height:29px;padding:6px 20px 0;color:#3f685d;font-size:12px;font-weight:700}
.cuy-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 20px 16px}
.cuy-toolbar-button{border:1px solid #cbd9d5;border-radius:9px;background:#f5faf7;color:#2b6259;min-height:37px;padding:6px 11px;font-weight:750;font-size:12px}
.cuy-toolbar-button:hover:not(:disabled){background:#e6f3ed}
.cuy-toolbar>span{margin-left:auto;color:#6f7988;font-size:11px;line-height:1.4}
.cuy-touch{display:flex;justify-content:space-between;gap:12px;padding:0 20px 17px;touch-action:none;user-select:none}
.cuy-touch>div{display:flex;gap:7px}
.cuy-control{display:grid;place-items:center;align-content:center;gap:0;width:62px;min-height:54px;border:1px solid #b9d2ce;border-bottom:3px solid #94b6ae;border-radius:11px;background:#ecf6ef;color:#2e605d;font-size:22px;font-weight:850;touch-action:none;user-select:none}
.cuy-control small{font-size:8px;letter-spacing:.06em;line-height:1}
.cuy-jump{background:#e8f4f8;border-color:#accdd8;color:#32647a}
.cuy-duck{background:#fff2df;border-color:#e1c69e;color:#795435}
.cuy-control.pressed,.cuy-control:active{transform:translateY(2px);border-bottom-width:1px;filter:brightness(.94)}
.cuy-below{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:24px;margin:29px 0 18px}
.cuy-below h2{font-size:24px;letter-spacing:-.02em;margin:0 0 9px}
.cuy-below p{font-size:13px;line-height:1.55;color:var(--cuy-muted)}
.cuy-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-width:0}
.cuy-level-button{text-align:left;display:flex;flex-direction:column;gap:5px;padding:12px 11px;border:1px solid #dce4e5;border-radius:11px;background:#fff;color:#203342;min-width:0;cursor:pointer}
.cuy-level-button:hover{background:#f8fbf7;border-color:#90b5a4}
.cuy-level-button.selected{background:#edfaf0;border-color:#80b69a;box-shadow:inset 0 0 0 1px #80b69a}
.cuy-level-button>span{color:#b16a43;font-size:9px;font-weight:850;letter-spacing:.15em}
.cuy-level-button strong{font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.cuy-level-button small{font-size:10px;line-height:1.35;color:#647388}
.cuy-help{border:1px solid #dce5e5;background:#fff;border-radius:12px;padding:12px 16px;font-size:13px;color:#526273}
.cuy-help summary{cursor:pointer;font-weight:750;color:#2a5f5c}
.cuy-help p{padding-top:10px;line-height:1.55}
@media(max-width:700px){.cuy-heading{align-items:flex-start;flex-direction:column;margin-top:25px}.cuy-topline{padding:10px 12px}.cuy-status{padding-left:12px;padding-right:12px}.cuy-toolbar{padding:7px 12px 14px}.cuy-touch{padding:0 12px 15px}.cuy-below{grid-template-columns:minmax(0,1fr);gap:14px}.cuy-toolbar>span{flex-basis:100%;margin-left:0}}
@media(max-width:450px){.cuy-game{min-width:0}.cuy-shell{border-radius:14px}.cuy-topline{align-items:flex-start}.cuy-stats{flex-direction:column;gap:0;font-size:10px;text-align:right}.cuy-overlay{padding:6px}.cuy-card{padding:9px 11px;border-width:2px;border-radius:10px}.cuy-card-spark{display:none}.cuy-card h2{font-size:18px;margin:2px 0 4px}.cuy-card>p:not(.cuy-kicker){font-size:11px;line-height:1.25}.cuy-card .cuy-card-tip{margin-top:4px}.cuy-primary,.cuy-secondary{min-height:31px;margin-top:6px;padding:5px 10px;font-size:11px}.cuy-card-actions{margin-top:6px}.cuy-control{width:51px;min-height:49px}.cuy-levels{grid-template-columns:minmax(0,1fr)}.cuy-level-button{display:grid;grid-template-columns:50px 1fr;column-gap:8px}.cuy-level-button small{grid-column:2}}
@media(prefers-reduced-motion:reduce){.cuy-control.pressed,.cuy-control:active{transform:none}}

/* Fullscreen Cuy playfield and controls */
.cuy-screen .cuy-hud{position:absolute;z-index:8;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:flex-end;gap:6px;max-width:calc(100% - 16px);pointer-events:none}
.cuy-screen .cuy-hud button{pointer-events:auto}
.cuy-screen .cuy-hud .cuy-toolbar-button{min-width:44px;min-height:44px;padding:6px 9px;border:1px solid #ffffffa8;border-radius:11px;background:#183a49e8;color:#fff;font-size:11px;line-height:1.15;text-align:center;box-shadow:0 3px 12px #10283255;backdrop-filter:blur(6px);white-space:normal}
.cuy-screen .cuy-hud .cuy-toolbar-button:hover:not(:disabled){background:#102e3beF;color:#fff}
.cuy-screen .cuy-hud .cuy-toolbar-button:disabled{opacity:.72;color:#fff}
.cuy-screen .cuy-hud #cuy-fullscreen{width:96px;max-width:30vw}
.cuy-screen .cuy-touch{position:absolute;z-index:4;left:50%;right:auto;bottom:max(8px,env(safe-area-inset-bottom));width:100%;max-width:100%;padding:0 max(10px,env(safe-area-inset-left)) 0 max(10px,env(safe-area-inset-right));transform:translateX(-50%);pointer-events:none;background:transparent}
.cuy-screen .cuy-touch>div,.cuy-screen .cuy-touch button{pointer-events:auto}
.cuy-screen .cuy-control{width:clamp(44px,12vw,62px);min-width:44px;min-height:48px;background:#ecf6efe0;box-shadow:0 2px 8px #19394740;backdrop-filter:blur(4px)}
.cuy-screen .cuy-duck{background:#fff2dfeb}.cuy-screen .cuy-jump{background:#e8f4f8eb}
.cuy-shell:fullscreen,.cuy-shell.cuy-pseudo-fullscreen,.cuy-shell.cuy-fullscreen-fallback{--cuy-playfield-width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),171.43dvh);--cuy-playfield-height:min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)),58.33vw);--cuy-playfield-top:calc(env(safe-area-inset-top) + (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--cuy-playfield-height))/2);--cuy-playfield-bottom:calc(env(safe-area-inset-bottom) + (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--cuy-playfield-height))/2);position:fixed!important;inset:0!important;z-index:10000;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:#95d2dd;isolation:isolate}
.cuy-shell:fullscreen .cuy-screen,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen,.cuy-shell.cuy-fullscreen-fallback .cuy-screen{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:transparent}
.cuy-shell:fullscreen .cuy-screen canvas,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen canvas,.cuy-shell.cuy-fullscreen-fallback .cuy-screen canvas{position:absolute;left:50%;top:var(--cuy-playfield-top);display:block;width:var(--cuy-playfield-width);height:var(--cuy-playfield-height);max-width:100%;max-height:100%;transform:translateX(-50%);object-fit:fill;image-rendering:pixelated;image-rendering:crisp-edges}
.cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{position:absolute;z-index:7;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:164px;display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;min-height:44px;padding:5px 9px;border:1px solid #ffffff80;border-radius:12px;background:#183a49e8;color:#fff;font-size:11px;line-height:1.2;box-shadow:0 3px 12px #10283255;backdrop-filter:blur(6px)}
.cuy-shell:fullscreen .cuy-mission,.cuy-shell.cuy-pseudo-fullscreen .cuy-mission,.cuy-shell.cuy-fullscreen-fallback .cuy-mission{gap:5px;min-width:0;max-width:100%;color:#fff}
.cuy-shell:fullscreen .cuy-mission>span:first-child,.cuy-shell.cuy-pseudo-fullscreen .cuy-mission>span:first-child,.cuy-shell.cuy-fullscreen-fallback .cuy-mission>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(40vw,260px)}
.cuy-shell:fullscreen .cuy-mission>span:last-child,.cuy-shell.cuy-pseudo-fullscreen .cuy-mission>span:last-child,.cuy-shell.cuy-fullscreen-fallback .cuy-mission>span:last-child{background:#ffffff24;color:#fff}
.cuy-shell:fullscreen .cuy-stats,.cuy-shell.cuy-pseudo-fullscreen .cuy-stats,.cuy-shell.cuy-fullscreen-fallback .cuy-stats{display:flex;flex-wrap:wrap;gap:2px 7px;color:#fff;font-size:10px;line-height:1.2;white-space:normal}
.cuy-shell:fullscreen .cuy-status,.cuy-shell.cuy-pseudo-fullscreen .cuy-status,.cuy-shell.cuy-fullscreen-fallback .cuy-status{position:absolute;z-index:5;left:50%;bottom:calc(var(--cuy-playfield-bottom) + 66px);width:max-content;max-width:min(var(--cuy-playfield-width),calc(100vw - 24px));transform:translateX(-50%);margin:0;padding:6px 10px;border:1px solid #ffffff80;border-radius:9px;background:#183a49df;color:#fff;font-size:11px;line-height:1.25;text-align:center;box-shadow:0 2px 8px #10283244}
.cuy-shell:fullscreen .cuy-screen .cuy-touch,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-touch,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-touch{bottom:calc(var(--cuy-playfield-bottom) + 8px);width:var(--cuy-playfield-width);left:50%;right:auto;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));transform:translateX(-50%)}
.cuy-shell:fullscreen .cuy-toolbar,.cuy-shell.cuy-pseudo-fullscreen .cuy-toolbar,.cuy-shell.cuy-fullscreen-fallback .cuy-toolbar{display:none}
.cuy-shell:fullscreen .cuy-overlay,.cuy-shell.cuy-pseudo-fullscreen .cuy-overlay,.cuy-shell.cuy-fullscreen-fallback .cuy-overlay{position:absolute;z-index:6;inset:0;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#1a354879;overflow:auto}
.cuy-shell:fullscreen .cuy-overlay[hidden],.cuy-shell.cuy-pseudo-fullscreen .cuy-overlay[hidden],.cuy-shell.cuy-fullscreen-fallback .cuy-overlay[hidden]{display:none}
.cuy-shell:fullscreen .cuy-card,.cuy-shell.cuy-pseudo-fullscreen .cuy-card,.cuy-shell.cuy-fullscreen-fallback .cuy-card{max-height:100%;overflow:auto}
.cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{z-index:8}
@media(max-width:420px){.cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{right:154px;max-width:calc(100vw - 170px);font-size:10px;padding:4px 7px}.cuy-shell:fullscreen .cuy-stats,.cuy-shell.cuy-pseudo-fullscreen .cuy-stats,.cuy-shell.cuy-fullscreen-fallback .cuy-stats{font-size:9px;gap:2px 5px}.cuy-screen .cuy-hud{gap:4px}.cuy-screen .cuy-hud .cuy-toolbar-button{padding-inline:6px;font-size:10px}.cuy-screen .cuy-hud .cuy-pause{width:58px}.cuy-screen .cuy-hud #cuy-fullscreen{width:88px;max-width:32vw}.cuy-screen .cuy-touch>div{gap:5px}}
@media(prefers-reduced-motion:reduce){.cuy-screen .cuy-control,.cuy-screen .cuy-hud button{scroll-behavior:auto;transition:none}}
@media(max-aspect-ratio:1/1){.cuy-shell:fullscreen,.cuy-shell.cuy-fullscreen-fallback{background:linear-gradient(to bottom,#9fd8e8 0%,#9fd8e8 61%,#98745e 61%,#765345 100%)}}
@media(max-width:500px) and (orientation:portrait){
  .cuy-screen{padding-bottom:72px;background:#8e6956}
  .cuy-screen .cuy-overlay{align-items:start;padding-top:58px}
  .cuy-screen .cuy-touch{bottom:4px}
  .cuy-screen .cuy-control{background:#ecf6efba}
  .cuy-screen .cuy-duck{background:#fff2dfbd}
  .cuy-screen .cuy-jump{background:#e8f4f8bd}
  .cuy-shell:fullscreen .cuy-screen,.cuy-shell.cuy-fullscreen-fallback .cuy-screen{padding-bottom:0}
  .cuy-shell:fullscreen .cuy-screen .cuy-touch,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-touch{bottom:calc(var(--cuy-playfield-bottom) - 55px)}
}

/* Cuy 1.4: three self-contained pixel-comic panels */
.cuy-comic{width:min(610px,100%);min-width:0;max-height:100%;overflow:auto;border:3px solid #f4dcaa;border-radius:15px;background:#fffaf0;box-shadow:0 11px 0 #19384766,0 20px 40px #10283480;animation:cuy-comic-arrive .34s steps(5,end) both}
.cuy-comic-art{position:relative;width:100%;aspect-ratio:16/8.6;min-height:116px;overflow:hidden;border-bottom:4px solid #c89365;isolation:isolate;background:#bbdbe1}
.cuy-comic-scene,.cuy-comic-scene>span,.cuy-comic-scene i{position:absolute;display:block;box-sizing:border-box}
.cuy-comic-scene{inset:0;overflow:hidden;image-rendering:pixelated}
.cuy-comic-caption{padding:14px 19px 16px;text-align:left;background:linear-gradient(140deg,#fffaf0,#fff2db);color:#2a3744}
.cuy-comic-count{margin:0 0 4px;color:#a25c3f;font-size:10px;font-weight:900;letter-spacing:.17em}
.cuy-comic-caption h2{margin:0 0 5px;font-size:clamp(20px,3vw,27px);line-height:1.1;letter-spacing:-.025em}
.cuy-comic-caption>p:last-child{margin:0;color:#5f5b58;font-size:clamp(12px,1.7vw,14px);line-height:1.42}
.cuy-comic-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;width:min(610px,100%);margin-top:10px}
.cuy-comic-actions button{min-height:38px;border-radius:9px;padding:7px 13px;font-size:12px;font-weight:800}
.cuy-comic-actions [data-cuy-action="comic-skip"]{background:#fff8e7;color:#405a60;border:1px solid #e6d6b5}
.cuy-comic-actions [data-cuy-action="comic-skip"]:hover{background:#fff0cf}
.cuy-comic-actions [data-cuy-action="comic-next"]{margin:0;background:#245c58;color:white;border:1px solid #245c58}
.cuy-comic-actions [data-cuy-action="comic-next"]:hover{background:#184c49}
.cuy-screen:has(.cuy-comic){min-height:clamp(320px,70dvh,520px)}
.cuy-shell:not(:fullscreen):not(.cuy-fullscreen-fallback):not(.cuy-pseudo-fullscreen) .cuy-screen:has(.cuy-overlay:not([hidden])):not(:has(.cuy-comic)){min-height:clamp(300px,40dvh,360px)}
.cuy-shell:fullscreen .cuy-screen:has(.cuy-comic),.cuy-shell.cuy-fullscreen-fallback .cuy-screen:has(.cuy-comic),.cuy-shell.cuy-pseudo-fullscreen .cuy-screen:has(.cuy-comic){min-height:0}
.cuy-overlay .cuy-comic-card{display:flex;flex-direction:column;align-items:stretch;width:min(650px,100%);max-width:650px;max-height:calc(100% - 6px);min-height:0;padding:10px;overflow:hidden;text-align:left}
.cuy-overlay .cuy-comic-card>.cuy-comic{flex:1 1 auto;width:100%;min-height:0;max-height:none;overflow:auto;border-width:2px;border-radius:8px;box-shadow:none}
.cuy-overlay .cuy-comic-card>.cuy-comic-actions{flex:0 0 auto;width:100%;min-width:0;padding-top:8px}
.cuy-comic-actions>span{margin-right:auto;color:#785b45;font-size:11px;font-weight:800;white-space:nowrap}

/* A compact, tailless cuy: round rump, generous head, small folded ears and a split muzzle. */
.cuy-comic-cuy{position:relative;display:block;width:100%;height:100%;background:transparent;filter:drop-shadow(2px 4px 0 #48382b57)}
.cuy-comic-body{left:3%;top:28%;width:82%;height:61%;border:3px solid #5d382c;border-radius:52% 48% 43% 46%;background:#985c3a;box-shadow:inset 7px 7px 0 #b97d4c,inset -5px -7px 0 #73452f}
.cuy-comic-rump-patch{left:8%;top:39%;width:31%;height:38%;border-radius:55% 47% 51% 49%;background:#f1d9a7;transform:rotate(-18deg)}
.cuy-comic-head{left:49%;top:24%;width:49%;height:57%;border:3px solid #5d382c;border-radius:51% 48% 48% 46%;background:#f2d5a3;box-shadow:inset 7px 4px 0 #fff0cb,inset -5px -6px 0 #d4aa78}
.cuy-comic-cheek{left:68%;top:51%;width:24%;height:25%;border-radius:50%;background:#fff0c8}
.cuy-comic-ear{width:13%;height:13%;border:2px solid #684037;border-radius:44% 50% 55% 45%;background:#b77563;box-shadow:inset 2px 2px 0 #e7a390}
.cuy-comic-ear-back{left:53%;top:25%;transform:rotate(-30deg)}
.cuy-comic-ear-front{left:81%;top:27%;transform:rotate(28deg)}
.cuy-comic-eye{left:79%;top:44%;width:8%;height:9%;border-radius:50%;background:#201c1c;box-shadow:2px 1px 0 #754c36}
.cuy-comic-eye::after{content:"";position:absolute;left:22%;top:16%;width:31%;height:30%;border-radius:50%;background:#fff}
.cuy-comic-muzzle{left:82%;top:58%;width:13%;height:15%;border-radius:50%;background:#fff1d4;box-shadow:-7px 2px 0 #fff1d4}
.cuy-comic-nose{left:91%;top:58%;width:6%;height:6%;border-radius:50%;background:#a85f62}
.cuy-comic-whiskers{left:88%;top:65%;width:10%;height:1px;background:#5b483b;transform:rotate(-7deg);box-shadow:0 4px 0 #5b483b}
.cuy-comic-whiskers::before{content:"";position:absolute;left:-30%;top:0;width:80%;height:1px;background:#5b483b;transform:rotate(25deg);transform-origin:left}
.cuy-comic-scarf{left:54%;top:60%;width:13%;height:29%;border:2px solid #8d443c;border-radius:3px 2px 5px 4px;background:repeating-linear-gradient(to bottom,#c44c48 0 5px,#e3ae6f 5px 8px,#4a897e 8px 11px);transform:rotate(8deg)}
.cuy-comic-scarf-knot{left:54%;top:57%;width:16%;height:12%;border:2px solid #8d443c;border-radius:40%;background:#cf6051}
.cuy-comic-foot{bottom:7%;height:11%;border-radius:48% 48% 40% 42%;background:#5c3b31;box-shadow:inset 0 -2px 0 #3d2b2a}
.cuy-comic-foot-back{left:16%;width:19%}.cuy-comic-foot-front{left:68%;width:17%}

/* Panel 1: warm kitchen, a harmless steaming pot, and an alert cuy. */
.cuy-comic-kitchen{background:repeating-linear-gradient(0deg,#e8ca91 0 23px,#e5bd84 23px 25px);}
.cuy-comic-kitchen::before{content:"";position:absolute;inset:auto 0 0;height:24%;background:repeating-linear-gradient(90deg,#9f7052 0 38px,#986849 38px 41px);border-top:8px solid #704f43}
.cuy-comic-window{left:6%;top:11%;width:25%;height:39%;border:8px solid #995d40;background:linear-gradient(165deg,#88c9db 0 55%,#719d89 55% 100%);box-shadow:5px 5px 0 #674a39}
.cuy-comic-window::before{content:"";position:absolute;left:48%;top:0;bottom:0;width:7px;background:#995d40}
.cuy-comic-window i{left:0;right:0;top:49%;height:7px;background:#995d40}
.cuy-comic-shelf{left:38%;top:12%;width:24%;height:5%;background:#8f5a43;box-shadow:0 9px 0 #c28854}
.cuy-comic-shelf::before,.cuy-comic-shelf::after{content:"";position:absolute;bottom:100%;width:17%;height:30px;background:#809a76;border:3px solid #65806a;border-bottom:0}.cuy-comic-shelf::before{left:15%}.cuy-comic-shelf::after{right:10%;height:22px;background:#c58c63;border-color:#a67353}
.cuy-comic-cook{left:13%;bottom:20%;width:18%;height:54%;animation:cuy-cook-nod 1.9s steps(2,end) infinite}
.cuy-comic-cook .cuy-comic-head{left:24%;top:22%;width:53%;height:34%;background:#c6815a;border:4px solid #a96348}
.cuy-comic-cook .cuy-comic-hair{left:20%;top:19%;width:59%;height:18%;background:#3b3939}
.cuy-comic-cook .cuy-comic-hat{left:13%;top:2%;width:70%;height:20%;background:#fff9e4;box-shadow:0 -9px 0 #fff9e4,7px -15px 0 #fff9e4,0 5px 0 #dfcda9}
.cuy-comic-cook .cuy-comic-cook-eye{left:63%;top:35%;width:5%;height:6%;background:#2b3437}
.cuy-comic-cook .cuy-comic-apron{left:12%;top:53%;width:72%;height:45%;background:#397879;border:5px solid #25595c;clip-path:polygon(18% 0,83% 0,100% 100%,0 100%)}
.cuy-comic-cook .cuy-comic-arm{left:75%;top:57%;width:31%;height:10%;background:#c6815a;transform:rotate(-25deg);transform-origin:left center}
.cuy-comic-cook .cuy-comic-spoon{left:106%;top:27%;width:5%;height:43%;background:#744c34;transform:rotate(22deg)}
.cuy-comic-cook .cuy-comic-spoon::before{content:"";position:absolute;left:-110%;top:-12%;width:280%;height:25%;background:#ad7851}
.cuy-comic-pot{left:44%;bottom:19%;width:20%;height:26%;border:6px solid #496579;border-top:9px solid #2f4f60;background:#608390;box-shadow:0 6px 0 #2f4f60}
.cuy-comic-pot::before,.cuy-comic-pot::after{content:"";position:absolute;top:12%;width:20%;height:38%;border:6px solid #2f4f60}.cuy-comic-pot::before{right:100%;border-right:0}.cuy-comic-pot::after{left:100%;border-left:0}
.cuy-comic-steam{bottom:108%;width:7px;height:33px;background:#fff9e8aa;animation:cuy-steam 1.4s steps(4,end) infinite}.steam-one{left:27%}.steam-two{left:62%;animation-delay:.5s}
.cuy-comic-cuy-wrap{right:5%;bottom:17%;width:28%;height:43%;animation:cuy-cuy-startle .75s steps(3,end) infinite}
.cuy-comic-speech,.cuy-comic-welcome{padding:5px 10px;border:3px solid #594d49;border-radius:8px;background:#fff8e8;color:#604138;font-weight:900;font-size:clamp(10px,2vw,17px);box-shadow:4px 4px 0 #54494344}
.cuy-comic-speech{right:8%;top:12%;transform:rotate(-3deg)}
.cuy-comic-ground{left:0;right:0;bottom:0;height:5%;background:#694e42}

/* Panel 2: a crouched cuy moves under a low stone roof toward daylight. */
.cuy-comic-tunnel{background:linear-gradient(#8bc9d8 0 54%,#a1b780 54% 72%,#bd9365 72%)}
.cuy-comic-sun{right:13%;top:10%;width:11%;aspect-ratio:1;background:#ffe8a4;box-shadow:0 0 0 7px #ffe8a44d}
.cuy-comic-mountain{bottom:27%;height:58%;width:60%;clip-path:polygon(0 100%,17% 62%,31% 71%,49% 15%,68% 60%,79% 35%,100% 100%)}
.mountain-back{left:27%;background:#abc9c1}.mountain-front{left:57%;background:#81a99e;transform:scale(.86);transform-origin:bottom}
.cuy-comic-tunnel-roof{left:5%;right:32%;top:41%;height:20%;background:repeating-linear-gradient(90deg,#816657 0 32px,#705648 32px 35px);border:6px solid #5f514b;border-bottom:7px solid #544843;box-shadow:0 -8px 0 #a8886c}
.cuy-comic-tunnel-wall{left:5%;top:57%;bottom:17%;width:9%;background:repeating-linear-gradient(0deg,#8e735f 0 19px,#685a4e 19px 23px)}
.cuy-comic-tunnel-floor{left:0;right:0;bottom:0;height:20%;background:repeating-linear-gradient(90deg,#936a4f 0 42px,#845e48 42px 45px);border-top:8px solid #9b9d6b}
.cuy-comic-tunnel-cuy{left:44%;bottom:19%;width:21%;height:33%;transform:scaleY(.74);transform-origin:bottom;animation:cuy-scramble .85s steps(4,end) infinite}
.cuy-comic-dust{bottom:22%;width:7px;height:7px;background:#e0c59d;opacity:.8;animation:cuy-dust 1.1s steps(3,end) infinite}.dust-one{left:42%}.dust-two{left:38%;animation-delay:.36s}
.cuy-comic-light{right:18%;top:42%;width:15%;height:41%;background:linear-gradient(90deg,#f5e8a900,#fff4be88);clip-path:polygon(0 0,100% 20%,100% 100%,0 75%)}
.cuy-comic-arrow{right:10%;top:52%;color:#fff8ce;font-size:clamp(20px,5vw,42px);font-weight:900;filter:drop-shadow(2px 3px 0 #667a65);animation:cuy-point .9s steps(2,end) infinite}

/* Panel 3: terraces, an adobe home, corn, and a waiting cuy family. */
.cuy-comic-valley{background:linear-gradient(#90d3dd 0 65%,#a2b87c 65% 100%)}
.cuy-comic-valley .cuy-comic-sun{right:14%;top:9%;background:#ffdd91}
.cuy-comic-terrace{left:0;right:0;height:16%;border-top:7px solid #7c9e69;background:repeating-linear-gradient(90deg,#b88d5a 0 43px,#ae8453 43px 47px)}
.terrace-one{bottom:28%;left:36%}.terrace-two{bottom:14%;left:17%}.terrace-three{bottom:0}
.cuy-comic-house{left:10%;bottom:27%;width:21%;height:30%;background:#deb57e;border:5px solid #a97856;box-shadow:5px 5px 0 #745744}
.cuy-comic-house::before{content:"";position:absolute;left:-11%;right:-11%;bottom:100%;height:25%;background:#a8624f;clip-path:polygon(0 100%,13% 0,84% 0,100% 100%)}
.cuy-comic-house::after{content:"";position:absolute;left:42%;bottom:0;width:25%;height:60%;background:#614d46}
.cuy-comic-house i{left:13%;top:25%;width:18%;height:22%;background:#76a6a7;border:3px solid #97704f}
.cuy-comic-corn{bottom:20%;width:4%;height:31%;background:linear-gradient(90deg,transparent 40%,#54855d 40% 65%,transparent 65%)}
.cuy-comic-corn::before,.cuy-comic-corn::after{content:"";position:absolute;top:37%;width:72%;height:30%;background:#83a468;clip-path:polygon(0 0,100% 40%,0 100%)}
.cuy-comic-corn::before{left:-59%;transform:rotate(25deg)}.cuy-comic-corn::after{right:-57%;transform:scaleX(-1) rotate(25deg)}
.corn-one{left:38%}.corn-two{left:43%;height:26%}
.cuy-comic-friend{bottom:13%;width:17%;height:33%;animation:cuy-family-wave 1.4s steps(3,end) infinite}
.friend-one{left:57%}.friend-two{left:69%;width:12%;height:27%;animation-delay:.3s;filter:hue-rotate(14deg)}.friend-three{left:79%;width:11%;height:25%;animation-delay:.6s;filter:hue-rotate(-15deg)}
.cuy-comic-welcome{right:9%;top:9%;transform:rotate(3deg)}

@keyframes cuy-comic-arrive{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cuy-cook-nod{50%{transform:translateY(3px)}}
@keyframes cuy-cuy-startle{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes cuy-steam{from{transform:translateY(7px);opacity:.25}to{transform:translateY(-14px);opacity:0}}
@keyframes cuy-scramble{50%{transform:translateX(7px) scaleY(.74)}}
@keyframes cuy-dust{to{transform:translateX(-18px) translateY(-5px);opacity:0}}
@keyframes cuy-point{50%{transform:translateX(5px)}}
@keyframes cuy-family-wave{50%{transform:translateY(-3px)}}

@media(min-width:701px) and (min-height:431px){
  .cuy-comic{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .cuy-comic-art{height:100%;min-height:210px;aspect-ratio:auto;border-bottom:0;border-right:4px solid #c89365}
  .cuy-comic-caption{display:flex;flex-direction:column;justify-content:center;padding:12px}
}
@media(max-width:500px){
  .cuy-comic{border-width:2px;border-radius:10px;max-height:min(100%,calc(100dvh - 112px))}
  .cuy-comic-art{aspect-ratio:16/8;min-height:100px;border-bottom-width:3px}
  .cuy-comic-caption{padding:9px 11px 10px}
  .cuy-comic-count{font-size:8px;margin-bottom:2px}
  .cuy-comic-caption h2{font-size:17px;margin-bottom:3px}
  .cuy-comic-caption>p:last-child{font-size:11px;line-height:1.3}
  .cuy-comic-actions{margin-top:6px;gap:5px}
  .cuy-comic-actions button{min-height:31px;padding:5px 9px;font-size:11px}
  .cuy-comic-window{border-width:4px}.cuy-comic-window::before,.cuy-comic-window i{width:4px;height:4px}
  .cuy-comic-pot{border-width:4px;border-top-width:6px}
  .cuy-comic-ear{border-width:2px}
  .cuy-comic-tunnel-roof{border-width:4px;border-bottom-width:5px}
  .cuy-comic-house{border-width:3px}
  .cuy-overlay .cuy-comic-card{padding:6px;max-height:calc(100% - 2px)}
  .cuy-comic-actions>span{font-size:9px}
}
@media(max-height:430px) and (orientation:landscape){
  .cuy-shell:not(:fullscreen):not(.cuy-fullscreen-fallback):not(.cuy-pseudo-fullscreen) .cuy-screen:has(.cuy-overlay:not([hidden])):not(:has(.cuy-comic)){min-height:350px}
  .cuy-comic{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);width:min(760px,100%);max-height:calc(100dvh - 56px)}
  .cuy-comic-art{height:100%;min-height:140px;aspect-ratio:auto;border-bottom:0;border-right:4px solid #c89365}
  .cuy-comic-caption{display:flex;flex-direction:column;justify-content:center;padding:10px 12px}
  .cuy-comic-caption h2{font-size:18px}.cuy-comic-caption>p:last-child{font-size:11px}
  .cuy-comic-actions{width:min(760px,100%)}
}
@media(prefers-reduced-motion:reduce){
  .cuy-comic,.cuy-comic-cook,.cuy-comic-cuy-wrap,.cuy-comic-steam,.cuy-comic-tunnel-cuy,.cuy-comic-dust,.cuy-comic-arrow,.cuy-comic-friend{animation:none!important}
}

/* Keep story controls reachable even when the comic needs its own scroll area. */
.cuy-overlay:has(.cuy-comic),.cuy-shell:fullscreen .cuy-overlay:has(.cuy-comic),.cuy-shell.cuy-fullscreen-fallback .cuy-overlay:has(.cuy-comic),.cuy-shell.cuy-pseudo-fullscreen .cuy-overlay:has(.cuy-comic){display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:7px;padding-top:max(54px,env(safe-area-inset-top));padding-bottom:max(9px,env(safe-area-inset-bottom))}
.cuy-shell:not(:fullscreen):not(.cuy-fullscreen-fallback):not(.cuy-pseudo-fullscreen) .cuy-overlay:has(.cuy-comic){justify-content:flex-start}
.cuy-overlay:has(.cuy-comic) .cuy-comic{flex:0 1 auto;max-height:calc(100% - 50px)}
.cuy-overlay:has(.cuy-comic) .cuy-comic-actions{flex:0 0 auto}

/* The live announcement remains available to assistive technology in fullscreen. */
.cuy-shell:fullscreen #cuy-status,.cuy-shell.cuy-fullscreen-fallback #cuy-status,.cuy-shell.cuy-pseudo-fullscreen #cuy-status{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;max-width:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;box-shadow:none!important;transform:none!important}

/* Compact, high-contrast in-play status and restart controls. */
.cuy-screen .cuy-hud{flex-wrap:wrap;width:min(320px,calc(100% - 16px));max-width:calc(100% - 16px);row-gap:4px}
.cuy-screen .cuy-hud .cuy-hud-restart{min-width:58px;max-width:76px}
.cuy-screen .cuy-hud .cuy-boss-hud,.cuy-screen .cuy-hud .cuy-power-hud{display:inline-flex;align-items:center;justify-content:center;min-height:27px;max-width:100%;min-width:0;padding:4px 8px;border:1px solid #ffffffa8;border-radius:8px;background:#183a49e8;color:#fff;font-size:10px;font-weight:800;line-height:1.15;text-align:center;overflow-wrap:anywhere;box-shadow:0 2px 9px #10283255;backdrop-filter:blur(5px)}
.cuy-screen .cuy-hud button{order:1}.cuy-screen .cuy-hud .cuy-boss-hud,.cuy-screen .cuy-hud .cuy-power-hud{order:2}
.cuy-screen .cuy-hud .cuy-boss-hud{background:#743f47e8;border-color:#ffc1ab}
.cuy-screen .cuy-hud .cuy-power-hud{background:#756044e8;border-color:#ffe6aa}
.cuy-screen .cuy-hud .cuy-boss-hud[hidden],.cuy-screen .cuy-hud .cuy-power-hud[hidden]{display:none!important}
.cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{right:340px}
.cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{width:320px}

@media(max-width:700px){
  .cuy-screen .cuy-hud{width:min(265px,calc(100% - 16px))}
  .cuy-screen .cuy-hud .cuy-toolbar-button{min-height:38px}
  .cuy-screen .cuy-hud .cuy-hud-restart{min-width:53px;max-width:62px}
  .cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{right:280px}
  .cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{width:265px}
}
@media(max-width:500px){
  .cuy-comic-art{height:clamp(110px,32vw,165px);aspect-ratio:auto}
  .cuy-screen .cuy-hud{width:min(240px,calc(100% - 16px))}
  .cuy-screen .cuy-hud .cuy-boss-hud,.cuy-screen .cuy-hud .cuy-power-hud{font-size:9px;min-height:22px;padding:3px 6px}
  .cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{width:min(240px,calc(100% - 16px))}
}
@media(max-width:500px) and (orientation:portrait){
  .cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{left:8px;right:8px;max-width:calc(100% - 16px);min-height:38px;padding:4px 7px}
  .cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{top:max(67px,calc(env(safe-area-inset-top) + 56px));right:8px;width:calc(100% - 16px);justify-content:flex-end}
  .cuy-shell:fullscreen,.cuy-shell.cuy-pseudo-fullscreen,.cuy-shell.cuy-fullscreen-fallback{background:linear-gradient(to bottom,#9fd8e8 0 30%,#a8c6ae 30% 35%,#7a9e85 35% 44%,#ad936b 44% 52%,#8a7658 52% 61%,#7c5b49 61% 100%)}
  .cuy-shell:fullscreen::before,.cuy-shell.cuy-pseudo-fullscreen::before,.cuy-shell.cuy-fullscreen-fallback::before{content:"";position:absolute;inset:24% 0 auto;height:29%;background:#9bbcb2;clip-path:polygon(0 100%,16% 60%,28% 77%,49% 17%,66% 76%,82% 42%,100% 100%);opacity:.65}
}
@media(max-height:420px) and (orientation:landscape){
  .cuy-shell:fullscreen .cuy-topline,.cuy-shell.cuy-pseudo-fullscreen .cuy-topline,.cuy-shell.cuy-fullscreen-fallback .cuy-topline{left:6px;top:6px;right:270px;padding:3px 6px;min-height:34px;font-size:9px}
  .cuy-shell:fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-pseudo-fullscreen .cuy-screen .cuy-hud,.cuy-shell.cuy-fullscreen-fallback .cuy-screen .cuy-hud{top:6px;right:6px;width:250px}
  .cuy-screen .cuy-hud .cuy-boss-hud,.cuy-screen .cuy-hud .cuy-power-hud{min-height:21px;font-size:9px;padding:2px 5px}
}

.tq{--tq-ink:#14244a;--tq-blue:#3449d8;--tq-mint:#8de5c9;--tq-orange:#ff9a60;--tq-line:#dbe1ee;--tq-muted:#59647d;color:var(--tq-ink);max-width:1320px;margin:auto;padding:24px 36px 72px;font-family:inherit}
.tq *{box-sizing:border-box}
.tq button,.tq input,.tq select{font:inherit}
.tq button{cursor:pointer}
.tq button:disabled{cursor:default;opacity:.45}
.tq :focus-visible{outline:3px solid #ef8b46;outline-offset:3px}
.tq-topbar,.tq-top-actions,.tq-actions,.tq-stage-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tq-topbar{justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--tq-line);font-size:13px;color:var(--tq-muted)}
.tq-course-bridge{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:17px 0 0;padding:15px 18px;border:1px solid #afc4f4;border-radius:13px;background:linear-gradient(110deg,#e8efff,#eefbf8);color:#203e91;text-decoration:none;min-width:0}
.tq-course-bridge>span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.tq-course-bridge strong{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.tq-course-bridge small{font-size:12px;line-height:1.45;color:#526582}
.tq-course-bridge>span:last-child{font-size:23px;flex:0 0 auto}
.tq-course-bridge:hover{background:#e2edff;text-decoration:none;border-color:#718ed4}
.tq-vector-guide:has(.tq-course-context){flex-wrap:wrap}
.tq-vector-guide:has(.tq-course-context)>div{flex-basis:100%}
.tq-vector-guide:has(.tq-course-context)>.tq-vector-help{flex:1 1 240px}
.tq-course-context{text-align:left}
.tq-back{color:var(--tq-ink);text-decoration:none;font-weight:700}
.tq-back:hover{text-decoration:underline}
.tq-lang{border:1px solid var(--tq-line);background:#fff;border-radius:9px;min-width:43px;min-height:38px;font-size:12px;font-weight:800;color:var(--tq-blue)}
.tq-kicker{font-size:11px;font-weight:850;letter-spacing:2px;color:var(--tq-blue);margin:0 0 14px;text-transform:uppercase}
.tq h1{font-size:clamp(37px,5vw,69px);line-height:1.05;letter-spacing:-.055em;margin:0}
.tq h3{font-size:23px;letter-spacing:-.03em;margin:0 0 10px}
.tq-lede{font-size:clamp(17px,2vw,22px);line-height:1.55;color:var(--tq-muted);max-width:670px;margin:24px 0 28px}
.tq-small{font-size:12px;line-height:1.55;color:var(--tq-muted)}
.tq-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:40px;align-items:center;padding:55px 0 35px;min-height:570px}
.tq-intro-copy{padding:20px 0}
.tq-intro-art{background:#172553;color:#fff;border-radius:28px;min-height:420px;overflow:hidden;box-shadow:0 24px 55px #14244a22;padding:30px;position:relative;transform:rotate(1.5deg)}
.tq-intro-art:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:#4359e6;filter:blur(55px);top:-110px;right:-100px;opacity:.6}
.tq-art-top,.tq-art-foot{position:relative;z-index:1;font-size:11px;letter-spacing:2px;font-weight:800;color:#bec9ef}
.tq-art-tokens{display:flex;gap:7px;margin-top:60px;position:relative;z-index:1}
.tq-art-tokens span{background:#f8f5e9;color:#1a2650;font-size:clamp(17px,2vw,25px);font-weight:850;padding:11px 12px;border-radius:11px;box-shadow:0 5px 0 #0b173d}
.tq-art-tokens span:nth-child(2){background:var(--tq-orange)}
.tq-art-tokens span:nth-child(3){background:var(--tq-mint)}
.tq-intro-art svg{display:block;position:relative;z-index:1;width:100%;height:120px;overflow:visible;margin-top:5px}
.tq-intro-art path{fill:none;stroke:#9db5f5;stroke-width:1.5;opacity:.75}
.tq-intro-art path:nth-child(2){stroke:#ffb989;stroke-width:3}
.tq-intro-art path:nth-child(3){stroke:#a1ebd3;stroke-width:2.3}
.tq-intro-art circle{fill:#e6f897}
.tq-art-result{display:flex;gap:16px;align-items:center;position:relative;z-index:1;background:#26376c;border:1px solid #6177ad;border-radius:18px;padding:15px;margin-left:45px}
.tq-art-spark{display:grid;place-items:center;background:#d7f2a1;border-radius:50%;height:44px;width:44px;color:#1b2a53;font-size:25px}
.tq-art-result small{display:block;font-size:10px;letter-spacing:1.6px;color:#b2c9ec}
.tq-art-result strong{display:block;font-size:20px;letter-spacing:-.03em}
.tq-art-foot{display:flex;justify-content:space-between;margin-top:25px}
.tq-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--tq-line);background:#fff;color:var(--tq-ink);border-radius:11px;padding:10px 16px;min-height:45px;font-weight:750;text-decoration:none;box-shadow:0 3px 0 #0e22520a;transition:transform .16s,background .16s,box-shadow .16s}
.tq-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #0e22521a}
.tq-primary{background:var(--tq-blue);border-color:var(--tq-blue);color:#fff}
.tq-primary:hover:not(:disabled){background:#2538c0}
.tq-quiet{background:#eff1fc;border-color:#eff1fc}
.tq-text-button{background:none;border:0;color:var(--tq-blue);padding:7px 0;min-height:38px;text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:700}
.tq-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;padding-top:36px}
.tq-sidebar{align-self:start;position:sticky;top:14px}
.tq-rail{display:flex;flex-direction:column;gap:5px}
.tq-rail-item{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--tq-ink);border-radius:10px;padding:9px 7px;font-size:13px;font-weight:650;min-height:44px}
.tq-rail-item:hover{background:#f0f3fb}
.tq-rail-item.active{background:#e8edff;border-color:#cbd5fc;color:#243ba5}
.tq-rail-number{color:#8792a9;font-size:11px;font-weight:800}
.tq-rail-stars{color:#d4773f;text-align:right;font-size:12px;white-space:nowrap}
.tq-main{min-width:0}
.tq-mission-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:0 0 23px}
.tq-mission-heading h1{font-size:clamp(33px,3.8vw,52px)}
.tq-status-mark{background:#fff1db;color:#8c4c1c;border-radius:30px;padding:7px 12px;white-space:nowrap;font-size:12px;font-weight:800}
.tq-stage{border:1px solid var(--tq-line);border-radius:25px;background:#fff;box-shadow:0 12px 35px #1833640a;padding:28px;min-width:0}
.tq-instruction{font-size:18px;line-height:1.55;max-width:720px;margin:0 0 24px}
.tq-card{min-width:0;background:#f7f9fd;border:1px solid #e5e9f2;border-radius:16px;padding:18px;margin:0 0 16px}
.tq-card-label{font-size:11px;font-weight:850;letter-spacing:1.3px;text-transform:uppercase;color:#465c92;margin-bottom:12px}
.tq-card strong{font-size:20px;letter-spacing:-.03em}
.tq-card small{display:block;color:var(--tq-muted);font-size:12px;line-height:1.45;margin-top:6px}
.tq-token-bank,.tq-token-dock,.tq-op-bank,.tq-op-line,.tq-sequence{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:48px}
.tq-token{background:#fff;border:1px solid #cbd5e8;border-bottom:3px solid #aebbd2;border-radius:10px;min-height:49px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;color:var(--tq-ink);font-size:17px;font-weight:800}
.tq-token:hover:not(:disabled){background:#eaf3ff}
.tq-token small{font-size:10px;background:#e8edf8;color:#40537d;border-radius:4px;padding:3px 5px;margin:0}
.tq-token.selected{background:#e5fff2;border-color:#80d6b5;border-bottom-color:#4ba986}
.tq-token.selected span{font-size:12px;margin-left:4px}
.tq-placeholder{color:#8490a8;font-style:italic}
.tq-word{margin-top:15px;font-size:25px;font-weight:850;letter-spacing:-.03em;overflow-wrap:anywhere}
.tq-numbers{border:1px solid var(--tq-line);border-radius:12px;margin:16px 0 22px;background:#fff}
.tq-numbers summary{cursor:pointer;padding:12px 15px;color:#354b9d;font-size:13px;font-weight:800}
.tq-numbers>div{padding:0 15px 15px;color:var(--tq-muted);font-size:13px;line-height:1.55}
.tq-numbers p{margin:6px 0 10px}
.tq-numbers code{display:block;overflow:auto;white-space:normal;overflow-wrap:anywhere;background:#172553;color:#eaf6fb;border-radius:9px;padding:12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.75}
.tq-equation{display:flex;align-items:center;gap:10px}
.tq-equation .tq-card{flex:1}
.tq-operator{font-size:26px;font-weight:800;color:var(--tq-blue)}
.tq-numeric-row{display:flex;gap:10px;flex-wrap:wrap}
.tq-numeric-row label{display:flex;align-items:center;gap:5px;font-weight:800}
.tq-numeric-row input{width:79px;max-width:18vw;border:1px solid #bbc7dc;border-radius:8px;padding:9px;color:var(--tq-ink);background:#fff}
.tq-vector-guide{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:16px 18px;border:1px solid #cbd8fb;border-radius:14px;background:#f0f4ff;color:var(--tq-ink)}
.tq-vector-guide strong{display:block;line-height:1.45}
.tq-vector-guide p{margin:5px 0 0;color:var(--tq-muted);font-size:14px}
.tq-vector-guide>div{flex:1 1 auto;min-width:0}
.tq-vector-help{flex:0 1 280px;max-width:100%;white-space:normal}
.tq-vector-help span:first-child{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
.tq-vector-help small{font-size:11px;font-weight:600;opacity:.88}
.tq-stage [data-check="2"]{margin:0 0 2px}
.tq-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tq-three .tq-card{margin-bottom:16px}
.tq-route,.tq-control{display:flex;align-items:center;justify-content:space-between;gap:15px;line-height:1.35;margin:10px 0;color:var(--tq-ink);font-size:14px;font-weight:650}
.tq-route select,.tq-control select,.tq-choice select{border:1px solid #b9c6db;border-radius:8px;padding:8px 10px;background:#fff;color:var(--tq-ink);min-height:42px;max-width:100%}
.tq-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tq-two .tq-card{min-width:0}
.tq-knobs{display:flex;flex-direction:column;gap:16px}
.tq-knobs label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.tq-knobs input,.tq-control input[type=range]{width:100%;accent-color:var(--tq-blue)}
.tq-vector-read{margin-top:15px;padding:8px;border-radius:8px;background:#e6edff;font-weight:750;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.tq-bar{display:grid;grid-template-columns:minmax(70px,auto) minmax(30px,1fr) 36px;gap:8px;align-items:center;font-size:12px;margin:8px 0}
.tq-bar span{overflow-wrap:anywhere}
.tq-bar-track{height:10px;border-radius:99px;background:#e0e6f0;overflow:hidden}
.tq-bar-track i{display:block;height:100%;background:#5c6bdd;border-radius:99px;transition:width .15s}
.tq-bar-track i.mint{background:#42b690}
.tq-bar-track i.orange{background:#e48047}
.tq-bar b{text-align:right;font-size:11px}
.tq-meter-note{color:var(--tq-muted);font-size:13px;line-height:1.45;margin:12px 0 0}
.tq-mask{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:420px}
.tq-mask>b{font-size:11px;color:var(--tq-muted);display:grid;place-items:center}
.tq-mask-cell{aspect-ratio:1;min-height:38px;border:1px solid #c8d2e5;border-radius:8px;color:#9ba6b9;background:#e9edf4;font-size:18px}
.tq-mask-cell.on{background:#8ae2c4;color:#173b48;border-color:#5ebd9b}
.tq-mask-cell.leak{background:#ffb08c;color:#6a2313;border-color:#ea784e}
.tq-combine{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:16px;overflow-wrap:anywhere}
.tq-combine span{color:var(--tq-muted)}
.tq-op{border:1px solid #aebbe1;background:#e7edff;color:#2643aa;border-radius:9px;padding:9px;font-size:13px;font-weight:750;min-height:43px}
.tq-op-fixed{background:#172553;color:#fff;border-radius:8px;padding:8px 13px;font-weight:850}
.tq-op-empty{border:1px dashed #bac3d3;border-radius:8px;color:#9ca7ba;min-width:38px;min-height:38px;display:grid;place-items:center}
.tq-sequence span{background:#fff;border:1px solid #b6c2d9;border-radius:9px;padding:8px 10px;font-weight:750}
.tq-sequence small{display:block;margin:0 0 2px;font-size:10px;color:var(--tq-muted)}
.tq-mini-flow{font-size:11px;color:#53689b;line-height:1.5;margin-top:18px;font-weight:750}
.tq-choice{display:flex;gap:10px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-top:18px}
.tq-choice label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:750}
.tq-inline-success{color:#247655;font-weight:700;font-size:14px}
.tq-target{background:#e5fff4;border-radius:11px;padding:13px;margin:14px 0}
.tq-target span{font-size:12px;color:#326851}
.tq-target strong{display:block;font-size:31px}
.tq-loss{min-height:160px;height:160px;display:flex;gap:3px;align-items:end;border-bottom:1px solid #b9c6db;padding:5px}
.tq-loss span{width:13px;max-width:10%;background:#ec9161;border-radius:4px 4px 0 0}
.tq-loss p{align-self:center;color:var(--tq-muted);font-size:13px}
.tq-feedback{min-height:26px;color:#80451e;font-size:14px;line-height:1.5;font-weight:650;margin:17px 0 8px}
.tq-feedback[data-kind=success]{color:#157353}
.tq-feedback[data-kind=hint]{color:#3b55ac}
.tq-stage-foot{border-top:1px solid var(--tq-line);padding-top:12px;gap:7px 20px}
.tq-stage-foot .tq-button{margin-left:auto}
.tq-recap{background:#e9fff5;border:1px solid #a7d9bc;padding:20px;border-radius:16px;margin:18px 0 0;line-height:1.6}
.tq-recap p{margin:0 0 16px}
.tq-toy-label{display:inline-block;margin:-8px 0 18px;background:#eaf2fc;border:1px solid #c9d8ee;color:#3b567d;border-radius:99px;padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.02em}
.tq-share{width:100%;border-top:1px dashed var(--tq-line);padding-top:15px;display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.tq-share label{flex:1 1 250px;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;color:var(--tq-muted)}
.tq-share textarea,.tq-copy-fallback{width:100%;min-height:57px;border:1px solid #b9c6db;border-radius:9px;background:#fff;color:var(--tq-ink);padding:9px 10px;resize:vertical;font-size:13px;line-height:1.45}
.tq-copy-fallback{flex:1 0 100%}
.tq-reference{margin:20px 0 0;border:1px solid var(--tq-line);background:#f8f9fd;border-radius:15px;font-size:14px;line-height:1.6}
.tq-reference summary{padding:16px 18px;cursor:pointer;color:#2c439e;font-weight:850}
.tq-reference-body{padding:0 18px 20px;color:#45526f}
.tq-reference-body>p{margin:10px 0}
.tq-reference-path{background:#e8edff;border-radius:9px;color:#263f94;padding:10px 12px;font-weight:750;overflow-wrap:anywhere}
.tq-reference-grid,.tq-reference-equations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0}
.tq-reference-grid section,.tq-reference-equations>div{background:#fff;border:1px solid #e3e8f1;border-radius:10px;padding:13px}
.tq-reference h3{font-size:15px;letter-spacing:0;margin:0 0 6px}
.tq-reference p{margin:0 0 8px}
.tq-reference code{display:block;background:#172553;color:#e7eefb;border-radius:8px;padding:11px;line-height:1.8;overflow-wrap:anywhere;white-space:normal}
.tq-reference a{color:#2f45b7;text-underline-offset:2px}
.tq [hidden]{display:none!important}
@media(max-width:950px){.tq-layout{grid-template-columns:1fr}.tq-sidebar{position:static}.tq-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tq-sidebar>.tq-small{display:none}.tq-intro{grid-template-columns:1fr 1fr;gap:20px}.tq-intro-art{min-height:350px;padding:22px}.tq-art-tokens{margin-top:37px}.tq-art-result{margin-left:0}}
@media(max-width:700px){.tq{padding:18px 20px 56px}.tq-intro{grid-template-columns:1fr;min-height:auto;padding:38px 0}.tq-intro-art{max-width:460px;width:100%;min-height:330px}.tq-layout{gap:23px;padding-top:25px}.tq-rail{max-height:148px;overflow:auto;padding:2px;grid-template-columns:repeat(2,minmax(0,1fr))}.tq-rail-item{font-size:11px;min-height:42px;grid-template-columns:20px minmax(0,1fr)}.tq-mission-heading{align-items:start}.tq-stage{padding:20px}.tq-instruction{font-size:16px}.tq-two,.tq-reference-grid,.tq-reference-equations{grid-template-columns:1fr}.tq-top-actions{justify-content:flex-end}.tq-rail-stars{font-size:10px}}
@media(max-width:700px){.tq-vector-guide{align-items:stretch;flex-direction:column}.tq-vector-help{align-self:flex-start;flex-basis:auto;width:min(100%,280px);white-space:normal;text-align:center}}
@media(max-width:700px){.tq-numeric-row.tq-embedding-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tq-numeric-row.tq-embedding-inputs label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;min-width:0}.tq-numeric-row.tq-embedding-inputs input{box-sizing:border-box;width:100%;min-width:0;max-width:none}}
@media(max-width:420px){.tq{padding:14px 13px 48px}.tq-topbar{align-items:start}.tq-top-actions{gap:7px;font-size:10px}.tq-stage{padding:15px;border-radius:17px}.tq-status-mark{font-size:10px;padding:6px 8px}.tq-mission-heading h1{font-size:32px}.tq-three{grid-template-columns:1fr}.tq-three .tq-card{margin-bottom:0}.tq-three+.tq-card{margin-top:16px}.tq-equation{align-items:stretch}.tq-equation .tq-card{padding:9px}.tq-equation .tq-card strong{font-size:14px}.tq-numeric-row input{width:59px;max-width:none}.tq-route{align-items:start}.tq-mask-cell{min-height:31px}.tq-choice>.tq-button{width:100%}.tq-art-result strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.tq *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.tq-rail-item>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
@media(max-width:420px){.tq-mission-heading{flex-wrap:wrap;gap:10px}.tq-rail{overflow-x:hidden}.tq-mission-heading>div{min-width:0}}

.tq-reference { margin: 28px 0; border: 1px solid #d9deeb; border-radius: 20px; background: #fff; color: #202238; }
.tq-reference summary { padding: 20px 24px; cursor: pointer; font-weight: 650; }
.tq-reference summary:focus-visible { outline: 3px solid #e07517; outline-offset: 3px; }
.tq-reference-body { padding: 0 24px 24px; font-size: 15px; line-height: 1.65; }
.tq-reference-body p { margin: 10px 0 16px; max-width: 80ch; }
.tq-reference-path { background: #edf0ff; padding: 15px; border-radius: 12px; color: #28409b; font-weight: 600; }
.tq-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 30px; margin: 28px 0; }
.tq-reference h3 { font-size: 17px; line-height: 1.3; }
.tq-reference-equations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 20px 0 30px; }
.tq-reference code { display: block; overflow-wrap: anywhere; line-height: 1.8; font-size: 12px; margin-top: 12px; padding: 14px; background: #edf4ef; border-radius: 10px; }
.tq-reference a { color: #2345eb; }
@media(max-width:700px) { .tq-reference-grid,.tq-reference-equations { grid-template-columns: minmax(0,1fr); } .tq-reference-body { padding: 0 16px 20px; } .tq-reference summary { padding: 18px 16px; } }

.oc-footer-button{border:0;background:none;color:inherit;font:inherit;font-weight:650;padding:0;min-height:34px;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px}
.oc-footer-button:hover{color:#2345eb}
.oc-footer-links{flex-wrap:wrap;align-items:center;max-width:100%}
.oc-dialog{box-sizing:border-box;width:min(720px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100dvh - 32px);overflow-y:auto;border:1px solid #d9e2f0;border-radius:24px;padding:26px;background:#fcfdff;color:#172746;box-shadow:0 24px 90px #12233f4d;font-family:inherit}
.oc-dialog::backdrop{background:#12233f80;backdrop-filter:blur(5px)}
.oc-dialog *{box-sizing:border-box}
.oc-dialog :focus-visible,.oc-footer-button:focus-visible{outline:3px solid #e89b3c;outline-offset:3px}
.oc-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.oc-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#526aa0;margin:0 0 8px}
.oc-dialog h2{font-size:clamp(25px,4vw,36px);line-height:1.08;letter-spacing:-1.3px;margin:0;color:#172746}
.oc-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-height:42px;border:1px solid #d2dceb;border-radius:50%;background:#fff;color:#2a3d61;font:inherit;font-size:26px;line-height:1;cursor:pointer;padding:0}
.oc-close:hover{background:#eaf0fa}
.oc-intro{font-size:15px;line-height:1.55;color:#53647c;margin:15px 0 22px}
.oc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.oc-project{display:flex;align-items:flex-start;gap:12px;min-width:0;border:1px solid #dbe4ee;border-radius:15px;padding:18px 14px;background:#fff;text-decoration:none;color:#172746;transition:transform .15s,box-shadow .15s}
.oc-project:hover{transform:translateY(-2px);box-shadow:0 8px 20px #17305512;text-decoration:none}
.oc-project[aria-current=page]{background:#f1f5ff;border-color:#b9c9f4}
.oc-mark{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;background:#e2ebff;color:#2a51bf;border-radius:11px;font-size:13px;font-weight:850;letter-spacing:-.4px}
.oc-games .oc-mark{background:#ffe8ce;color:#975326}.oc-mate .oc-mark{background:#e3f0e6;color:#32654d}.oc-crypto .oc-mark{background:#eae3ff;color:#665096}
.oc-project-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.oc-project-copy strong{font-size:19px;font-weight:750;letter-spacing:-.5px}
.oc-project-copy>span{font-size:13px;line-height:1.45;color:#586980;overflow-wrap:anywhere}
.oc-current{align-self:flex-start;border-radius:99px;padding:3px 7px;background:#e0e9ff;color:#244daa;font-size:10px;font-weight:800;margin-top:3px}
.oc-arrow{margin-left:auto;color:#7e92b0;font-size:18px;line-height:1.1}
.oc-note{color:#68788e;font-size:11px;margin:18px 0 0;line-height:1.45}
@media(max-width:520px){.oc-dialog{padding:20px 16px;border-radius:18px}.oc-grid{grid-template-columns:minmax(0,1fr)}.oc-project{padding:14px}.oc-dialog-head{gap:9px}.oc-close{flex-basis:38px;width:38px;height:38px;min-height:38px}.oc-project-copy>span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.oc-project{transition:none}.oc-project:hover{transform:none}.oc-dialog::backdrop{backdrop-filter:none}}