* { box-sizing: border-box; }
html { background: var(--tools-bg); }
body {
  margin: 0;
  min-width: 0;
  color: var(--tools-text);
  background: var(--tools-bg);
  font-family: var(--tools-sans);
}
button, input, select, textarea { font: inherit; }
button, input, select, summary, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

main { width: min(1040px, calc(100% - 40px)); margin: 0 auto; }
.hero { max-width: 850px; margin: clamp(46px, 8vw, 82px) auto clamp(38px, 6vw, 64px); }
.eyebrow, .step-label {
  margin: 0 0 var(--tools-hero-eyebrow-gap);
  color: var(--tools-green-text);
  font: 700 .76rem/1.2 var(--tools-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 760px;
  margin: 0;
  font: 500 clamp(2.7rem, 7vw, 5rem)/.98 var(--tools-serif);
  letter-spacing: -.055em;
}
.hero-copy {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--tools-muted);
  font-size: clamp(1rem, 2vw, 1.13rem);
  line-height: 1.65;
}
.hero-proof {
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
}
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; color: var(--tools-muted); font-size: .79rem; font-weight: 700; }
.hero-proof .lucide { width: 17px; height: 17px; color: var(--tools-green-text); flex: 0 0 auto; }

.workspace {
  overflow: hidden;
  border: 1px solid var(--tools-line);
  border-radius: 24px;
  background: var(--tools-surface);
  box-shadow: var(--tools-shadow);
}
.workspace-heading {
  padding: clamp(24px, 5vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--tools-line);
}
.workspace-heading .step-label { margin-bottom: 12px; }
.workspace h2, .workspace h3 { margin: 0; font-family: var(--tools-serif); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.workspace h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.workspace h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.workspace-heading p:last-child, .section-heading-row p, .result-heading p, .import-content > p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--tools-muted);
  font-size: .82rem;
  line-height: 1.6;
}
.workspace-icon { width: 58px; height: 58px; color: var(--tools-green-text); }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
.editor-column { min-width: 0; border-right: 1px solid var(--tools-line); }
.result-column { min-width: 0; background: var(--tools-surface-soft); }
.control-section, .preview-panel, .output-panel, .import-panel { padding: clamp(24px, 4vw, 34px); }
.control-section + .control-section, .output-panel, .import-panel { border-top: 1px solid var(--tools-line); }
.control-section { margin: 0; border: 0; }
.control-section > legend { margin: 0 0 14px; padding: 0; font-size: .78rem; font-weight: 800; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-card {
  min-height: 86px;
  padding: 14px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--tools-line);
  border-radius: 12px;
  background: var(--tools-surface);
  cursor: pointer;
}
.choice-card.selected { border-color: var(--tools-green); box-shadow: inset 0 0 0 1px var(--tools-green); }
.choice-card input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tools-green); }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: .84rem; }
.choice-card small { margin-top: 5px; color: var(--tools-muted); font-size: .71rem; line-height: 1.45; }

.geometry-section h3, .stops-section h3 { margin-bottom: 18px; }
.field-stack { min-width: 0; }
.field-stack > label, .field-label { display: block; margin-bottom: 7px; font-size: .74rem; font-weight: 800; }
.text-input, .unit-field, select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--tools-line);
  border-radius: 10px;
  color: var(--tools-text);
  background: var(--tools-surface);
}
.text-input { padding: 0 12px; }
.mono { font-family: var(--tools-mono); font-weight: 600; }
.unit-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; }
.unit-field input { min-width: 0; height: 42px; padding: 0 12px; border: 0; outline: 0; color: var(--tools-text); background: transparent; font-family: var(--tools-mono); font-weight: 650; }
.unit-field > span { padding: 0 12px; color: var(--tools-muted); font-size: .72rem; font-weight: 700; }
.unit-field.invalid, .text-input[aria-invalid="true"] { border-color: var(--tools-red); }
select { padding: 0 36px 0 12px; }
.field-hint, .field-error, .minimum-note { margin: 7px 0 0; font-size: .7rem; line-height: 1.45; }
.field-hint, .minimum-note { color: var(--tools-muted); }
.field-error { color: var(--tools-red); }
.radial-controls { display: grid; gap: 14px; }
.center-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.section-heading-row { margin-bottom: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading-row h3 { margin: 0; }
.section-heading-row p { max-width: 560px; }
.stop-list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.stop-card { padding: 14px; border: 1px solid var(--tools-line); border-radius: 14px; background: var(--tools-surface); }
.stop-header { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stop-header > strong { font-size: .8rem; }
.stop-actions { display: flex; gap: 6px; }
.stop-fields { display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(105px, .72fr) minmax(105px, .72fr); gap: 10px; align-items: start; }
.color-field-group { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: end; }
.color-picker-label { min-width: 0; }
.color-picker-label .field-label { overflow: hidden; color: transparent; user-select: none; }
.color-picker {
  width: 58px;
  height: 44px;
  padding: 3px;
  display: block;
  border: 1px solid var(--tools-line);
  border-radius: 10px;
  background: var(--tools-surface);
  cursor: pointer;
}
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: 0; border-radius: 6px; }
.color-picker::-moz-color-swatch { border: 0; border-radius: 6px; }

.primary-button, .secondary-button, .file-button {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.primary-button { border: 1px solid var(--tools-action); color: var(--tools-on-action); background: var(--tools-action); }
.secondary-button, .file-button { border: 1px solid var(--tools-line); color: var(--tools-text); background: var(--tools-surface); }
.primary-button .lucide, .secondary-button .lucide { width: 17px; height: 17px; flex: 0 0 auto; }
.add-stop-button { flex: 0 0 auto; }
.icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--tools-line);
  border-radius: 10px;
  color: var(--tools-text);
  background: var(--tools-surface-soft);
}
.icon-button .lucide { width: 18px; height: 18px; }
.icon-button.destructive:not(:disabled) { color: var(--tools-red); }

.result-heading { margin-bottom: 16px; }
.preview-checkerboard {
  min-height: 292px;
  overflow: hidden;
  border: 1px solid var(--tools-line);
  border-radius: 16px;
  background-color: #e7e4dc;
  background-image: linear-gradient(45deg, #cbc8c0 25%, transparent 25%), linear-gradient(-45deg, #cbc8c0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbc8c0 75%), linear-gradient(-45deg, transparent 75%, #cbc8c0 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.gradient-preview { width: 100%; min-height: 292px; }
.validation-summary, .import-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--tools-red) 55%, var(--tools-line));
  border-radius: 10px;
  color: var(--tools-red);
  background: color-mix(in srgb, var(--tools-red) 7%, var(--tools-surface));
  font-size: .72rem;
  line-height: 1.5;
}
.css-output {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  padding: 13px;
  border: 1px solid var(--tools-line);
  border-radius: 10px;
  color: var(--tools-text);
  background: var(--tools-surface);
  font: 600 .74rem/1.55 var(--tools-mono);
  overflow-wrap: anywhere;
}
.output-actions { margin-top: 12px; display: grid; gap: 8px; }
.output-actions .primary-button, .output-actions .secondary-button { width: 100%; }

.import-panel { margin: 0; }
.import-panel > summary { min-height: 44px; display: flex; align-items: center; color: var(--tools-text); font-size: .8rem; font-weight: 800; cursor: pointer; }
.import-content { padding-top: 10px; }
.import-content h3 { font-size: 1.25rem; }
.file-button { position: relative; margin-top: 14px; width: 100%; cursor: pointer; }
.file-button.disabled { opacity: .48; cursor: not-allowed; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pending-import { margin-top: 12px; padding: 12px; border: 1px solid var(--tools-green); border-radius: 12px; background: var(--tools-green-soft); }
.pending-import p { margin: 0; color: var(--tools-text); font-size: .73rem; line-height: 1.5; overflow-wrap: anywhere; }
.pending-actions { margin-top: 10px; display: grid; gap: 8px; }
.pending-actions button { width: 100%; }

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 32px);
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--tools-text) 14%, transparent);
  border-radius: 10px;
  color: #fff;
  background: #17242e;
  box-shadow: var(--tools-shadow);
  transform: translateX(-50%);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

:where(button, input, select, textarea, summary, .file-button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tools-green) 55%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:not(:disabled):hover { background: var(--tools-action-hover); border-color: var(--tools-action-hover); }
  .secondary-button:not(:disabled):hover, .icon-button:not(:disabled):hover, .file-button:not(.disabled):hover { border-color: var(--tools-green); }
  .choice-card:hover { border-color: color-mix(in srgb, var(--tools-green) 65%, var(--tools-line)); }
}
.primary-button:not(:disabled):active, .secondary-button:not(:disabled):active, .icon-button:not(:disabled):active, .file-button:not(.disabled):active { transform: scale(.985); }

@media (max-width: 900px) {
  .workspace-grid { display: flex; flex-direction: column; }
  .editor-column, .result-column { display: contents; }
  .type-section { order: 1; }
  .preview-panel { order: 2; border-block: 1px solid var(--tools-line); background: var(--tools-surface-soft); }
  .geometry-section { order: 3; }
  .stops-section { order: 4; }
  .output-panel { order: 5; border-left: 0; }
  .import-panel { order: 6; }
}

@media (max-width: 700px) {
  main { width: min(100% - 28px, 1040px); }
  .hero { margin-top: 38px; }
  .workspace-heading { grid-template-columns: 1fr; }
  .workspace-icon { display: none; }
  .section-heading-row { display: grid; }
  .add-stop-button { width: 100%; }
  .stop-fields { grid-template-columns: minmax(0, 1fr) minmax(90px, .6fr); }
  .color-field-group { grid-column: 1 / -1; }
  .result-column { grid-template-columns: 1fr; }
  .output-panel { border-left: 0; border-top: 1px solid var(--tools-line); }
  .preview-checkerboard, .gradient-preview { min-height: 230px; }
}

@media (max-width: 460px) {
  main { width: min(100% - 24px, 1040px); }
  .hero h1 { font-size: clamp(2.35rem, 13vw, 3.35rem); }
  .hero-proof { display: grid; gap: 9px; }
  .workspace { border-radius: 18px; }
  .workspace-heading, .control-section, .preview-panel, .output-panel, .import-panel { padding: 20px 16px; }
  .choice-grid, .center-grid, .stop-fields { grid-template-columns: 1fr; }
  .choice-card { min-height: 76px; }
  .color-field-group { grid-column: auto; grid-template-columns: 52px minmax(0, 1fr); }
  .color-picker { width: 52px; }
  .stop-card { padding: 12px; }
  .stop-header { align-items: flex-start; }
  .stop-actions { gap: 4px; }
  .icon-button { width: 42px; height: 42px; }
  .preview-checkerboard, .gradient-preview { min-height: 190px; }
}

@media (prefers-color-scheme: dark) {
  .preview-checkerboard {
    background-color: #253036;
    background-image: linear-gradient(45deg, #39464c 25%, transparent 25%), linear-gradient(-45deg, #39464c 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #39464c 75%), linear-gradient(-45deg, transparent 75%, #39464c 75%);
  }
  .toast { color: var(--tools-text); background: var(--tools-surface); border-color: var(--tools-line); }
}

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

.tmb-family-footer .footer-brand.tmb-family-signature {
  width: 112px;
  flex: 0 0 112px;
  margin-right: 0;
  color: var(--tmb-family-identity);
  text-decoration: none;
}

.stop-fields { grid-template-columns: minmax(0, 1fr); }
.stop-precision { grid-column: 1 / -1; }
.stop-precision > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-size: .85rem; font-weight: 700; }
.precision-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }