:root {
      color-scheme: dark;
      --ink: #f2f2f0;
      --muted: #9a9b9e;
      --line: #292a2d;
      --line-soft: #1f2023;
      --paper: #070708;
      --panel: #101113;
      --panel-soft: #17181b;
      --panel-deep: #0b0c0e;
      --accent: #d7d3cb;
      --accent-soft: rgba(215, 211, 203, 0.12);
      --accent-blue: #b8c1cb;
      --accent-lav: #c8c0cf;
      --accent-2: #d6a8a8;
      --field: #08090a;
      --shadow: 0 18px 54px rgba(0, 0, 0, 0.62);
      --button-hover: #222327;
      --button-hover-border: #56585e;
      --button-secondary: #121316;
      --danger-border: #5a3838;
      --toolbar-bg: linear-gradient(180deg, #101113, #090a0b);
      --toolbar-title: #e5e5e2;
      --chrome-bg: rgba(6, 7, 8, 0.76);
      --mini-text: #cfcfcb;
      --mini-hover: #202125;
      --mini-hover-border: #45474d;
      --control-label: #7f8085;
      --stage-bg: #0e0f11;
      --stage-grid: rgba(210, 210, 210, 0.045);
      --focus-ring: #d7d3cb;
      --active-border: color-mix(in srgb, var(--accent) 38%, transparent);
      --chrome-border-strong: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    body[data-theme="light"] {
      color-scheme: light;
      --ink: #17181b;
      --muted: #5f6268;
      --line: #d3d5d9;
      --line-soft: #e0e2e6;
      --paper: #f0f1f3;
      --panel: #f8f8f9;
      --panel-soft: #eceef1;
      --panel-deep: #ffffff;
      --accent: #1e232b;
      --accent-soft: rgba(30, 35, 43, 0.09);
      --accent-blue: #60748a;
      --accent-lav: #80708e;
      --accent-2: #9d4646;
      --field: #ffffff;
      --shadow: 0 18px 42px rgba(42, 45, 50, 0.18);
      --button-hover: #e2e4e8;
      --button-hover-border: #aeb2ba;
      --button-secondary: #f4f5f7;
      --danger-border: #cda3a3;
      --toolbar-bg: linear-gradient(180deg, #ffffff, #e8eaed);
      --toolbar-title: #1d1f24;
      --chrome-bg: rgba(255, 255, 255, 0.76);
      --mini-text: #2e333b;
      --mini-hover: #dde0e5;
      --mini-hover-border: #b8bdc5;
      --control-label: #696d75;
      --stage-bg: #f7f8f9;
      --stage-grid: rgba(32, 34, 38, 0.055);
      --focus-ring: #4f6378;
      --active-border: color-mix(in srgb, var(--accent) 38%, transparent);
      --chrome-border-strong: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 6px;
      background: var(--panel-soft);
      color: var(--ink);
      cursor: pointer;
      min-height: 38px;
      padding: 8px 12px;
      font-weight: 650;
      transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    button:hover {
      background: var(--button-hover);
      border-color: var(--button-hover-border);
    }

    button.secondary {
      background: transparent;
      color: var(--ink);
      border-color: color-mix(in srgb, var(--line-soft) 86%, transparent);
    }

    button.danger {
      background: transparent;
      color: var(--accent-2);
      border-color: color-mix(in srgb, var(--danger-border) 70%, transparent);
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--ink);
      background: var(--field);
      padding: 10px 11px;
      min-height: 40px;
      user-select: text;
      -webkit-user-select: text;
    }

    textarea {
      min-height: 104px;
      resize: vertical;
      line-height: 1.45;
    }

    .project-notes {
      min-height: 86px;
    }

    input[type="checkbox"] {
      width: auto;
      min-height: auto;
      justify-self: start;
    }

    input[type="color"] {
      padding: 4px;
      cursor: pointer;
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .checkbox-row {
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 10px;
    }

    .app {
      position: relative;
      display: grid;
      grid-template-columns: minmax(320px, 380px) 1fr;
      min-height: 100vh;
    }

    body.sidebar-collapsed .app {
      grid-template-columns: 1fr;
    }

    body.sidebar-collapsed .sidebar {
      display: none;
    }

    .sidebar {
      overflow: auto;
      max-height: 100vh;
      padding: 24px 24px 32px;
      background: var(--panel);
      border-right: 1px solid var(--line);
    }

    .brand {
      display: grid;
      gap: 8px;
      margin-bottom: 24px;
    }

    .brand-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .brand h1 {
      margin: 0;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .brand p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .brand a {
      color: var(--accent);
      text-decoration: none;
    }

    .brand a:hover {
      text-decoration: underline;
    }

    .section {
      display: grid;
      gap: 16px;
      padding: 24px 0;
      border-top: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
    }

    .section h2 {
      margin: 0;
      font-size: 13px;
      font-weight: 750;
      letter-spacing: 0;
      color: var(--toolbar-title);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }

    .button-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .compact-row button {
      min-height: 34px;
      padding: 7px 10px;
      font-size: 12px;
    }

    .project-actions {
      gap: 7px;
    }

    .note,
    .warning-note,
    .toolbar-note {
      margin: 0;
      line-height: 1.45;
    }

    .note {
      color: var(--muted);
    }

    .warning-note,
    .toolbar-note {
      color: var(--accent-2);
    }

    .status-note {
      padding: 8px 10px;
      border: 0;
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel-soft) 42%, transparent);
    }

    .calm-details,
    .toolbar-disclosure {
      display: grid;
      gap: 10px;
    }

    .calm-details:not([open]),
    .toolbar-disclosure:not([open]) {
      gap: 0;
    }

    .calm-details > summary,
    .toolbar-disclosure > summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.3;
      list-style-position: outside;
    }

    .calm-details[open] > summary,
    .toolbar-disclosure[open] > summary {
      color: var(--ink);
    }

    .calm-details > :not(summary) {
      margin-top: 10px;
    }

    .section-details > summary {
      font-size: 13px;
      font-weight: 750;
      color: var(--toolbar-title);
    }

    .section-details[open] > summary {
      color: var(--toolbar-title);
    }

    .advanced-fields {
      padding: 10px 0 0;
      border-top: 1px solid var(--line-soft);
    }

    .wall-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .icon-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 7px 9px;
      font-size: 12px;
    }

    .main {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      align-items: start;
      gap: 10px;
      padding: 12px 16px;
      background: var(--toolbar-bg);
      border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    }

    .toolbar strong {
      display: flex;
      align-items: center;
      min-height: 24px;
      font-size: 15px;
      color: var(--toolbar-title);
    }

    .project-heading {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .unsaved-indicator {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border: 1px solid rgba(214, 168, 168, 0.28);
      border-radius: 999px;
      color: var(--accent-2);
      background: rgba(157, 70, 70, 0.08);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      align-items: center;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
      border-radius: 8px;
      background: var(--chrome-bg);
      width: fit-content;
      max-width: 100%;
    }

    .toolbar-tools {
      grid-column: 1 / -1;
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      align-items: center;
    }

    .toolbar-note {
      font-size: 12px;
      max-width: 760px;
      margin-top: 8px;
    }

    .panel-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .panel-toggle::before {
      content: "\2212";
      width: 16px;
      height: 16px;
      display: grid;
      place-items: center;
      font-size: 20px;
      line-height: 1;
      font-weight: 800;
      opacity: 0.86;
    }

    .panel-toggle[aria-pressed="true"]::before {
      content: "+";
    }

    .view-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
      border-radius: 8px;
      background: var(--chrome-bg);
      width: fit-content;
      max-width: 100%;
    }

    .primary-tools {
      border-color: var(--chrome-border-strong);
    }

    .compact-controls {
      margin-top: 8px;
    }

    .toolbar > .tabs {
      border-color: var(--chrome-border-strong);
    }

    .toolbar-disclosure {
      min-height: 40px;
      padding: 9px 11px;
      border: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
      border-radius: 8px;
      background: var(--chrome-bg);
      width: fit-content;
      max-width: 100%;
      align-content: center;
    }

    .export-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 8px;
    }

    .export-actions button {
      min-height: 32px;
      padding: 6px 10px;
      font-size: 12px;
    }

    .tab {
      min-height: 32px;
      padding: 6px 9px;
      background: transparent;
      color: var(--ink);
      border-color: transparent;
      font-size: 12px;
      letter-spacing: 0;
    }

    .tab.active {
      background: var(--accent-soft);
      border-color: var(--active-border);
      color: var(--accent);
    }

    .mini-button {
      min-height: 30px;
      min-width: 30px;
      padding: 5px 8px;
      background: transparent;
      color: var(--mini-text);
      border-color: transparent;
      font-size: 12px;
    }

    .mini-button:hover {
      background: var(--mini-hover);
      border-color: var(--mini-hover-border);
    }

    .mini-button.active {
      background: var(--accent-soft);
      border-color: var(--active-border);
      color: var(--accent);
    }

    .mini-button:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .mini-button:disabled:hover {
      background: transparent;
      border-color: transparent;
    }

    .theme-switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 5px 9px;
      background: transparent;
      color: var(--ink);
      border-color: transparent;
      font-size: 12px;
      letter-spacing: 0;
    }

    .switch-track {
      position: relative;
      width: 38px;
      height: 20px;
      border-radius: 8px;
      background: rgba(148, 148, 148, 0.34);
      border: 1px solid var(--line-soft);
      flex: 0 0 auto;
    }

    .switch-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 12px;
      border-radius: 5px;
      background: var(--muted);
      transition: transform 160ms ease, background 160ms ease;
    }

    .theme-switch[aria-checked="true"] .switch-track {
      background: var(--accent-soft);
      border-color: var(--active-border);
    }

    .theme-switch[aria-checked="true"] .switch-thumb {
      transform: translateX(18px);
      background: var(--accent);
    }

    .align-icon {
      position: relative;
      display: inline-block;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    .tool-icon {
      display: block;
      width: 16px;
      height: 16px;
      fill: currentColor;
      flex: 0 0 auto;
    }

    .tool-icon-stroke {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .align-icon::before,
    .align-icon::after {
      content: "";
      position: absolute;
      display: block;
      border-radius: 2px;
      background: currentColor;
    }

    .align-left::before,
    .align-right::before,
    .align-center::before {
      top: 2px;
      width: 2px;
      height: 14px;
      opacity: 0.58;
    }

    .align-left::before { left: 2px; }
    .align-right::before { right: 2px; }
    .align-center::before { left: 8px; }

    .align-left::after,
    .align-right::after,
    .align-center::after {
      top: 4px;
      width: 10px;
      height: 10px;
      box-shadow: 0 0 0 1px currentColor inset;
      background: transparent;
    }

    .align-left::after { left: 5px; }
    .align-right::after { right: 5px; }
    .align-center::after { left: 4px; }

    .align-top::before,
    .align-middle::before,
    .align-bottom::before {
      left: 2px;
      width: 14px;
      height: 2px;
      opacity: 0.58;
    }

    .align-top::before { top: 2px; }
    .align-middle::before { top: 8px; }
    .align-bottom::before { bottom: 2px; }

    .align-top::after,
    .align-middle::after,
    .align-bottom::after {
      left: 4px;
      width: 10px;
      height: 10px;
      box-shadow: 0 0 0 1px currentColor inset;
      background: transparent;
    }

    .align-top::after { top: 5px; }
    .align-middle::after { top: 4px; }
    .align-bottom::after { bottom: 5px; }

    .distribute-h::before,
    .distribute-v::before {
      opacity: 0.58;
      background: currentColor;
    }

    .distribute-h::before {
      left: 1px;
      top: 8px;
      width: 16px;
      height: 2px;
    }

    .distribute-h::after {
      left: 2px;
      top: 4px;
      width: 3px;
      height: 10px;
      background: currentColor;
      box-shadow: 6px 0 0 currentColor, 12px 0 0 currentColor;
    }

    .distribute-v::before {
      left: 8px;
      top: 1px;
      width: 2px;
      height: 16px;
    }

    .distribute-v::after {
      left: 4px;
      top: 2px;
      width: 10px;
      height: 3px;
      background: currentColor;
      box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
    }

    .control-label {
      min-width: 0;
      padding: 0 7px 0 4px;
      color: var(--control-label);
      font-size: 11px;
      font-weight: 650;
      text-transform: none;
      letter-spacing: 0;
    }

    .stage-wrap {
      min-height: 0;
      padding: 12px;
      display: grid;
    }

    .stage {
      position: relative;
      min-height: 520px;
      border: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
      border-radius: 6px;
      background:
        linear-gradient(var(--stage-bg), var(--stage-bg)) padding-box,
        repeating-linear-gradient(0deg, transparent 0 23px, var(--stage-grid) 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, var(--stage-grid) 24px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .stage-panel-toggle {
      position: absolute;
      top: 278px;
      left: -16px;
      z-index: 8;
      width: 32px;
      min-width: 32px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      color: var(--muted);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      border-color: var(--line);
      border-radius: 8px;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    body.sidebar-collapsed .stage-panel-toggle {
      left: 12px;
      color: var(--accent);
      border-color: var(--active-border);
    }

    canvas {
      width: 100%;
      height: 100%;
      min-height: 520px;
      display: block;
      cursor: default;
      touch-action: none;
    }

    .status {
      position: absolute;
      left: 36px;
      bottom: 12px;
      right: 14px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      pointer-events: none;
    }

    .status span:not(:empty) {
      padding: 3px 8px;
      border-radius: 6px;
      background: var(--chrome-bg);
    }

    .item-list {
      display: grid;
      gap: 8px;
      max-height: 240px;
      overflow: auto;
      padding-right: 3px;
    }

    .item-row {
      display: grid;
      gap: 8px;
      padding: 11px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
    }

    .storage-list {
      max-height: 420px;
    }

    .storage-row {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 8px;
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
    }

    .storage-row img,
    .storage-row .thumb-empty {
      width: 56px;
      height: 56px;
      object-fit: contain;
      background: #fff;
      border-radius: 4px;
      border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
    }

    .storage-row strong {
      font-size: 13px;
    }

    .item-row.selected {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .item-row.overlap {
      border-color: var(--accent-2);
      background: color-mix(in srgb, var(--accent-2) 14%, var(--panel-soft));
    }

    .item-row header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .item-row strong {
      overflow-wrap: anywhere;
      font-size: 13px;
    }

    .small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .empty-state {
      padding: 11px;
      border: 0;
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel-soft) 36%, transparent);
    }

    .swatch {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      vertical-align: -2px;
      margin-right: 5px;
    }

    .hidden {
      display: none;
    }

    @media (pointer: coarse) {
      .mini-button,
      .tab,
      .stage-panel-toggle {
        min-height: 40px;
        min-width: 40px;
      }

      .app button {
        min-height: 40px;
      }

      .calm-details > summary,
      .toolbar-disclosure > summary {
        padding-block: 12px;
      }
    }

    @media (max-width: 920px) {
      .app {
        grid-template-columns: 1fr;
      }

      .main {
        order: -1;
      }

      .project-heading {
        padding-right: 44px;
      }

      .stage,
      canvas {
        min-height: min(520px, 68vh);
      }

      .sidebar {
        max-height: none;
        border-right: 0;
        border-top: 1px solid var(--line);
      }

      .toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .toolbar strong,
      .tabs,
      .toolbar-tools,
      .view-controls {
        width: 100%;
      }

      .toolbar-disclosure {
        width: 100%;
      }

      .stage-panel-toggle {
        top: 14px;
        right: 14px;
        left: auto;
      }

      .stage-wrap {
        padding: 10px;
      }
    }