.creative-shell {
  --creative-ink: color-mix(in srgb, var(--text) 94%, #13212f);
  --creative-paper: color-mix(in srgb, var(--surface) 96%, #f6f1e7);
  --creative-soft: color-mix(in srgb, var(--surface-2) 88%, #edf0eb);
  --creative-line: color-mix(in srgb, var(--border) 82%, #8793a0);
  --creative-signal: color-mix(in srgb, var(--primary) 86%, #1454ba);
  --creative-signal-ink: #fff;
  --creative-warm: color-mix(in srgb, var(--accent) 84%, #c44c2c);
  --creative-shadow: 0 20px 55px color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--creative-ink);
  border: 1px solid var(--creative-line);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% -8%, color-mix(in srgb, var(--creative-signal) 12%, transparent), transparent 33%),
    var(--creative-paper);
  box-shadow: var(--creative-shadow);
}

[data-theme="dark"] .creative-shell {
  --creative-signal-ink: #17130f;
}

.creative-shell [hidden] {
  display: none !important;
}

.creative-shell *,
.creative-shell *::before,
.creative-shell *::after {
  box-sizing: border-box;
}

.creative-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 26px 30px 24px;
  border-block-end: 1px solid var(--creative-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--creative-signal) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(color-mix(in srgb, var(--creative-signal) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    color-mix(in srgb, var(--creative-paper) 94%, transparent);
}

.creative-hero h2 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.45rem, 2.3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.creative-hero p {
  margin: 9px 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}

.creative-eyebrow,
.creative-local-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--creative-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--creative-signal);
  font: 760 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .09em;
  white-space: nowrap;
}

.creative-local-badge {
  color: var(--accent);
  letter-spacing: .02em;
}

.creative-local-badge::before {
  width: 7px;
  height: 7px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.creative-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  min-height: 540px;
}

.creative-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 500px;
  place-items: center;
  overflow: hidden;
  border-inline-end: 1px solid var(--creative-line);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--creative-line) 17%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--creative-line) 17%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--creative-line) 17%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--creative-line) 17%, transparent) 75%),
    var(--creative-soft);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.creative-stage canvas,
.creative-stage video {
  display: block;
  max-width: calc(100% - 40px);
  max-height: 720px;
  border-radius: 12px;
  background: #0b1018;
  box-shadow: 0 16px 40px color-mix(in srgb, #000 26%, transparent);
}

.creative-stage canvas {
  height: auto;
  touch-action: none;
}

.creative-stage-empty {
  display: grid;
  justify-items: center;
  max-width: 34ch;
  padding: 35px;
  color: var(--muted);
  text-align: center;
}

.creative-stage-empty strong {
  margin-block-end: 8px;
  color: var(--creative-ink);
  font-size: 1.08rem;
}

.creative-stage-empty small {
  line-height: 1.55;
}

.creative-stage-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-block-end: 18px;
  place-items: center;
  border: 1px solid var(--creative-line);
  border-radius: 16px;
  color: var(--danger);
  background: var(--surface);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--creative-line) 40%, transparent);
}

.creative-inspector,
.creative-photo-controls,
.creative-learning-notes {
  min-width: 0;
  padding: 24px;
  background: color-mix(in srgb, var(--creative-paper) 96%, transparent);
}

.creative-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 20px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--creative-line);
}

.creative-panel-title > span {
  font-weight: 760;
}

.creative-panel-title > small {
  color: var(--muted);
  font: 700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.creative-field {
  display: grid;
  gap: 8px;
  margin-block-end: 17px;
  color: var(--creative-ink);
  font-size: .82rem;
  font-weight: 680;
}

fieldset.creative-field--group {
  min-width: 0;
  padding: 0;
  border: 0;
}

.creative-field--group > legend {
  margin-block-end: 8px;
  padding: 0;
}

.creative-field > small,
.creative-help,
.creative-learning-notes > small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 430;
  line-height: 1.5;
}

.creative-shell input,
.creative-shell select,
.creative-shell textarea,
.creative-button,
.creative-file-button {
  min-height: 44px;
  border: 1px solid var(--creative-line);
  border-radius: 10px;
  color: var(--creative-ink);
  background: var(--surface);
  font: inherit;
}

.creative-shell input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.creative-shell select,
.creative-shell textarea {
  width: 100%;
  padding: 9px 11px;
}

.creative-shell textarea.code-textarea {
  background: transparent;
}

.creative-shell input[type="color"] {
  width: 100%;
  min-width: 56px;
  padding: 4px;
  cursor: pointer;
}

.creative-shell input[type="range"] {
  width: 100%;
  min-height: 24px;
  border: 0;
  accent-color: var(--creative-signal);
  background: transparent;
}

.creative-shell input[type="checkbox"],
.creative-shell input[type="radio"] {
  accent-color: var(--creative-signal);
}

.creative-button,
.creative-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  font-size: .82rem;
  font-weight: 720;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}

.creative-button:hover:not(:disabled),
.creative-file-button:hover {
  border-color: var(--creative-signal);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--creative-signal) 13%, transparent);
  transform: translateY(-1px);
}

.creative-button--primary {
  border-color: var(--creative-signal);
  color: var(--creative-signal-ink);
  background: var(--creative-signal);
}

.creative-button--danger {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--creative-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.creative-button:disabled,
.creative-shell input:disabled,
.creative-shell select:disabled {
  opacity: .46;
  cursor: not-allowed;
}

.creative-command-row,
.creative-segmented,
.creative-editor-tools,
.creative-photo-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creative-command-row > * {
  flex: 1 1 120px;
}

.creative-segmented {
  margin-block-end: 17px;
}

.creative-segmented .creative-button {
  min-height: 38px;
  flex: 1 1 90px;
  padding: 7px 9px;
}

.creative-button.is-active,
.creative-segmented .creative-button.is-active {
  border-color: var(--creative-signal);
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 9%, var(--surface));
}

.creative-divider {
  height: 1px;
  margin: 21px 0;
  background: var(--creative-line);
}

.creative-grid-2,
.creative-grid-3,
.creative-grid-4 {
  display: grid;
  gap: 12px;
}

.creative-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.creative-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creative-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.creative-range-row,
.creative-unit-input,
.creative-color-input {
  display: flex;
  align-items: center;
  gap: 9px;
}

.creative-range-row output,
.creative-unit-input span {
  flex: 0 0 auto;
  min-width: 48px;
  color: var(--muted);
  font: 650 .75rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: end;
}

.creative-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 17px;
  color: var(--creative-ink);
  font-size: .82rem;
  line-height: 1.45;
}

.creative-check input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 1px 0 0;
}

.creative-stack {
  display: grid;
  gap: 9px;
}

.creative-result-card,
.creative-comparison,
.creative-reading-card {
  display: grid;
  gap: 10px;
  margin-block-end: 16px;
  padding: 14px;
  border: 1px solid var(--creative-line);
  border-radius: 12px;
  background: var(--creative-soft);
}

.creative-result-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.creative-result-card > div,
.creative-comparison > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.creative-result-card strong,
.creative-result-card small,
.creative-comparison span,
.creative-comparison strong {
  display: block;
}

.creative-result-card small,
.creative-comparison span {
  color: var(--muted);
  font-size: .73rem;
}

.creative-status {
  min-height: 42px;
  padding: 12px 24px;
  border-block-start: 1px solid var(--creative-line);
  color: var(--muted);
  background: var(--surface);
  font-size: .8rem;
  line-height: 1.4;
}

.creative-status[data-tone="success"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.creative-status[data-tone="error"] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.creative-dropzone {
  position: relative;
  display: grid;
  width: min(520px, calc(100% - 48px));
  min-height: 210px;
  padding: 38px;
  place-content: center;
  gap: 9px;
  border: 1.5px dashed var(--creative-line);
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.creative-dropzone::before {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 7px;
  place-items: center;
  border-radius: 15px;
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 10%, var(--surface));
  content: "+";
  font-size: 1.7rem;
}

.creative-dropzone strong { color: var(--creative-ink); }
.creative-dropzone small { line-height: 1.5; }

.creative-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
}

.creative-dropzone:hover,
.creative-dropzone.is-dragover {
  border-color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--surface));
  transform: translateY(-2px);
}

.creative-dropzone:focus-within,
.creative-file-button:focus-within {
  outline: 3px solid color-mix(in srgb, var(--creative-signal) 38%, transparent);
  outline-offset: 3px;
  border-color: var(--creative-signal);
}

.creative-dropzone--compact {
  width: 100%;
  min-height: 130px;
  padding: 22px;
  border-radius: 12px;
}

.creative-dropzone--compact::before {
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
}

/* Recorder */
.creative-stage--video video {
  width: calc(100% - 48px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.creative-recorder-headup {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, #07101f 78%, transparent);
  backdrop-filter: blur(10px);
  font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7d8797;
}

.creative-recording-dot.is-active {
  background: #ff4b4b;
  box-shadow: 0 0 0 5px color-mix(in srgb, #ff4b4b 22%, transparent);
  animation: creative-recording-pulse 1.4s ease-in-out infinite;
}

@keyframes creative-recording-pulse {
  50% { opacity: .42; }
}

/* Color studios */
.creative-color-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 560px;
}

.creative-color-stage {
  min-width: 0;
  padding: 24px;
  border-inline-end: 1px solid var(--creative-line);
}

.creative-color-toolbar {
  margin-block-end: 22px;
  padding: 18px;
  border: 1px solid var(--creative-line);
  border-radius: 14px;
  background: var(--surface);
}

.creative-color-toolbar .creative-field { margin-block-end: 10px; }

.creative-swatches {
  display: grid;
  grid-auto-columns: minmax(132px, 1fr);
  grid-auto-flow: column;
  min-height: 350px;
  overflow-x: auto;
  border: 1px solid var(--creative-line);
  border-radius: 16px;
  background: var(--surface);
}

.creative-swatch {
  position: relative;
  display: grid;
  grid-template-rows: minmax(270px, 1fr) auto;
  min-width: 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--creative-line) 65%, transparent);
  background: var(--swatch);
}

.creative-swatch:last-child { border-inline-end: 0; }

.creative-swatch.is-selected {
  box-shadow: inset 0 0 0 4px var(--creative-ink);
  z-index: 1;
}

.creative-swatch-main {
  display: flex;
  min-width: 0;
  padding: 18px 14px;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--swatch-ink);
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.creative-swatch-main strong {
  margin-block-start: auto;
  font: 800 1.02rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-swatch-main small {
  margin-block-start: 6px;
  font: 600 .65rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .8;
}

.creative-swatch-number {
  font: 750 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .74;
}

.creative-swatch-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 7px;
  background: color-mix(in srgb, #050b14 82%, transparent);
}

.creative-swatch-actions button {
  min-width: 44px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 7px;
  color: #fff;
  background: color-mix(in srgb, #fff 8%, transparent);
  font-size: .7rem;
  cursor: pointer;
}

.creative-swatch-actions button:disabled { opacity: .3; }

.creative-contrast-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-block-end: 12px;
}

.creative-contrast-card > span { grid-column: 1 / -1; font-size: .78rem; font-weight: 720; }

.creative-contrast-card > div {
  padding: 13px;
  border: 1px solid var(--creative-line);
  border-radius: 10px;
  background: var(--surface);
}

.creative-contrast-card strong,
.creative-contrast-card small { display: block; }
.creative-contrast-card small { margin-block-start: 4px; color: var(--muted); font-size: .68rem; }

.creative-color-history-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--creative-line);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 680;
}

.creative-color-history {
  display: flex;
  gap: 7px;
  min-width: 0;
  padding: 2px;
  overflow-x: auto;
}

.creative-color-history button {
  display: flex;
  flex: 0 0 64px;
  height: 30px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--creative-line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.creative-color-history button:hover,
.creative-color-history button:focus-visible { border-color: var(--creative-signal); }
.creative-color-history i { flex: 1; background: var(--history-color); }
.creative-color-history i:first-child { border-radius: 4px 0 0 4px; }
.creative-color-history i:last-child { border-radius: 0 4px 4px 0; }

/* Publishing */
.creative-composer {
  grid-template-columns: minmax(260px, .72fr) minmax(360px, 1fr) 290px;
}

.creative-editor-pane,
.creative-preview-pane,
.creative-toc-pane {
  min-width: 0;
  padding: 20px;
  background: var(--creative-paper);
}

.creative-editor-pane {
  display: flex;
  min-height: 520px;
  border-inline-end: 1px solid var(--creative-line);
  flex-direction: column;
}

.creative-editor-pane textarea {
  min-height: 420px;
  flex: 1;
  resize: vertical;
  tab-size: 2;
  font: 500 .83rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-editor-tools {
  align-items: center;
  justify-content: space-between;
  margin-block-end: 10px;
}

.creative-editor-tools > span {
  color: var(--muted);
  font: 650 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.creative-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.creative-stage--output {
  min-height: 620px;
  align-content: center;
  padding: 28px;
}

.creative-stage--output canvas {
  max-width: 100%;
  max-height: 680px;
  background: transparent;
}

.creative-output-meta {
  position: absolute;
  inset-inline: 18px;
  inset-block-end: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--creative-line) 75%, transparent);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  font: 650 .69rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-markdown-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--creative-line);
  background: var(--surface);
}

.creative-markdown-tabs {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 14px;
  border-block-end: 1px solid var(--creative-line);
  background: var(--creative-soft);
}

.creative-markdown-tabs button {
  min-height: 38px;
  border: 1px solid var(--creative-line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  cursor: pointer;
}

.creative-markdown-tabs button[aria-pressed="true"] {
  border-color: var(--creative-signal);
  color: var(--creative-signal-ink);
  background: var(--creative-signal);
}

.creative-markdown-stats {
  margin-inline-start: auto;
  color: var(--muted);
  font: 650 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-markdown-layout {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.15fr) 230px;
  min-height: 650px;
}

.creative-preview-pane {
  border-inline-end: 1px solid var(--creative-line);
  overflow: hidden;
  background: var(--surface);
}

.creative-markdown-preview {
  height: 570px;
  padding-inline-end: 8px;
  overflow: auto;
  color: var(--creative-ink);
  line-height: 1.72;
}

.creative-markdown-preview h1,
.creative-markdown-preview h2,
.creative-markdown-preview h3 {
  margin: 1.2em 0 .5em;
  line-height: 1.2;
  letter-spacing: -.02em;
  scroll-margin-block-start: 20px;
}

.creative-markdown-preview h1:first-child { margin-block-start: 0; }
.creative-markdown-preview a { color: var(--creative-signal); }
.creative-markdown-preview img { max-width: 100%; }
.creative-markdown-preview blockquote {
  margin-inline: 0;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--creative-warm);
  color: var(--muted);
}

.creative-markdown-preview pre {
  max-width: 100%;
  padding: 15px;
  overflow: auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, #111827);
}

.creative-toc-pane nav {
  display: grid;
  gap: 4px;
}

.creative-toc-pane nav button {
  padding: 7px 8px;
  padding-inline-start: calc(8px + (var(--toc-level) - 1) * 10px);
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.creative-toc-pane nav button:hover {
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--surface));
}

.creative-reading-card {
  margin-block-start: 22px;
}

.creative-reading-card strong { font-size: 1.45rem; }

/* Raster, watermark and photo */
.creative-raster-stage,
.creative-photo-stage { min-height: 620px; }

.creative-raster-stage canvas,
.creative-photo-stage canvas { max-height: 650px; }

.creative-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.creative-format-grid label { position: relative; }
.creative-format-grid input { position: absolute; opacity: 0; }

.creative-format-grid span {
  display: grid;
  min-height: 68px;
  padding: 10px;
  place-content: center;
  border: 1px solid var(--creative-line);
  border-radius: 9px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}

.creative-format-grid small { margin-block-start: 3px; color: var(--muted); font-size: .62rem; }
.creative-format-grid input:checked + span {
  border-color: var(--creative-signal);
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--surface));
}

.creative-format-grid input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--creative-signal) 38%, transparent);
  outline-offset: 2px;
}

.creative-compatibility {
  margin-block-end: 16px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--creative-signal) 34%, var(--creative-line));
  border-radius: 10px;
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--surface));
  font-size: .76rem;
  line-height: 1.5;
}

.creative-compatibility[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--creative-warm) 48%, var(--creative-line));
  color: var(--creative-warm);
  background: color-mix(in srgb, var(--creative-warm) 8%, var(--surface));
}

.creative-target-controls {
  display: block;
  gap: 10px;
  margin-block-end: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--creative-signal) 34%, var(--creative-line));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--creative-signal) 7%, transparent), transparent 64%),
    var(--creative-soft);
}

.creative-raster-advanced {
  margin-block-end: 16px;
  border: 1px solid var(--creative-line);
  border-radius: 12px;
  background: var(--creative-soft);
}

.creative-raster-advanced > summary {
  padding: 12px;
  color: var(--creative-ink);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 760;
}

.creative-raster-advanced[open] > summary {
  border-block-end: 1px solid var(--creative-line);
}

.creative-raster-advanced-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.creative-shell.lp-shell {
  --lp-signal: var(--creative-signal);
  --lp-signal-2: color-mix(in srgb, var(--creative-signal) 52%, #178256);
}

.creative-raster[data-raster-mode="compress"].lp-workbench {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
}

.creative-raster-progress.lp-job-strip {
  grid-template-columns: auto minmax(0, 1fr);
  margin-block: 0 16px;
}

.creative-raster-progress .lp-job-detail {
  min-width: 0;
}

.creative-raster-progress progress.lp-progress {
  display: block;
  width: 100%;
}

.creative-raster-progress {
  display: grid;
  gap: 7px;
  margin-block-end: 16px;
  color: var(--muted);
  font: 700 .7rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.creative-raster-progress progress {
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  accent-color: var(--creative-signal);
}

.creative-raster-progress progress::-webkit-progress-bar {
  background: var(--creative-soft);
}

.creative-raster-progress progress::-webkit-progress-value {
  background: var(--creative-signal);
}

.creative-status[data-tone="warning"] {
  color: var(--creative-warm);
}

.creative-cropper canvas,
.creative-watermark canvas,
.creative-photo-stage canvas { cursor: crosshair; }

.creative-watermark {
  grid-template-columns: 230px minmax(0, 1fr) 320px;
}

.creative-watermark-browser {
  min-width: 0;
  padding: 16px;
  border-inline-end: 1px solid var(--creative-line);
  background: var(--creative-paper);
}

.creative-file-list {
  display: grid;
  gap: 6px;
  max-height: 430px;
  margin-block-start: 12px;
  overflow: auto;
}

.creative-file-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  padding: 9px;
  border: 1px solid var(--creative-line);
  border-radius: 9px;
  color: var(--creative-ink);
  background: var(--surface);
  text-align: start;
  cursor: pointer;
}

.creative-file-item > span { grid-row: 1 / 3; color: var(--creative-signal); font: 700 .68rem/1.4 ui-monospace, monospace; }
.creative-file-item strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.creative-file-item small { color: var(--muted); font-size: .65rem; }
.creative-file-item.is-active { border-color: var(--creative-signal); background: color-mix(in srgb, var(--creative-signal) 7%, var(--surface)); }

.creative-photo-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 680px;
}

.creative-photo-controls {
  border-inline-start: 1px solid var(--creative-line);
  max-height: 760px;
  overflow: auto;
}

.creative-photo-controls details {
  padding: 14px 0;
  border-block-end: 1px solid var(--creative-line);
}

.creative-photo-controls summary {
  margin-block-end: 14px;
  font-size: .86rem;
  font-weight: 760;
  cursor: pointer;
}

.creative-photo-history {
  position: sticky;
  z-index: 2;
  inset-block-start: -24px;
  margin: -24px -24px 2px;
  padding: 13px 18px;
  border-block-end: 1px solid var(--creative-line);
  background: color-mix(in srgb, var(--creative-paper) 92%, transparent);
  backdrop-filter: blur(10px);
}

.creative-photo-history .creative-button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  font-size: .7rem;
}

/* Paint */
.creative-paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--creative-line);
  background: var(--surface);
}

.creative-tool-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.creative-tool-group + .creative-tool-group {
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--creative-line);
}

.creative-tool-group button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--creative-line);
  border-radius: 9px;
  color: var(--creative-ink);
  background: var(--surface);
  cursor: pointer;
}

.creative-tool-group button[aria-pressed="true"] {
  border-color: var(--creative-signal);
  color: var(--creative-signal);
  background: color-mix(in srgb, var(--creative-signal) 8%, var(--surface));
}

.creative-tool-group--settings label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .72rem;
}

.creative-tool-group--settings input[type="color"] { width: 42px; min-height: 34px; }
.creative-tool-group--settings input[type="range"] { width: 110px; }
.creative-tool-group--settings output { min-width: 34px; font: 650 .67rem/1 ui-monospace, monospace; }

.creative-paint-stage {
  min-height: 610px;
  padding: 30px;
  border-inline-end: 0;
}

.creative-paint-stage canvas {
  width: min(100%, 1200px);
  background: #fff;
}

/* Learning desk */
.creative-learning {
  display: grid;
  grid-template-columns: 280px minmax(330px, 1fr) 300px;
  min-height: 650px;
}

.creative-learning-library,
.creative-learning-detail {
  min-width: 0;
  padding: 20px;
  border-inline-end: 1px solid var(--creative-line);
}

.creative-learning-library { background: var(--creative-soft); }
.creative-learning-detail { background: var(--surface); }
.creative-learning-notes { background: var(--creative-paper); }

.creative-learning-filters {
  display: grid;
  gap: 8px;
  margin-block-end: 15px;
}

.creative-learning-list {
  display: grid;
  gap: 8px;
}

.creative-learning-item {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--creative-line);
  border-radius: 11px;
  color: var(--creative-ink);
  background: var(--surface);
  text-align: start;
  cursor: pointer;
}

.creative-learning-item small,
.creative-learning-detail header > span {
  color: var(--creative-signal);
  font: 700 .65rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

.creative-learning-item strong { display: block; margin-block-start: 4px; font-size: .82rem; }
.creative-learning-item.is-active { border-color: var(--creative-signal); box-shadow: 4px 4px 0 color-mix(in srgb, var(--creative-signal) 13%, transparent); }

.creative-progress {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--creative-line);
}

.creative-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--creative-signal);
}

.creative-progress b {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -17px;
  color: var(--muted);
  font: 650 .62rem/1 ui-monospace, monospace;
}

.creative-learning-detail header {
  padding: 12px 6px 24px;
  border-block-end: 1px solid var(--creative-line);
}

.creative-learning-detail h3 {
  margin: 9px 0;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -.03em;
}

.creative-learning-detail header p,
.creative-learning-method p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.creative-learning-detail > section { margin-block-start: 24px; }

.creative-learning-topics {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.creative-learning-topics label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--creative-line);
  border-radius: 10px;
  background: var(--creative-paper);
  cursor: pointer;
}

.creative-learning-topics input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; }
.creative-learning-topics label > span { display: flex; align-items: baseline; gap: 10px; }
.creative-learning-topics b { color: var(--creative-signal); font: 700 .66rem/1 ui-monospace, monospace; }
.creative-learning-topics strong { font-size: .82rem; }

.creative-learning-method {
  padding: 16px;
  border-inline-start: 4px solid var(--creative-warm);
  background: color-mix(in srgb, var(--creative-warm) 7%, var(--creative-paper));
}

.creative-learning-method strong { display: block; margin-block-end: 6px; }
.creative-learning-notes textarea { min-height: 360px; resize: vertical; font: 500 .82rem/1.65 ui-monospace, monospace; }
.creative-learning-notes .creative-stack { margin-block-start: 18px; }
.creative-empty-copy { color: var(--muted); font-size: .82rem; }

.creative-shell :where(button, input, select, textarea, canvas, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--creative-signal) 38%, transparent);
  outline-offset: 2px;
}

[dir="rtl"] .creative-shell,
.creative-shell[dir="rtl"] {
  text-align: start;
}

[dir="rtl"] .creative-swatch-main,
[dir="rtl"] .creative-file-item,
[dir="rtl"] .creative-learning-item {
  text-align: start;
}

@media (max-width: 1120px) {
  .creative-composer,
  .creative-watermark,
  .creative-learning,
  .creative-markdown-layout {
    grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  }

  .creative-composer > .creative-inspector,
  .creative-watermark > .creative-inspector,
  .creative-learning-notes,
  .creative-toc-pane {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--creative-line);
    border-inline-start: 0;
  }

  .creative-learning-notes textarea { min-height: 180px; }
  .creative-toc-pane nav { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 820px) {
  .creative-hero {
    grid-template-columns: 1fr auto;
    padding: 21px;
  }

  .creative-eyebrow { grid-column: 1 / -1; justify-self: start; }

  .creative-studio,
  .creative-color-studio,
  .creative-photo-workbench,
  .creative-composer,
  .creative-watermark,
  .creative-learning,
  .creative-markdown-layout {
    grid-template-columns: 1fr;
  }

  .creative-raster[data-raster-mode="compress"].lp-workbench {
    grid-template-columns: 1fr;
  }

  .creative-stage,
  .creative-color-stage,
  .creative-editor-pane,
  .creative-preview-pane,
  .creative-watermark-browser,
  .creative-learning-library,
  .creative-learning-detail,
  .creative-photo-controls {
    border-inline: 0;
    border-block-end: 1px solid var(--creative-line);
  }

  .creative-composer > .creative-inspector,
  .creative-watermark > .creative-inspector,
  .creative-learning-notes,
  .creative-toc-pane { grid-column: auto; }

  .creative-stage { min-height: 430px; }
  .creative-stage--output { min-height: 540px; }
  .creative-color-studio { min-height: 0; }
  .creative-color-stage { padding: 17px; }
  .creative-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creative-paint-toolbar { align-items: flex-start; flex-direction: column; }
  .creative-tool-group + .creative-tool-group { padding-inline-start: 0; border-inline-start: 0; }

  .creative-markdown-tabs { display: grid; }
  .creative-markdown-layout [data-md-pane] { display: none; }
  .creative-markdown-layout[data-md-active-view="edit"] [data-md-pane="edit"] { display: flex; }
  .creative-markdown-layout[data-md-active-view="preview"] [data-md-pane="preview"],
  .creative-markdown-layout[data-md-active-view="toc"] [data-md-pane="toc"] { display: block; }
}

@media (max-width: 560px) {
  .creative-shell { border-radius: 16px; }
  .creative-hero { grid-template-columns: 1fr; }
  .creative-local-badge { justify-self: start; }
  .creative-inspector,
  .creative-photo-controls,
  .creative-learning-notes,
  .creative-editor-pane,
  .creative-preview-pane,
  .creative-toc-pane { padding: 17px; }
  .creative-stage { min-height: 360px; }
  .creative-stage canvas,
  .creative-stage video { max-width: calc(100% - 22px); }
  .creative-grid-2,
  .creative-grid-3,
  .creative-grid-4 { grid-template-columns: 1fr; }
  .creative-swatches { grid-auto-columns: minmax(164px, 74vw); }
  .creative-color-history-wrap { grid-template-columns: 1fr; }
  .creative-swatch { grid-template-rows: 230px auto; }
  .creative-swatch-actions { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
  .creative-swatch-actions button { min-width: 44px; }
  .creative-swatch-actions span { display: none; }
  .creative-markdown-toolbar > * { flex: 1 1 140px; }
  .creative-markdown-stats { flex-basis: 100%; margin-inline-start: 0; text-align: center; }
  .creative-format-grid { grid-template-columns: 1fr; }
  .creative-target-controls { grid-template-columns: 1fr; }
  .creative-paint-stage { min-height: 390px; padding: 12px; }
  .creative-learning-notes textarea { min-height: 230px; }

  .creative-shell :where(button, select, input[type="file"]::file-selector-button) {
    min-height: 44px;
  }

  .creative-markdown-toolbar,
  .creative-paint-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .creative-markdown-toolbar > *,
  .creative-paint-toolbar > * {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creative-shell *,
  .creative-shell *::before,
  .creative-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.creative-visual-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-width: 0;
}

.creative-visual-workbench .creative-inspector {
  border-inline-end: 1px solid var(--creative-line);
}

.creative-stage--output {
  min-height: 520px;
  padding: 24px;
}

.creative-stage--output > img,
.creative-stage--output > canvas {
  display: block;
  width: min(100%, 900px);
  max-height: 720px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px color-mix(in srgb, #000 20%, transparent);
}

.creative-visual-file-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin-block-start: 18px;
  overflow: auto;
}

.creative-visual-file-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--creative-line);
  border-radius: 9px;
  background: var(--surface);
}

.creative-visual-file-row span,
.creative-visual-file-row small {
  overflow-wrap: anywhere;
}

.creative-visual-file-row small {
  color: var(--muted);
  font-size: .72rem;
}

.creative-visual-file-row[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--creative-line));
  color: var(--danger);
}

.creative-result-metrics {
  width: 100%;
  margin-block-start: 18px;
  padding: 12px 14px;
  border-inline-start: 4px solid var(--creative-signal);
  color: var(--muted);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--creative-paper));
  font: 650 .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.creative-note {
  margin-block-start: 18px;
  padding: 11px 12px;
  border-inline-start: 4px solid var(--creative-signal);
  color: var(--muted);
  background: color-mix(in srgb, var(--creative-signal) 7%, var(--creative-paper));
  font-size: .76rem;
  line-height: 1.55;
}

.creative-note--warning {
  border-inline-start-color: var(--creative-warm);
  background: color-mix(in srgb, var(--creative-warm) 8%, var(--creative-paper));
}

.creative-diff-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.creative-diff-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  background: #fff;
}

.creative-diff-preview figure {
  min-width: 0;
  margin: 0;
}

.creative-diff-preview figcaption {
  margin-block-start: 7px;
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
}

.creative-palette-output {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.creative-palette-output textarea,
.creative-palette-output pre {
  width: 100%;
  min-height: 150px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--creative-line);
  border-radius: 10px;
  color: var(--creative-ink);
  background: var(--surface);
  font: 500 .76rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.creative-palette-output .creative-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
}

.creative-palette-swatch {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--creative-line);
  border-radius: 10px;
  background: var(--surface);
}

.creative-palette-swatch > span {
  display: block;
  min-height: 76px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}

.creative-palette-swatch code {
  color: var(--muted);
  font-size: .68rem;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .creative-visual-workbench {
    grid-template-columns: 1fr;
  }

  .creative-visual-workbench .creative-inspector {
    border-inline-end: 0;
    border-block-end: 1px solid var(--creative-line);
  }
}

@media (max-width: 560px) {
  .creative-diff-preview {
    grid-template-columns: 1fr;
  }
}