:root {
  color-scheme: light;
  --ink: #17221d;
  --muted: #647069;
  --paper: #f8f7f1;
  --panel: #fffef9;
  --line: #d9ddd6;
  --green: #1d5c43;
  --green-dark: #13412f;
  --mint: #dcecdf;
  --selected: #315f9e;
  --selected-hover: #284f85;
  --selected-ink: #ffffff;
  --red: #b93a34;
  --error-ink: #842b27;
  --error-background: #fff1ef;
  --error-border: #e7c3c0;
  --shadow: 0 16px 40px rgb(23 34 29 / 8%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The hosted image library shares the account/editor palette. */
.images-main { width: min(100%, 76rem); }
.image-usage, .image-upload-panel { display: grid; gap: .8rem; margin-bottom: 1.5rem; }
.image-upload-panel { padding: 1.25rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.image-drop-zone { display: grid; justify-items: center; gap: .8rem; padding: 1.6rem 1rem; border: 2px dashed var(--line); border-radius: .6rem; text-align: center; }
.image-drop-zone.dragging, .image-drop-zone:focus-visible { border-color: var(--green); background: var(--mint); outline: 2px solid var(--green); outline-offset: 2px; }
.images-page progress { width: 100%; height: .65rem; accent-color: var(--green); }
.images-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.image-upload-queue { display: grid; gap: 1rem; margin-top: 1rem; }
.image-upload-item { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.image-upload-thumbnail { width: 6rem; height: 6rem; object-fit: contain; border-radius: .4rem; background: var(--paper); }
.image-upload-item-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; min-width: 0; }
.image-upload-item-fields > :first-child, .image-upload-item-fields > p, .image-upload-item-fields > progress { grid-column: 1 / -1; }
.image-rights { display: grid; gap: .75rem; margin: 1.25rem 0; }
.image-rights label { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; }
.image-rights input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .2rem 0 0; accent-color: var(--green); }
.images-page textarea { padding: .65rem; border: 1px solid var(--line); border-radius: .45rem; font: inherit; color: var(--ink); resize: vertical; width: 100%; }
.image-library-toolbar { display: flex; margin: 1.5rem 0 .75rem; }
.image-library-toolbar .field { width: min(100%, 32rem); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.image-card { display: grid; gap: .65rem; align-content: start; padding: .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.image-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.image-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.image-card img, .image-card-placeholder { width: 100%; height: 10rem; object-fit: contain; background: var(--paper); border-radius: .4rem; }
.image-card-placeholder { display: grid; place-items: center; }
.image-card-name { overflow-wrap: anywhere; }
.image-empty { grid-column: 1 / -1; padding: 2rem 0; color: var(--muted); }
.image-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.image-edit-dialog { width: min(92vw, 42rem); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: .9rem; padding: 1.5rem; color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.image-edit-dialog::backdrop { background: rgb(23 34 29 / 45%); }
.image-edit-dialog form { display: grid; gap: 1rem; }
.image-edit-preview { width: 100%; height: 15rem; object-fit: contain; background: var(--paper); border-radius: .5rem; }
.image-edit-info { overflow-wrap: anywhere; }
.image-edit-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }
.image-edit-dialog a.button { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.image-edit-dialog a.button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 600px) {
  .image-upload-item { grid-template-columns: 1fr; }
  .image-upload-item-fields { grid-template-columns: 1fr; }
  .image-upload-panel { padding: .8rem; }
  .image-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgb(220 236 223 / 65%), transparent 28rem),
    var(--paper);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem 2rem;
  border-bottom: 1px solid var(--line);
  background: rgb(255 254 249 / 88%);
  backdrop-filter: blur(12px);
}

.brand, .file-controls, .run-controls, .pane-header, .toggle {
  display: flex;
  align-items: center;
}

.brand { gap: .8rem; }
.editor-brand { color: inherit; text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .7rem;
  color: white;
  background: var(--green);
  font: 700 .8rem/1 ui-monospace, monospace;
  letter-spacing: .05em;
  box-shadow: 0 5px 14px rgb(29 92 67 / 20%);
}

h1, h2, p { margin: 0; }
h1 { font-size: 1.05rem; letter-spacing: -.02em; }
.brand-accent { color: var(--green); }
.brand p { margin-top: .15rem; color: var(--muted); font-size: .76rem; }

.file-controls { gap: .55rem; flex-wrap: wrap; }

.language-switcher {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap;
}
.language-switcher select {
  width: auto;
  min-width: 3.5rem;
  padding: 0 .55rem;
  font-size: .85rem;
  font-weight: 700;
}
.login-card > .language-switcher { margin-top: 1.5rem; justify-content: flex-end; }

.field {
  display: grid;
  gap: .25rem;
}

.field[hidden] { display: none; }

.field span, .eyebrow {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

input, select, button { font: inherit; }

input, select {
  height: 2.35rem;
  padding: 0 .7rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  color: var(--ink);
  background: white;
}

.filename-field input { width: 10rem; }
.saved-field select { width: 11rem; }
.account-controls { display: flex; align-items: center; gap: 0.55rem; }
.account-controls a.button, .account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
}
.account-controls span { color: var(--muted); font-size: 0.88rem; }
.account-controls[hidden] { display: none; }
.hosted-library-controls { display: flex; gap: .55rem; }
.hosted-library-controls[hidden], .local-library-control[hidden] { display: none; }
.shared-viewer-controls { display: flex; }
.shared-viewer-controls[hidden] { display: none; }
.shared-viewer-controls .button { display: grid; place-items: center; text-decoration: none; }
.diagram-owner {
  padding: .45rem .65rem;
  border-radius: 999px;
  color: var(--green-dark);
  background: var(--mint);
  font-size: .76rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.diagram-owner:hover { text-decoration: underline; }
.diagram-owner[hidden] { display: none; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--paper);
}
.login-card {
  width: min(26rem, 100%);
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: 0 1.5rem 4rem rgb(28 38 32 / 12%);
}
.login-brand { margin-bottom: 1.5rem; }
.auth-brand { color: inherit; text-decoration: none; }
.login-card > h2 { margin-bottom: .65rem; font-size: 1.25rem; }
.login-explanation,
.login-footnote {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}
.login-explanation { margin-bottom: 1.35rem; }
.login-footnote { margin-top: 1rem; }
.login-form { display: grid; gap: 1rem; }
.login-form input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  font: inherit;
}
.auth-error {
  margin-top: -.45rem;
  color: #842b27;
  font-size: .78rem;
}
.login-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.login-actions .button { display: grid; place-items: center; text-decoration: none; }

.profile-brand { color: inherit; text-decoration: none; }
.profile-tools .button { display: grid; place-items: center; text-decoration: none; }
.profile-tools form { margin: 0; }

.welcome-account-actions form { margin: 0; }
.welcome-account-actions .button,
.welcome-actions .button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.welcome-main {
  width: min(76rem, 100%);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem) 5rem;
}

.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
}

.welcome-copy h2 {
  max-width: 14ch;
  margin: .55rem 0 1.2rem;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.welcome-intro {
  max-width: 39rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.welcome-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.7rem; }

.welcome-showcase {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cad4cb;
  border-radius: 1rem;
  background: #fffef9;
  box-shadow: 0 1.8rem 4.5rem rgb(23 34 29 / 12%);
}
.showcase-header, .showcase-caption, .showcase-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.2rem;
}
.showcase-header { flex-wrap: wrap; }
.showcase-header .eyebrow { margin: 0; color: var(--green); font-size: .65rem; }
.showcase-views { display: flex; gap: .2rem; }
.welcome-showcase button {
  display: grid;
  place-items: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: .3rem .55rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.welcome-showcase button:hover { background: #edf0ea; color: var(--ink); }
.welcome-showcase button[aria-pressed="true"] { background: var(--selected); color: var(--selected-ink); }
.welcome-showcase button[aria-pressed="true"]:hover { background: var(--selected-hover); }
.welcome-showcase button:disabled { color: var(--muted); opacity: .45; cursor: default; background: transparent; }
.welcome-showcase :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.welcome-showcase [hidden] { display: none; }
.showcase-media {
  position: relative;
  height: clamp(17rem, 29vw, 24rem);
  overflow: hidden;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(rgb(225 233 225 / 55%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(225 233 225 / 55%) 1px, transparent 1px), #f6f8f3;
  background-size: 24px 24px;
}
.showcase-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.5rem; }
.showcase-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.showcase-code-panel { display: flex; flex-direction: column; height: 100%; background: rgb(255 254 249 / 95%); }
.showcase-code-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
.showcase-code-toolbar a { color: var(--green-dark); font-size: .75rem; font-weight: 600; text-underline-offset: .2em; }
.showcase-code-toolbar button { background: var(--mint); color: var(--green-dark); }
.showcase-code-toolbar button:hover { background: var(--green); color: #fff; }
.showcase-code-toolbar button:disabled { background: var(--mint); color: var(--muted); }
.showcase-code-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .35rem 1rem; color: var(--muted); font-size: .7rem; }
.showcase-code-feedback:has([data-showcase-code-status]:empty):has([data-showcase-code-retry][hidden]) { display: none; }
.showcase-code-feedback button { color: var(--green-dark); text-decoration: underline; }
.showcase-code-content { position: relative; flex: 1; min-height: 0; }
.showcase-code {
  height: 100%;
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow: auto scroll;
  scrollbar-gutter: stable;
  scrollbar-color: #9cae9e #edf0ea;
  color: #203229;
  background: rgb(255 254 249 / 82%);
  tab-size: 4;
  font: 500 .78rem/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.showcase-code-more { position: absolute; right: 1.5rem; bottom: .5rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); color: var(--muted); box-shadow: 0 0 1rem .4rem var(--panel); font-size: .65rem; pointer-events: none; }
.showcase-model { position: absolute; inset: 0; }
.showcase-model canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.showcase-message { position: absolute; inset: 0; margin: 0; padding: 2rem; display: grid; place-content: center; background: #f6f8f3; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.showcase-caption { min-height: 5.3rem; }
.showcase-name { color: var(--green-dark); text-decoration: none; font-weight: 750; overflow-wrap: anywhere; }
.showcase-name:hover { text-decoration: underline; }
.showcase-name span { padding-left: .3rem; }
.showcase-caption p { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; }
.showcase-count { flex-shrink: 0; color: var(--muted); font: .65rem ui-monospace, monospace; }
.showcase-navigation { border-top: 1px solid var(--line); padding-block: .55rem; }
.showcase-navigation > button { flex-shrink: 0; }
.showcase-dots { flex: 1; min-width: 0; display: flex; justify-content: center; flex-wrap: nowrap; gap: .1rem; }
.showcase-dots button { flex-shrink: 0; min-width: 1.5rem; padding-inline: .25rem; }
.showcase-dots span { width: .35rem; height: .35rem; border-radius: 1rem; background: #c4cdc3; }
.showcase-dots [aria-current="true"] span { width: 1.15rem; background: var(--selected); }
.showcase-dots [aria-current="true"]:hover span { background: var(--selected-hover); }

.welcome-example {
  margin: 0;
  padding: clamp(1.3rem, 4vw, 2.4rem);
  overflow: auto;
  border: 1px solid #cad4cb;
  border-radius: 1rem;
  color: #203229;
  background:
    linear-gradient(rgb(238 240 235 / 75%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(238 240 235 / 75%) 1px, transparent 1px),
    #fffef9;
  background-size: 20px 20px;
  box-shadow: 0 1.8rem 4.5rem rgb(23 34 29 / 12%);
  font: 600 clamp(.78rem, 1.5vw, .95rem)/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.welcome-designs { margin-top: clamp(3rem, 6vw, 5rem); }
.welcome-design-folder + .welcome-design-folder { margin-top: 2.5rem; }
.welcome-design-folder > h3 { margin-bottom: 1rem; }
.welcome-design-card { display: flex; flex-direction: column; align-self: stretch; }
.welcome-design-card .design-card-preview { flex: none; height: 10rem; text-decoration: none; }
.welcome-design-card .design-card-body { display: flex; flex: 1; flex-direction: column; }
.welcome-design-card .design-card-body > .button { margin-top: auto; }
.welcome-design-card h4 { margin: 0; overflow-wrap: anywhere; font-size: .95rem; }

.welcome-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: clamp(4rem, 9vw, 8rem);
}

.welcome-features article {
  padding: 1.25rem;
  border-top: 2px solid var(--green);
  background: rgb(255 254 249 / 65%);
}

.welcome-features span { color: var(--green); font: 800 .72rem/1 ui-monospace, monospace; }
.welcome-features h3 { margin: .75rem 0 .45rem; font-size: 1rem; }
.welcome-features p { color: var(--muted); font-size: .82rem; line-height: 1.55; }

.pricing-heading, .pricing-heading .welcome-intro { max-width: none; }
.pricing-heading h2 {
  margin: .55rem 0 1rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}
.pricing-main { max-width: 52rem; }
.early-access-note { margin: 1rem 0; font-size: .9rem; color: var(--muted); }
.early-access-details { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.early-access-details p { color: var(--muted); line-height: 1.6; }

.account-main { max-width: 52rem; }
.account-card {
  margin-top: 2rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.account-card h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.account-card > p, .account-help { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.account-card > a.button { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; color: var(--ink); text-decoration: none; }
#username-form { display: grid; gap: .75rem; margin-top: 1.5rem; }
#username-form input { width: 100%; }
#username-form .button { justify-self: start; }
.account-help { font-size: .8rem; }
.username-status { min-height: 1.5rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.username-status[data-status="available"], .account-success { color: var(--green); }
.username-status[data-status="review"] { color: #805512; }
.username-status[data-status="invalid"], .username-status[data-status="unavailable"], .username-status[data-status="error"] { color: var(--red); }
.account-success { margin-top: 1.5rem; padding: .9rem 1rem; border-radius: .5rem; background: var(--mint); }
.account-details-form { display: grid; gap: .9rem; margin-top: 1.5rem; }
.account-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.account-detail-field input, .account-detail-field select { width: 100%; min-width: 0; }
.account-detail-field:has(#id_city) { grid-column: 1 / -1; }
.account-details-form .button { justify-self: start; }
.account-field-error { margin-top: .4rem; color: var(--red); font-size: .8rem; }
#region-status:empty { display: none; }
.account-email { overflow-wrap: anywhere; }
.account-email-pending { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; overflow-wrap: anywhere; }
.account-email-edit { margin-top: 1.5rem; }
.account-email-edit summary { cursor: pointer; color: var(--green); font-weight: 700; }
.account-email-edit input { width: 100%; min-width: 0; }
.account-plan-details { display: grid; gap: .8rem; margin: 1rem 0; }
.account-plan-details > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; }
.account-plan-details dt { font-weight: 700; }
.account-plan-details dd { margin: 0; overflow-wrap: anywhere; }
.account-plan-next { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.login-explanation { overflow-wrap: anywhere; }

/* Export delivery uses the account palette with its own compact layout. */
.export-main { width: min(100%, 40rem); margin: 0 auto; padding: clamp(2rem, 7vw, 5rem) 1rem 3rem; }
.export-card { padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); box-shadow: var(--shadow); }
.export-status-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; border-radius: 50%; color: var(--green); background: var(--mint); }
.export-status-icon svg { width: 1.8rem; height: 1.8rem; }
.export-status-error { color: var(--error-ink); background: var(--error-background); }
.export-card h1 { margin-bottom: .65rem; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.2; letter-spacing: -.04em; }
.export-message { color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.export-message-error { padding: 1rem; border: 1px solid var(--error-border); border-radius: .5rem; color: var(--error-ink); background: var(--error-background); }
.export-file { display: flex; align-items: center; gap: .85rem; min-width: 0; margin-top: 1.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); }
.export-file svg { flex: 0 0 auto; width: 1.65rem; height: 1.65rem; color: var(--green); }
.export-file p { min-width: 0; font-size: .95rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.75rem; }
.export-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.75rem; height: auto; padding: .65rem 1.25rem; color: var(--ink); font-size: .9rem; line-height: 1.4; text-decoration: none; white-space: normal; }
.export-actions .button.primary { color: white; }
.export-actions .button svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.export-editor-link { color: var(--green); font-size: .9rem; text-underline-offset: .2em; }
.export-page a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.export-expiry { margin-top: 1rem; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.export-expiry time { display: inline-block; }
.export-reference { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.6; }
.export-reference code { min-width: 0; font: inherit; overflow-wrap: anywhere; }

.profile-main {
  width: min(76rem, 100%);
  margin: 0 auto;
  padding: 2.2rem clamp(1rem, 4vw, 3rem) 4rem;
}

.profile-heading h2 {
  margin: .2rem 0 .35rem;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  letter-spacing: -.04em;
}

.profile-heading > p:last-child { color: var(--muted); }

.profile-filters {
  display: flex;
  align-items: end;
  gap: .75rem;
  margin: 1.6rem 0 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.profile-sort-field select { min-width: 11rem; }

.profile-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  align-items: start;
  gap: 1rem;
}

.profile-design-card .design-card-preview { height: 10rem; text-decoration: none; }
.profile-design-card .design-card-body { min-height: 11rem; }
.profile-design-card .design-card-body p { flex: 1; }
.profile-preview-link { color: var(--muted); }

.profile-empty {
  grid-column: 1 / -1;
  padding: 5rem 1rem;
  color: var(--muted);
  text-align: center;
}

.profile-empty h3 { margin: 0 0 .4rem; color: var(--ink); }
.profile-empty a { color: var(--green); }

.button {
  height: 2.35rem;
  padding: 0 .9rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 120ms ease, background 120ms ease;
  align-self: end;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: default; opacity: .55; transform: none; }
.print-actions .button[aria-disabled="true"],
.print-actions .button[aria-disabled="true"]:hover {
  color: var(--muted); background: #f2f3ee; border-color: var(--line);
  opacity: .55; cursor: help; transform: none;
}
.button.primary { color: white; background: var(--green); }
.button.primary:hover { background: var(--green-dark); }
.button.secondary { border-color: var(--line); background: white; }
.button.danger { color: var(--red); border-color: #d9aaa5; background: white; }
.button.danger:hover { background: #fff3f1; }
.button.help-button, .button.render-current, .button.render-current:hover,
.button.save-current, .button.save-current:hover {
  color: var(--green); border-color: #b7cbbd; background: var(--mint);
}

kbd {
  margin-left: .35rem;
  padding: .1rem .25rem;
  border-radius: .2rem;
  background: rgb(255 255 255 / 18%);
  font: 600 .7rem/1 ui-monospace, monospace;
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(22rem, .9fr) minmax(26rem, 1.1fr);
  gap: 1rem;
  min-height: 0;
  padding: 1rem 2rem;
}

.pane {
  min-height: 35rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.pane-header {
  flex-shrink: 0;
  justify-content: space-between;
  min-height: 4.7rem;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.pane-header h2 { margin-top: .22rem; font-size: 1rem; }
.editor-pane > .pane-header { flex-wrap: wrap; }
.editor-pane > .pane-header > :first-child { flex-shrink: 0; }
.run-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.run-controls > .button { flex-shrink: 0; }
#toggle-find { flex: 0 0 auto; white-space: nowrap; }
#toggle-find:focus-visible { outline: 2px solid var(--selected); outline-offset: 2px; }
.button.ai-help-toolbar-wand { display: grid; place-items: center; flex: 0 0 auto; width: 2.35rem; margin-left: auto; padding: 0; color: var(--green); }
.button.ai-help-toolbar-wand:hover, .button.ai-help-toolbar-wand[aria-expanded="true"] { background: var(--mint); border-color: #b7cbbd; }
.button.ai-help-toolbar-wand.has-error { color: var(--error-ink); background: #ffe6df; }
.button.ai-help-toolbar-wand:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.output-controls { display: flex; align-items: center; gap: .65rem; }
.output-menu { position: relative; }
.output-menu summary {
  display: flex;
  align-items: center;
  list-style: none;
  user-select: none;
}
.output-menu summary::-webkit-details-marker { display: none; }
.output-menu summary[aria-disabled="true"],
.output-menu summary[aria-disabled="true"]:hover {
  color: var(--muted);
  background: #f2f3ee;
  border-color: var(--line);
  opacity: .55;
  cursor: help;
  transform: none;
}
.output-menu summary:focus-visible { outline: 2px solid var(--selected); outline-offset: 2px; }
.output-menu summary::after { content: "▾"; margin-left: .5rem; font-size: .7rem; }
.output-menu[open] summary::after { transform: rotate(180deg); }
.output-menu-items {
  position: absolute;
  z-index: 5;
  top: calc(100% + .35rem);
  right: 0;
  width: 12rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: white;
  box-shadow: 0 12px 30px rgb(23 34 29 / 16%);
}
.output-menu-items button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .62rem .7rem;
  border: 0;
  border-radius: .35rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.output-menu-items button:hover:not(:disabled) { background: var(--mint); }
.output-menu-items button:disabled { color: #98a19b; cursor: not-allowed; }
.output-menu-items small { font-size: .62rem; }
.toggle { gap: .4rem; color: var(--muted); font-size: .78rem; }
.toggle input { width: 1rem; height: 1rem; accent-color: var(--green); }

.find-bar {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--line);
  background: #f3f2ec;
}

.find-bar[hidden] { display: none; }
.find-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.replace-row[hidden] { display: none; }
.find-field { flex: 1; min-width: 7rem; }
.find-field input { width: 100%; height: 2rem; }
.find-status {
  min-width: 4.5rem;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
  white-space: nowrap;
}

.find-status:empty { display: none; }

.find-action, .find-case {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: .38rem;
  color: var(--ink);
  background: white;
}

.find-action { padding: 0; cursor: pointer; }
.find-text-action { width: auto; padding: 0 .5rem; font-size: .72rem; white-space: nowrap; }
.find-action:hover, .find-case:hover { color: var(--green); background: var(--mint); }
.find-action:disabled { opacity: .4; cursor: default; }
.find-action:disabled:hover { color: var(--ink); background: white; }
.find-action:focus-visible, .find-case:has(input:focus-visible) {
  outline: 2px solid var(--selected);
  outline-offset: 1px;
}

.find-case { position: relative; cursor: pointer; font: 700 .7rem/1 ui-monospace, monospace; }
.find-case input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.source-editor {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fbfaf5;
}

.line-number-gutter {
  position: relative;
  min-width: 4.55rem;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #e1e3dd;
  color: #8a938d;
  background: #f3f2ec;
  user-select: none;
}

.line-numbers {
  margin: 0;
  padding: 1.25rem 0;
  text-align: right;
  font: 500 .86rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}

.line-number {
  display: block;
  padding: 0 .7rem 0 2rem;
}

/* Collapse the space reserved for the disabled wand column. */
.line-number-gutter:not(:has(.ai-help-gutter)) { min-width: 2.55rem; }
.line-number-gutter:not(:has(.ai-help-gutter)) .line-number { padding-left: .7rem; }

.ai-help-gutter { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2rem; cursor: pointer; }
.ai-help-wand { position: absolute; z-index: 2; left: .3rem; top: 1.25rem; width: 1.45rem; height: 1.42rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: .25rem; color: var(--green); background: var(--mint); cursor: pointer; }
.ai-help-wand:hover, .ai-help-wand[aria-expanded="true"] { color: white; background: var(--green); }
.ai-help-wand.has-error { color: var(--error-ink); background: #ffe6df; }
.ai-help-wand:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.ai-help-wand[hidden] { display: none; }
.ai-help-panel[open] { display: flex; flex-direction: column; }
.ai-help-panel .ai-help-header { flex: 0 0 auto; align-items: center; flex-direction: row; }
.ai-help-body { flex: 1 1 0; min-height: 0; overflow: auto; overflow-anchor: none; padding: 1rem; }
.ai-help-context { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .8rem; }
.ai-help-card { margin: .9rem 0; padding: .9rem; border: 1px solid var(--line); border-radius: .6rem; background: white; }
.ai-help-card h3 { margin: 0 0 .5rem; font-size: .9rem; }
.ai-help-card p { margin: .5rem 0; font-size: .83rem; line-height: 1.5; }
.ai-help-note { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.ai-help-error { border-color: #edc5b9; background: #fff5f1; }
.ai-help-code, .ai-help-card pre { margin: .65rem 0; padding: .65rem; max-height: 14rem; overflow: auto; border-radius: .35rem; background: #f2f3ee; font: .75rem/1.5 ui-monospace, monospace; white-space: pre; }
.ai-help-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ai-help-actions .button, .ai-help-card .button { padding: .5rem .65rem; font-size: .78rem; }
.ai-help-actions .button[aria-disabled="true"], .ai-help-actions .button[aria-disabled="true"]:hover,
#ai-help-form .button[aria-disabled="true"], #ai-help-form .button[aria-disabled="true"]:hover { color: var(--muted); background: #f2f3ee; border-color: var(--line); opacity: .55; cursor: help; transform: none; }
.ai-help-actions .button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ai-help-card details { font-size: .8rem; line-height: 1.5; }
.ai-help-card summary { color: var(--green); cursor: pointer; }
.ai-help-card details h2, .ai-help-card details h3 { margin-top: 1rem; }
.ai-help-card details table { display: block; overflow: auto; }
.ai-help-card details a { color: var(--green); }
.ai-help-prompts { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0; }
.ai-help-prompts button { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--green); background: var(--mint); font: inherit; font-size: .72rem; cursor: pointer; }
.ai-help-panel button:disabled { opacity: .5; cursor: default; }
#ai-help-form textarea { display: block; width: 100%; resize: vertical; min-height: 5rem; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; font: inherit; font-size: .83rem; margin-bottom: .6rem; }
.ai-help-answer { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .83rem; line-height: 1.6; }
.ai-help-conversation-header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.ai-help-conversation-header h3 { margin: 0; }
.ai-help-turn { display: grid; gap: .55rem; margin: .8rem 0; }
.ai-help-message { padding: .65rem .75rem; border-radius: .4rem; background: #f2f3ee; }
.ai-help-message.user { background: var(--mint); }
.ai-help-message strong { display: block; margin-bottom: .25rem; font-size: .75rem; }
#ai-help-form { margin-top: .8rem; }
.ai-help-builder-form { display: grid; gap: .6rem; margin-top: .9rem; }
.ai-help-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ai-help-builder-form label { display: grid; gap: .3rem; font-size: .78rem; }
.ai-help-builder-form input, .ai-help-builder-form select { width: 100%; min-width: 0; padding: .45rem; border: 1px solid var(--line); border-radius: .3rem; background: white; font: inherit; }
.ai-help-image-preview { max-width: 100%; max-height: 7rem; object-fit: contain; }
.ai-help-diff { display: grid; gap: .5rem; }
.ai-help-diff strong { font-size: .75rem; }
.ai-help-diff pre { margin: .3rem 0; }
#ai-help-stale { color: var(--error-ink); }

.line-number.error-line {
  color: white;
  background: var(--error-ink);
}

.source-input {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fbfaf5;
}

.command-completion {
  position: absolute;
  z-index: 4;
  left: 1.25rem;
  right: 1.25rem;
  max-width: 38rem;
  max-height: min(16rem, 70%);
  overflow: auto;
  border: 1px solid #b7c8bc;
  border-radius: .4rem;
  background: #fffef9;
  box-shadow: 0 .3rem 1rem #22312826;
  font-size: .8rem;
}

.command-resolution { padding: .5rem .65rem; color: #354c3c; }
.command-completion [role="option"] {
  display: block;
  width: 100%;
  padding: .5rem .65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #223128;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.command-completion [role="option"]:hover { background: #e6eee8; }
.command-completion [role="option"][aria-selected="true"] {
  background: var(--selected);
  color: var(--selected-ink);
}
.command-completion [role="option"][aria-selected="true"]:hover { background: var(--selected-hover); }
.command-completion [role="option"]:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }

#source {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  resize: none;
  padding: 1.25rem;
  border: 0;
  outline: none;
  color: #223128;
  background: transparent;
  tab-size: 4;
  font: 500 .86rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.source-editor:has(#source[readonly]),
.source-editor:has(#source[readonly]) .source-input {
  background: #e5e7eb;
}

.source-editor:has(#source[readonly]) .line-number-gutter {
  border-right-color: #cbd0d6;
  color: #68717d;
  background: #d8dce2;
}

#source[readonly] {
  color: #58616d;
}

.find-highlights {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.find-highlight-content {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 1.25rem;
  color: transparent;
  white-space: pre;
  tab-size: 4;
  font: 500 .86rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  will-change: transform;
}

.find-highlight-content mark {
  border-radius: .12rem;
  color: transparent;
  background: #f8dfa0;
}

.find-highlight-content mark.current { background: #f6a51c; }

.preview-area {
  flex: 1;
  min-height: 0;
  position: relative;
}

.preview {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 2rem;
  background-color: #fff;
  background-image:
    conic-gradient(#eef0eb 25%, transparent 0 50%, #eef0eb 0 75%, transparent 0);
  background-size: 32px 32px;
}

/* Keep the scroll limits and image padding clear of the fixed rulers. */
.preview-area:not(.rulers-hidden) .preview {
  top: 1.75rem;
  left: 2.75rem;
}

.preview-document {
  min-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
}
.preview { overflow-anchor: none; }

/* Keep scrolling in the pane under the pointer, including at its boundaries. */
#source, .preview, .ai-help-body, .ai-help-code, .ai-help-card pre,
.geometry-inspector, .error {
  overscroll-behavior: contain;
}
.preview-document:has(.geometry-edit-overlay) { touch-action: none; user-select: none; }

.preview-3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #eef0eb;
  touch-action: none;
}
.preview-3d canvas { display: block; width: 100%; height: 100%; }
.preview-3d-hint, .preview-3d-message {
  position: absolute;
  margin: 0;
  pointer-events: none;
  color: #475244;
  text-align: center;
}
.preview-3d-hint { bottom: 12px; left: 12px; right: 12px; font-size: .75rem; }
.preview-3d-message { top: 50%; left: 16px; right: 16px; transform: translateY(-50%); }
.mode-3d .ruler, .mode-3d .ruler-corner { display: none; }
.assembly-view #edit-geometry, .assembly-view #toggle-3d { display: none; }

.geometry-inspector {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
  flex-shrink: 0;
  max-height: min(260px, 40vh);
  overflow: auto;
  padding: 14px;
  border-top: 1px solid #cbd5e1;
  background: #fff;
  color: #263445;
  font-size: 13px;
}
.geometry-inspector[hidden] { display: none; }
.geometry-inspector > strong, .geometry-inspector > select, .geometry-inspector p { grid-column: 1 / -1; }
.geometry-inspector p { margin: 10px 0 0; line-height: 1.4; }
.geometry-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.geometry-history { display: flex; align-items: center; gap: 6px; }
.geometry-round { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.geometry-round select { width: 72px; padding: 4px; }
.geometry-field { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.geometry-field span { flex: 1; }
.geometry-field input { width: 72px; min-width: 0; padding: 5px; }
.geometry-field input[readonly] { background: #f1f5f9; color: #64748b; }
.geometry-edit-overlay { fill: none; }
.preview-document > svg:has(.geometry-edit-overlay) { overflow: visible; }
.geometry-segment { stroke: #2563eb; stroke-width: 5; vector-effect: non-scaling-stroke; cursor: pointer; }
.geometry-controls { stroke: #60a5fa; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.geometry-start { fill: #64748b; stroke: white; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.geometry-handle { fill: white; stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; touch-action: none; }
.geometry-handle:active { cursor: grabbing; }
.geometry-locked { fill: #e2e8f0; stroke: #64748b; cursor: default; }
@media print { .geometry-edit-overlay, .geometry-inspector { display: none !important; } }

.preview-document > svg {
  display: block;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 12rem;
  background: transparent;
}

.debug-marker {
  fill: #f6a51c;
  stroke: white;
  cursor: pointer;
  paint-order: stroke;
  filter: drop-shadow(0 1px 2px rgb(23 34 29 / 45%));
}

.debug-marker:hover,
.debug-marker:focus {
  fill: #d96b16;
  outline: none;
}

.debug-marker-label {
  fill: white;
  stroke: none;
  pointer-events: none;
  user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

.debug-tooltip {
  position: fixed;
  z-index: 20;
  display: grid;
  gap: .2rem;
  min-width: 10rem;
  padding: .65rem .75rem;
  border: 1px solid #d58b1c;
  border-radius: .5rem;
  color: var(--ink);
  background: rgb(255 254 249 / 98%);
  box-shadow: 0 8px 24px rgb(23 34 29 / 20%);
  pointer-events: none;
}

.debug-tooltip[hidden] { display: none; }
.debug-tooltip strong { font-size: .78rem; }
.debug-tooltip span { font: 700 .76rem/1.35 ui-monospace, monospace; }
.debug-tooltip small { color: var(--muted); font-size: .68rem; }

.ruler,
.ruler-corner {
  position: absolute;
  z-index: 3;
  color: #536159;
  background: rgb(250 250 246 / 96%);
  box-shadow: 0 1px 3px rgb(23 34 29 / 10%);
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.horizontal-ruler { top: 0; right: 0; left: 2.75rem; width: calc(100% - 2.75rem); height: 1.75rem; }
.vertical-ruler { top: 1.75rem; bottom: 0; left: 0; width: 2.75rem; height: calc(100% - 1.75rem); }
.ruler-corner {
  top: 0;
  left: 0;
  display: grid;
  width: 2.75rem;
  height: 1.75rem;
  place-items: center;
  border-right: 1px solid #cdd3cd;
  border-bottom: 1px solid #cdd3cd;
  font: 700 .62rem/1 ui-monospace, monospace;
}
.preview-area.rulers-hidden .ruler,
.preview-area.rulers-hidden .ruler-corner { display: none; }

.zoom-controls {
  position: absolute;
  z-index: 4;
  top: .8rem;
  right: .8rem;
  display: flex;
  overflow: hidden;
  border: 1px solid #cad1ca;
  border-radius: .5rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 4px 14px rgb(23 34 29 / 12%);
  backdrop-filter: blur(8px);
}
.preview-area:not(.rulers-hidden) .zoom-controls { top: 2.5rem; }
.preview-area.mode-3d .zoom-controls { top: .8rem; }

.zoom-controls button {
  min-width: 2.2rem;
  height: 2.1rem;
  padding: 0 .55rem;
  border: 0;
  border-right: 1px solid #dce0db;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover:not(:disabled) { color: var(--green); background: var(--mint); }
.zoom-controls button:disabled { cursor: default; color: #a4aca6; }
#zoom-reset { min-width: 3.8rem; font-size: .72rem; }
.zoom-controls button[aria-pressed] { font-size: .68rem; }
#toggle-rulers { min-width: 4.2rem; }

/* Blue consistently identifies enabled modes in the source and display panes. */
:is(#toggle-find[aria-expanded="true"], .find-action[aria-expanded="true"],
    .system-catalog-toggle[aria-pressed="true"],
    .find-case:has(input:checked:not(:disabled)),
    .zoom-controls button[aria-pressed="true"]):not(:disabled) {
  color: var(--selected-ink);
  border-color: var(--selected);
  background: var(--selected);
}
:is(#toggle-find[aria-expanded="true"], .find-action[aria-expanded="true"],
    .system-catalog-toggle[aria-pressed="true"],
    .find-case:has(input:checked:not(:disabled)),
    .zoom-controls button[aria-pressed="true"]):not(:disabled):hover {
  border-color: var(--selected-hover);
  background: var(--selected-hover);
}
.zoom-controls button:focus-visible {
  outline: 2px solid var(--selected);
  outline-offset: -3px;
}
.zoom-controls button[aria-pressed="true"]:focus-visible:not(:disabled) {
  outline-color: var(--selected-ink);
}

.status {
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}

.status.ready { color: var(--green); background: var(--mint); }
.status.working, .status.stale { color: #6e5414; background: #f4e9c8; }
.status.failed { color: #8e2925; background: #f5dcd9; }

.error.warnings {
  color: #735016;
  background: #fff4d6;
  border-top-color: #e4c984;
}

.error {
  max-height: 13rem;
  margin: 0;
  padding: 1rem 1.25rem;
  overflow: auto;
  border-top: 1px solid var(--error-border);
  color: var(--error-ink);
  background: var(--error-background);
  white-space: pre-wrap;
  font: .76rem/1.5 ui-monospace, monospace;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1rem;
  padding: .5rem 2rem .8rem;
  color: var(--muted);
  font-size: .7rem;
}

.footer-design-status { display: flex; flex-wrap: wrap; gap: .35rem .75rem; min-width: 0; }
.welcome-footer { align-items: baseline; justify-content: space-between; padding: 1.5rem; font-size: .9rem; }
.welcome-footer-contact { min-width: 0; overflow-wrap: anywhere; }
.welcome-footer-credit { margin-inline-start: auto; white-space: nowrap; text-decoration: none; }
.welcome-footer a { color: var(--green); text-underline-offset: .2em; }
.welcome-footer a:hover { color: var(--green-dark); }
.welcome-footer a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
#design-context { color: #000; font-weight: 400; overflow-wrap: anywhere; }
#design-context .design-context-name { color: #000; font-weight: 700; }

#line-limit-status { flex-basis: 100%; padding-top: .35rem; color: #842b27; }
.run-controls .toggle.disabled { opacity: .55; cursor: not-allowed; }
.run-controls .toggle[hidden] { display: none; }
.run-controls .button:disabled { color: #737d76; background: #e0e5df; border-color: #e0e5df; }

#help-dialog,
.large-dialog {
  width: min(62rem, calc(100vw - 2rem));
  height: min(52rem, calc(100vh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .9rem;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 24px 80px rgb(16 27 21 / 25%);
}

#help-dialog::backdrop,
.large-dialog::backdrop {
  background: rgb(17 30 23 / 48%);
  backdrop-filter: blur(3px);
}

.manual-header,
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: rgb(255 254 249 / 95%);
}

.manual-header h2,
.dialog-header h2 { margin: .2rem 0 0; font-size: 1.05rem; }
.dialog-header-actions { display: flex; align-items: center; gap: .55rem; }
#load-dialog .dialog-header, #load-dialog .dialog-header-actions { flex-wrap: wrap; }
.image-edit-header { flex-wrap: wrap; gap: 1rem; padding-inline: 0; }
.image-edit-header .dialog-header-actions { flex-wrap: wrap; margin-left: auto; }

.library-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  height: calc(100% - 4.8rem);
  min-height: 0;
}

.catalog-pane {
  min-width: 0;
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #f7f7f2;
}

.catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}

.catalog-heading h3 { margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.catalog-section-heading { margin-top: 1.5rem; }
.catalog-list { display: grid; gap: .2rem; }

.catalog-item {
  width: 100%;
  padding: .58rem .6rem;
  border: 0;
  border-radius: .4rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.catalog-item:hover { background: #e9ede7; }
.catalog-item.selected { color: var(--green-dark); background: var(--mint); font-weight: 750; }
.catalog-item small { display: block; margin-top: .12rem; color: var(--muted); font-size: .66rem; font-weight: 500; }
.catalog-actions { display: flex; gap: .7rem; margin-top: .65rem; padding: 0 .35rem; }

.history-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  height: calc(100% - 4.8rem);
  min-height: 0;
}

.revision-pane {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 1rem;
  border-right: 1px solid var(--line);
  background: #f7f7f2;
}

.revision-list { display: grid; gap: .3rem; overflow: auto; }

.revision-item {
  width: 100%;
  padding: .65rem;
  border: 0;
  border-radius: .45rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.revision-item:hover { background: #e9ede7; }
.revision-item.selected { color: var(--green-dark); background: var(--mint); }
.revision-item strong { display: block; font-size: .78rem; }
.revision-item small { display: block; margin-top: .2rem; color: var(--muted); font-size: .65rem; line-height: 1.35; }

.revision-detail { display: flex; min-width: 0; min-height: 0; flex-direction: column; }

.revision-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.revision-detail-header h3 { margin: 0; font-size: 1rem; }
.revision-meta, .revision-description { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; }
.revision-description { color: var(--ink); }
.revision-navigation { display: flex; flex: 0 0 auto; gap: .45rem; }

.revision-content {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(14rem, .9fr) minmax(16rem, 1.1fr);
  gap: 1rem;
  min-height: 0;
  padding: 1rem;
}

.revision-preview-panel,
.revision-source-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: .45rem; }

.history-preview {
  display: grid;
  flex: 1;
  min-height: 14rem;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .6rem;
  color: var(--muted);
  background:
    linear-gradient(#eef0eb 1px, transparent 1px),
    linear-gradient(90deg, #eef0eb 1px, transparent 1px),
    white;
  background-size: 20px 20px;
  font-size: .78rem;
}

.history-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }

.history-source {
  flex: 1;
  min-height: 14rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: #f2f3ee;
  white-space: pre;
  font: .74rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.text-button {
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 750;
}

.text-button:hover:not(:disabled) { text-decoration: underline; }
.text-button:disabled { color: #9aa29c; cursor: default; }
.text-button.danger { color: var(--red); }
.align-start { justify-self: start; }

.design-library {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.library-toolbar {
  display: flex;
  align-items: end;
  gap: .8rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.search-field { flex: 1; }
.search-field input { width: 100%; }
.compact-field select { max-width: 13rem; }
.compact-field[hidden] { display: none; }

.design-grid {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: .85rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.design-grid .design-card {
  display: grid;
  grid-template-rows: 8.5rem max-content;
  align-self: start;
  height: max-content;
}

.design-grid .design-card-preview { height: 100%; }

.design-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: white;
  box-shadow: 0 5px 16px rgb(23 34 29 / 6%);
}

.design-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 8.5rem;
  min-width: 0;
  min-height: 0;
  padding: .65rem;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background:
    linear-gradient(#eef0eb 1px, transparent 1px),
    linear-gradient(90deg, #eef0eb 1px, transparent 1px),
    white;
  background-size: 16px 16px;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  text-decoration: none;
}

.design-card-preview:hover { filter: brightness(.98); }
.design-card-preview:focus-visible { outline: 3px solid #7aa98d; outline-offset: -3px; }
.deleted-design .design-card-preview { cursor: default; }
.deleted-design .design-card-preview:hover { filter: none; }

.design-card-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
}

.design-card-body { display: grid; gap: .45rem; padding: .72rem; }
.design-card h3 { margin: 0; overflow-wrap: anywhere; font-size: .9rem; }
.design-card p { min-height: 2.5em; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.design-card-meta { color: var(--muted); font-size: .64rem; }
.design-card .button {
  display: grid;
  width: 100%;
  height: 2rem;
  margin-top: .15rem;
  place-items: center;
  font-size: .72rem;
  text-decoration: none;
}
.design-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.design-card-actions .button { min-width: 0; padding: 0 .45rem; font-size: .64rem; }
.empty-library { grid-column: 1 / -1; padding: 4rem 1rem; color: var(--muted); text-align: center; }

.dialog-status {
  min-height: 1.3rem;
  margin: auto 1rem .7rem;
  color: var(--muted);
  font-size: .72rem;
}

.dialog-status.failed { color: var(--red); }

.design-library > .dialog-status {
  flex: 0 0 auto;
  margin-top: 0;
}

.save-layout {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr);
  grid-template-rows: 1fr auto auto;
  gap: 1rem 1.5rem;
  height: calc(100% - 4.8rem);
  padding: 1.4rem;
}

.save-fields { display: grid; align-content: start; gap: 1rem; }
.publication-dialog { width: min(36rem, calc(100vw - 2rem)); height: auto; max-height: calc(100vh - 2rem); overflow-y: auto; }
.publication-form { display: grid; gap: 1rem; padding: 1.2rem; }
.publication-form > p { margin: 0; }
.publication-form .field input, .publication-form select { width: 100%; }
.publication-feature { display: flex; align-items: start; gap: .5rem; }
.publication-feature input, #design-hero, #design-example { width: auto; accent-color: var(--selected); }
.save-dialog .dialog-actions { flex-wrap: wrap; }
.save-fields input, .save-fields select, .save-fields textarea { width: 100%; }
.save-fields textarea {
  padding: .7rem;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: .45rem;
  color: var(--ink);
  background: white;
  font: inherit;
}

.field-label {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.save-preview-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: .5rem; }
.save-preview {
  display: grid;
  flex: 1;
  min-height: 14rem;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: .6rem;
  color: var(--muted);
  background:
    linear-gradient(#eef0eb 1px, transparent 1px),
    linear-gradient(90deg, #eef0eb 1px, transparent 1px),
    white;
  background-size: 20px 20px;
  font-size: .78rem;
}

.save-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
}
.save-status { grid-column: 1 / -1; margin: 0; }
.dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .65rem; }
.delete-design-button { margin-right: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.print-dialog { width: min(76rem, calc(100vw - 2rem)); }
.print-login-dialog { width: min(30rem, calc(100vw - 2rem)); height: auto; }
.print-login-content { padding: 1.2rem; }
.print-login-content p { margin: 0 0 1.2rem; }
.printer-3d-preview { position: relative; flex: 1; min-height: 18rem; }
.printer-3d-model-info { display: grid; gap: .35rem; }
.printer-3d-model-info p { margin: 0 0 .5rem; font-size: .85rem; }
.assembly-beveling-option { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.assembly-beveling-option input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; padding: 0; accent-color: var(--selected); }
.assembly-beveling-option input:enabled:hover { accent-color: var(--selected-hover); }
.assembly-beveling-option input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.assembly-beveling-option:has(input:disabled) { color: var(--muted); opacity: .65; }
.printer-3d-loading {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: rgb(75 81 77 / 65%);
  color: white;
  font-weight: 750;
  cursor: wait;
}
.printer-3d-loading[hidden] { display: none; }
#printer-3d-loading-message { max-width: min(42rem, calc(100vw - 3rem)); text-align: center; overflow-wrap: anywhere; }
#printer-3d-summary { overflow-wrap: anywhere; }
.printer-3d-spinner {
  width: 3rem;
  height: 3rem;
  border: .3rem solid rgb(255 255 255 / 35%);
  border-top-color: white;
  border-radius: 50%;
  animation: printer-3d-spin .8s linear infinite;
}
@keyframes printer-3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .printer-3d-spinner { animation: none; }
}
.print-layout {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 0;
  height: calc(100% - 4.8rem);
  min-height: 0;
}
.print-settings-pane {
  display: grid;
  align-content: start;
  gap: .9rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #f7f7f2;
}
.print-settings-pane input,
.print-settings-pane select { width: 100%; }
.assembly-print-settings { display: grid; gap: .9rem; }
.assembly-print-settings[hidden] { display: none; }
.print-settings-pane [hidden] { display: none !important; }
.print-options input[type="checkbox"] { accent-color: var(--selected); }
.print-options input[type="checkbox"]:hover { accent-color: var(--selected-hover); }
.print-setup-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem; }
.print-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.print-dimension-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr auto; align-items: end; gap: .5rem; }
.print-dimension-grid .button { padding-inline: .65rem; }
.print-options {
  display: grid;
  gap: .55rem;
  margin: .15rem 0 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: white;
}
.print-options legend { padding: 0 .3rem; color: var(--muted); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.print-options label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: 1.3; }
.print-options input { width: auto; height: auto; }
.print-mode-note { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.print-preview-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.print-preview-header { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.print-preview-header p { margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.print-page-layout {
  flex: 1;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  background:
    linear-gradient(#e9ece7 1px, transparent 1px),
    linear-gradient(90deg, #e9ece7 1px, transparent 1px),
    #f3f4f0;
  background-size: 20px 20px;
}
.print-page-map {
  display: grid;
  align-items: start;
  width: max-content;
  min-width: 100%;
  gap: .55rem;
}
.print-page-thumbnail {
  position: relative;
  width: clamp(7rem, 13vw, 11rem);
  overflow: hidden;
  border: 1px solid #cdd2cb;
  background: white;
  box-shadow: 0 4px 12px rgb(23 34 29 / 10%);
}
.print-page-thumbnail > svg { display: block; width: 100%; height: 100%; }
.print-page-number {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .25rem;
  border-radius: 999px;
  color: white;
  background: rgb(23 34 29 / 80%);
  font-size: .62rem;
  font-weight: 800;
}
.print-plan-thumbnail { margin-bottom: .8rem; border-color: #8daa98; }
.print-assembly-thumbnail { width: min(100%, 28rem); margin-bottom: 1rem; }
.print-assembly-thumbnail .print-page-number { display: none; }
.print-status { grid-column: 1 / -1; margin: .65rem 1rem 0; }
.print-actions { padding: 0 1rem 1rem; }
.print-actions #delete-print-setup { margin-right: auto; }
.print-output { display: none; }
.print-sheet { position: relative; overflow: hidden; break-after: page; page-break-after: always; background: white; }
.print-sheet:last-child { break-after: auto; page-break-after: auto; }
.print-sheet > svg { display: block; width: 100%; height: 100%; }

#help-dialog[open] { display: flex; flex-direction: column; }
#help-dialog .manual-header { flex-shrink: 0; gap: 1rem; }
#help-dialog .manual-header > div:first-child { flex: 1; min-width: 0; }
#close-help { flex-shrink: 0; align-self: center; }
.help-search {
  display: flex;
  align-items: center;
  flex: 0 1 24rem;
  min-width: 0;
  height: 2.35rem;
  gap: .45rem;
  padding: 0 .5rem 0 .7rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: white;
}
.help-search:focus-within {
  border-color: #739783;
  box-shadow: 0 0 0 3px rgb(29 92 67 / 10%);
}
.help-search-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted); }
.help-search-field { flex: 1; min-width: 0; height: 100%; }
#help-query {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: .8rem;
}
#help-query:focus { outline: none; box-shadow: none; }
#help-query::placeholder { color: var(--muted); opacity: 1; }
.help-search-results { display: flex; align-items: center; flex-shrink: 0; gap: .2rem; }
.help-search:not(.has-query) .help-search-results { display: none; }
.help-search .find-status { min-width: 0; padding: 0 .35rem; font-size: .68rem; }
.help-search .find-action { width: 1.65rem; height: 1.65rem; border: 0; background: transparent; }
.help-search .find-action svg { width: .9rem; height: .9rem; }
.help-search .find-action:hover:not(:disabled) { background: var(--mint); }
@media (max-width: 760px) {
  #help-dialog .manual-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
  .help-search { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  #close-help { grid-row: 1; grid-column: 2; }
}
.manual .help-match { color: inherit; background: #ffe9a6; border-radius: .15rem; }
.manual .help-match.current { background: #f6a51c; outline: 2px solid #9a6200; }

.manual {
  flex: 1;
  min-height: 0;
  padding: 1.5rem clamp(1.2rem, 4vw, 4rem) 4rem;
  overflow: auto;
  line-height: 1.65;
}

.manual h1, .manual h2, .manual h3 {
  margin: 2rem 0 .7rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.manual h1:first-child { margin-top: 0; }
.manual h1 { padding-bottom: .6rem; border-bottom: 1px solid var(--line); font-size: 1.8rem; }
.manual h2 { font-size: 1.3rem; }
.manual h3 { font-size: 1.05rem; }
.manual-index { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.manual-index h2 { margin: 0 0 .8rem; font-size: 1rem; }
.manual .manual-index ul { margin: 0; padding: 0; list-style: none; }
.manual-index .toc > ul { columns: 2; column-gap: 2rem; }
.manual-index .toc > ul > li { break-inside: avoid; padding: .25rem 0; }
.manual-index a { display: inline-block; font-size: .82rem; font-weight: 600; text-decoration: none; }
.manual-index a:hover { text-decoration: underline; }
.manual-index a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: .1rem; }
.manual .manual-index li ul { margin: .25rem 0 .4rem; padding-left: .8rem; border-left: 1px solid var(--line); }
.manual-index li li { padding: .15rem 0; }
.manual-index li li a { font-size: .75rem; font-weight: 400; color: var(--muted); }
@media (max-width: 560px) {
  .manual-index .toc > ul { columns: 1; }
}
.manual p, .manual ul, .manual ol { margin: .7rem 0; }
.manual a { color: var(--green); }
.manual hr { margin: 2.2rem 0; border: 0; border-top: 1px solid var(--line); }

.manual pre {
  padding: 1rem;
  overflow: auto;
  border: 1px solid #d9ddd6;
  border-radius: .55rem;
  background: #f2f3ee;
}

.manual code {
  padding: .08rem .25rem;
  border-radius: .2rem;
  background: #edf0ea;
  font: .86em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.manual pre code { padding: 0; background: transparent; }
.manual blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid var(--green); color: var(--muted); }
.manual table { width: 100%; border-collapse: collapse; }
.manual th, .manual td { padding: .5rem; border: 1px solid var(--line); text-align: left; }
.manual-loading { color: var(--muted); }

/* Desktop editors fill the window; smaller screens keep the stacked page. */
@media screen and (min-width: 901px) {
  body.editor-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .editor-page > .topbar, .editor-page > footer,
  .editor-page > .system-catalog-banner { flex-shrink: 0; }
  .editor-page > .workspace { grid-template-rows: minmax(0, 1fr); min-width: 0; }
  .editor-page .workspace > .pane { min-width: 0; min-height: 0; }
}

@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .file-controls { width: 100%; flex-wrap: wrap; }
  .workspace { grid-template-columns: 1fr; }
  .pane { min-height: 30rem; }
  .welcome-hero { grid-template-columns: 1fr; }
  .revision-content { grid-template-columns: 1fr; overflow: auto; }
  .history-preview, .history-source { min-height: 12rem; }
  .print-layout { grid-template-columns: 18rem minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .account-details-grid { grid-template-columns: 1fr; }
  .topbar, .workspace { padding-left: .8rem; padding-right: .8rem; }
  .file-controls { align-items: end; }
  .filename-field, .saved-field { flex: 1 1 9rem; }
  .filename-field input, .saved-field select { width: 100%; }
  .pane-header { align-items: flex-start; flex-direction: column; }
  .run-controls { width: 100%; justify-content: space-between; }
  .find-field { flex-basis: calc(100% - 5rem); }
  footer { padding-inline: .8rem; }
  .profile-filters { align-items: stretch; flex-direction: column; }
  .profile-sort-field select { width: 100%; }
  .profile-filters .button { align-self: stretch; }
  .welcome-main { padding-top: 2.5rem; }
  .welcome-features { grid-template-columns: 1fr; }
  .library-layout { grid-template-columns: 8.5rem 1fr; }
  .catalog-pane { padding: .7rem; }
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .compact-field select { max-width: none; width: 100%; }
  .design-grid { grid-template-columns: 1fr; }
  .save-layout { grid-template-columns: 1fr; overflow: auto; }
  .history-layout { grid-template-columns: 9rem 1fr; }
  .revision-detail-header { flex-direction: column; }
  .save-preview-panel { min-height: 17rem; }
  .save-status, .dialog-actions { grid-column: 1; }
  .print-layout { display: flex; flex-direction: column; overflow: auto; }
  .print-settings-pane { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .print-preview-pane { min-height: 24rem; }
  .print-status, .print-actions { flex: 0 0 auto; }
}

@media print {
  @page { margin: 0; }

  body {
    display: block;
    min-height: auto;
    background: white;
  }

  body > *:not(.print-output):not(#print-page-style) { display: none !important; }
  .print-output { display: block !important; }

  .topbar,
  .editor-pane,
  .preview-pane > .pane-header,
  .zoom-controls,
  .ruler,
  .ruler-corner,
  .error,
  footer {
    display: none !important;
  }

  .workspace,
  .preview-pane,
  .preview-area,
  .preview,
  .preview-document {
    display: block;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: white;
    box-shadow: none;
  }

  .preview { position: static; }
  .preview-document > svg {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    max-width: none;
    max-height: none;
    filter: none;
  }

  .debug-markers, .debug-outlines { display: none; }
}

.like-button[aria-pressed="true"] { color: #b42350; }

.system-catalog-banner { margin: 0; padding: 0.65rem 1.5rem; background: #fff1cc; color: #513e11; border-bottom: 1px solid #e3cf91; }

.component-control { min-width: 0; max-width: 100%; }
.component-control select { width: 100%; max-width: 12rem; }
.component-control[hidden], .component-selection[hidden] { display: none; }
.component-selection { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; }
.component-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .85rem; margin-top: .25rem; }
.component-options label { display: flex; align-items: center; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.component-options label > span { min-width: 0; }
.component-options input[type="checkbox"] { flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0; accent-color: var(--selected); }
.component-options input[type="checkbox"]:enabled:hover { accent-color: var(--selected-hover); }
.print-component-heading { margin: 1rem 0 .5rem; }

/* Homepage curation controls share selected and unavailable states. */
.design-placement[aria-pressed="true"] { background: var(--selected); color: var(--selected-ink); border-color: var(--selected); }
.design-placement[aria-pressed="true"]:hover { background: var(--selected-hover); border-color: var(--selected-hover); }
.design-placement[aria-disabled="true"], .design-placement[aria-disabled="true"]:hover { background: #f2f3ee; border-color: var(--line); color: var(--muted); opacity: .55; cursor: help; }
.design-placement:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.welcome-examples-intro { color: var(--muted); line-height: 1.6; margin-bottom: 2rem; }
.welcome-example-explore { color: var(--green-dark); font-size: .8rem; text-underline-offset: .2em; }