:root {
  --bg: #0a0b0d;
  --panel: #121419;
  --raised: #191c22;
  --raised-2: #20242b;
  --line: #30353e;
  --line-soft: #23272e;
  --ink: #f0eee6;
  --muted: #8d929b;
  --signal: #c9ff43;
  --signal-soft: #c9ff431e;
  --orange: #ff9f43;
  --danger: #ff665c;
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--bg); font-family: var(--sans); }
button, input, select, textarea { font: inherit; }
button, select, input[type="range"], input[type="color"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) auto auto auto;
  align-items: center;
  gap: 22px;
  height: 66px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #101216ee;
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-glyph { display: grid; place-items: center; width: 36px; height: 36px; color: #0b0c0e; background: var(--signal); font: 900 15px/1 var(--mono); transform: skew(-5deg); }
.brand strong, .brand small { display: block; }
.brand strong { font: 800 14px/1 var(--mono); letter-spacing: .12em; }
.brand small { margin-top: 4px; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.project-name { display: grid; grid-template-columns: auto minmax(70px, 260px); align-items: center; gap: 9px; }
.project-name span, .document-settings label span { color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .13em; }
.project-name input { min-width: 0; padding: 7px 9px; }
.save-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 9px/1 var(--mono); white-space: nowrap; }
.save-state span { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px #c9ff4388; }
.save-state.saving span { background: var(--orange); box-shadow: none; }
.save-state.error { color: var(--danger); }
.save-state.error span { background: var(--danger); box-shadow: none; }
.document-settings, .top-actions { display: flex; align-items: center; gap: 8px; }
.document-settings label { display: flex; align-items: center; gap: 6px; }
.dimension-mark { color: var(--muted); font: 10px var(--mono); }

input[type="text"], input[type="number"], select, textarea, .project-name input {
  width: 100%;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0c0e11;
}
input[type="number"] { padding: 8px; font-family: var(--mono); }
.document-settings input[type="number"] { width: 52px; padding: 7px 6px; }
input[type="color"] { width: 30px; height: 30px; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: transparent; }
select { padding: 9px 30px 9px 10px; }
textarea { min-height: 110px; padding: 10px; resize: vertical; font: 12px/1.5 var(--mono); }

.button, .icon-button, .text-button {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #171a20;
  font: 700 10px/1 var(--mono);
  letter-spacing: .03em;
}
.button { padding: 10px 13px; }
.button:hover, .icon-button:hover { border-color: #68707c; background: var(--raised-2); }
.button.primary { color: #0b0c0e; border-color: var(--signal); background: var(--signal); }
.button.primary:hover { background: #dcff82; }
.button:disabled { opacity: .35; cursor: default; }
.button.wide { width: 100%; margin-top: 8px; }
.icon-button { width: 28px; height: 28px; padding: 0; font-size: 16px; }
.text-button { padding: 0; color: var(--signal); border: 0; background: transparent; text-align: left; }
.eyebrow { color: var(--orange); font: 8px/1 var(--mono); letter-spacing: .17em; }

.workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: calc(100vh - 66px); }
.layers-sidebar { position: relative; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; height: 67px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); }
.sidebar-heading h1, .details-heading h2 { margin: 5px 0 0; font-size: 17px; line-height: 1; }
.count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; font: 9px/1 var(--mono); }
.add-layer-button { width: calc(100% - 20px); margin: 10px; padding: 11px; color: var(--signal); border: 1px dashed #515862; border-radius: 4px; background: transparent; font: 700 10px/1 var(--mono); text-align: left; }
.add-layer-button:hover { border-color: var(--signal); background: var(--signal-soft); }
.add-layer-menu { position: absolute; z-index: 12; top: 112px; right: 10px; left: 10px; overflow: hidden; border: 1px solid #4a515c; border-radius: 5px; background: #191c22; box-shadow: 0 18px 42px #000d; }
.add-layer-menu button { display: grid; gap: 4px; width: 100%; padding: 10px 12px; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.add-layer-menu button:last-child { border-bottom: 0; }
.add-layer-menu button:hover { background: var(--signal-soft); }
.add-layer-menu strong { font: 700 10px/1 var(--mono); }
.add-layer-menu span { color: var(--muted); font: 8px/1.2 var(--mono); }
.layer-list { max-height: calc(100% - 155px); overflow: auto; }
.layer-item { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 61px; padding: 9px 10px; color: inherit; text-align: left; border: 0; border-top: 1px solid var(--line-soft); background: transparent; cursor: grab; }
.layer-item:hover { background: #171a20; }
.layer-item.selected { background: #20241f; box-shadow: inset 3px 0 var(--signal); }
.layer-item.dragging { opacity: .35; cursor: grabbing; }
.layer-item.drop-before::before, .layer-item.drop-after::after { position: absolute; right: 8px; left: 8px; z-index: 2; height: 2px; content: ""; background: var(--signal); box-shadow: 0 0 8px #c9ff4388; }
.layer-item.drop-before::before { top: -1px; }
.layer-item.drop-after::after { bottom: -1px; }
.visibility { display: grid; place-items: center; height: 28px; color: var(--signal); font: 12px/1 var(--mono); }
.visibility.off { color: var(--muted); opacity: .45; }
.layer-copy { min-width: 0; }
.layer-name { display: block; overflow: hidden; color: var(--ink); font: 11px/1.35 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.layer-meta { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font: 8px/1.25 var(--mono); letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.layer-tools { display: flex; gap: 2px; }
.layer-tools button { width: 20px; height: 22px; padding: 0; color: var(--muted); border: 0; background: transparent; font: 10px var(--mono); }
.layer-tools button:hover:not(:disabled) { color: var(--signal); }
.layer-tools button:disabled { opacity: .2; }
.empty-layers { display: grid; gap: 8px; margin: 28px 18px; color: var(--muted); font: 9px/1.5 var(--mono); }
.empty-layers strong { color: #5e646e; letter-spacing: .12em; }
.sidebar-note { position: absolute; right: 14px; bottom: 11px; left: 14px; margin: 0; color: #555b64; font: 8px/1.5 var(--mono); }

.main-stage { position: relative; display: grid; grid-template-rows: 42px minmax(0, 1fr); min-width: 0; min-height: 0; background: #090a0c; }
.stage-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); background: #0e1013; }
.status { min-width: 0; color: var(--muted); font: 9px/1 var(--mono); }
.status output { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-light { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px #c9ff4370; }
.view-controls { display: flex; align-items: center; gap: 5px; color: var(--muted); font: 8px/1 var(--mono); }
.view-controls button { height: 26px; padding: 0 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; background: transparent; font: 10px var(--mono); }
.view-controls button:hover { color: var(--ink); border-color: #68707c; }
.view-controls button.active { color: #0b0c0e; border-color: var(--signal); background: var(--signal); }
.view-controls output { width: 38px; text-align: center; }
.view-controls label { display: flex; align-items: center; gap: 5px; margin: 0 7px; }
.view-controls input { accent-color: var(--signal); }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding: 48px; overflow: auto; background-image: radial-gradient(#292e35 1px, transparent 1px); background-size: 18px 18px; }
.main-stage:has(.details-panel:not(.closed)) .stage { grid-template-columns: minmax(0, 1fr) 326px; }
.stage.dragging { box-shadow: inset 0 0 0 2px var(--signal); }
.canvas-wrap { grid-column: 1; justify-self: center; width: max-content; transform-origin: top center; transition: transform 120ms ease; will-change: transform; }
canvas { display: block; }
#compositor-canvas { cursor: grab; box-shadow: 0 20px 70px #000, 0 0 0 1px #545b65; background-color: #111319; background-image: linear-gradient(45deg, #262a31 25%, transparent 25%), linear-gradient(-45deg, #262a31 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #262a31 75%), linear-gradient(-45deg, transparent 75%, #262a31 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
#compositor-canvas:active { cursor: grabbing; }
#compositor-canvas.painting { cursor: cell; }
#compositor-canvas.moving-layer { cursor: grab; }
#compositor-canvas.moving-layer:active { cursor: grabbing; }
#compositor-canvas.picking { cursor: crosshair; }
#compositor-canvas.cell-grid { image-rendering: pixelated; }
.stage.pan-tool #compositor-canvas { cursor: grab; }
.stage.panning #compositor-canvas { cursor: grabbing; }
.stage.panning .canvas-wrap, .stage.wheel-moving .canvas-wrap, .stage.momentum .canvas-wrap, .stage.zoom-momentum .canvas-wrap { transition: none; }
.drop-prompt { position: absolute; inset: 30px; z-index: 8; place-content: center; gap: 7px; color: var(--signal); text-align: center; border: 1px dashed var(--signal); background: #0a0b0de8; font: 800 16px/1 var(--mono); }
.drop-prompt:not([hidden]) { display: grid; }
.drop-prompt span { color: var(--muted); font-size: 9px; font-weight: 400; }

.details-panel { position: absolute; z-index: 5; top: 58px; right: 16px; bottom: 16px; width: 310px; overflow: hidden; border: 1px solid #3d434d; border-radius: 7px; background: #14171ced; box-shadow: 0 18px 65px #000b; backdrop-filter: blur(18px); }
.details-panel.closed { display: none; }
.details-heading { display: flex; align-items: center; justify-content: space-between; height: 65px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.details-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 36px; border-bottom: 1px solid var(--line); }
.details-tabs button, .editor-tabs button { color: var(--muted); border: 0; background: transparent; font: 800 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.details-tabs button.active, .editor-tabs button.active { color: var(--signal); box-shadow: inset 0 -2px var(--signal); }
.details-content { height: calc(100% - 65px); padding: 14px; overflow: auto; }
.details-panel:has(.details-tabs:not([hidden])) .details-content { height: calc(100% - 101px); }
.empty-copy { margin: 8px 0; color: var(--muted); font: 10px/1.6 var(--mono); }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span, .field > label, .field-label { color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.detail-rule { height: 1px; margin: 17px 0; border: 0; background: var(--line); }
.toggle-field { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--ink); font: 10px/1.3 var(--mono); }
.toggle-field input { accent-color: var(--signal); }
.color-control { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.color-control output { color: var(--muted); font: 9px/1.4 var(--mono); }
.paint-palette-field { gap: 9px; }
.paint-palette { position: relative; display: grid; grid-template-columns: repeat(6, 22px); gap: 4px; width: max-content; }
.paint-swatch { width: 22px; height: 22px; padding: 0; border: 1px solid #555c66; border-radius: 3px; box-shadow: inset 0 0 0 1px #0008; }
.paint-swatch:hover { border-color: #fff; }
.paint-swatch.active { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal), inset 0 0 0 2px #0008; }
.paint-palette .paint-color-picker { position: absolute; top: calc(var(--swatch-row) * 26px); left: calc(var(--swatch-column) * 26px); width: 22px; height: 22px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.paint-session-status { color: var(--muted); font: 8px/1.4 var(--mono); }
.paint-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.paint-tools .button { padding: 8px 4px; }
.paint-tools .button.active { color: #0b0c0e; border-color: var(--signal); background: var(--signal); }
.range-field { display: grid; gap: 8px; margin-bottom: 17px; }
.range-field > span { display: flex; justify-content: space-between; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.range-field output { color: var(--signal); }
.range-field input { width: 100%; accent-color: var(--signal); }
.image-summary { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 16px; padding: 8px; border: 1px solid var(--line); background: #0d0f12; }
.image-summary img { width: 64px; height: 52px; object-fit: contain; background: #22252b; }
.image-summary strong, .image-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-summary strong { font: 10px/1.4 var(--mono); }
.image-summary span { margin-top: 4px; color: var(--muted); font: 8px/1 var(--mono); }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.detail-actions .wide { grid-column: 1 / -1; }
.danger { color: var(--danger); }
.hint { color: var(--muted); font: 8px/1.55 var(--mono); }

.image-editor { width: calc(100vw - 28px); max-width: none; height: calc(100vh - 28px); max-height: none; padding: 0; color: var(--ink); border: 1px solid #444b55; border-radius: 8px; background: var(--panel); box-shadow: 0 30px 110px #000; }
.image-editor::backdrop { background: #030406db; backdrop-filter: blur(5px); }
.editor-shell { display: grid; grid-template-rows: 68px 38px minmax(0, 1fr); height: 100%; }
.editor-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }
.editor-header h2 { margin: 5px 0 0; font-size: 19px; }
.editor-actions { display: flex; align-items: center; gap: 12px; }
.editor-actions output { color: var(--muted); font: 9px/1 var(--mono); }
.editor-tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--line); }
.editor-tabs button { min-width: 105px; }
.editor-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 0; }
.editor-settings { padding: 15px; overflow: auto; border-right: 1px solid var(--line); background: #111318; }
.source-card { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 9px; align-items: center; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.source-card img { grid-row: 1 / 3; width: 66px; height: 60px; object-fit: contain; background-color: #1d2026; background-image: linear-gradient(45deg, #2c3038 25%, transparent 25%), linear-gradient(-45deg, #2c3038 25%, transparent 25%); background-size: 10px 10px; }
.source-card strong, .source-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-card strong { font: 10px/1.3 var(--mono); }
.source-card span { margin-top: 4px; color: var(--muted); font: 8px/1 var(--mono); }
.source-card .text-button { grid-column: 2; }
.axis-note { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; padding: 10px; border: 1px solid var(--line); }
.axis-note span { color: var(--muted); font: 7px/1.5 var(--mono); }
.axis-note strong { display: block; color: var(--ink); font-size: 9px; }
.progress { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; padding-bottom: 9px; color: var(--muted); font: 8px/1 var(--mono); overflow: hidden; }
.progress output { color: var(--signal); }
.progress i { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--signal); box-shadow: 0 0 8px #c9ff4380; transition: width 120ms linear; }
.editor-preview { display: grid; grid-template-rows: 42px minmax(0, 1fr); min-width: 0; min-height: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: var(--muted); border-bottom: 1px solid var(--line); font: 8px/1 var(--mono); }
.preview-toolbar .button { padding: 7px 10px; color: var(--signal); }
.preview-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 34px; overflow: auto; background-image: radial-gradient(#2c3139 1px, transparent 1px); background-size: 18px 18px; }
.single-result { z-index: 1; width: max-content; }
.single-result canvas { box-shadow: 0 16px 55px #000, 0 0 0 1px #4b525d; }
.editor-empty { position: absolute; display: grid; place-items: center; gap: 8px; color: #5d636d; font: 800 12px/1 var(--mono); letter-spacing: .1em; }
.editor-empty span { color: var(--muted); font-size: 8px; font-weight: 400; letter-spacing: 0; }
.editor-grid { z-index: 1; display: grid; grid-template-columns: 48px repeat(3, minmax(140px, 1fr)); align-items: center; gap: 10px; width: min(100%, 980px); min-width: 600px; }
.grid-axis { color: var(--muted); font: 8px/1 var(--mono); text-align: center; }
.grid-axis.vertical { text-align: right; }
.grid-corner { color: #555b64; font: 7px/1.4 var(--mono); text-align: right; }
.grid-card { position: relative; display: grid; place-items: center; min-height: 125px; padding: 7px; overflow: hidden; color: #555b64; border: 1px solid var(--line); background: #0b0d10; }
.grid-card:hover { border-color: #646c78; }
.grid-card.selected { border-color: var(--signal); box-shadow: 0 0 0 2px #c9ff432b, 0 14px 35px #000; }
.grid-card canvas { width: 100%; height: auto; cursor: pointer; }
.grid-placeholder { font: 8px/1 var(--mono); letter-spacing: .1em; }

@media (max-width: 1000px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 12px; }
  .save-state, .document-settings { display: none; }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .topbar { position: sticky; top: 0; height: auto; min-height: 62px; grid-template-columns: auto 1fr; padding-block: 10px; }
  .project-name { display: none; }
  .top-actions { justify-self: end; }
  .top-actions select { display: none; }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .layers-sidebar { height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-heading { height: 54px; }
  .layer-list { max-height: 120px; }
  .sidebar-note { display: none; }
  .main-stage { height: calc(100vh - 62px); min-height: 560px; }
  .stage { padding: 30px 18px 260px; }
  .main-stage:has(.details-panel:not(.closed)) .stage { grid-template-columns: minmax(0, 1fr); }
  .canvas-wrap { justify-self: auto; margin-inline: auto; }
  .details-panel { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; height: 240px; }
  .details-heading { height: 48px; }
  .details-heading h2 { font-size: 14px; }
  .details-content { height: calc(100% - 48px); }
  .details-panel:has(.details-tabs:not([hidden])) .details-content { height: calc(100% - 84px); }
  .editor-body { grid-template-columns: 1fr; overflow: auto; }
  .editor-settings { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-preview { min-height: 65vh; }
  .editor-actions output { display: none; }
  .editor-grid { min-width: 520px; }
}