@font-face { font-family: "MEK Mono"; src: url("assets/fonts/MEK-Mono.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEK Dings"; src: url("assets/fonts/MEK-Dings.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEK Sans"; src: url("assets/fonts/MEKSans-Regular.woff2") format("woff2"); font-display: block; }

:root {
  color-scheme: dark;
  --black: #050505;
  --black-soft: #0d0d0b;
  --bone: #e8e2c6;
  --bone-dim: #999581;
  --line: #57554a;
  --blood: #b51520;
  --zoom: 3;
  --pixel-aspect: 1;
  font-family: "MEK Sans";
  font-synthesis: none;
  font-size: 22px;
}

* { box-sizing: border-box; font-synthesis: none; }
.fonts-loading body { visibility: hidden; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--bone);
  background: #050505;
  overflow: hidden;
}
button, input, select, textarea, output { font: inherit; }
button, input, select, textarea {
  color: var(--bone);
  background: var(--black);
  border: 1px solid var(--bone-dim);
  border-radius: 0;
}
button { min-height: 42px; padding: 6px 12px; cursor: pointer; font-family: "MEK Mono"; }
button:hover, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px solid var(--bone); outline-offset: 1px; }
button:active, button.active { color: var(--black); background: var(--bone); }
button:disabled { opacity: .35; cursor: default; }
select, input { height: 44px; }
textarea { padding: 9px; resize: vertical; }
.mek-mono { font-family: "MEK Mono"; }
.mek-dings { font-family: "MEK Dings"; }

.menu-bar {
  position: relative;
  z-index: 30;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  color: var(--black);
  background: var(--bone);
  border-bottom: 2px solid var(--black);
  user-select: none;
}
.menu-gem { width: 14px; height: 14px; border: 2px solid var(--black); transform: rotate(45deg); }
.menu-bar strong { font: 22px "MEK Sans"; }
.menu-bar nav { display: flex; align-self: stretch; }
.menu-button { min-height: 0; padding: 0 13px; color: var(--black); background: transparent; border: 0; font-family: "MEK Sans"; }
.menu-button:hover, .menu-button.active { color: var(--bone); background: var(--black); outline: none; }
.menu-readout { margin-left: auto; display: flex; gap: 24px; font: 18px "MEK Mono"; }

.app-shell {
  height: calc(100vh - 54px);
  display: grid;
  grid-template-columns: 240px minmax(510px, 1fr) 430px;
  gap: 12px;
  padding: 12px;
}
.left-column, .right-column { min-height: 0; overflow-y: auto; padding-right: 5px; scrollbar-color: var(--bone-dim) var(--black); }
.mac-window { margin-bottom: 16px; border: 1px solid var(--bone); background: var(--black-soft); box-shadow: 7px 7px 0 rgba(0,0,0,.7); }
.title-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px;
  color: var(--black);
  background: var(--bone);
  border-bottom: 1px solid var(--black);
  font: 18px "MEK Mono";
  letter-spacing: .06em;
  white-space: nowrap;
  user-select: none;
}
.close-box, .zoom-box { width: 19px; height: 19px; flex: 0 0 19px; border: 1px solid var(--black); background: var(--bone); }
.close-box::after { content: ""; display: block; width: 12px; height: 1px; margin: 8px 2px; background: var(--black); transform: rotate(45deg); }
.zoom-box::after { content: ""; display: block; width: 10px; height: 10px; margin: 3px; border: 1px solid var(--black); }
.stripes { flex: 1; height: 15px; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); box-shadow: inset 0 3px 0 var(--bone), inset 0 4px 0 var(--black), inset 0 -3px 0 var(--bone), inset 0 -4px 0 var(--black); opacity: .75; }

.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 8px; background: var(--line); }
.tool { height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--black); }
.tool.tint-tool { height: 68px; }
.tool.eyedropper-tool { height: 68px; }
.tool-icon { font-size: 34px; line-height: 28px; }
.tool small { font-size: 14px; }
.mode-toggle { width: calc(100% - 16px); margin: 0 8px 10px; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.mode-toggle > span { font-size: 30px; }
.mode-toggle small { font-size: 13px; color: var(--bone-dim); }
.brush-preview { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; margin: 0 8px 10px; padding: 8px; border: 1px solid var(--line); }
#brushPreview { width: 60px; height: 100px; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--bone-dim); }
.brush-preview div { min-width: 0; display: grid; gap: 8px; }
.brush-preview strong, .brush-preview span { overflow-wrap: anywhere; font: 14px/1.35 "MEK Mono"; }
.brush-preview span { color: var(--bone-dim); }
.similar-actions { display: grid; gap: 6px; padding: 0 8px 10px; }
.similar-actions button { min-width: 0; padding: 5px; font-size: 13px; }

.ink-pair { display: grid; grid-template-columns: 78px minmax(0,1fr) 42px; align-items: center; gap: 8px; padding: 10px; }
.ink-stack { position: relative; width: 72px; height: 66px; }
.ink-target { position: absolute; width: 46px; height: 46px; min-height: 0; padding: 0; border: 2px solid var(--bone-dim); }
.ink-target span { position: absolute; inset: 0; border: 2px solid var(--black); }
.ink-target small { position: absolute; right: 2px; bottom: 1px; z-index: 1; padding: 1px 2px; color: var(--black); background: rgba(232,226,198,.82); font: 10px "MEK Mono"; }
.ink-background { top: 0; right: 0; z-index: 1; }
.ink-foreground { left: 0; bottom: 0; z-index: 2; }
.ink-target.active { z-index: 3; outline: 2px solid var(--bone); outline-offset: 1px; }
.ink-copy { min-width: 0; display: grid; gap: 4px; }
.ink-copy strong { font: 12px "MEK Mono"; }
.ink-copy span { color: var(--bone-dim); font-size: 12px; line-height: 1.25; }
#swapInk { min-width: 0; padding: 0; }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 10px 10px; }
.palette-swatch { min-height: 48px; padding: 0; position: relative; background: var(--swatch); border: 2px solid var(--black); outline: 1px solid var(--bone-dim); }
.palette-swatch::after { content: attr(data-index); position: absolute; right: 3px; bottom: 1px; color: var(--label); font: 14px "MEK Mono"; }
.palette-swatch.selected { box-shadow: 0 0 0 2px var(--bone); }
.palette-swatch.transparent { background: #111; border-style: dashed; }
.selection-ink { display: none; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 0 10px 7px; }
.selection-ink.active { display: grid; }
.selection-ink button { min-width: 0; padding: 5px; font-size: 13px; }
.palette-field-panel { margin: 0 10px 10px; padding: 8px; border: 1px solid var(--line); }
.palette-field-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--bone-dim); font: 13px "MEK Mono"; }
.palette-field-heading output { color: var(--bone); }
#paletteField { display: block; width: min(220px,100%); height: auto; aspect-ratio: 1; margin: 8px auto; background: #050505; border: 1px solid var(--bone-dim); touch-action: none; cursor: crosshair; }
.palette-field-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; color: var(--bone-dim); font: 11px "MEK Mono"; }
.palette-field-legend { white-space: nowrap; }
.harmony-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.harmony-buttons button { min-width: 0; padding: 4px; font-size: 12px; }
.ramp-controls { display: grid; gap: 5px; margin: 0 10px 10px; padding: 8px; border: 1px solid var(--line); }
.ramp-heading { display: flex; justify-content: space-between; gap: 6px; font: 12px "MEK Mono"; }
.ramp-heading output { color: var(--bone-dim); }
.ramp-controls label { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 6px; color: var(--bone-dim); font: 11px "MEK Mono"; }
.ramp-controls input[type="range"] { min-width: 0; width: 100%; height: 22px; accent-color: var(--bone); }
.ramp-controls button { min-height: 28px; font-size: 10px; }
.micro-note { margin: 8px 10px 12px; color: #777568; font-size: 16px; line-height: 1.4; }
.history-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.tool-status { padding: 10px; border-top: 1px solid var(--line); color: var(--bone-dim); font: 16px "MEK Mono"; }

.stage-column { min-width: 0; display: flex; flex-direction: column; }
.stage-window { height: calc(100vh - 84px); display: grid; grid-template-rows: 38px auto minmax(0,1fr) 46px; }
.stage-toolbar { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; }
.stage-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--bone-dim); font-size: 17px; }
.stage-rule { width: 1px; height: 38px; background: var(--line); }
.ntsc-controls { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 1px solid var(--line); font: 12px "MEK Mono"; }
.ntsc-controls label { gap: 3px; font: 12px "MEK Mono"; }
.ntsc-controls input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bone); }
.ntsc-controls input[type="range"] { width: 50px; height: 22px; accent-color: var(--bone); }
.ntsc-controls:not(.enabled) label:not(.ntsc-switch) { opacity: .38; }
.pixel-aspect-control { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); font: 12px "MEK Mono" !important; }
.pixel-aspect-control input { width: 16px; height: 16px; accent-color: var(--bone); }
#activeLayerReadout { margin-left: auto; color: var(--bone-dim); font: 15px "MEK Mono"; }
.canvas-viewport {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 8px;
  background: #11110f;
  scrollbar-color: var(--bone-dim) var(--black);
}
.canvas-frame { flex: none; box-shadow: 0 0 0 1px var(--bone), 9px 10px 0 #000; }
#screen {
  display: block;
  width: calc(240px * var(--zoom) * var(--pixel-aspect));
  height: calc(220px * var(--zoom));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
}
#screen:focus { outline: 2px solid var(--bone); outline-offset: 3px; }
.stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 10px; border-top: 1px solid var(--line); color: var(--bone-dim); font: 14px "MEK Mono"; overflow-x: auto; white-space: nowrap; }
.stage-note { margin: 10px 4px 0; color: #777568; font-size: 16px; }

.glyph-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 8px; background: var(--line); }
.glyph-tabs button { border: 0; }
.glyph-filter { display: grid; grid-template-columns: 1fr 132px; gap: 10px; padding: 10px; }
.glyph-filter input { width: 100%; padding: 7px; }
.glyph-selected { display: grid; grid-template-columns: 44px 1fr; align-items: center; border-bottom: 1px solid var(--bone-dim); }
.glyph-selected canvas { width: 30px; height: 50px; image-rendering: pixelated; }
.glyph-selected strong { font: 14px "MEK Mono"; }
.custom-copy-button { width: calc(100% - 20px); margin: 0 10px 10px; font-size: 14px; }
.glyph-recent { padding: 0 10px 8px; color: var(--bone-dim); font: 13px "MEK Mono"; }
.recent-glyphs { min-height: 62px; display: flex; gap: 5px; margin-top: 5px; overflow-x: auto; }
.recent-glyphs button { flex: 0 0 42px; min-width: 42px; height: 59px; padding: 2px; }
.recent-glyphs canvas { width: 30px; height: 50px; image-rendering: pixelated; }
.glyph-grid { max-height: 330px; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 4px 10px 10px; scrollbar-color: var(--bone-dim) var(--black); }
.glyph-button { min-width: 0; min-height: 62px; padding: 2px; position: relative; display: grid; place-items: center; overflow: hidden; }
.glyph-button canvas { width: 30px; height: 50px; image-rendering: pixelated; }
.glyph-button small { position: absolute; right: 2px; bottom: 1px; font: 12px "MEK Mono"; opacity: .7; }
.glyph-button.active { color: var(--black); background: var(--bone); }
.glyph-grid-empty { grid-column: 1 / -1; margin: 12px 4px; color: var(--bone-dim); font: 14px/1.5 "MEK Mono"; text-align: center; }
.custom-creator { margin: 0 10px 10px; border: 1px solid var(--bone-dim); background: #080806; }
.custom-creator-heading { display: flex; justify-content: space-between; padding: 8px; color: var(--bone-dim); border-bottom: 1px solid var(--line); font: 13px "MEK Mono"; }
.custom-workbench { display: grid; grid-template-columns: 126px 1fr; gap: 11px; padding: 10px; }
#customGlyphEditor { width: 120px; height: 200px; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--bone); background: var(--black); touch-action: none; cursor: crosshair; }
#customGlyphEditor:focus { outline: 1px solid var(--bone); outline-offset: 2px; }
.custom-editor-controls { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.custom-draw-modes { display: grid; grid-template-columns: 1fr; gap: 5px; }
.custom-draw-modes button { min-width: 0; padding: 5px; font-size: 13px; }
.custom-editor-controls label { color: var(--bone-dim); font-size: 14px; }
.custom-editor-controls input { width: 100%; margin-top: 5px; padding: 5px; font-family: "MEK Mono"; }
.custom-editor-controls output { color: var(--bone-dim); font: 13px/1.35 "MEK Mono"; }
.custom-glyph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 10px 4px; }
.custom-glyph-actions button { min-width: 0; padding: 5px; font-size: 13px; }
.custom-creator[hidden] { display: none; }

.text-panel { padding-bottom: 10px; }
.text-panel textarea { display: block; width: calc(100% - 20px); margin: 10px; font-family: "MEK Mono"; }
.text-controls { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 0 10px; }
.text-controls label { color: var(--bone-dim); font-size: 16px; }
.text-controls select { display: block; width: 100%; margin-top: 5px; }
.text-box-readout { margin: 10px; padding: 8px; border: 1px dashed var(--line); color: var(--bone-dim); font: 14px "MEK Mono"; }
.wide-button { width: calc(100% - 20px); margin: 0 10px; }

.layer-list { padding: 8px; }
.layer-row { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; min-height: 48px; gap: 7px; padding: 4px; border: 1px solid transparent; }
.layer-row.active { border-color: var(--bone); background: #171713; }
.layer-row button { min-width: 0; padding: 0; border: 0; background: transparent; }
.layer-row .layer-name { text-align: left; font-size: 16px; }
.layer-row small { color: var(--bone-dim); font: 14px "MEK Mono"; }
.layer-actions { display: grid; grid-template-columns: 48px 1fr 48px; gap: 7px; padding: 8px; border-top: 1px solid var(--line); }
.layer-actions button { font-size: 16px; }

.hardware-badges { display: flex; gap: 8px; padding: 10px; }
.hardware-badges span { flex: 1; padding: 7px; border: 1px solid var(--line); color: var(--bone-dim); font: 14px "MEK Mono"; text-align: center; }
.hardware-badges span:first-child { color: var(--bone); }
.serial-row { display: grid; grid-template-columns: 1fr 18px 92px; align-items: center; gap: 8px; padding: 0 10px 10px; }
.serial-row strong { font: 14px "MEK Mono"; }
.serial-lamp { width: 15px; height: 15px; border: 1px solid var(--bone-dim); background: #222; }
.serial-lamp.online { background: var(--bone); }
.serial-lamp.busy { background: var(--bone); }
.serial-lamp.error { background: var(--blood); }
.serial-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 10px; }
.serial-actions label { display: flex; align-items: center; justify-content: center; border: 1px solid var(--bone-dim); font: 14px "MEK Mono"; }
.serial-actions input { height: auto; accent-color: var(--bone); }
.serial-actions button:last-child { grid-column: 1 / -1; }
.serial-panel progress { display: block; width: calc(100% - 20px); height: 13px; margin: 0 10px 10px; accent-color: var(--bone); }
.serial-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 10px 10px; color: var(--bone-dim); font: 13px "MEK Mono"; text-align: center; }
.serial-metrics span { border: 1px solid var(--line); padding: 5px 2px; }
.serial-panel pre { min-height: 64px; max-height: 130px; overflow: auto; margin: 0 10px; padding: 8px; color: var(--bone-dim); background: #020202; border: 1px solid var(--line); font: 14px/1.35 "MEK Mono"; white-space: pre-wrap; }

.output-panel { padding-bottom: 8px; }
.output-panel > button { display: block; width: calc(100% - 20px); margin: 10px; text-align: left; font-size: 16px; }
.output-panel > button::before { content: ">"; margin-right: 7px; color: var(--bone-dim); }
.hardware-profile { margin: 8px 10px 4px; padding: 8px; border: 1px solid var(--line); color: var(--bone-dim); font: 13px/1.35 "MEK Mono"; }
.hardware-profile > strong { display: block; margin-bottom: 6px; color: var(--bone); }
.hardware-profile dl { margin: 0; }
.hardware-profile dl div { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; padding: 3px 0; border-top: 1px solid #2c2b26; }
.hardware-profile dt, .hardware-profile dd { margin: 0; }
.hardware-profile dd { color: var(--bone); text-align: right; }
.hardware-profile p { margin: 7px 0 0; color: #777568; }

.menu-popover { position: fixed; z-index: 60; min-width: 370px; padding: 7px; color: var(--black); background: var(--bone); border: 1px solid var(--black); box-shadow: 6px 6px 0 var(--black), 7px 7px 0 var(--bone); }
.menu-popover button { display: flex; justify-content: space-between; width: 100%; min-height: 44px; color: var(--black); background: transparent; border: 0; text-align: left; }
.menu-popover button:hover { color: var(--bone); background: var(--black); }
.menu-popover hr { border: 0; border-top: 1px solid var(--black); margin: 3px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; max-width: 850px; padding: 14px 22px; color: var(--black); background: var(--bone); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--bone-dim); transform: translate(-50%, 160%); transition: transform .16s steps(3,end); pointer-events: none; }
.toast.visible { transform: translate(-50%,0); }
.toast.error { color: var(--bone); background: var(--blood); }
dialog { width: min(760px, calc(100vw - 40px)); padding: 0; color: var(--bone); background: var(--black); border: 1px solid var(--bone); box-shadow: 9px 9px 0 rgba(0,0,0,.8); }
dialog::backdrop { background: rgba(0,0,0,.75); }
.dialog-copy { padding: 28px 34px 32px; line-height: 1.5; }
.dialog-copy li { margin-bottom: 8px; }
.default-button { display: block; min-width: 160px; margin: 24px auto 0; border: 2px solid var(--bone); }

@media (max-width: 1230px) {
  body { overflow: auto; }
  .app-shell { height: auto; grid-template-columns: 240px minmax(510px,1fr); }
  .right-column { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(340px,1fr)); gap: 14px; overflow: visible; }
  .glyph-panel { grid-row: span 2; }
}
@media (max-width: 860px) {
  .menu-readout { display: none; }
  .app-shell { display: block; }
  .left-column, .right-column { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .stage-window { min-height: 720px; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Compact canvas-first workstation. The editor remains a three-dock tool at
   narrow Codex/browser-panel widths instead of turning into a stacked page. */
:root { font-size: 13px; }
button { min-height: 28px; padding: 3px 7px; }
select, input { height: 30px; }
textarea { padding: 5px; }
.menu-bar { height: 36px; gap: 12px; padding: 0 10px; }
.menu-gem { width: 10px; height: 10px; border-width: 1px; }
.menu-bar strong { font-size: 14px; }
.menu-button { padding: 0 8px; font-size: 13px; }
.menu-readout { gap: 12px; font-size: 10px; }

.app-shell {
  height: calc(100vh - 36px);
  grid-template-columns: clamp(64px, 9vw, 160px) minmax(0, 1fr) clamp(132px, 18vw, 300px);
  gap: 6px;
  padding: 6px;
}
.left-column, .right-column { display: block; min-height: 0; overflow-y: auto; padding-right: 2px; grid-column: auto; grid-row: auto; }
.glyph-panel { grid-row: auto; }
.mac-window { margin-bottom: 6px; box-shadow: 3px 3px 0 rgba(0,0,0,.7); }
.title-bar { height: 26px; gap: 5px; padding: 2px 5px; font-size: 10px; letter-spacing: .04em; }
.title-bar[role="button"] { cursor: pointer; }
.title-bar[role="button"]:focus-visible { outline: 1px solid var(--bone); outline-offset: -2px; }
.close-box, .zoom-box { width: 13px; height: 13px; flex-basis: 13px; }
.close-box::after { width: 8px; margin: 5px 1px; }
.zoom-box::after { width: 7px; height: 7px; margin: 2px; }
.stripes { height: 10px; }
.panel-collapsed { margin-bottom: 4px; }
.panel-collapsed > :not(.title-bar) { display: none !important; }
.panel-collapsed > .title-bar .close-box::after { transform: rotate(0deg); }

.tools { gap: 1px; padding: 3px; }
.tool { height: 46px; gap: 2px; }
.tool.tint-tool { height: 42px; }
.tool.eyedropper-tool { height: 42px; }
.tool-icon { font-size: 20px; line-height: 19px; }
.tool small { font-size: 8px; }
.mode-toggle { min-height: 36px; margin: 0 4px 5px; width: calc(100% - 8px); gap: 4px; padding: 2px; }
.mode-toggle > span { font-size: 18px; }
.mode-toggle small { font-size: 8px; }
.brush-preview { grid-template-columns: 42px 1fr; gap: 5px; margin: 0 4px 5px; padding: 4px; }
#brushPreview { width: 36px; height: 60px; }
.brush-preview strong, .brush-preview span { font-size: 9px; }
.similar-actions { display: none; gap: 3px; padding: 0 4px 5px; }
.similar-actions.active { display: grid; }
.similar-actions button { min-height: 25px; font-size: 8px; }

.ink-pair { grid-template-columns: 52px minmax(0,1fr) 28px; gap: 4px; padding: 4px; }
.ink-stack { width: 48px; height: 45px; }
.ink-target { width: 31px; height: 31px; }
.ink-target small { font-size: 7px; }
.ink-copy { gap: 2px; }
.ink-copy strong { font-size: 8px; }
.ink-copy span { display: none; font-size: 8px; }
.palette-grid { gap: 4px; padding: 3px 5px 5px; }
.palette-swatch { min-height: 30px; }
.palette-swatch::after { font-size: 9px; }
.selection-ink { gap: 3px; padding: 0 5px 5px; }
.selection-ink button { font-size: 9px; min-height: 26px; }
.palette-field-panel { margin: 0 5px 5px; padding: 4px; }
.palette-field-heading { font-size: 9px; }
#paletteField { margin: 4px auto; max-width: 150px; }
.palette-field-controls > label, .palette-field-controls output { font-size: 9px; }
.harmony-buttons { gap: 2px; }
.harmony-buttons button { font-size: 8px; min-height: 24px; }
.ramp-controls { gap: 3px; margin: 0 5px 5px; padding: 4px; }
.ramp-heading, .ramp-controls label { font-size: 8px; }
.ramp-controls label { grid-template-columns: 44px 1fr; }
.ramp-controls input[type="range"] { height: 17px; }
.ramp-controls button { min-height: 23px; font-size: 8px; }
.micro-note { margin: 4px 6px 7px; font-size: 10px; }
.history-buttons { gap: 4px; padding: 5px; }
.tool-status { padding: 5px; font-size: 10px; }

.stage-column { min-width: 0; }
.stage-window { height: calc(100vh - 48px); grid-template-rows: 26px auto minmax(0,1fr) 28px; }
.stage-toolbar { gap: 5px; min-height: 40px; padding: 4px 5px; overflow-x: auto; }
.stage-toolbar label { gap: 3px; font-size: 10px; }
.stage-toolbar select { max-width: 116px; height: 30px; font-size: 11px; }
.stage-toolbar button { min-height: 30px; font-size: 10px; white-space: nowrap; }
.stage-rule { height: 26px; }
#activeLayerReadout { font-size: 9px; }
.ntsc-controls { gap: 4px; padding: 2px 4px; font-size: 9px; }
.ntsc-controls label { gap: 2px; font-size: 9px; }
.ntsc-controls input[type="checkbox"] { width: 13px; height: 13px; }
.ntsc-controls input[type="range"] { width: 36px; height: 18px; }
.pixel-aspect-control { padding: 2px 4px; font-size: 9px !important; }
.pixel-aspect-control input { width: 13px; height: 13px; }
.canvas-viewport { padding: 3px; }
.canvas-frame { box-shadow: 0 0 0 1px var(--bone), 4px 4px 0 #000; }
.stage-footer { gap: 8px; padding: 0 6px; font-size: 9px; }
.stage-note { display: none; }

.glyph-tabs { gap: 1px; padding: 3px; }
.glyph-tabs button { min-height: 30px; padding: 2px; font-size: 10px; }
.glyph-filter { grid-template-columns: minmax(0,1fr) 70px; gap: 4px; padding: 4px; }
.glyph-filter input { min-width: 0; padding: 4px; font-size: 10px; }
.glyph-selected { grid-template-columns: 28px 1fr; }
.glyph-selected canvas { width: 24px; height: 40px; }
.glyph-selected strong { font-size: 9px; }
.custom-copy-button { width: calc(100% - 8px); margin: 0 4px 4px; min-height: 27px; font-size: 9px; }
.glyph-recent { padding: 0 4px 4px; font-size: 9px; }
.recent-glyphs { min-height: 46px; gap: 3px; margin-top: 3px; }
.recent-glyphs button { flex-basis: 31px; min-width: 31px; height: 45px; }
.recent-glyphs canvas { width: 24px; height: 40px; }
.glyph-grid { max-height: 350px; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; padding: 2px 4px 5px; }
.glyph-button { min-height: 46px; }
.glyph-button canvas { width: 24px; height: 40px; }
.glyph-button small { font-size: 8px; }
.custom-creator { margin: 0 4px 4px; }
.custom-workbench { grid-template-columns: 66px 1fr; gap: 5px; padding: 5px; }
#customGlyphEditor { width: 60px; height: 100px; }
.custom-creator-heading, .custom-editor-controls output { font-size: 9px; }
.custom-draw-modes button, .custom-glyph-actions button { font-size: 8px; }

.text-panel { padding-bottom: 5px; }
.text-panel textarea { width: calc(100% - 10px); margin: 5px; }
.text-controls { gap: 5px; padding: 0 5px; }
.text-controls label { font-size: 10px; }
.text-box-readout { margin: 5px; padding: 4px; font-size: 9px; }
.wide-button { width: calc(100% - 10px); margin: 0 5px; }
.effect-block { padding: 5px; border-bottom: 1px solid var(--line); }
.effect-switch { display: flex; align-items: center; gap: 5px; font: 10px "MEK Mono"; }
.effect-switch input, .effect-check input { width: 14px; height: 14px; accent-color: var(--bone); }
.effect-grid { display: grid; gap: 3px; margin-top: 5px; }
.effect-grid label { display: grid; grid-template-columns: 55px minmax(0,1fr) 42px; align-items: center; gap: 4px; color: var(--bone-dim); font: 9px "MEK Mono"; }
.effect-grid select { min-width: 0; height: 25px; font-size: 9px; }
.effect-grid input[type="range"] { min-width: 0; width: 100%; height: 20px; accent-color: var(--bone); }
.effect-grid output { color: var(--bone); text-align: right; white-space: nowrap; }
.effect-grid .effect-check { display: flex; grid-template-columns: none; }
.effect-warning { margin: 5px; padding: 5px; border: 1px solid var(--blood); color: var(--bone); font: 9px/1.35 "MEK Mono"; }
.layer-list { padding: 3px; }
.layer-row { min-height: 32px; grid-template-columns: 28px 1fr 22px; gap: 3px; padding: 2px; }
.layer-row .layer-name { font-size: 10px; }
.layer-row small { font-size: 9px; }
.layer-actions { grid-template-columns: 30px 1fr 30px; gap: 3px; padding: 3px; }
.layer-actions button { font-size: 9px; min-height: 25px; }
.hardware-badges, .serial-row, .serial-actions, .serial-metrics { gap: 3px; padding: 4px; }
.hardware-badges span, .serial-row strong, .serial-actions label, .serial-metrics { font-size: 9px; }
.serial-panel pre { margin: 0 4px; font-size: 9px; }
.output-panel > button { width: calc(100% - 8px); margin: 4px; font-size: 10px; }
.hardware-profile { margin: 4px; padding: 5px; font-size: 9px; }
.hardware-profile dl div { gap: 4px; }

@media (max-height: 800px) and (min-width: 901px) {
  .tool { height: 34px; flex-direction: row; gap: 4px; }
  .tool.tint-tool, .tool.eyedropper-tool { height: 34px; }
  .tool-icon { font-size: 15px; line-height: 15px; }
  .tool small { font-size: 7px; }
  .mode-toggle { min-height: 26px; }
  .mode-toggle > span { font-size: 13px; }
  #brushPreview { width: 24px; height: 40px; }
  .brush-preview { grid-template-columns: 28px 1fr; min-height: 46px; padding: 2px 4px; }
  .ink-pair { padding-block: 3px; }
  .ink-target { min-height: 34px; }
  .ink-target span { height: 24px; }
  .palette-swatch { min-height: 23px; }
  .selection-ink { padding-bottom: 4px; }
  .selection-ink button { min-height: 22px; padding: 2px; font-size: 7px; }
  #paletteField { max-width: 116px; }
  .micro-note { display: none; }
}

@media (max-width: 900px) {
  body { overflow: hidden; }
  .app-shell { height: calc(100vh - 36px); display: grid; grid-template-columns: 64px minmax(0,1fr) 132px; }
  .left-column, .right-column { display: block; overflow-y: auto; }
  .left-column .title-bar, .right-column .title-bar { font-size: 8px; padding-inline: 3px; }
  .left-column .title-bar .stripes, .right-column .title-bar .stripes { display: none; }
  .tool small, .mode-toggle small { display: none; }
  .tool { height: 40px; }
  .tool.tint-tool { height: 38px; }
  .tool.eyedropper-tool { height: 38px; }
  .brush-preview { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .brush-preview div { gap: 2px; }
  .ink-pair { grid-template-columns: 43px minmax(0,1fr); }
  .ink-stack { width: 40px; height: 39px; }
  .ink-target { width: 27px; height: 27px; }
  .ink-target small, .ink-copy span { display: none; }
  #swapInk { min-height: 22px; grid-column: 1 / -1; }
  .palette-grid { grid-template-columns: repeat(2,1fr); }
  .selection-ink, .selection-ink.active { display: none; }
  .palette-field-heading strong, .palette-field-controls, .micro-note { display: none; }
  .palette-field-heading { justify-content: center; }
  #paletteField { width: 52px; }
  .ramp-heading strong, .ramp-controls label { font-size: 0; }
  .ramp-controls label input { grid-column: 1 / -1; }
  .stage-toolbar > label { font-size: 0; }
  .stage-toolbar > label select { font-size: 10px; }
  #artworkPreset { width: 100px; }
  #zoomSelect { width: 72px; }
  #guidesButton, .stage-rule, #activeLayerReadout { display: none; }
  .ntsc-controls { margin-left: auto; }
  .ntsc-controls label:not(.ntsc-switch) { font-size: 0; }
  .stage-footer span:first-child, #profileReadout { display: none; }
  .stage-footer { justify-content: flex-end; }
  .glyph-filter { grid-template-columns: 1fr; }
  .glyph-selected { display: none; }
  .glyph-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .custom-copy-button { white-space: normal; }
}

@media (max-width: 600px) {
  .menu-bar strong, .menu-readout { display: none; }
  .menu-bar { gap: 5px; }
  .menu-button { padding-inline: 6px; }
  .app-shell { grid-template-columns: 58px minmax(0,1fr) 116px; gap: 4px; padding: 4px; }
  .glyph-tabs button { font-size: 8px; }
}