@font-face {
      font-family: "Systemia UI";
      src: local("Systemia Regular"), local("Systemia-Regular");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Systemia UI";
      src: local("Systemia Medium"), local("Systemia-Medium");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Systemia UI";
      src: local("Systemia Semibold"), local("Systemia-Semibold");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    :root {
      color-scheme: dark;
      --lab-bg: #08090a;
      --lab-panel: rgba(20, 22, 24, .82);
      --lab-panel-strong: #16191c;
      --lab-line: rgba(255, 255, 255, .12);
      --lab-muted: rgba(245, 247, 248, .58);
      --lab-text: #f7f8f8;
      --lab-accent: #ff9a45;
      --lab-accent-soft: rgba(255, 145, 61, .16);
      --lab-cold: #23d7e7;
      --lab-shadow: rgba(0, 0, 0, .46);
      --field-card-gap: 14px;
      --field-row-gap: 14px;
      --field-card-height: 145px;
      --lab-font: "Systemia UI", "Systemia", -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
      font-family: var(--lab-font);
    }

    * { box-sizing: border-box; }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      color: var(--lab-text);
      background:
        radial-gradient(circle at 12% 12%, rgba(255, 133, 45, .07), transparent 31rem),
        radial-gradient(circle at 88% 84%, rgba(0, 176, 197, .06), transparent 28rem),
        var(--lab-bg);
    }

    button, input { font: inherit; }

    .lab-shell {
      width: min(1390px, calc(100% - 28px));
      margin: 0 auto;
      padding: 16px 0 32px;
    }

    .lab-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 12px;
    }

    .lab-kicker {
      margin: 0 0 8px;
      color: #ffffff;
      font-size: 35px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(27px, 4vw, 43px);
      font-weight: 500;
      letter-spacing: -.04em;
    }

    .lab-grid {
      display: grid;
      grid-template-columns: minmax(300px, 390px) minmax(760px, 986px);
      gap: 14px;
      align-items: start;
      justify-content: center;
    }

    .stage-panel,
    .control-panel,
    .preview-save-panel {
      border: 1px solid var(--lab-line);
      border-radius: 28px;
      background: var(--lab-panel);
      box-shadow: 0 24px 72px var(--lab-shadow);
      backdrop-filter: blur(18px);
    }

    .preview-column {
      display: grid;
      gap: 9px;
      align-content: start;
    }

    .preview-save-panel {
      display: grid;
      gap: 6px;
      height: 106px;
      padding: 10px;
      border-radius: 16px;
      background: var(--lab-panel-strong);
    }

    .stage-panel {
      position: relative;
      width: min(390px, calc(100vw - 40px));
      aspect-ratio: 390 / 844;
      min-height: 0;
      overflow: hidden;
      padding: 0;
      border-radius: 58px;
      background:
        radial-gradient(ellipse at 50% 39%, rgba(255, 107, 33, .055), transparent 18rem),
        radial-gradient(ellipse at 70% 76%, rgba(0, 185, 200, .035), transparent 17rem),
        #000;
      justify-self: center;
    }

    .phone-screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: 25px 26px 19px;
    }

    .phone-preview-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      margin-top: 63px;
      padding-left: 14px;
    }

    .phone-preview-header h2 {
      margin: 0 0 11px;
      color: #fbfbfb;
      font-size: 44px;
      font-weight: 400;
      letter-spacing: -.055em;
      line-height: .95;
    }

    .phone-preview-header p {
      max-width: 253px;
      margin: 0;
      color: #ededed;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.25;
    }

    .phone-preview-avatar {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 55px;
      height: 55px;
      margin: -1px 6px 0 10px;
      border-radius: 50%;
      background: #5d5dff;
      color: #fff;
    }

    .phone-preview-avatar svg {
      display: block;
      width: 46px;
      height: 46px;
    }

    .stage-panel::before {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: "";
      opacity: .08;
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(to bottom, black, transparent 80%);
    }

    .control-panel {
      --control-title-size: 13px;
      --control-subtitle-size: 10px;
      --control-item-size: 8px;
      --number-field-width: max-content;
      --control-surface: #0b0d0f;
      --control-surface-raised: #101316;
      --control-surface-soft: rgba(255,255,255,.035);
      --control-border: rgba(255,255,255,.1);
      --control-border-hover: rgba(255,154,69,.58);
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
      height: 959px;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      align-content: start;
      padding: 10px;
      border-radius: 20px;
      background: #050607;
      font-size: var(--control-item-size);
    }

    .control-block {
      margin: 0;
    }

    .control-section {
      align-self: start;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--control-border);
      border-radius: 12px;
      background: var(--control-surface);
    }

    .control-section.is-wide,
    .field-library { grid-column: 1 / -1; }

    .control-panel > .field-library { grid-row: 1; }
    .control-panel > .control-section:nth-of-type(1),
    .control-panel > .control-section:nth-of-type(2) { grid-row: 2; }
    .control-panel > .control-section:nth-of-type(3),
    .control-panel > .control-section:nth-of-type(4) {
      grid-row: 3;
      align-self: stretch;
    }
    .control-panel > .control-section:nth-of-type(5) { grid-row: 4; }
    .control-panel > .color-editor-panel { grid-row: 5; }

    .control-panel > .control-section:nth-of-type(1) { grid-column: span 3; }
    .control-panel > .control-section:nth-of-type(2) { grid-column: span 3; }
    .control-panel > .control-section:nth-of-type(3) { grid-column: span 2; }
    .control-panel > .control-section:nth-of-type(4) { grid-column: span 4; }
    .control-panel > .control-section:nth-of-type(5) { grid-column: 1 / -1; }
    .control-panel > .control-section.is-visible-global { grid-column: span 6; }
    .control-panel > .control-section.is-visible-global.typography-panel {
      display: flex;
      flex-direction: column;
      grid-column: span 6;
      align-self: stretch;
    }

    .control-section > h3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 30px;
      padding: 7px 9px;
      margin: 0;
      color: rgba(255,255,255,.82);
      font-size: var(--control-title-size);
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .control-section > h3 button,
    .control-section > h3 .copy-card-feedback {
      font-size: var(--control-item-size);
      letter-spacing: 0;
    }

    #currentCardSectionName {
      color: #ffad70;
      font-weight: 650;
    }

    .section-heading-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .copy-card-button,
    .copy-card-dialog button {
      min-height: 24px;
      padding: 0 9px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 7px;
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.82);
      font: inherit;
      cursor: pointer;
    }

    .copy-card-button:hover,
    .copy-card-dialog button:hover { background: rgba(255,255,255,.1); }

    .copy-card-feedback {
      min-width: 0;
      color: rgba(255,255,255,.46);
      font-size: 9px;
      font-weight: 400;
    }

    .copy-card-dialog {
      width: min(430px, calc(100vw - 32px));
      padding: 0;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px;
      background: #080a0c;
      color: rgba(255,255,255,.86);
      box-shadow: 0 22px 70px rgba(0,0,0,.62);
    }

    .copy-card-dialog::backdrop {
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(5px);
    }

    .copy-card-dialog-inner {
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .copy-card-dialog h2,
    .copy-card-dialog p { margin: 0; }

    .copy-card-dialog h2 { font-size: 15px; }
    .copy-card-dialog p { color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.55; }

    .copy-card-targets {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .copy-card-target {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 7px 9px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 9px;
      background: rgba(255,255,255,.035);
      cursor: pointer;
    }

    .copy-card-target:has(input:checked) {
      border-color: rgba(255,149,71,.68);
      background: rgba(255,149,71,.1);
    }

    .copy-card-target input { accent-color: var(--lab-accent); }
    .copy-card-target strong,
    .copy-card-target small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .copy-card-target strong { color: rgba(255,255,255,.84); font-size: 10px; }
    .copy-card-target small { margin-top: 2px; color: rgba(255,255,255,.42); font-size: 9px; }

    .copy-card-dialog-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
    }

    .copy-card-dialog-actions .copy-card-select-all { margin-right: auto; }
    .copy-card-dialog-actions .is-primary { color: #151719; background: var(--lab-accent); border-color: transparent; }
    .copy-card-dialog-actions .is-primary:disabled { opacity: .35; cursor: default; }
    .copy-card-dialog-status { min-height: 14px; color: #ffad70 !important; }

    .control-section-body {
      display: grid;
      gap: 8px;
      padding: 4px 10px 10px;
    }

    .compact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: space-evenly;
      gap: 8px 14px;
    }

    .control-block.has-touch-axis {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .control-block.has-touch-axis > .control-label {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .control-block.has-touch-axis > .control-label output {
      display: none;
    }

    .typography-editor {
      display: grid;
      grid-template-columns: 78px max-content repeat(4, max-content);
      justify-content: space-between;
      align-items: center;
      min-width: 0;
      margin-top: auto;
      gap: 6px;
    }

    .typography-color-field {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--lab-muted);
      font-size: var(--control-item-size);
      white-space: nowrap;
    }

    .typography-color-control { flex: 0 0 auto; }

    .color-edit-trigger {
      width: 18px;
      height: 18px;
      padding: 0;
      border: 2px solid rgba(255,255,255,.72);
      border-radius: 50%;
      background: var(--color-trigger, #fff);
      box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 2px 8px rgba(0,0,0,.42);
      cursor: pointer;
    }

    .color-edit-trigger:hover,
    .color-edit-trigger:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255,154,69,.34), 0 2px 8px rgba(0,0,0,.42);
    }

    .typography-editor > .control-block { min-width: 0; }

    .typography-select {
      width: 100%;
      min-width: 0;
      height: 22px;
      padding: 0 5px;
      border: 1px solid var(--control-border);
      border-radius: 6px;
      background: var(--control-surface-raised);
      color: rgba(255,255,255,.78);
      font-size: var(--control-item-size);
    }

    .typography-role-switch {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 2px;
      border: 1px solid var(--control-border);
      border-radius: 8px;
      background: var(--control-surface-soft);
    }

    .typography-role-switch button {
      min-height: 22px;
      padding: 0 9px;
      border: 0;
      border-radius: 6px;
      color: rgba(255,255,255,.55);
      background: transparent;
      cursor: pointer;
    }

    .typography-role-switch button[aria-pressed="true"] {
      color: #151719;
      background: var(--lab-accent);
    }

    .compact-grid .control-block.is-wide { grid-column: 1 / -1; }

    .save-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 6px;
    }

    .save-toolbar input,
    .save-toolbar select,
    .save-toolbar button,
    .snapshot-actions select,
    .snapshot-actions button {
      min-width: 0;
      height: 30px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 8px;
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.84);
      font-size: 10px;
    }

    .save-toolbar input,
    .save-toolbar select,
    .snapshot-actions select { padding: 0 8px; }

    .snapshot-actions select option {
      color: #1b1f23;
      background: #fff;
    }

    .save-toolbar button,
    .snapshot-actions button { padding: 0 10px; cursor: pointer; }
    .save-toolbar button { color: #16191c; background: var(--lab-accent); border-color: transparent; }
    .save-toolbar .capture-phone-button {
      color: rgba(255,255,255,.84);
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.055);
    }

    .save-toolbar .capture-phone-button:hover {
      border-color: rgba(255,154,69,.54);
      color: #fff;
    }

    .save-toolbar .capture-phone-button:disabled {
      cursor: wait;
      opacity: .56;
    }

    .snapshot-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) repeat(3, auto);
      gap: 6px;
    }

    .snapshot-status {
      min-height: 14px;
      margin: 0;
      color: rgba(255,255,255,.46);
      font-size: 10px;
    }

    .color-layer-controls {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px;
    }

    .color-layer-row.is-edge-layer { grid-column: span 3; }
    .color-layer-row.is-body-layer { grid-column: span 3; }
    .color-layer-row.is-core-layer { grid-column: span 3; }
    .color-layer-row.is-transition-layer { grid-column: span 3; }

    .color-scope-switch {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 2px;
      border: 1px solid var(--control-border);
      border-radius: 8px;
      background: var(--control-surface-soft);
    }

    .color-scope-switch button,
    .color-scope-actions button {
      min-height: 22px;
      padding: 0 8px;
      border: 0;
      border-radius: 6px;
      color: rgba(255,255,255,.55);
      background: transparent;
      font: inherit;
      cursor: pointer;
    }

    .color-scope-switch button[aria-pressed="true"] {
      color: #151719;
      background: var(--lab-accent);
    }

    #cardColorScope strong {
      color: inherit;
      font-weight: 700;
    }

    .color-scope-actions {
      display: flex;
      grid-column: 1 / -1;
      gap: 6px;
    }

    .color-scope-actions[hidden],
    #globalColorScopeOnly[hidden] { display: none; }

    .color-scope-actions button {
      flex: 1;
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.68);
      background: rgba(255,255,255,.035);
    }

    .shortcut-guide {
      position: sticky;
      z-index: 18;
      bottom: 0;
      display: flex;
      grid-column: 1 / -1;
      grid-row: 7;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      min-height: 24px;
      padding: 0 4px;
      color: rgba(255,255,255,.42);
      background: #050607;
      box-shadow: 0 -8px 14px #050607;
      font-size: 7px;
    }

    .shortcut-guide strong {
      margin-right: 2px;
      color: rgba(255,255,255,.66);
      font-weight: 600;
    }

    .shortcut-guide kbd {
      min-width: 32px;
      padding: 3px 6px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 5px;
      background: #0b0d0f;
      color: rgba(255,255,255,.8);
      font: 600 8px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-align: center;
    }

    .touch-axis {
      position: relative;
      display: flex;
      width: var(--number-field-width);
      height: 22px;
      align-items: center;
      justify-content: center;
      justify-self: end;
      flex: 0 0 var(--number-field-width);
      padding: 0 11px 0 5px;
      border: 1px solid var(--control-border);
      border-radius: 7px;
      outline: none;
      background: var(--control-surface-raised);
      box-shadow: 0 2px 5px rgba(0,0,0,.24);
      cursor: default;
      touch-action: none;
      overflow: hidden;
    }

    .touch-axis-value {
      flex: 0 0 auto;
      width: 1ch;
      min-width: 1ch;
      max-width: 7ch;
      height: 100%;
      padding: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: rgba(255,255,255,.86);
      font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: -.08em;
      text-align: right;
      cursor: default;
    }

    .touch-axis-unit {
      flex: 0 0 auto;
      margin: 0 0 0 2px;
      color: rgba(255,255,255,.42);
      font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      pointer-events: none;
    }

    .touch-axis-hint {
      position: absolute;
      right: 3px;
      display: grid;
      place-items: center;
      width: 7px;
      height: 14px;
      color: rgba(255,255,255,.52);
      font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      opacity: 0;
      transform: scale(.82);
      transition: opacity .14s ease, transform .14s ease;
      pointer-events: none;
    }

    .touch-axis:hover .touch-axis-hint,
    .touch-axis:focus-within .touch-axis-hint,
    .touch-axis.is-dragging .touch-axis-hint {
      opacity: 1;
      transform: scale(1);
    }

    .touch-axis-value:focus { cursor: text; }

    .touch-axis:hover,
    .touch-axis:focus-within,
    .touch-axis.is-dragging {
      border-color: var(--control-border-hover);
      box-shadow: 0 0 0 2px rgba(255,154,69,.11);
    }

    .touch-axis input[type="range"] {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      pointer-events: none !important;
      white-space: nowrap !important;
    }

    .control-panel input[type="range"]:not(.touch-axis-input) {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      justify-self: stretch;
    }

    .typography-editor > .control-block.has-touch-axis {
      display: grid;
      grid-template-columns: max-content var(--number-field-width);
      width: max-content;
      gap: 4px;
    }

    .typography-editor > .control-block.has-touch-axis > .control-label {
      display: grid;
      gap: 0;
      font-size: 7px;
      line-height: 1.15;
      white-space: nowrap;
    }

    .typography-editor > .control-block.has-touch-axis > .control-label output {
      display: none;
    }

    .typography-editor > .control-block.has-touch-axis > .touch-axis {
      justify-self: start;
    }

    .control-block > input[type="range"]:not(.touch-axis-input) {
      display: block;
      margin-left: auto;
    }

    .color-layer-row {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0 8px 8px;
      border: 1px solid var(--control-border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--control-surface) 86%, #000);
    }

    .layer-actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      margin-top: auto;
      padding-top: 7px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    .color-layer-row.is-transition-layer .layer-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layer-actions button {
      flex: 1 1 0;
      min-width: 0;
      height: 22px;
      padding: 0 4px;
      border: 1px solid var(--control-border);
      border-radius: 6px;
      color: rgba(255,255,255,.66);
      background: var(--control-surface-soft);
      font-size: clamp(6.5px, .54vw, 8px);
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
    }

    .layer-actions button:hover { border-color: rgba(255,154,69,.54); color: #fff; }

    .body-light-geometry-controls {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 1fr;
      gap: 4px;
      margin-top: 2px;
      padding-top: 3px;
      border-top: 1px solid rgba(255,255,255,.06);
    }

    .body-light-geometry-controls .color-layer-slider {
      grid-template-columns: minmax(32px, auto) minmax(28px, 1fr) 26px;
      gap: 3px;
      text-transform: none;
    }

    .color-layer-slider.has-touch-axis {
      grid-template-columns: minmax(0, 1fr) var(--number-field-width);
      min-height: 28px;
    }

    .color-layer-slider.has-touch-axis > output {
      display: none;
    }

    .body-field-slider.has-touch-axis,
    .core-field-slider.has-touch-axis,
    .edge-light-slider.has-touch-axis,
    .transition-field-slider.has-touch-axis,
      .body-light-geometry-controls .color-layer-slider.has-touch-axis {
      grid-template-columns: minmax(0, 1fr) var(--number-field-width);
    }

    .color-layer-title,
    .body-light-color-title {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      margin: 0 -2px;
      padding: 7px 2px;
      color: rgba(255,255,255,.72);
      font-size: var(--control-subtitle-size);
      font-weight: 600;
    }

    .color-layer-title .color-edit-trigger,
    .body-light-color-title .color-edit-trigger {
      width: 18px;
      height: 18px;
    }

    .color-editor-panel[hidden] { display: none; }
    .control-section.color-editor-panel { grid-column: 1 / -1; width: 100%; border-color: rgba(255,154,69,.3); background: #090b0d; }
    .color-editor-inner { display: grid; gap: 9px; padding: 0 10px 10px; }
    .color-editor-header { display: flex; min-height: 38px; padding: 7px 10px; align-items: center; justify-content: space-between; gap: 16px; }
    .color-editor-header p,
    .color-editor-header h2,
    .color-editor-status { margin: 0; }
    .color-editor-header p { color: rgba(255,255,255,.4); font-size: 7px; }
    .color-editor-header h2 { margin-top: 2px; font-size: 13px; }
    .color-editor-header button { width: 24px; height: 24px; padding: 0 0 2px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.07); font: 18px/1 var(--lab-font); cursor: pointer; }
    .color-editor-workspace { display: grid; grid-template-columns: minmax(190px, 1fr) 24px minmax(142px, .72fr); gap: 9px; min-height: 164px; }
    .color-editor-map { --editor-hue: 0; position: relative; min-width: 0; min-height: 164px; overflow: hidden; border: 0; border-radius: 7px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); isolation: isolate; cursor: crosshair; touch-action: none; }
    .color-editor-map::before { position: absolute; inset: 1px; border-radius: 6px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--editor-hue) 100% 50%)); content: ""; }
    .color-editor-map:focus-visible { outline: 2px solid rgba(255,154,69,.72); outline-offset: 2px; }
    .color-editor-map i { position: absolute; z-index: 1; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; translate: -50% -50%; pointer-events: none; }
    .color-editor-hue-strip { position: relative; min-height: 164px; border-radius: 6px; background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); touch-action: none; }
    .color-editor-hue-strip input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; }
    .color-editor-hue-strip i { position: absolute; z-index: 1; left: -3px; right: -3px; top: 0; height: 6px; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 1px 5px rgba(0,0,0,.7); translate: 0 -50%; pointer-events: none; }
    .color-editor-precision { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 7px; }
    .color-editor-preview { display: grid; grid-row: span 4; grid-template-rows: 1fr 1fr; min-height: 121px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: transparent; cursor: pointer; }
    .color-editor-preview > * { display: block; min-width: 0; border: 0; }
    .color-editor-preview button { border-top: 1px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; }
    .color-editor-preview button:focus-visible { position: relative; outline: 2px solid rgba(255,154,69,.72); outline-offset: -3px; }
    .color-editor-precision label { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); align-items: center; min-width: 0; height: 25px; color: rgba(255,255,255,.6); font-size: 9px; }
    .color-editor-precision input { min-width: 0; width: 100%; height: 25px; padding: 0 4px; border: 1px solid rgba(255,255,255,.13); border-radius: 5px; outline: none; color: #fff; background: rgba(255,255,255,.05); font: 9px/1 ui-monospace, monospace; }
    .color-editor-precision em { position: absolute; right: 4px; color: rgba(255,255,255,.4); font: 7px/1 ui-monospace, monospace; pointer-events: none; }
    .color-editor-hex { grid-column: 2; grid-template-columns: 13px minmax(0, 1fr) !important; }
    .color-editor-hex input { padding: 0 7px; text-transform: uppercase; }
    .color-editor-hex input:focus { border-color: rgba(255,154,69,.72); }
    .color-editor-status { min-height: 11px; color: #ffad70; font-size: 8px; }
    .color-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
    .color-editor-actions button { min-height: 26px; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.055); font-size: 9px; cursor: pointer; }
    .color-editor-actions .is-primary { border-color: transparent; color: #151719; background: var(--lab-accent); }

    .color-layer-slider {
      display: grid;
      grid-template-columns: minmax(42px, auto) minmax(48px, 1fr) 34px;
      justify-content: stretch;
      align-items: center;
      gap: 7px;
      margin-top: 3px;
      color: rgba(255,255,255,.42);
      font-size: var(--control-item-size);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .color-layer-slider output {
      color: rgba(255,255,255,.58);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .color-layer-slider input[type="range"] {
      height: 4px;
      appearance: none;
      -webkit-appearance: none;
      accent-color: var(--layer-color, var(--lab-accent));
      background: var(--layer-track, rgba(255,255,255,.18));
      border-radius: 999px;
    }

    .color-layer-slider input[type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 999px;
      background: var(--layer-track, rgba(255,255,255,.18));
    }

    .color-layer-slider input[type="range"]::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: var(--layer-track, rgba(255,255,255,.18));
    }

    .color-layer-slider input[type="range"]::-webkit-slider-thumb {
      width: 10px;
      height: 10px;
      margin-top: -3px;
      border: 2px solid rgba(255,255,255,.96);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 5px rgba(0,0,0,.32);
      -webkit-appearance: none;
    }

    .color-layer-slider input[type="range"]::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border: 2px solid rgba(255,255,255,.96);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 5px rgba(0,0,0,.32);
    }

    .color-layer-slider + .color-layer-slider { margin-top: 5px; }

    .edge-light-controls,
    .body-light-color-controls,
    .body-field-controls,
    .core-field-controls,
    .transition-field-controls {
      margin-top: 5px;
      padding-top: 4px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    .edge-light-controls,
    .core-field-controls,
    .transition-field-controls {
      display: grid;
      gap: 3px 5px;
    }

    .edge-light-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .core-field-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .transition-field-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .body-light-color-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px;
    }

    .body-light-color-group {
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;
      gap: 3px;
      min-width: 0;
      padding: 4px 3px;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 8px;
      background: rgba(255,255,255,.018);
    }

    .body-light-color-group > .color-layer-slider {
      grid-template-columns: 10px minmax(38px, 1fr) 28px;
      gap: 4px;
      margin-top: 0;
    }

    .body-field-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px;
    }

    .is-body-layer .color-layer-slider.has-touch-axis,
    .is-core-layer .color-layer-slider.has-touch-axis {
      grid-template-columns: minmax(12px, 1fr) var(--number-field-width);
      gap: 2px;
    }

    .core-field-controls .core-field-slider {
      grid-template-columns: minmax(34px, 1fr) 26px;
      margin-top: 0;
    }

    .body-field-controls .body-field-slider {
      grid-template-columns: 1fr;
      gap: 4px;
      white-space: nowrap;
    }

    .body-field-controls .body-field-slider output { text-align: left; }

    .body-light-color-group + .body-light-color-group {
      margin-top: 0;
      padding-top: 4px;
      padding-left: 3px;
      border-top: 1px solid rgba(255,255,255,.07);
      border-left: 1px solid rgba(255,255,255,.07);
    }

    .body-light-color-title {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(255,255,255,.62);
      font-size: 10px;
    }

    .edge-light-slider,
    .body-field-slider,
    .core-field-slider,
    .transition-field-slider {
      grid-template-columns: minmax(52px, auto) minmax(42px, 1fr) 34px;
      text-transform: none;
    }

    .color-layer-slider.has-touch-axis,
    .body-light-geometry-controls .color-layer-slider.has-touch-axis,
    .body-light-color-group > .color-layer-slider.has-touch-axis,
    .body-field-controls .body-field-slider.has-touch-axis,
    .edge-light-slider.has-touch-axis,
    .core-field-slider.has-touch-axis,
      .transition-field-slider.has-touch-axis {
      grid-template-columns: minmax(18px, auto) var(--number-field-width);
      min-height: 26px;
    }

    .edge-light-controls .touch-axis,
    .core-field-controls .touch-axis,
    .transition-field-controls .touch-axis {
      width: var(--number-field-width);
      height: 22px;
      flex-basis: var(--number-field-width);
    }

    .color-layer-slider.has-touch-axis > output { display: none; }

    .control-block.has-touch-axis {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--number-field-width);
      align-items: center;
      gap: 7px;
    }

    .control-block.has-touch-axis .control-label {
      min-width: 0;
      margin-bottom: 0;
    }

    .control-label {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
      color: var(--lab-muted);
      font-size: var(--control-item-size);
    }

    .control-label output {
      color: var(--lab-text);
      font-variant-numeric: tabular-nums;
    }

    input[type="range"] {
      width: 100%;
      height: 4px;
      margin: 0;
      accent-color: var(--lab-accent);
      cursor: ew-resize;
    }

    .control-panel input[type="range"] {
      height: 3px;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 999px;
      background: var(--control-track, var(--layer-track, rgba(255,255,255,.22)));
    }

    .control-panel input[type="range"]::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 999px;
      background: var(--control-track, var(--layer-track, rgba(255,255,255,.22)));
    }

    .control-panel input[type="range"]::-moz-range-track {
      height: 3px;
      border-radius: 999px;
      background: var(--control-track, var(--layer-track, rgba(255,255,255,.22)));
    }

    #globalHueControl {
      --control-track: linear-gradient(90deg, #ff453a, #ffd60a, #30d158, #00c7be, #0a84ff, #bf5af2, #ff375f);
      --layer-track: linear-gradient(90deg, #ff453a, #ffd60a, #30d158, #00c7be, #0a84ff, #bf5af2, #ff375f);
    }

    #globalSaturationControl {
      --control-track: linear-gradient(90deg, #3d4146, #a85d70, #ff375f);
      --layer-track: linear-gradient(90deg, #3d4146, #a85d70, #ff375f);
    }

    #globalLightnessControl {
      --control-track: linear-gradient(90deg, #050505, #a5254d, #fff);
      --layer-track: linear-gradient(90deg, #050505, #a5254d, #fff);
    }

    .control-panel input[type="range"]::-webkit-slider-thumb {
      width: 10px;
      height: 10px;
      margin-top: -3.5px;
      border: 0;
      border-radius: 50%;
      background: #fff;
      -webkit-appearance: none;
    }

    .field-library {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      margin: 0 2px;
      padding: 0 2px 7px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .field-library .control-label {
      flex: 1 1 auto;
      margin-bottom: 0;
    }

    .field-library output {
      color: rgba(255, 255, 255, .9);
      font-variant-numeric: tabular-nums;
    }

    .field-action-button {
      flex: 0 0 auto;
      height: 24px;
      padding: 0 8px;
      border: 1px solid var(--control-border);
      border-radius: 7px;
      color: rgba(255,255,255,.72);
      background: var(--control-surface-raised);
      cursor: pointer;
      font-size: 9px;
    }

    .field-action-button.is-accent {
      border-color: rgba(255,154,69,.34);
      color: #ffd4b0;
      background: rgba(255,122,28,.12);
    }

    .control-help-tooltip {
      position: sticky;
      z-index: 19;
      bottom: 0;
      grid-column: 1 / span 6;
      grid-row: 7;
      align-self: center;
      justify-self: start;
      width: auto;
      max-width: calc(100vw - 24px);
      margin-left: 4px;
      padding: 0 0 0 2px;
      color: rgba(255,255,255,.48);
      background: transparent;
      white-space: nowrap;
      pointer-events: none;
    }

    .control-help-tooltip[hidden] { display: none; }
    .control-help-tooltip strong { display: inline; color: rgba(255,255,255,.7); font-size: 8px; font-weight: 650; }
    .control-help-tooltip strong::after { content: "："; }
    .control-help-tooltip p { display: inline; margin: 0; color: inherit; font-size: 8px; line-height: 1.2; }

    .field-gallery {
      display: grid;
      width: 100%;
      min-width: 0;
      gap: var(--field-row-gap);
      margin-top: 25px;
    }

    .field-card-row {
      display: flex;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: var(--field-card-height);
      gap: var(--field-card-gap);
    }

    .field-card {
      position: relative;
      flex: 0 0 var(--field-card-width, calc(50% - var(--field-card-gap) / 2));
      min-width: 0;
      height: 100%;
      overflow: visible;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: #fff;
      background: transparent;
      cursor: ew-resize;
      isolation: isolate;
      text-align: center;
      transition: transform .2s ease;
    }

    .field-card svg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .field-card-canvas {
      position: absolute;
      z-index: 1;
      display: block;
      pointer-events: none;
    }

    .field-card-light-layer,
    .field-card-light-layer > * { mix-blend-mode: normal; }

    .field-card-copy {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      text-shadow: none;
    }

    .field-card-label,
    .field-card-meta {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .field-card-label {
      position: absolute;
      top: var(--field-label-y, 11%);
      right: var(--field-label-x, 11%);
      left: var(--field-label-x, 11%);
      color: color-mix(in srgb, var(--field-label-color, #fff) 78%, transparent);
      font-family: var(--field-label-font, var(--lab-font));
      font-size: var(--field-label-size, 10px);
      font-weight: var(--field-label-weight, 500);
      letter-spacing: var(--field-label-tracking, normal);
      text-align: left;
      text-transform: uppercase;
    }

    .field-card-title {
      position: absolute;
      top: var(--field-title-y, 50%);
      left: var(--field-title-x, 50%);
      width: 86%;
      display: block;
      overflow: hidden;
      color: color-mix(in srgb, var(--field-title-color, #fff) 96%, transparent);
      font-family: var(--field-title-font, var(--lab-font));
      font-size: var(--field-title-size, 14px);
      font-weight: var(--field-title-weight, 500);
      letter-spacing: var(--field-title-tracking, normal);
      line-height: 1.1;
      text-align: center;
      transform: translate(-50%, -50%);
      white-space: normal;
    }

    .field-card-meta {
      position: absolute;
      top: var(--field-meta-y, 86%);
      bottom: auto;
      left: var(--field-meta-x, 50%);
      width: 84%;
      color: color-mix(in srgb, var(--field-meta-color, #fff) 58%, transparent);
      font-family: var(--field-meta-font, var(--lab-font));
      font-size: var(--field-meta-size, 9px);
      font-weight: var(--field-meta-weight, 400);
      letter-spacing: var(--field-meta-tracking, normal);
      line-height: 1.1;
      text-align: center;
      transform: translateX(-50%);
    }

    .field-card:hover,
    .field-card:focus-visible {
      outline: none;
      transform: translateY(-1px);
    }

    .field-card.is-active {
      filter: none;
    }

    .field-card.is-dragging {
      z-index: 3;
      transition: none;
    }

    .stage-panel .field-card-copy {
      inset: 0;
    }

    .stage-panel .field-card-label { font-size: var(--field-label-size, 11px); }
    .stage-panel .field-card-title { font-size: var(--field-title-size, 21px); }
    .stage-panel .field-card-meta { font-size: var(--field-meta-size, 10px); }

    @media (max-width: 1200px) {
      .lab-header { align-items: start; flex-direction: column; }
      .lab-grid { grid-template-columns: 1fr; }
      .control-panel { grid-template-rows: none; height: auto; min-height: 0; overflow-y: visible; scrollbar-gutter: auto; }
      .control-panel > .field-library,
      .control-panel > .control-section,
      .control-panel > .shortcut-guide { grid-row: auto; }
      .shortcut-guide { position: static; }
      .control-help-tooltip { position: static; grid-row: auto; }
      .control-panel > .control-section:nth-of-type(-n+5) { grid-column: 1 / -1; }
      .control-section.color-editor-panel { grid-column: 1 / -1; }
    }

    @media (max-width: 520px) {
      .lab-shell { width: min(100% - 22px, 1180px); padding-top: 22px; }
      .stage-panel { min-height: 0; padding: 0; border-radius: 48px; }
      .control-panel { padding: 10px; border-radius: 18px; }
      .control-panel,
      .color-layer-controls { grid-template-columns: 1fr; }
      .typography-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .color-editor-workspace { grid-template-columns: minmax(0, 1fr) 24px; }
      .color-editor-precision { grid-column: 1 / -1; }
      .control-section.is-wide,
      .field-library { grid-column: auto; }
      .color-layer-row:nth-child(n) { grid-column: 1 / -1; }
    }