/* The pixel look: the night palette of the first pixel design (dark page, cream type, the board's
   own light as the only colour) mixed with the isometric plate of Slynyrd's Pixelblog (the ribbon,
   the three-tone solids, the slate blue). Load last. Every rule waits for .has-px on <html>.
   Rules of the look: no curve and no blur anywhere, everything on whole pixels, two faces drawn
   for this app (X98 Pixel at 16 px, X98 Pixel Small at 12 px), movement in hard steps.
   Two views of the board, set on <html data-view>: "flat" from above (the print reads) and "iso"
   (the scene). */
@font-face { font-family: 'X98 Pixel'; src: url(fonts/x98-pixel.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'X98 Pixel Small'; src: url(fonts/x98-pixel-small.ttf) format('truetype'); font-display: block; }

.has-px {
  --bg: #0c0c12; --bg-2: #13131c; --surface: #1b1b27; --surface-2: #262636; --line: #34344a; --line-2: #4d4d6b;
  --ink: #f2ecdc; --ink-2: #bcb39c; --ink-3: #827b69;
  --accent: #f2ecdc !important; --accent-ink: #0c0c12 !important;
  --ribbon: #3f6b8c; --ribbon-hi: #5a87a8; --ribbon-lo: #2f5273; --cream: #ece8c9; --lcd: #d9f24a; --taupe: #c4b290;
  --font: 'X98 Pixel', ui-monospace, monospace; --serif: 'X98 Pixel', ui-monospace, monospace;
  --small: 12px/1 'X98 Pixel Small', ui-monospace, monospace;
  --hard: 4px 4px 0 #000;
  color-scheme: dark;
}
.has-px body { -webkit-font-smoothing: none; font: 16px/24px var(--font); background: var(--bg); color: var(--ink); }
.has-px :is(p, span, a, li, b, i, em, strong, small, label, button, input, select, textarea, summary, td, th, kbd, h2, h3, h4, dt, dd, div) {
  font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 400 !important; font-style: normal !important;
  letter-spacing: 0 !important; font-stretch: 100% !important; text-shadow: none !important;
}
.has-px *, .has-px *::before, .has-px *::after {
  border-radius: 0 !important;
  transition-timing-function: steps(3, end) !important; animation-timing-function: steps(5, end) !important;
}
.has-px :is(.tune-label, .paint-label, .profiles-label, .gate-kicker, .tabs-meta, .tabs-meta *, .live-tag, .fx-live, .mark-s, .hint, .gate-note, .gate-more, .gate-more *, .live-foot, .live-hint, .paint-sub, .live-sub, .link-text, .link-btn, .link-batt b, .intro span, .podium-btn span, .podium-exit, .podium-exit kbd, .heat-btn span, .set-card small, th, .mac-head p, .undo-t, .view-seg button) {
  font: var(--small) !important; text-transform: uppercase; line-height: 18px !important;
}
.has-px ::selection { background: var(--lcd); color: #000; }
.has-px :focus-visible { outline: 2px dashed var(--lcd); outline-offset: 2px; }

/* ---------- the stage ---------- */
.has-px .stg-room, .has-px .stg-clip, .has-px .stg-grain, .has-px .stg-bloom, .has-px .scn-title { display: none !important; }
.has-px .stage { padding-top: 0; margin: 0 calc(50% - 50vw) !important; transition: none; overflow: clip; }
/* A night sky in flat bands behind the scene. */
.has-px .stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0c0c12 0 22%, #0e0e18 22% 40%, #11111e 40% 56%, #141426 56% 70%, #17172d 70% 84%, #1b1b35 84% 100%);
  border-bottom: 4px solid #000;
}
.has-px .stage > .board { background: none !important; box-shadow: none !important; transform: none !important; max-width: none; transition: transform 480ms steps(6, end); }
.has-px .board::before, .has-px .board::after { content: none !important; }
.px-canvas { position: absolute; image-rendering: pixelated; z-index: 1; }
.has-px .screen { opacity: 0; pointer-events: none; }
.px-wipe { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; image-rendering: pixelated; }
.px-wipe[hidden] { display: none; }

/* From above: the canvas lies under the real keys, which stay where the page put them. */
.has-px[data-view="flat"] .px-iso, .has-px[data-view="iso"] .px-flat { display: none; }
.has-px[data-view="flat"] .stage > .board {
  width: calc(335px * var(--fxs, 3)); left: auto; margin: 0 auto calc(38px * var(--fxs, 3));
}
/* Padding, not a margin on the board: a margin would collapse through the stage and the banner
   above the board would be clipped away. */
.has-px[data-view="flat"] .stage { padding-top: calc(46px * var(--fxs, 3)); }
.has-px[data-view="flat"] .px-flat {
  left: calc(-40px * var(--fxs, 3)); top: calc(-46px * var(--fxs, 3)); width: calc(415px * var(--fxs, 3)); height: calc(198px * var(--fxs, 3)); pointer-events: none; z-index: 0;
}
.has-px[data-view="flat"] .key { opacity: 0; }
/* Isometric: the canvas is the board and finds the key under the pointer itself. */
.has-px[data-view="iso"] .stage > .board {
  width: calc(var(--iso-w, 584) * 1px * var(--pxs, 2)); height: calc(var(--iso-h, 309) * 1px * var(--pxs, 2)); aspect-ratio: auto; container-type: normal;
  left: 50%; margin: 0 0 0 calc(var(--iso-w, 584) * -0.5px * var(--pxs, 2));
}
.has-px[data-view="iso"] .px-iso { inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.has-px[data-view="iso"] .plate { opacity: 0; pointer-events: none; }
@media (min-width: 761px) {
  .has-px[data-view="iso"][data-scene="screen"] .stage > .board { transform-origin: var(--px-fx, 80%) var(--px-fy, 40%); transform: translate(calc(50% - var(--px-fx, 80%)), calc(46% - var(--px-fy, 40%))) scale(2) !important; }
}
.has-px[data-view="iso"][data-scene="screen"] .under .hint { visibility: hidden; }
.has-px .under { position: relative; margin: 0 !important; padding: 8px 0 16px; z-index: 3; transition: none; flex-wrap: wrap; }
.has-px[data-scene="gate"] .stage > .gate { margin: 0; padding: 0 0 26px; }
.is-podium.has-px .stage { padding: 0; overflow: visible; margin: 0 !important; background: linear-gradient(180deg, #0c0c12 0 22%, #0e0e18 22% 40%, #11111e 40% 56%, #141426 56% 70%, #17172d 70% 84%, #1b1b35 84% 100%); }
.is-podium.has-px .stage::before, .is-podium.has-px .stage::after { content: none; }
.is-podium.has-px .stage > .board { left: auto; margin: 0; transform: none !important; }

/* ---------- chrome ---------- */
.has-px .bar { border-bottom: 2px solid var(--line); }
.has-px .mark-x { font-size: 32px; line-height: 32px; text-transform: uppercase; }
.has-px .mark-s { color: var(--taupe); }
.has-px .profiles { border: 2px solid var(--line-2); background: var(--bg); padding: 2px; gap: 2px; }
.has-px .profiles button { width: 30px; height: 28px; }
.has-px .profiles button[aria-checked="true"] { background: var(--ink); color: #000; }
.has-px .link-dot { width: 8px; height: 8px; box-shadow: none !important; }
.has-px .link[data-state="on"] .link-dot { background: var(--lcd); }
.has-px .link-btn { border: 2px solid var(--line-2); padding: 4px 10px; }

/* Buttons take the slate blue of the ribbon. */
.has-px .btn { border: 2px solid var(--ink); background: var(--bg); color: var(--ink); padding: 8px 16px; box-shadow: var(--hard); transition: none; }
.has-px .btn-main { background: var(--ribbon); border-color: var(--cream); color: var(--cream); }
.has-px .btn-main:hover:not(:disabled) { background: var(--ribbon-hi); }
.has-px .btn-ghost:hover, .has-px .btn-quiet:hover { background: var(--surface-2); box-shadow: var(--hard); }
.has-px .btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
.has-px .btn:disabled { box-shadow: none; }
.has-px .pchip, .has-px .heat-btn, .has-px .tab-tool { border: 2px solid var(--line-2); background: var(--bg-2); box-shadow: none; height: auto; padding: 4px 10px; }
.has-px .pchip:hover:not(:disabled), .has-px .heat-btn:hover { border-color: var(--ink); background: var(--surface-2); }
.has-px .pchip:active:not(:disabled) { transform: translate(2px, 2px); }
.has-px .seg { background: var(--bg); border: 2px solid var(--line-2); padding: 2px; gap: 2px; }
.has-px .seg button { padding: 4px 12px; color: var(--ink-3); }
.has-px .seg button[aria-selected="true"], .has-px .seg button[aria-checked="true"] { background: var(--ink); color: #0c0c12; box-shadow: none; }
.has-px .view-seg button { padding: 2px 8px; }

/* The dock: a strip of four words, the chosen one in the board's own colour. */
.has-px .tabs { border: 2px solid var(--ink); background: #000; padding: 4px; gap: 4px; box-shadow: 6px 6px 0 #000; bottom: 18px; }
.has-px .tabs [role="tab"] { font: 16px/24px var(--font) !important; text-transform: uppercase; padding: 6px 14px; color: var(--ink-3); transition: none; }
.has-px .tabs [role="tab"]:hover { color: var(--ink); background: var(--surface); }
.has-px .tabs [role="tab"][aria-selected="true"] { background: rgb(var(--lead)); color: #000; }
.has-px .tabs-meta { border-left: 2px solid var(--line-2); }
.has-px .tab-help { width: 32px; height: 32px; padding: 0; }

/* Cards: a hard line and a hard shadow. */
.has-px .panel { padding-top: 28px; }
.has-px .fx button, .has-px .set-card, .has-px .paint, .has-px .live-card, .has-px .gate .intro li, .has-px .dlg, .has-px .mac-card {
  border: 2px solid var(--line-2); background: var(--bg-2); box-shadow: var(--hard);
}
.has-px .fx { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.has-px .fx button { padding: 8px 10px 6px; color: var(--ink-2); transition: none; }
.has-px .fx button canvas { image-rendering: pixelated; height: 36px; background: #000; }
.has-px .fx button:hover { border-color: var(--ink); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.has-px .fx button[aria-checked="true"] { border-color: rgb(var(--lead)); color: var(--ink); box-shadow: 4px 4px 0 rgb(var(--lead)); }
.has-px .fx button::after { display: none; }
.has-px .fx-live, .has-px .live-tag { background: var(--lcd); color: #000; box-shadow: none; padding: 1px 4px; border: 0; }
.has-px .live-card.is-on { border-color: var(--lcd); box-shadow: 4px 4px 0 var(--lcd); }
.has-px .live-dot { box-shadow: none !important; }
.has-px .live-card.is-on .live-dot { background: var(--lcd); }
.has-px .swatches button { width: 26px; height: 26px; box-shadow: inset 0 0 0 2px #000; }
.has-px .swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 2px #000, 0 0 0 2px var(--bg-2), 0 0 0 4px var(--ink); }
.has-px .steps button { border: 2px solid var(--line-2); }
.has-px .steps button.on::before { background: var(--ribbon); opacity: .7; }
.has-px .steps button.on { color: var(--ink); border-color: var(--ribbon-hi); }
.has-px input[type="range"] { accent-color: var(--ribbon-hi); }
.has-px input[type="text"], .has-px input[type="number"], .has-px textarea, .has-px select { border: 2px solid var(--line-2); background: #000; color: var(--ink); }
.has-px .toggle-ui { border: 2px solid var(--line-2); }
.has-px .podium-exit { border: 2px solid var(--ink); background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--hard); }

/* The gate. */
.has-px .gate h1 { font-size: 32px !important; line-height: 40px !important; text-transform: uppercase; }
.has-px .gate h1 em { color: var(--ribbon-hi); font-family: var(--font); font-size: inherit; line-height: inherit; }
.has-px .gate-card { max-width: 660px; padding-top: 22px; }
.has-px .gate-copy { max-width: 56ch; }
.has-px .intro svg { stroke: var(--ribbon-hi); }
.has-px :is(.batt-now b, .slow-time b, .type-pad b, .imp-rows b, .m-typed b, .tile-n) { font-size: 32px !important; line-height: 32px !important; }

@media (max-width: 760px) {
  .has-px main { overflow-x: clip; }
  .has-px .tabs [role="tab"] { font: var(--small) !important; padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-px .stage > .board { transition: none; }
}

/* The pattern gallery: cards wide enough for the longest name in the pixel face. */
.has-px .pattern-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.has-px .pat { overflow: hidden; }

.has-px .anim-text input { border: 2px solid var(--line-2); background: var(--bg-2); box-shadow: none; height: auto; padding: 5px 10px; text-transform: none; }
.has-px .anim-text input:focus-visible { border-color: var(--ink); outline: 0; }