/* Shape Studio: interface styles. Geist, quiet chrome and one brand green, in light and dark themes. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
}

:root {
  --app: #f4f5f7;
  --panel: #ffffff;
  --stage: #e8eaee;
  --stage-dot: rgba(17, 20, 26, .08);
  --text: #14171c;
  --muted: #5a6170;
  --faint: #868d99;
  --line: #e7e9ed;
  --line-strong: #d3d7de;
  --control: #f1f2f5;
  --brand: #0b7f57;
  --brand-hover: #096b49;
  --brand-soft: #e3f4ec;
  --on-brand: #ffffff;
  --danger: #c2362f;
  --clear: #c2362f;
  --boost: #1f5fd1;
  --warn: #9a5b00;
  --warn-soft: #fff4dd;
  --ring: rgba(0, 0, 0, .12);
  --shadow-1: 0 1px 2px rgba(17, 20, 26, .06), 0 1px 1px rgba(17, 20, 26, .04);
  --shadow-2: 0 2px 4px rgba(17, 20, 26, .05), 0 8px 24px rgba(17, 20, 26, .10);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app: #111316;
    --panel: #17191d;
    --stage: #0c0d10;
    --stage-dot: rgba(255, 255, 255, .06);
    --text: #e8eaee;
    --muted: #a3a9b4;
    --faint: #737a86;
    --line: #262a30;
    --line-strong: #3a3f48;
    --control: #22252b;
    --brand: #3fcf8e;
    --brand-hover: #5ad9a0;
    --brand-soft: #133325;
    --on-brand: #08130e;
    --danger: #ff6b61;
    --clear: #ff6b61;
    --boost: #6ea2ff;
    --warn: #ffc266;
    --warn-soft: #3a2c10;
    --ring: rgba(255, 255, 255, .14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .24), 0 1px 1px rgba(0, 0, 0, .16);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app: #111316;
  --panel: #17191d;
  --stage: #0c0d10;
  --stage-dot: rgba(255, 255, 255, .06);
  --text: #e8eaee;
  --muted: #a3a9b4;
  --faint: #737a86;
  --line: #262a30;
  --line-strong: #3a3f48;
  --control: #22252b;
  --brand: #3fcf8e;
  --brand-hover: #5ad9a0;
  --brand-soft: #133325;
  --on-brand: #08130e;
  --danger: #ff6b61;
  --clear: #ff6b61;
  --boost: #6ea2ff;
  --warn: #ffc266;
  --warn-soft: #3a2c10;
  --ring: rgba(255, 255, 255, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .24), 0 1px 1px rgba(0, 0, 0, .16);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--app); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; font: 11.5px/17px var(--font); text-align: center; color: var(--muted); background: var(--panel); }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 14px; height: 14px; }
.shape-icon { width: 26px; height: 26px; fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ layout (desktop; tablet and phone at the end) */

.app {
  position: relative;
  display: grid;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: 272px minmax(0, 1fr) 0;
  grid-template-rows: 52px minmax(0, 1fr);
  grid-template-areas: "top top top" "looks stage drawer";
  transition: grid-template-columns .2s ease-out;
  /* the tablet drawer waits translated off the right edge; clip it so no focus or scroll can shift the app sideways (clip, unlike hidden, cannot be scrolled) */
  overflow: hidden;
  overflow: clip;
}
.app.ft-open { grid-template-columns: 272px minmax(0, 1fr) 320px; }
.app.looks-closed { grid-template-columns: 48px minmax(0, 1fr) 0; }
.app.looks-closed.ft-open { grid-template-columns: 48px minmax(0, 1fr) 320px; }
.topbar { grid-area: top; }
.looks { grid-area: looks; }
.stage { grid-area: stage; }
.drawer { grid-area: drawer; }
.sheet-tabs { display: none; }

/* ------------------------------------------------------------------ top bar */

.topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 8px 0 4px; border: 0; border-radius: 8px; background: none; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover, .brand[aria-expanded="true"] { background: var(--control); }
.brand .icon-sm { color: var(--muted); }
.mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5.25px; background: #19976a; flex: none; }
.mark svg { width: 24px; height: 24px; }
.tb-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line); flex: none; }
.tb-spacer { flex: 1 1 auto; min-width: 8px; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; }
.tb-btn:hover:not(:disabled) { background: var(--control); color: var(--text); }
.tb-btn.label { color: var(--text); font-weight: 500; }
.tb-btn[aria-expanded="true"], .tb-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.tb-btn .tb-chev { margin-left: -3px; color: var(--muted); }
.art-size, .svg-size { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-size::after { content: "·"; margin: 0 7px; }
.svg-size { margin-right: 6px; }
.svg-size.warn { color: var(--warn); font-weight: 600; }
#useBtn { height: 36px; padding: 0 14px; margin-left: 4px; }

/* ------------------------------------------------------------------ buttons and fields */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow-1); white-space: nowrap; font-weight: 500; transition: background-color .15s ease-out, transform .1s; }
.btn:hover:not(:disabled) { background: var(--control); }
.btn.primary { border-color: transparent; background: var(--brand); color: var(--on-brand); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn.primary:active:not(:disabled) { transform: scale(.98); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--control); }
.btn.danger { color: var(--danger); }
.btn.small { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--control); color: var(--text); }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn[aria-expanded="true"] { color: var(--brand); }

.row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 60px; align-items: center; gap: 10px; min-height: 30px; }
.row > label, .row > .row-label { color: var(--muted); font-size: 13.5px; line-height: 1.25; }
.row.wide { grid-template-columns: 92px minmax(0, 1fr); }
.row.stack { grid-template-columns: 1fr; gap: 6px; }
.row.disabled { opacity: .45; pointer-events: none; }
.num-wrap { position: relative; }
.num-wrap .unit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 11.5px; pointer-events: none; }
.num-wrap input[type="number"] { padding-right: 22px; }
.num-wrap input[type="number"]:only-child { padding-right: 6px; }
.px-hint { grid-column: 2 / 4; margin-top: -6px; color: var(--faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

input[type="number"], input[type="text"], select, textarea { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font-variant-numeric: tabular-nums; }
textarea { height: auto; padding: 8px 10px; font: 12.5px/1.5 var(--mono); resize: vertical; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; text-align: right; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select { padding-right: 24px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
/* values read as text until hovered or focused */
.row .num-wrap input[type="number"], .r2-vals input[type="number"] { border-color: transparent; background: transparent; }
.row .num-wrap input[type="number"]:hover, .r2-vals input[type="number"]:hover { border-color: var(--line-strong); }
.row .num-wrap input[type="number"]:focus, .r2-vals input[type="number"]:focus { border-color: var(--brand); background: var(--panel); }

input[type="range"] { --p: 50%; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--brand) var(--p), var(--control) var(--p)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--control); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 1px solid rgba(17, 20, 26, .16); border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 1px solid rgba(17, 20, 26, .16); border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); }
input[type="range"]:disabled { cursor: default; }

/* two-handle slider: two range inputs over one track */
.r2-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.r2-vals { display: flex; align-items: center; gap: 2px; }
.r2-vals .num-wrap { width: 64px; }
.r2-dash { color: var(--faint); font-size: 12px; }
.range2 { position: relative; grid-column: 1 / -1; height: 22px; }
.range2 .r2-track, .range2 .r2-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px; }
.range2 .r2-track { left: 0; right: 0; background: var(--control); }
.range2 .r2-fill { background: var(--brand); }
.range2 input[type="range"] { position: absolute; inset: 0; pointer-events: none; }
.range2 input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.range2 input[type="range"]::-moz-range-track { background: transparent; }
.range2 input[type="range"]::-moz-range-progress { background: transparent; }
.range2 input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.range2 input[type="range"]::-moz-range-thumb { pointer-events: auto; }

input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
input.switch { -webkit-appearance: none; appearance: none; position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); flex: none; transition: background-color .15s ease-out; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s ease-out; }
input.switch:checked { background: var(--brand); }
input.switch:checked::after { transform: translateX(14px); }
input.switch:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row.switch-row { display: flex; min-height: 32px; }
.row.switch-row > label { color: var(--text); font-weight: 500; }

input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer; flex: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }
.colour-field { display: flex; gap: 6px; align-items: center; min-width: 0; }
.colour-field input[type="text"] { font-family: var(--mono); font-size: 12.5px; text-transform: lowercase; }

.seg { display: flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--control); min-width: 0; }
.seg button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.seg button .icon { width: 16px; height: 16px; }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-1); }
.seg button:hover:not([aria-checked="true"]):not([aria-selected="true"]) { color: var(--text); }
/* in the narrow drawer a long label (Transparent) takes the room it needs instead of being cut off */
.fg .seg button { flex: 1 1 auto; }

/* ------------------------------------------------------------------ Looks panel */

.looks { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.looks-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 16px; }
.looks-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.looks-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.looks .switch-row { margin: 0 16px 12px; padding: 8px 10px; border-radius: 8px; background: var(--control); color: var(--muted); font-size: 13.5px; cursor: pointer; }
.look-list { --look-aspect: 2.25; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: grid; gap: 14px; align-content: start; scrollbar-width: thin; }
.look { display: grid; gap: 7px; padding: 0; border: 0; background: none; text-align: left; }
.look canvas { display: block; width: 100%; aspect-ratio: var(--look-aspect); border: 1px solid var(--ring); border-radius: 10px; background: var(--control); outline: 2px solid transparent; outline-offset: 2px; transition: transform .15s ease-out, box-shadow .15s ease-out; }
.look:hover canvas { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.look:focus-visible { outline: none; }
.look:focus-visible canvas, .look[aria-pressed="true"] canvas { outline-color: var(--brand); }
.look span { padding-left: 2px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.look[aria-pressed="true"] span { color: var(--text); }
.looks-rail { display: none; }
@media (min-width: 900px) {
  .app.looks-closed .looks > :not(.looks-rail) { display: none; }
  .app.looks-closed .looks-rail { display: grid; place-items: center; width: 36px; height: 36px; margin: 10px auto; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); }
  .app.looks-closed .looks-rail:hover { background: var(--control); color: var(--text); }
}

/* ------------------------------------------------------------------ stage, context bar, zoom, sample text */

.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background-color: var(--stage); background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.2px); background-size: 16px 16px; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
/* the part of the stage you can see: the bar, zoom and hints sit in it, and the bar's compact form follows its width (a tablet's Fine-tune covers the right) */
.stage-room { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: inline-size; }
.stage-room > * { pointer-events: auto; }

.ctxbar { --bar-pad: 6px; position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); display: flex; align-items: center; padding: 6px var(--bar-pad); background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.ctxbar::-webkit-scrollbar { display: none; }
/* more controls than room: the edge with more fades, with an arrow over it; focus scrolls a control clear of the fade */
.ctxbar { scroll-padding-inline: 36px; }
.ctx-more { position: sticky; z-index: 1; flex: 0 0 auto; align-self: stretch; display: none; place-items: center; width: 40px; margin-block: -6px; color: var(--muted); cursor: pointer; }
.ctx-more.left { left: calc(-1 * var(--bar-pad)); margin-left: calc(-1 * var(--bar-pad)); margin-right: calc(var(--bar-pad) - 40px); justify-content: start; padding-left: var(--bar-pad); background: linear-gradient(to right, var(--panel) 55%, transparent); }
.ctx-more.left .icon { transform: rotate(180deg); }
.ctx-more.right { right: calc(-1 * var(--bar-pad)); margin-right: calc(-1 * var(--bar-pad)); margin-left: calc(var(--bar-pad) - 40px); justify-content: end; padding-right: var(--bar-pad); background: linear-gradient(to left, var(--panel) 55%, transparent); }
.ctx-more:hover { color: var(--text); }
.ctxbar.more-left .ctx-more.left, .ctxbar.more-right .ctx-more.right { display: flex; }
.ctxbar:empty { display: none; }
/* a group squeezes its name and hint first, then stops at its narrowest, so the bar scrolls over all of it and the right-hand arrow sits at its end */
.ctx-group { display: flex; align-items: center; gap: 4px; min-width: min-content; }
/* nothing in the bar squeezes: when the stage is too narrow the bar scrolls sideways instead, so no control is ever out of reach */
.ctx-group > *, .ctx-range > * { flex: none; }
.ctx-item { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-weight: 500; white-space: nowrap; }
.ctx-item:hover:not(:disabled), .ctx-item[aria-expanded="true"] { background: var(--control); }
.ctx-item .lead, .ctx-item .icon-sm { color: var(--muted); }
.ctx-item.icon-only { padding: 0 9px; }
.ctx-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); flex: none; }
.ctx-chips { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.chip { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--control); box-shadow: inset 0 0 0 1px var(--ring); flex: none; }
.chip.sq { border-radius: 6px; }
.chip.none { background: repeating-conic-gradient(#d9dce1 0% 25%, #ffffff 0% 50%) 50% / 10px 10px; }
.chip[aria-expanded="true"], .ctx-item[aria-expanded="true"] .chip { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip-add { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px dashed var(--muted); border-radius: 50%; background: none; color: var(--muted); flex: none; }
.chip-add .icon { width: 14px; height: 14px; }
.ctx-range { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; }
.ctx-range input[type="range"] { width: 92px; }
.ctx-end { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ctx-end.ctx-title { color: var(--text); font-size: 13px; }
.ctx-ri { display: none; color: var(--muted); }
.ctx-hint { flex: 0 1 auto; min-width: 96px; max-width: 380px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 13px; }
.ctx-name { flex: 0 1 auto; min-width: 48px; max-width: 160px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ctxbar .seg button { height: 28px; flex: 0 0 auto; }
.ctxbar select { width: auto; }
/* A little short of room: the sliders keep their names (Opacity, Scale) and drop the words at each end. */
@container (max-width: 1040px) {
  .ctx-range.has-icon .ctx-end:not(.ctx-title) { display: none; }
}
/* Compact: the sliders' names and end words give way to one icon each. Sliders with no icon (zone, brush) keep their word. */
@container (max-width: 960px) {
  .ctx-item > .lead, .ctx-range.has-icon .ctx-end { display: none; }
  .ctx-range.has-icon .ctx-ri { display: block; }
  .ctx-range input[type="range"] { width: 80px; }
}
/* Narrow (a tablet with Looks open, or a desktop with Looks and Fine-tune both open): shorter sliders, and Placement and Text position
   are icons. Their words stay for screen readers, and the tooltip carries the current value. The phone layout scrolls its own bar. */
@media (min-width: 900px) {
  @container (max-width: 720px) {
    .ctx-group { gap: 2px; }
    .ctx-sep { margin: 0 2px; }
    .ctx-chips { gap: 4px; padding: 0 4px; }
    .ctx-range { gap: 6px; padding: 0 4px; }
    .ctx-range input[type="range"] { width: 56px; }
    .ctx-name { max-width: 96px; }
    .ctx-pick { padding: 0 9px; }
    .ctx-pick > .lead { display: block; color: var(--text); }
    .ctx-pick > .icon-sm { display: none; }
    .ctx-pick > .ctx-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}

.zoom-ctl { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow-2); }
.zc-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); }
.zc-btn:hover { background: var(--control); color: var(--text); }
.zc-pct { height: 28px; min-width: 54px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zc-pct:hover, .zc-pct[aria-expanded="true"] { background: var(--control); }

.sample-layer { position: absolute; z-index: 1; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; color: var(--s-text, #ffffff); font-family: var(--font); line-height: 1.2; }
.sample-layer .s-box { position: absolute; display: flex; flex-direction: column; justify-content: center; }
.sample-layer.grab .s-box { pointer-events: auto; cursor: grab; touch-action: none; }
.sample-layer.grab .s-box:active { cursor: grabbing; }
.s-h { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.s-p { margin: 0; opacity: .82; line-height: 1.45; }
.s-row { display: flex; flex-wrap: wrap; gap: .6em; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; padding: .7em 1.3em; border-radius: .45em; background: var(--s-text); color: var(--s-on); font-weight: 600; white-space: nowrap; }
.s-btn.ghost { background: none; color: var(--s-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--s-text) 55%, transparent); }
.s-nav { position: absolute; display: flex; align-items: center; gap: 2em; font-weight: 500; }
.s-logo { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; }
.s-mark { width: 1.5em; height: 1.5em; border-radius: .35em; background: currentColor; opacity: .9; }
.s-grow { flex: 1; }
.s-cols { display: flex; gap: 3em; }
.s-col { display: grid; gap: .5em; opacity: .82; }
.s-menu { width: 1.4em; height: 1em; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }

.stage-banner { position: absolute; z-index: 2; left: 50%; top: 72px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-2); }
.stage-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 200px); padding: 7px 12px; border-radius: 8px; background: rgba(20, 22, 26, .88); color: #fff; font-size: 13px; text-align: center; pointer-events: none; }
.drop-hint { position: absolute; inset: 12px; display: grid; place-items: center; border: 2px dashed var(--brand); border-radius: 12px; background: color-mix(in srgb, var(--brand) 10%, transparent); font-weight: 600; pointer-events: none; }

/* ------------------------------------------------------------------ Fine-tune drawer */

.drawer { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--panel); border-left: 1px solid var(--line); visibility: hidden; transition: visibility .2s; }
.app.ft-open .drawer { visibility: visible; transition: none; }
.app:not(.ft-open) .drawer { border-left-width: 0; }
/* The panel inside scrolls. Its width is fixed (the drawer's 320 px less its border), so the contents do not reflow while the column slides open and the scrollbar never pushes them sideways. */
.drawer-scroll { width: 319px; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 16px; background: var(--panel); }
.drawer-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

.fg { border-top: 1px solid var(--line); }
.fg-bar { display: flex; align-items: center; padding-right: 8px; }
.fg-bar h2 { flex: 1; margin: 0; font-size: inherit; font-weight: inherit; }
.fg-head { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 8px 0 16px; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 600; }
.fg-head:hover { background: var(--control); }
.fg-head > .icon { color: var(--muted); }
.fg-name { flex: 1; }
.fg-chev { display: grid; color: var(--muted); transition: transform .15s ease-out; }
.fg-head[aria-expanded="true"] .fg-chev { transform: rotate(90deg); }
.fg-help .icon { width: 15px; height: 15px; }
.fg-body { display: grid; gap: 12px; padding: 4px 16px 18px; }
.fg-help-text { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--control); }
.sec-note { margin: 0; color: var(--muted); font-size: 13px; }
.sec-note:empty { display: none; }
.sec-note.warn { color: var(--warn); }
.more-btn { display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 28px; padding: 0 6px 0 2px; border: 0; border-radius: 6px; background: none; color: var(--brand); font-size: 13.5px; font-weight: 500; }
.more-btn .icon { width: 14px; height: 14px; transition: transform .15s ease-out; }
.more-btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
.fg-more-body { display: grid; gap: 12px; padding-top: 2px; }
.sub-head { margin: 6px 0 -2px; font-size: 13px; font-weight: 600; }

.sec-body { display: grid; gap: 10px; padding: 2px 16px 16px; }

/* shape picker */
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.shape-opt { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 11.5px; }
.shape-opt .shape-icon { color: var(--text); opacity: .78; }
.shape-opt:hover { background: var(--control); color: var(--text); }
.shape-opt[aria-checked="true"] { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 600; }
.shape-opt[aria-checked="true"] .shape-icon { color: var(--brand); opacity: 1; }

/* palette */
.palette { display: grid; gap: 6px; }
.pal-row { display: grid; grid-template-columns: auto minmax(0, 76px) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.pal-row.has-pipette { grid-template-columns: auto minmax(0, 76px) auto minmax(0, 1fr) auto; }
.pal-row input[type="text"] { font-family: var(--mono); font-size: 12.5px; }
.pal-weight { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; align-items: center; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.swatches, .pop-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ring); }

/* zones */
.zones-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zones-block { display: grid; gap: 8px; padding: 0 16px 16px; }
.fg .zones-block { padding: 0; }
.zone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.zone-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 30px; align-items: center; gap: 4px; padding: 2px; border-radius: 8px; }
.zone-item:hover { background: var(--control); }
.zone-item.selected { background: var(--brand-soft); }
.zone-item.is-hidden .zone-name { color: var(--faint); }
.zone-name { min-width: 0; height: 30px; padding: 0 4px; border: 0; background: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-name-input { height: 28px; }
.zone-badge { padding: 1px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone-badge.clear { color: var(--clear); background: color-mix(in srgb, var(--clear) 12%, transparent); }
.zone-badge.boost { color: var(--boost); background: color-mix(in srgb, var(--boost) 14%, transparent); }
.zones-empty { margin: 0; color: var(--muted); font-size: 13px; }
.zones-opts { display: grid; gap: 10px; }

/* halftone */
.angle-row { grid-column: 2 / 4; display: flex; gap: 4px; margin-top: -4px; }
.angle-row .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; font-variant-numeric: tabular-nums; }
.angle-row .btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.peak-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.peak-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 4px; padding: 0 2px 0 4px; border-radius: 8px; }
.peak-item:hover { background: var(--control); }
.peak-item.selected { background: var(--brand-soft); }
.peak-badge { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.compact-block { display: grid; gap: 6px; }
.compact-block h3 { margin: 0; }
li[hidden] { display: none; }

/* zone inspector */
.inspector-head { position: sticky; top: 52px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px 10px; border-top: 1px solid var(--line); background: var(--panel); }
.inspector-head input { font-weight: 600; }

/* ------------------------------------------------------------------ menus, popovers, dialogs, toasts */

.menu { position: fixed; z-index: 50; min-width: 220px; padding: 5px; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu a { color: inherit; text-decoration: none; }
.menu button, .menu a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; text-align: left; white-space: nowrap; }
.menu button:hover, .menu button:focus-visible, .menu a:hover, .menu a:focus-visible { background: var(--control); outline: none; }
.menu [role="menuitemcheckbox"], .menu [role="menuitemradio"] { padding-left: 30px; }
.menu [aria-checked="true"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.menu .menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }
.menu .menu-label { padding: 6px 10px 2px; color: var(--faint); font-size: 12.5px; }
.menu .menu-meta { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.menu .narrow-only { display: none; }
.menu .menu-note { max-width: 264px; margin: 0; padding: 4px 10px 6px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.menu kbd { margin-left: auto; }

.popover { position: fixed; z-index: 55; display: grid; gap: 12px; width: 288px; max-height: calc(100dvh - 24px); overflow: auto; padding: 14px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); animation: pop-in .12s ease-out; }
.popover h3 { margin: 0; font-size: 14px; font-weight: 600; }
.pop-fields { display: grid; gap: 8px; }
.size-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes pop-in { from { opacity: 0; transform: scale(.98); } }

.dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: var(--shadow-2), 0 24px 64px rgba(0, 0, 0, .2); overflow: auto; }
.dialog.wide { width: min(980px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(12, 14, 18, .45); }
.dlg-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 22px; background: var(--panel); }
.dlg-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dlg-sub { margin: 0 22px 14px; color: var(--muted); }
.dialog > :last-child { margin-bottom: 20px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px; }
.field-label { display: block; margin: 0 22px 6px; color: var(--muted); font-size: 13px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { color: var(--muted); font-size: 13px; font-weight: 500; }
#customPathInput { display: block; width: calc(100% - 44px); margin: 0 22px; }
.custom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 22px 0; }
.custom-preview { width: 64px; height: 64px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
#customMsg { margin: 8px 22px; min-height: 1em; }

.use-body { display: grid; gap: 16px; padding: 4px 22px 4px; }
.use-tabs { justify-self: start; }
.use-tabs button { flex: 1 1 auto; padding: 0 14px; }
.use-panel { display: grid; gap: 14px; min-width: 0; }
.use-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.prompt-box { height: 300px; border-color: transparent; background: var(--control); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; }
.use-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svg-settings { border-top: 1px solid var(--line); padding-top: 10px; }
.svg-settings summary { cursor: pointer; font-weight: 600; }
.svg-settings > div { display: grid; gap: 10px; padding-top: 10px; }
.export-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; padding: 6px 22px 0; }
.use-panel .export-body { padding: 0; }
.export-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.export-side { display: grid; gap: 16px; align-content: start; }
.export-side h3, .export-main h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.code-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.code-tabs button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.code-tabs button[aria-selected="true"] { background: var(--control); color: var(--text); font-weight: 600; }
.code-box { width: 100%; height: 240px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
/* the prompt is prose with a link in it: break at spaces, and anywhere only inside a string that has none */
.code-box.prompt-box { word-break: normal; overflow-wrap: anywhere; }
.size-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.size-line strong { font-size: 18px; }
.size-warn { padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--text); }
.size-warn strong { color: var(--warn); }
.size-warn ul { margin: 6px 0 0; padding-left: 18px; }
.raster-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.raster-row select { width: auto; }

.share-row { display: flex; gap: 8px; padding: 0 22px; }
.share-row input { height: 34px; font-family: var(--mono); font-size: 12.5px; }
#shareInfo { margin: 8px 22px 0; }

.tile-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 0 22px; }
.tile-preview { display: block; width: 100%; border-radius: 8px; background: var(--stage); box-shadow: 0 0 0 1px var(--line); }
.tile-side { display: grid; gap: 10px; align-content: start; }

.frames { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding: 0 22px 4px; }
.frame { display: grid; gap: 6px; }
.frame-wide { flex-basis: 100%; }
.frame-box { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.frame-box img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.frame-box .frame-content { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.frame-cap { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

table.keys { width: calc(100% - 44px); margin: 4px 22px 0; border-collapse: collapse; }
table.keys th { padding: 7px 12px 7px 0; text-align: left; font-weight: 400; color: var(--muted); }
table.keys td { padding: 7px 0; text-align: right; white-space: nowrap; }
table.keys tr + tr { border-top: 1px solid var(--line); }

.toasts { position: fixed; z-index: 80; left: 50%; bottom: 40px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.toast { max-width: 560px; padding: 9px 14px; border-radius: 10px; background: #1d2026; color: #fff; box-shadow: var(--shadow-2); font-size: 13.5px; line-height: 1.45; animation: toast-in .18s ease-out; }
.toast.warn { background: #6b3f00; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.coach { position: fixed; z-index: 60; width: 272px; padding: 14px 14px 12px; border-radius: 12px; background: #1d2026; color: #fff; box-shadow: var(--shadow-2); }
.coach p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.coach-actions { display: flex; justify-content: flex-end; gap: 6px; }
.coach .btn.ghost { color: #c9ced8; }
.coach .btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.coach .btn.primary { background: #3fcf8e; color: #08130e; }
.coach-arrow { position: absolute; width: 12px; height: 12px; background: #1d2026; transform: rotate(45deg); }

.selftest-badge { position: fixed; z-index: 90; right: 12px; bottom: 64px; max-width: min(440px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 10px; background: #1d2026; color: #fff; box-shadow: var(--shadow-2); font-weight: 600; }
.selftest-badge.pass { background: #13753f; }
.selftest-badge.fail { background: #a3261f; }
.selftest-badge ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; font-weight: 400; }

/* ------------------------------------------------------------------ tablet: the drawer slides over the stage */

@media (min-width: 900px) and (max-width: 1099px) {
  .app, .app.ft-open { grid-template-columns: 272px minmax(0, 1fr); grid-template-areas: "top top" "looks stage"; }
  .app.looks-closed, .app.looks-closed.ft-open { grid-template-columns: 48px minmax(0, 1fr); }
  .drawer { grid-area: auto; position: absolute; z-index: 4; top: 52px; right: 0; bottom: 0; width: 320px; border-left: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform .2s ease-out, visibility .2s; }
  .app.ft-open .drawer { transform: none; transition: transform .2s ease-out; }
  .app:not(.ft-open) .drawer { border-left-width: 1px; }
  .drawer-scroll { width: 100%; }
  /* the open drawer covers the right of the stage: the bar, zoom and hints keep to what is left (Looks folds to its rail meanwhile) */
  .app.ft-open .stage-room { right: 320px; }
}

/* ------------------------------------------------------------------ phone: canvas on top, context bar under it, then tabs */

@media (max-width: 899px) {
  .app, .app.ft-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(260px, 50dvh) 48px minmax(0, 1fr); grid-template-areas: "top" "stage" "tabs" "sheet"; }
  .topbar { padding: 0 8px; }
  .looks, .drawer { grid-area: sheet; position: static; visibility: visible; overflow-y: auto; border: 0; }
  .looks:not(.active), .drawer:not(.active) { display: none; }
  .drawer-scroll { width: auto; height: auto; overflow: visible; }
  #looksCollapse, .looks-rail { display: none; }
  .sheet-tabs { grid-area: tabs; display: flex; gap: 4px; padding: 4px 8px; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sheet-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 600; }
  .sheet-tabs button[aria-selected="true"] { background: var(--control); color: var(--text); }
  .brand-name, .brand .icon-sm, .topbar .tb-sep, #fineTuneBtn, #newBtn .tb-label, #newBtn .tb-chev { display: none; }
  .tb-btn { min-width: 40px; }
  .brand { min-width: 40px; justify-content: center; }
  .ctxbar { --bar-pad: 8px; top: auto; bottom: 0; left: 0; right: 0; transform: none; max-width: none; padding: 6px var(--bar-pad); border-radius: 0; box-shadow: 0 -1px 0 var(--line); }
  .zoom-ctl { right: 10px; bottom: 66px; }
  .stage-hint { bottom: 66px; max-width: calc(100% - 24px); }
  .inspector-head { top: 0; }
  .brand, .tb-btn, .ctx-item, .btn, .btn.small, .icon-btn, .zc-btn, .zc-pct, input[type="number"], input[type="text"], select { min-height: 40px; }
  .icon-btn, .zc-btn { width: 40px; }
  .chip, .chip-add { width: 40px; height: 40px; }
  .chip.sq { border-radius: 8px; }
  .swatch, input[type="color"] { width: 40px; height: 40px; }
  .seg button { min-height: 40px; }
  .row { min-height: 40px; }
  .more-btn, .check, .row.switch-row, .looks .switch-row, .zone-name, .menu button, .code-tabs button { min-height: 40px; }
  /* sliders get a 40 px touch area; the track stays 4 px thin and sits in the middle */
  input[type="range"], .range2 { height: 40px; }
  .range2 .r2-track, .range2 .r2-fill { top: 18px; }
  /* a switch row is pressed anywhere along its width, not just on the label or the switch */
  .row.switch-row { position: relative; }
  .row.switch-row > label::after { content: ""; position: absolute; inset: 0; }
  .row.switch-row > input.switch { z-index: 1; }
  .export-body, .tile-body, .use-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) and (max-height: 500px) {
  .app, .app.ft-open { grid-template-rows: 52px minmax(0, 1fr) 48px minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .art-size, .svg-size { display: none; }
  /* no room for New and Help in the top bar: the menu holds them */
  #newBtn, #helpBtn { display: none; }
  .menu button.narrow-only { display: flex; }
  .menu .menu-sep.narrow-only { display: block; }
  .popover { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 70dvh; border-radius: 12px 12px 0 0; }
  .menu { max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}