:root {
  color-scheme: dark;
  --ink: #f2ede2;
  --muted: #97948b;
  --ground: #11110f;
  --panel: #191917;
  --panel-2: #20201d;
  --line: rgba(242,237,226,.15);
  --yellow: #f2cc0c;
  --orange: #ff5b25;
  --green: #68d897;
  --red: #ff8375;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ground); color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lab-shell { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lab-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); background: #151513; }
.eyebrow { margin: 0 0 6px; color: var(--orange); font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: .75; letter-spacing: -.065em; }
h2 { margin: 0; color: #bbb7ae; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
h3 { margin: 9px 0 3px; font-size: 14px; }
.header-meta { display: flex; align-items: end; gap: 12px; }
.header-meta label { width: 210px; }
.header-meta a { display: inline-block; padding: 10px 12px; border: 1px solid var(--line); color: var(--ink); font-size: 10px; text-decoration: none; }
.lab-workspace { min-height: 0; display: grid; grid-template-columns: 292px minmax(420px, 1fr) 304px; }
.left-panel, .right-panel { background: var(--panel); }
.left-panel { border-right: 1px solid var(--line); }
.right-panel { border-left: 1px solid var(--line); }
.panel-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-scroll section { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.section-title > span { color: #747169; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
label { display: grid; gap: 5px; min-width: 0; }
label > span { color: #79766f; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
input, select { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 0; background: #0f0f0e; }
.field-grid { display: grid; gap: 8px; margin-bottom: 9px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.validation { display: grid; gap: 3px; margin-top: 10px; padding: 8px 9px; border-left: 2px solid; font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.validation.valid { border-color: var(--green); background: rgba(104,216,151,.06); color: #9de5bc; }
.validation.invalid { border-color: var(--red); background: rgba(255,131,117,.06); color: #ffaaa0; }
.validation small { color: #d1a66a; }
.tool-grid, .shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 9px; }
.shape-grid { grid-template-columns: repeat(2, 1fr); }
button { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); background: #1c1c19; font-size: 9px; font-weight: 700; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
button:hover:not(:disabled) { border-color: rgba(242,237,226,.5); transform: translateY(-1px); }
button.active { background: var(--yellow); border-color: var(--yellow); color: #11110f; }
button.primary { background: var(--yellow); border-color: var(--yellow); color: #11110f; }
button.secondary { background: transparent; }
button.full { width: 100%; }
button:disabled { opacity: .28; cursor: not-allowed; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 9px 0; color: #bbb7ad; font-size: 9px; cursor: pointer; }
.check-row input { width: auto; accent-color: var(--yellow); }
.check-row span { color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
.text-controls { grid-template-columns: 90px 1fr; align-items: end; margin-top: 8px; }
.text-actions { margin-top: 8px; }
.compact-field { margin-top: 8px; }
.font-select { min-height: 42px; font-size: 14px; }
.font-select option { padding: 7px 9px; font-size: 16px; background: #0f0f0e; color: var(--ink); }
.font-specimen { min-height: 58px; display: flex; align-items: center; overflow: hidden; margin-top: 7px; padding: 8px 10px 5px; border: 1px solid var(--line); background: #11110f; color: var(--ink); font-size: 30px; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.layer-inspector { display: grid; gap: 8px; }
.layer-inspector .section-title { margin-bottom: 3px; }
.layer-recipe-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; color: #8d8980; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.layer-recipe-row button { min-height: 28px; }
.trace-link { display: grid; gap: 4px; padding: 8px 9px; border-left: 2px solid var(--yellow); background: rgba(242,204,12,.06); }
.trace-link b { font-size: 9px; }
.trace-link span { color: #8e8a81; font: 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.danger-action { border-color: rgba(255,131,117,.35); color: #ff9b8f; background: transparent; }
.button-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.saved-designs { display: grid; gap: 4px; margin-top: 8px; }
.saved-designs div { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 4px; }
.saved-designs div button:first-child { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.saved-designs div button:last-child { color: #d98578; }
.saved-designs p, .empty-copy { color: var(--muted); font-size: 9px; line-height: 1.45; }
.stage-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 14px; gap: 9px; background: #10100f; }
.view-tabs { display: flex; gap: 6px; }
.view-tabs button { min-height: 28px; padding: 6px 12px; border-radius: 999px; color: var(--muted); background: transparent; }
.view-tabs button.active { color: #11110f; background: var(--ink); border-color: var(--ink); }
.canvas-frame { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); background: #171715; }
#designCanvas { position: absolute; inset: 0; display: block; touch-action: none; }
#designCanvas.paint-mode { cursor: crosshair; }
#designCanvas.select-mode { cursor: move; }
.canvas-note { position: absolute; left: 12px; bottom: 10px; padding: 6px 8px; background: rgba(10,10,9,.78); color: #aaa69d; pointer-events: none; font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.status { min-height: 34px; padding: 8px 10px; border-left: 2px solid #777; background: #171715; color: #aaa79f; font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.status[data-tone="success"] { border-color: var(--green); color: #a1e8c0; }
.status[data-tone="error"] { border-color: var(--red); color: #ffaaa0; }
.status[data-tone="working"] { border-color: #66a7ff; color: #9fc7ff; }
.export-warning { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid #c98b35; background: #2a2115; color: #f2c980; font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.export-warning label { grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; }
.export-warning label > span { color: #d5a95e; }
.export-warning select { padding-block: 6px; border-color: rgba(242,201,128,.35); background: #17120c; }
.export-warning b { color: #ffe1a8; text-transform: uppercase; letter-spacing: .06em; }
.export-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.active-recipe canvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 26/15; border: 1px solid var(--line); }
.active-recipe > small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.recipe-browser { display: grid; gap: 11px; }
.recipe-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -17px -18px 1px; border-bottom: 1px solid var(--line); }
.recipe-tabs button { min-height: 39px; border: 0; border-right: 1px solid var(--line); background: #151513; color: var(--muted); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.recipe-tabs button:last-child { border-right: 0; }
.recipe-tabs button.active { background: var(--yellow); color: #11110f; }
.recipe-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 7px; }
.recipe-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 2px; }
.recipe-subhead b { color: #bbb7ae; font: 700 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.recipe-subhead span { color: #706d66; font: 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.recipe-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.recipe-choice { min-width: 0; padding: 4px; text-align: left; background: #131311; }
.recipe-choice.selected { border-color: var(--yellow); box-shadow: inset 0 -2px 0 var(--yellow); }
.recipe-choice canvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 74/54; margin-bottom: 4px; }
.recipe-choice span, .recipe-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-choice span { font-size: 7px; }
.recipe-choice small { margin-top: 2px; color: #706d66; font: 6px/1 monospace; text-transform: uppercase; }
.layer-list { display: grid; gap: 4px; }
.layer-row { display: grid; grid-template-columns: minmax(0,1fr) 28px 28px 28px; gap: 3px; }
.layer-row.selected { box-shadow: inset 3px 0 0 var(--yellow); }
.layer-row.hidden { opacity: .42; }
.layer-row button { min-height: 31px; padding: 4px; }
.layer-row .layer-main { min-width: 0; padding-left: 9px; text-align: left; }
.layer-row b, .layer-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row b { font-size: 8px; }
.layer-row small { margin-top: 3px; color: #77736b; font: 6px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pixel-layer-row { display: grid; gap: 3px; margin-top: 7px; padding: 8px; border: 1px dashed var(--line); color: #a5a198; }
.pixel-layer-row b { font-size: 8px; }
.pixel-layer-row small { color: #706d66; font: 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 1100px) {
  .lab-workspace { grid-template-columns: 244px minmax(360px, 1fr) 244px; }
  .panel-scroll section { padding-inline: 13px; }
  .recipe-list { grid-template-columns: repeat(2, 1fr); }
  .recipe-tabs { margin-inline: -13px; }
}
@media (max-width: 760px) {
  html, body { height: auto; overflow: auto; }
  .lab-shell { height: auto; }
  .lab-header { align-items: start; display: grid; }
  .header-meta { align-items: stretch; display: grid; }
  .header-meta label { width: auto; }
  .lab-workspace { display: block; }
  .left-panel, .right-panel { display: block; border: 0; }
  .stage-panel { min-height: 720px; }
  .canvas-frame { min-height: 520px; }
  .export-bar { grid-template-columns: 1fr 1fr; }
}