/* Under the hood: the pixel-console treatment (2 November 2026). Every rule is scoped to body.px, so no other page is touched. Source of truth for the look: this file; the page markup carries the pixel art as inline SVG. */
/* Silkscreen, latin: the pixel face for labels on this page only (SIL Open Font License, github.com/googlefonts/silkscreen; woff2 conversion). */
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/silkscreen-400-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/silkscreen-700-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.px { --pixel: "Silkscreen", "Courier New", monospace; --st-orange: #e8801f; --st-peach: #ffc3a0; --st-gold: #f5b800; --st-teal: #12868a; }
.px ::selection { background: var(--yellow); color: var(--ink); }
.px .stripe5, .px .hc-stripes, .px .plate { background: linear-gradient(var(--st-orange) 0 4px, var(--st-peach) 4px 8px, var(--st-gold) 8px 12px, var(--st-teal) 12px 16px, var(--ink) 16px 20px); }
.px .pxf { clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .hero-f { position: relative; isolation: isolate; overflow: hidden; }
.px .hero-bands { position: absolute; inset: 0 0 62px 0; z-index: -2; background: linear-gradient(to bottom, #3a1f66 0 13%, #6a2c91 13% 27%, #e4572e 27% 41%, #e8801f 41% 56%, #ffc3a0 56% 76%, #f5b800 76% 100%); }
.px .hero-ground { height: 62px; border-top: 6px solid var(--ink); background: repeating-linear-gradient(var(--teal) 0 16px, var(--st-teal) 16px 32px); }
.px .hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; padding-top: 64px; padding-bottom: 0; }
.px .hero-card { background: var(--ink); padding: 6px; clip-path: polygon(0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0, calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px, 100% 100%, 0 100%); margin-bottom: 0; align-self: end; }
.px .hero-card .hc-stripes { height: 20px; margin-top: 10px; }
.px .hero-card .hc-body { background: var(--paper); padding: 28px 34px 34px; }
.px .hero-card .uth-kicker { align-self: flex-start; font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; background: var(--ink); color: var(--paper); padding: 10px 14px; text-transform: lowercase; }
.px .hero-card .uth-kicker span { color: var(--yellow); }
.px .hero-card h1.h { font-weight: 800; font-size: clamp(46px, 6vw, 88px) !important; line-height: 0.98 !important; letter-spacing: -0.035em; color: var(--ink); text-shadow: 4px 4px 0 var(--st-orange); text-wrap: balance; }
.px .hero-card .lede { max-width: none; }
.px .hero-art { align-self: end; margin-bottom: 0; }
.px .hero-art svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
@media (max-width: 960px) {
.px .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
.px .hero-card { margin-bottom: 8px; }
.px .hero-art svg { max-width: 360px; }
.px .hero-card .hc-body { padding: 24px 22px 28px; }
}
.px .uth-toc { background: var(--ink); border: 0; border-bottom: 6px solid var(--st-orange); }
.px .uth-toc .wrap { gap: 0 8px; padding-block: 6px; }
.px .uth-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--paper); font-family: var(--pixel); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.px .uth-toc a::before { color: var(--yellow); margin-right: 4px; }
.px .uth-toc a:hover { color: var(--yellow); background: rgba(255, 255, 255, 0.08); }
.px .uth-toc .nb { white-space: normal; }
.px .divider { display: block; line-height: 0; height: clamp(96px, 9.4vw, 140px); border-block: 6px solid var(--ink); background: var(--ink); overflow: hidden; }
.px .divider svg { display: block; width: 100%; height: 100%; }
.px main.uth > .divider + .band { margin-top: 0; }
.px .tagrow { display: flex; align-items: center; gap: 14px; }
.px .mk { flex: none; width: 56px; height: 56px; padding: 7px 7px 11px; background: linear-gradient(var(--yellow) calc(100% - 4px), var(--ink) 0); clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); display: block; }
.px .mk svg { display: block; width: 100%; height: 100%; }
.px .uth-head .uth-tag { font-family: var(--pixel); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.px .uth-head .title::after { content: ""; display: block; width: 160px; height: 20px; margin-top: 18px; background: linear-gradient(var(--st-orange) 0 4px, var(--st-peach) 4px 8px, var(--st-gold) 8px 12px, var(--st-teal) 12px 16px, var(--ink) 16px 20px); }
.px .band-ink .uth-head .title::after { background: linear-gradient(#3a1f66 0 5px, #6a2c91 5px 10px, #2a2f55 10px 15px, var(--st-teal) 15px 20px); }
.px .uth-head.has-sprite { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
.px .uth-head.has-sprite > .head-sprite { grid-column: 2; grid-row: 1 / span 3; align-self: end; width: 120px; }
.px .head-sprite svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
.px .uth-head.has-sprite { display: flex; }
.px .head-sprite { display: none; }
.px .mk { width: 48px; height: 48px; padding: 6px 6px 9px; }
}
.px .uth-table, .px .uth-card, .px .uth-where > div, .px .uth-rule, .px .uth-limits li, .px .uth-nope li, .px .uth-addr, .px .uth-gate, .px .paper.arch-card, .px .uth-never li { border-radius: 0; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .uth-table, .px .uth-card, .px .paper.arch-card, .px .uth-addr, .px .uth-chart { border: 4px solid var(--ink); }
.px .paper.arch-card { box-shadow: none; }
.px .uth-chart { border-radius: 0; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .paper.arch-card::before { display: none; }
.px .uth-table thead th { font-family: var(--pixel); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.px .uth-where > div { border: 4px solid var(--ink); }
.px .uth-gate pre, .px .uth code { border-radius: 0; }
.px .uth-pill { border-radius: 0; font-family: var(--pixel); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.px .uth-never li { background: var(--ink); }
.px .uth-layers { display: flex; flex-direction: column; gap: 0; padding: 0; }
.px .uth-layers li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 36px; row-gap: 6px; align-items: start; border: 4px solid var(--ink); border-radius: 0; box-shadow: none; clip-path: polygon(0 calc(8px * 2), 8px calc(8px * 2), 8px 8px, calc(8px * 2) 8px, calc(8px * 2) 0, calc(100% - 8px * 2) 0, calc(100% - 8px * 2) 8px, calc(100% - 8px) 8px, calc(100% - 8px) calc(8px * 2), 100% calc(8px * 2), 100% calc(100% - 8px * 2), calc(100% - 8px) calc(100% - 8px * 2), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px * 2) calc(100% - 8px), calc(100% - 8px * 2) 100%, calc(8px * 2) 100%, calc(8px * 2) calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 8px * 2), 0 calc(100% - 8px * 2)); padding: 40px 28px 24px; position: relative; margin-top: -4px; }
.px .uth-layers li:first-child { margin-top: 0; }
.px .uth-layers li:nth-child(1) { margin-right: 7%; }
.px .uth-layers li:nth-child(3) { margin-left: 7%; background: #fffaf2; }
.px .uth-layers li > .uth-mono { grid-column: 1; grid-row: 1; }
.px .uth-layers li > h3 { grid-column: 1; grid-row: 2; }
.px .uth-layers li > p { grid-column: 2; grid-row: 1 / span 2; }
.px .uth-layers li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: linear-gradient(var(--st-orange) 0 4px, var(--st-peach) 4px 8px, var(--st-gold) 8px 12px, var(--st-teal) 12px 16px, var(--ink) 16px 20px); }
.px .uth-layers li:nth-child(2)::before { background: linear-gradient(var(--st-teal) 0 4px, var(--teal) 4px 8px, var(--st-gold) 8px 12px, var(--st-peach) 12px 16px, var(--ink) 16px 20px); }
.px .uth-layers li:nth-child(3)::before { background: linear-gradient(var(--ink) 0 4px, var(--teal-deep) 4px 8px, var(--st-teal) 8px 12px, var(--st-gold) 12px 16px, var(--yellow) 16px 20px); }
.px .uth-layers .uth-mono { font-family: var(--pixel); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 700px) {
.px .uth-layers li { display: flex; flex-direction: column; margin-inline: 0 !important; padding: 38px 20px 22px; }
}
.px .mrow .uth-also { display: block; margin-top: 8px; font-family: var(--font-body, Nunito, sans-serif); font-weight: 400; font-size: 15px; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) {
}
@media (max-width: 520px) {
}
.px .uc-fill:not([style*="--w:0.0%"]) { border-radius: 0; height: 18px; background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.85) 8px 10px); box-shadow: 0 3px 0 rgba(31, 36, 51, 0.35); }
.px .uc-key .uc-sw { border-radius: 0; }
.px .uth-bar { height: 14px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--crumb) 0 8px, var(--paper) 8px 10px); }
.px .uth-bar i { border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.85) 8px 10px); }
.px .rpg { background: var(--ink); padding: 4px; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .rpg-in { background: #fff; padding: 4px; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .rpg-pane { background: var(--teal-deep); padding: 24px 32px 34px; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .rpg-title { margin: 0 0 28px; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 4px double rgba(255, 255, 255, 0.55); }
.px .rpg-title .ptr { width: 12px; height: 20px; color: var(--yellow); flex: none; }
.px .pips { display: flex; gap: 8px; }
.px .pips i { width: 12px; height: 12px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.px .rpg-pane .uth-pipe { gap: 56px; }
.px .rpg-pane .uth-steps li { padding-left: 72px; padding-bottom: 28px; }
.px .rpg-pane .uth-steps li::before { width: 46px; height: 46px; border-radius: 0; font-family: var(--pixel); font-weight: 700; font-size: 22px; box-shadow: 4px 4px 0 var(--ink); }
.px .rpg-pane .uth-steps li:not(:last-child)::after { left: 21px; top: 56px; bottom: 6px; width: 4px; background: repeating-linear-gradient(var(--yellow) 0 4px, transparent 4px 10px); opacity: 0.55; }
.px .rpg-pane .uth-steps li:first-child h3 { position: relative; }
.px .rpg-pane .uth-steps li:first-child h3::before { content: ""; position: absolute; left: -20px; top: 3px; width: 10px; height: 18px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd54a' d='M0 0h1v9h-1zM1 1h1v7h-1zM2 2h1v5h-1zM3 3h1v3h-1zM4 4h1v1h-1z'/%3E%3C/svg%3E") center / 10px 18px no-repeat; image-rendering: pixelated; }
@media (prefers-reduced-motion: no-preference) {
.px .rpg-pane .uth-steps li:first-child h3::before { animation: blink 1.2s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }
.px .rpg-pane .uth-rule:not(.uth-rule-big) { background: var(--teal); }
.px .rpg-pane .uth-rule-big { background: var(--yellow); }
@media (max-width: 960px) {
.px .rpg-pane .uth-pipe { gap: 36px; }
}
@media (max-width: 560px) {
.px .rpg-pane { padding: 20px 16px 20px; }
.px .rpg-pane .uth-steps li { padding-left: 60px; }
.px .rpg-pane .uth-steps li::before { width: 40px; height: 40px; font-size: 19px; }
.px .rpg-pane .uth-steps li:not(:last-child)::after { left: 18px; top: 50px; }
.px .rpg-pane .uth-steps li:first-child h3::before { left: -18px; }
}
.px .inv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.px .slot { background: var(--white); border: 4px solid var(--ink); clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.px .slot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.px .slot-ico { display: block; flex: none; width: 60px; height: 60px; padding: 6px 6px 10px; background: linear-gradient(var(--paper) calc(100% - 4px), var(--crumb) 0); }
.px .slot-ico svg { display: block; width: 100%; height: 100%; }
.px .kept { font-family: var(--pixel); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 10px; border: 3px solid currentColor; background: var(--white); line-height: 1; }
.px .slot h3 { font-size: 20px; }
.px .slot dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.px .slot dd { font-size: 15.5px; color: var(--ink-2); }
.px .slot-empty { background: transparent; border: 4px dashed #c9b49b; min-height: 120px; align-items: center; justify-content: center; clip-path: none; }
.px .slot-empty .slot-ico { background: none; width: 64px; height: 24px; padding: 0; }
@media (max-width: 960px) {
.px .inv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px .slot-empty:last-child { display: none; }
}
@media (max-width: 640px) {
.px .inv { grid-template-columns: minmax(0, 1fr); }
.px .slot-empty { display: none; }
}
.px .uth-card { background: var(--white); }
.px .uth-card .uth-mono, .px .uth-mono { font-family: var(--pixel); }
.px .uth-big { font-family: var(--pixel); font-weight: 700; font-size: 56px; letter-spacing: 0; }
.px .uth-big small { font-family: var(--pixel); font-size: 20px; }
.px .uth-limits li { border: 3px solid rgba(255, 255, 255, 0.4); }
.px #limits { border-top: 0; }
.px .uth-nope { gap: 20px; }
.px .uth-nope li { border: 4px dashed var(--ink-2); gap: 8px; padding: 14px 18px 18px; }
.px .uth-nope .slot-ico { width: 52px; height: 52px; margin-bottom: 4px; }
.px .uth-gate { border-radius: 0; }
.px .report-side { display: flex; flex-direction: column; align-items: stretch; }
.px .report-side .report-sprite { display: block; width: min(250px, 60%); margin: 0 auto -4px; position: relative; z-index: 1; }
.px .report-side .plate { align-self: center; width: min(340px, 90%); height: 20px; margin-bottom: 22px; }
@media (max-width: 960px) {
.px .report-side .report-sprite { width: 190px; }
}
@media (max-width: 560px) {
.px { --cell: 6px; }
}
@media (max-width: 560px) {
.px .uth-toc .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
.px .uth-toc a { overflow-wrap: anywhere; }
}
.px .btn.btn:not(.nav-plain) { --u: 3px; --edge: var(--ink); --shade: var(--ink); --d: 2; position: relative; isolation: isolate; border: 0; border-radius: 0; min-height: 52px; padding: 2px 26px 8px; margin: 0 6px 6px 0;
  font-family: var(--pixel); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; gap: 10px; transform: none;
  box-shadow: 0 calc(var(--u) * -1) 0 0 var(--edge), 0 var(--u) 0 0 var(--edge), calc(var(--u) * -1) 0 0 0 var(--edge), var(--u) 0 0 0 var(--edge),
    calc(var(--u) * var(--d)) calc(var(--u) * (var(--d) + 1)) 0 0 var(--shade), calc(var(--u) * (var(--d) + 1)) calc(var(--u) * var(--d)) 0 0 var(--shade), calc(var(--u) * var(--d)) calc(var(--u) * var(--d)) 0 0 var(--shade), calc(var(--u) * (var(--d) + 1)) calc(var(--u) * (var(--d) + 1)) 0 calc(var(--u) * -1) var(--shade);
  transition: transform 0.12s steps(2), box-shadow 0.12s steps(2), background-color 0.12s; }
.px .btn.btn:not(.nav-plain)::after { content: ""; position: absolute; z-index: -1; left: 9px; right: 9px; bottom: 5px; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--st-orange) 0 20%, var(--st-peach) 20% 40%, var(--st-gold) 40% 60%, var(--st-teal) 60% 80%, var(--ink) 80%); }
.px .btn.btn:not(.nav-plain):hover { --d: 3; transform: translate(-2px, -2px); }
.px .btn.btn:not(.nav-plain):active { --d: 0; transform: translate(6px, 6px); transition-duration: 0.04s; }
.px .btn.btn:not(.nav-plain):focus-visible { outline: 3px dashed var(--ink); outline-offset: 10px; }
.px .btn.btn-teal:not(.nav-plain) { background: var(--teal); color: #ffd23f; }
.px .btn.btn-teal:not(.nav-plain):hover { background: var(--teal); color: #ffe27a; }
.px .btn.btn-white:not(.nav-plain) { background: var(--paper); color: var(--ink); }
.px .btn.btn-white:not(.nav-plain):hover { background: var(--white); color: var(--ink); }
.px .btn.btn-ink:not(.nav-plain) { background: var(--ink); color: var(--paper); --edge: var(--ink); --shade: var(--st-teal); }
.px .btn.btn-ink:not(.nav-plain):hover { background: var(--ink); color: var(--white); }
.px .btn.btn-yellow:not(.nav-plain) { background: var(--st-gold); color: var(--ink); --shade: var(--st-teal); }
.px .btn.btn-yellow:not(.nav-plain):hover { background: #ffd23f; color: var(--ink); }
.px .btn.btn-ink:not(.nav-plain)::after { background: linear-gradient(90deg, var(--st-orange) 0 20%, var(--st-peach) 20% 40%, var(--st-gold) 40% 60%, var(--st-teal) 60% 80%, var(--paper) 80%); }
.px .btn.btn-sm:not(.nav-plain) { min-height: 44px; font-size: 13px; padding: 1px 18px 8px; }
.px .hero .actions .btn.btn:not(.nav-plain), .px .hero .actions .btn.btn-teal:not(.nav-plain), .px .hero .actions .btn.btn-white:not(.nav-plain) { min-height: 56px; font-size: 16px; padding: 2px 28px 8px; border: 0; transform: none; }
.px .hero .actions .btn.btn:not(.nav-plain):hover { transform: translate(-2px, -2px); }
.px .hero .actions .btn.btn:not(.nav-plain):active { transform: translate(6px, 6px); }
.px .hero .actions { gap: 14px 20px; }
.px .footer .btn.btn:not(.nav-plain):focus-visible { outline-color: var(--white); }
.px .footer .btn.btn-yellow:not(.nav-plain) { --edge: var(--ink); }
@media (max-width: 560px) {
.px .btn.btn:not(.nav-plain) { white-space: normal; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.px .btn.btn:not(.nav-plain), .px .btn.btn:not(.nav-plain):hover, .px .hero .actions .btn.btn:not(.nav-plain):hover { transition: none; }
}
.px .h-ico { display: flex; align-items: center; gap: 14px; }
.px .h-ico .mk { width: 52px; height: 52px; padding: 6px 6px 10px; }
.px .uth-more li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.px .uth-more li > .mk { width: 52px; height: 52px; padding: 6px 6px 10px; margin-top: 2px; }
.px .uth-more li > div { min-width: 0; }
.px .arch-card .paper-label { font-family: var(--pixel); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--yellow); display: inline-block; padding: 8px 12px 6px; box-shadow: 4px 4px 0 var(--ink); margin-bottom: 20px; }
.px .arch-hint { font-family: var(--pixel) !important; font-size: 13px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2) !important; }
.px .arch .t-h { font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0; }
.px .arch text.t-h[font-size="22"] { font-size: 18px; }
.px .arch rect, .px .arch path { shape-rendering: crispEdges; }
.px .arch-card { background: #fff; }
.px .arch .t-px { font-family: var(--pixel); font-weight: 700; letter-spacing: 0.02em; }
.px .arch text { font-family: var(--body); }
.px .arch .t-px { font-family: var(--pixel); }
.px .arch-card { background: #fff; }
.px .uth-head .title { text-shadow: 3px 3px 0 var(--st-gold); }
.px .band-teal .uth-head .title, .px .band-ink .uth-head .title { text-shadow: 3px 3px 0 #000; }
.px .band-yellow .title, .px .band-yellow h2 { text-shadow: 3px 3px 0 #fff3e6; }
.px .uth-head .title::after { margin-top: 20px; }
.px .hero-grid { align-items: stretch; }
.px .hero-art { align-self: stretch; display: flex; align-items: flex-end; position: relative; }
.px .hero-art svg { margin-bottom: -2px; }
.px .hero-sign { position: absolute; top: 6%; left: 0; margin: 0; font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--yellow); padding: 10px 14px 8px; box-shadow: 4px 4px 0 rgba(0,0,0,.35); z-index: 2; }
@media (max-width: 960px) {
.px .hero-sign { top: 0; }
.px .hero-art { padding-top: 40px; }
}
.px .divider-thin { height: 20px; border-block: 4px solid var(--ink); background: linear-gradient(var(--st-orange) 0 25%, var(--st-peach) 25% 50%, var(--st-gold) 50% 75%, var(--st-teal) 75%); }
.px .uth-toc .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 8px; }
.px .uth-layers li:nth-child(1), .px .uth-layers li:nth-child(3) { margin-left: 0; margin-right: 0; }
.px .uth-layers li:nth-child(3) { background: var(--white); }
.px .uth-more li::before { content: none; }
.px .uth-more li { padding-left: 0; }
@media (min-width: 761px) {
.px .uth-nope { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.px .uth-nope li > p { margin: 0; }
.px .uth-card .uth-never { margin-top: 16px; }
.px .method { display: flex; flex-direction: column; gap: 22px; }
.px .method-h { font-size: 26px; }
.px .method-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.px .mcard { background: var(--white); border: 4px solid var(--ink); clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); padding: 0 0 22px; }
.px .mcard > p { margin: 0; padding: 0 22px; font-size: 16.5px; line-height: 1.6; }
.px .mcard > .mtag { display: flex; align-items: center; gap: 12px; padding: 12px 22px; margin-bottom: 16px; background: var(--ink); color: var(--paper); font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.px .mn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--yellow); color: var(--ink); font-size: 15px; }
.px .method-caveat { display: flex; gap: 18px; align-items: flex-start; background: var(--yellow); border: 4px solid var(--ink); clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); padding: 20px 24px; }
.px .method-caveat h3 { font-size: 21px; margin: 0 0 6px; }
.px .method-caveat p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.px .method-caveat .mk { background: linear-gradient(var(--paper) calc(100% - 4px), var(--ink) 0); }
@media (max-width: 860px) {
.px .method-cards { grid-template-columns: minmax(0, 1fr); }
.px .method-caveat { flex-direction: column; }
}
.px .hero-art svg { height: auto; flex: none; align-self: flex-end; }
.px .hero-art .hero-scene { padding: 0; }
@media (max-width: 760px) {
.px .uth-toc .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px .uth-toc a { font-size: 12px; padding: 0 6px; }
}
.px .ladder { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.px .ladder li { position: relative; background: var(--white); border: 4px solid var(--ink); padding: 18px 22px 22px 22px; margin-right: -4px; display: flex; flex-direction: column; gap: 8px; clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .ladder li:last-child { margin-right: 0; background: #fff6cf; }
.px .ladder h3 { font-size: 20px; margin: 0; }
.px .ladder p { margin: 0; font-size: 16px; line-height: 1.55; }
.px .ladder .ln { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--ink); color: var(--yellow); font-family: var(--pixel); font-weight: 700; font-size: 17px; }
.px .ladder li:last-child .ln { background: var(--st-teal); color: #fff; }
.px .ladder li + li::before { content: ""; position: absolute; left: -13px; top: 34px; width: 14px; height: 18px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2; }
@media (max-width: 860px) {
.px .ladder { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.px .ladder li { margin-right: 0; }
.px .ladder li + li::before { display: none; }
}
.px .score { margin-bottom: 26px; }
.px .score table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.px .score th, .px .score td { text-align: left; vertical-align: middle; }
.px .score .sc-groups td { background: transparent; border: 0; padding: 0; }
.px .score .sc-groups th { font-family: var(--pixel); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 16px 10px; color: #fff; border-left: 4px solid var(--ink); }
.px .score .sg-1 { background: var(--st-orange); color: var(--ink) !important; }
.px .score .sg-2 { background: var(--st-teal); }
.px .score .sc-who th { font-family: var(--pixel); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.px .score .sc-who th:nth-child(2), .px .score .sc-who th:nth-child(4) { box-shadow: inset 0 -4px 0 #e4572e; }
.px .score .sc-who th:nth-child(3), .px .score .sc-who th:nth-child(5) { box-shadow: inset 0 -4px 0 var(--st-teal); }
.px .score .sc-who th:nth-child(4), .px .score .sc-who th:nth-child(2) { border-left: 4px solid var(--ink); }
.px .score tbody th { font-weight: 800; font-size: 16px; padding: 16px 16px 14px; background: var(--paper); }
.px .score tbody th small { display: block; font-family: var(--pixel); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.px .score tbody td { padding: 14px 16px; border-top: 2px solid var(--crumb); }
.px .score tbody th { border-top: 2px solid var(--crumb); }
.px .score td:nth-child(2), .px .score td:nth-child(4) { border-left: 4px solid var(--ink); }
.px .score .sv { display: block; font-weight: 800; font-size: 16.5px; line-height: 1.25; }
.px .score .sc-cf .sv { color: var(--teal-deep); }
.px .score .sc-zero .sv::before { content: "\2713  "; color: var(--st-teal); }
.px .score .sc-none .sv { color: var(--ink-2); font-weight: 600; }
.px .score .sbar { display: block; height: 12px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--crumb) 0 8px, var(--paper) 8px 10px); }
.px .score .sbar i { display: block; height: 100%; background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.85) 8px 10px); }
.px .score .sc-lg .sbar i { background-color: #e4572e; }
.px .score .sc-cf .sbar i { background-color: var(--st-teal); }
@media (max-width: 860px) {
.px .score thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.px .score table, .px .score tbody, .px .score tr, .px .score th, .px .score td { display: block; }
.px .score tbody tr { border-top: 4px solid var(--ink); }
.px .score tbody tr:first-child { border-top: 0; }
.px .score tbody th { border-top: 0; }
.px .score tbody td { border-left: 0 !important; border-top: 0; padding: 10px 16px; display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 12px; align-items: center; }
.px .score tbody td::before { content: attr(data-label); font-family: var(--pixel); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); }
.px .score td .sbar { grid-column: 2; }
}
@media (max-width: 560px) {
.px .score tbody td { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
.px .score td .sbar { grid-column: 1; }
}
.px .more-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; align-items: start; }
.px .more { background: var(--white); border: 4px solid var(--ink); clip-path: polygon(0 calc(4px * 2), 4px calc(4px * 2), 4px 4px, calc(4px * 2) 4px, calc(4px * 2) 0, calc(100% - 4px * 2) 0, calc(100% - 4px * 2) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(4px * 2), 100% calc(4px * 2), 100% calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px * 2), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px * 2) calc(100% - 4px), calc(100% - 4px * 2) 100%, calc(4px * 2) 100%, calc(4px * 2) calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px * 2), 0 calc(100% - 4px * 2)); }
.px .more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; background: var(--yellow); }
.px .more summary::-webkit-details-marker { display: none; }
.px .more summary::before { content: ""; flex: none; width: 12px; height: 16px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform 0.12s steps(2); }
.px .more[open] summary::before { transform: rotate(90deg); }
.px .more summary:focus-visible { outline: 3px dashed var(--ink); outline-offset: -8px; }
.px .more > p { margin: 0; padding: 18px 20px 22px; font-size: 16.5px; line-height: 1.6; }
@media (max-width: 860px) {
.px .more-pair { grid-template-columns: minmax(0, 1fr); }
}
.px .score .sn { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; margin-top: 3px; }
.px .score .sc-note { margin: 0; padding: 12px 16px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); border-top: 2px solid var(--crumb); background: var(--paper); }
/* Calm layer (2 November 2026): the pixel treatment was too loud to read. Silkscreen is gone from every label and number (the site's own faces instead), the rainbow bands and stripes are flat, and the stepped corners are square. The pixel art itself (factory, sprites, diagram icons) stays. Later rules win, so delete this block to get the full look back. */
.px { --pixel: var(--body), system-ui, sans-serif; }
.px .pxf, .px .hero-card { clip-path: none; }
.px .hero-bands { background: var(--yellow); }
.px .hero-ground { height: 20px; border-top: 4px solid var(--ink); background: var(--teal); }
.px .stripe5, .px .hc-stripes, .px .plate, .px .divider-thin { background: var(--ink); height: 4px; }
.px .divider-thin { border-block: 0; }
.px .hero-card .hc-stripes { margin-top: 6px; }
.px .hero-card h1.h, .px .h { text-shadow: none; }
.px .uth-head .uth-tag, .px .arch-card .paper-label, .px .mcard > .mtag, .px .more summary, .px .kept, .px .uth-pill, .px .uth-toc a, .px .hero-sign, .px .hero-card .uth-kicker,
.px .uth-big { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; text-shadow: none; }
.px .uth-big { font-size: 52px; }
.px .arch .t-px, .px .arch .t-h { font-family: var(--body), system-ui, sans-serif; letter-spacing: 0; }
.px .uth-head .title, .px .band-teal .uth-head .title, .px .band-ink .uth-head .title, .px .band-yellow .title, .px .band-yellow h2 { text-shadow: none; }
.px .uth-head .title::after { height: 4px; width: 72px; background: var(--ink); }
.px .uth-layers li::before, .px .r::before { height: 4px; background: var(--ink); }
.px .more summary { display: block; }
.px .more summary::before { display: inline-block; margin-right: 10px; }

/* The four models: one compact row each, a colour per model (2 November 2026), replacing the cartridge cards. */
.px .mrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.px .mrow { --c: var(--st-orange); --tint: #fff0dc; position: relative; display: grid; grid-template-columns: 72px minmax(190px, 1fr) minmax(0, 1.6fr) minmax(0, 1.1fr); gap: 8px 26px; align-items: center; padding: 18px 22px 18px 30px; background: var(--tint); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.px .mrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--c); border-right: 3px solid var(--ink); }
.px .mrow:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.px .mrow:nth-child(2) { --c: var(--teal); --tint: #def3f1; }
.px .mrow:nth-child(3) { --c: #6a2c91; --tint: #efe4f7; }
.px .mrow:nth-child(4) { --c: #e4572e; --tint: #fde6dd; }
.px .mr-ico { width: 72px; height: 72px; padding: 10px; background: var(--white); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--c); }
.px .mr-ico svg { display: block; width: 100%; height: 100%; }
.px .mr-name h3 { font-size: 24px; line-height: 1.1; }
.px .mr-name code { display: block; margin-top: 4px; padding: 0; background: none; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.px .mr-by { display: block; margin-top: 8px; }
.px .mr-by .uth-pill { background: var(--white); border: 2px solid var(--ink); color: var(--ink); }
.px .mr-k { display: block; font-size: 13px; font-weight: 800; color: var(--c); filter: brightness(.8); margin-bottom: 2px; }
.px .mr-job p, .px .mr-sees p { margin: 0; font-size: 16px; line-height: 1.5; }
.px .mr-job p { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.px .mrow .uth-also { display: block; margin-top: 6px; font-family: var(--body), system-ui, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .px .mrow { transition: none; } .px .mrow:hover { transform: none; } }
@media (max-width: 960px) {
.px .mrow { grid-template-columns: 56px minmax(0, 1fr); padding: 16px 16px 16px 26px; }
.px .mr-ico { width: 56px; height: 56px; padding: 7px; }
.px .mr-job, .px .mr-sees { grid-column: 2; }
}

/* Known limits: readable on the dark band (2 November 2026). Brighter body text, the red-team results as three numbers, no tiny grey paragraph. */
.px #limits .uth-measured { font-size: 17px; line-height: 1.6; color: #e6e9f0; }
.px #limits .uth-rt { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.px #limits .uth-rt li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 18px; border: 3px solid rgba(255, 255, 255, 0.4); }
.px #limits .uth-rt b { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--yellow); letter-spacing: -0.03em; }
.px #limits .uth-rt small { font-size: 18px; color: #c4c9d6; letter-spacing: 0; }
.px #limits .uth-rt span { font-size: 15.5px; line-height: 1.4; color: #e6e9f0; }
.px #limits .uth-rt-note { margin: 22px 0 0; font-size: 16px; font-weight: 800; color: #e6e9f0; }
.px #limits .uth-limits p, .px #limits .uth-more li { color: #e6e9f0; }
.px #limits .uth-limits li { padding: 22px; }
@media (max-width: 960px) { .px #limits .uth-rt { grid-template-columns: minmax(0, 1fr); } }
/* Calm layer, labels continued (these two rules were lost in the cartridge clean-up). */
.px .inv dt, .px .arch-hint, .px .uth-table thead th, .px .score .sc-groups th, .px .score .sc-who th, .px .score tbody th small, .px .score tbody td::before, .px .uth-layers .uth-mono { text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 15px; }
.px .inv dt, .px .score tbody th small, .px .score tbody td::before, .px .arch-hint { font-size: 14px; }