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

* { 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-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-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 .design-card-preview { height: 10rem; text-decoration: none; }
.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 { max-width: 42rem; }
.pricing-heading h2 {
  margin: .55rem 0 1rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}
.pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.pricing-card-featured { border: 2px solid var(--pricing-accent, var(--green)); background: var(--pricing-tint, #f3f9f1); }
.pricing-badge {
  position: absolute;
  top: 0;
  left: 1.5rem;
  padding: .4rem .75rem;
  transform: translateY(-50%);
  border-radius: 999px;
  color: var(--pricing-accent-foreground, white);
  background: var(--pricing-accent, var(--green));
  font-size: .72rem;
  font-weight: 700;
}
.pricing-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.pricing-description, .pricing-note { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.pricing-details { flex: 1; margin: 2rem 0; }
.pricing-price { margin-bottom: .7rem; font-size: 3rem; font-weight: 750; letter-spacing: -.05em; }
.pricing-price span { color: var(--muted); font-size: .95rem; font-weight: 400; letter-spacing: 0; }
.pricing-contact { font-size: 2.2rem; }
.pricing-card .button { display: grid; place-items: center; align-self: stretch; text-decoration: none; }
.pricing-card .button:disabled {
  color: #737373;
  background: #e5e5e5;
  border-color: #d4d4d4;
  opacity: 1;
}
.pricing-contact-label { color: var(--green); font-size: .88rem; font-weight: 700; }

.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; }

.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;
  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; }
.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 { 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 {
  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; }
.run-controls { gap: .75rem; }
.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::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;
  align-items: center;
  gap: .4rem;
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--line);
  background: #f3f2ec;
}

.find-bar[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-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-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:focus-within {
  outline: 2px solid var(--green);
  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; }
.find-case:has(input:checked) { color: white; border-color: var(--green); background: var(--green); }

.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 {
  min-width: 3.15rem;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #e1e3dd;
  color: #8a938d;
  background: #f3f2ec;
  user-select: none;
}

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

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

#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;
}

.preview-document {
  min-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
}
.preview { overflow-anchor: none; }
.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; }
#toggle-3d[aria-pressed="true"] { background: #dbe8d3; border-color: #68835c; }

.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; }
#edit-geometry[aria-pressed="true"] { background: #dbeafe; color: #1d4ed8; }
@media print { .geometry-edit-overlay, .geometry-inspector { display: none !important; } }

.preview-document svg {
  display: block;
  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; }
#edit-geometry, #toggle-3d { font-size: .68rem; }
#toggle-rulers { min-width: 4.2rem; font-size: .68rem; }
#toggle-rulers[aria-pressed="true"] { color: var(--green-dark); background: var(--mint); }

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

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

.error {
  max-height: 13rem;
  margin: 0;
  padding: 1rem 1.25rem;
  overflow: auto;
  border-top: 1px solid #e7c3c0;
  color: #842b27;
  background: #fff1ef;
  white-space: pre-wrap;
  font: .76rem/1.5 ui-monospace, monospace;
}

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

#line-limit-status { flex-basis: 100%; padding-top: .35rem; color: #842b27; }
.run-controls .toggle.disabled { opacity: .55; cursor: not-allowed; }
.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; }

.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; }
.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)); }
.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; }
.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-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%; }
.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-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); }

@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; }
  .pricing-plans { grid-template-columns: 1fr; gap: 1.75rem; }
  .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-bar { flex-wrap: wrap; }
  .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 { 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; }