:root {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef0f9;
  background: #0a101d;
  font-synthesis: none;
  color-scheme: dark;
  --surface: #121b2b;
  --surface-raised: #182339;
  --line: #2b3851;
  --line-soft: #243149;
  --muted: #929fb7;
  --white: #f3f4fb;
  --pink: #e99ade;
  --gold: #f9d36c;
  --mint: #74d7b1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .52; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.ambient { position: fixed; pointer-events: none; z-index: -1; filter: blur(6px); }
.ambient-one {
  width: 660px; height: 660px; top: -300px; left: -340px; border-radius: 50%;
  background: radial-gradient(circle, #20245783, transparent 68%);
}
.ambient-two {
  width: 900px; height: 900px; top: 410px; right: -680px; border-radius: 50%;
  background: radial-gradient(circle, #33204b55, transparent 70%);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding: 20px max(32px, calc((100vw - 1548px) / 2));
  border-bottom: 1px solid #27344a;
  background: #0c1421cd;
}
.brand { display: inline-flex; gap: 13px; align-items: center; flex-shrink: 0; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ed9cda, #b35aff 70%);
  box-shadow: 0 4px 22px #bc58c433;
}
.brand-mark::before {
  content: ""; position: absolute; inset: 7px 10px 7px 8px;
  border: 2px solid #311942; border-radius: 6px; transform: skewY(-8deg);
}
.brand-mark span:first-child { position: absolute; top: 16px; left: 17px; width: 9px; height: 3px; background: #311942; transform: rotate(45deg); }
.brand-mark span:last-child { position: absolute; bottom: 9px; right: 8px; width: 5px; height: 5px; background: #fef5ff; border-radius: 50%; }
.brand-name {
  display: flex; align-items: baseline; gap: 5px;
  font-family: "Space Grotesk", sans-serif; font-size: 18px; letter-spacing: -.9px;
  font-weight: 500; white-space: nowrap; position: relative; padding-bottom: 13px;
}
.brand-name strong { color: #f5adff; font-weight: 700; }
.brand-name small {
  position: absolute; bottom: -2px; left: 0;
  letter-spacing: 2px; font: 700 8px/1.5 "Space Grotesk", sans-serif; color: #8290aa;
}
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.version {
  display: inline-flex; gap: 8px; align-items: center; color: #b6bfd2;
  font: 600 10px/1.3 "Space Grotesk", sans-serif; letter-spacing: 1.2px; white-space: nowrap;
}
.version-divider { color: #45526a; }
.status-dot, .pulse, .storage-light {
  display: inline-block; flex-shrink: 0; background: #7ee7b6; border-radius: 100%;
}
.status-dot { width: 6px; height: 6px; box-shadow: 0 0 12px #7ee7b68a; }
.header-link {
  color: #cdd4e1; font-size: 13px; font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
  transition: color .18s ease;
}
.header-link:hover { color: white; }
.header-link span { color: #aeb8ca; font-size: 15px; }
.download-link {
  display: inline-flex; justify-content: center; align-items: center; gap: 9px;
  padding: 12px 17px; border-radius: 8px; color: #201829;
  font-size: 12px; font-weight: 800; background: #f3b9ec;
  transition: filter .18s ease, transform .18s ease;
  white-space: nowrap;
}
.download-link:hover { transform: translateY(-1px); filter: brightness(1.1); }
.download-link svg { height: 16px; width: 16px; }

.page-shell {
  max-width: 1580px; margin: 0 auto;
  padding: 41px 36px 28px;
}
.intro {
  display: flex; justify-content: space-between; align-items: end;
  gap: 48px; margin-bottom: 40px;
}
.eyebrow, .overline, .fact > span, .section-count, .hint-pill,
.screen-name, .keyboard-tip, .measurement > span, .asset-tag,
.sub-number, .section-note, .derived-coordinates > div > span,
.geometry-caption, .field small, .storage-note p, .page-footnote {
  font-family: "Space Grotesk", sans-serif;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
  color: #aab7ce; letter-spacing: 1.6px; font-size: 10px; font-weight: 700;
}
.eyebrow-line { width: 24px; height: 2px; background: #f59dd8; }
.eyebrow-bullet { width: 3px; height: 3px; border-radius: 100%; background: #67768f; margin-left: 5px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; }
h1 { font-size: clamp(40px, 4.2vw, 63px); line-height: 1.03; letter-spacing: -3.7px; font-weight: 700; margin-bottom: 15px; }
h1 em { font-style: normal; color: #f09edb; }
.intro p {
  max-width: 625px; margin: 0; font-size: 14px; color: #a8b6ce;
  line-height: 1.75;
}
.intro-facts {
  display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 6px;
  border-left: 1px solid var(--line); padding-left: 32px;
}
.intro-facts { display: none; } /* Specs remain accessible in the markup. */
.fact { display: flex; flex-direction: column; gap: 9px; min-width: 100px; }
.fact > span { font-size: 9px; font-weight: 700; color: #8392aa; letter-spacing: 1.5px; }
.fact strong { font: 700 21px "Space Grotesk", sans-serif; color: #e5e9f5; letter-spacing: -.6px; }
.fact i { color: #65738e; font-style: normal; font-size: 16px; font-weight: 400; }

.workspace {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(350px, .81fr);
  gap: 24px; align-items: start;
}
.editor-column { min-width: 0; }
.section-head {
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  margin-bottom: 15px;
}
.overline { font-size: 10px; color: #92a0b8; letter-spacing: 1.5px; font-weight: 700; }
.section-head h2 {
  margin: 4px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.65px;
}
.section-count { padding: 2px 7px; border: 1px solid #35445b; border-radius: 4px; vertical-align: middle; font-size: 10px; color: #8c9ab2; margin-left: 6px; }
.hint-pill { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #aab9cf; white-space: nowrap; }
.pulse { width: 6px; height: 6px; margin-right: 7px; box-shadow: 0 0 12px #7ee7b6ba; }

.preview-shell, .inspector {
  border: 1px solid #33415b; border-radius: 14px; background: #101a2b;
  box-shadow: 0 22px 55px #01050d55, inset 0 1px #ffffff08;
}
.preview-shell { overflow: hidden; }
.preview-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 13px 16px; gap: 12px; border-bottom: 1px solid var(--line);
}
.screen-name {
  display: inline-flex; align-items: center; gap: 8px; font-size: 9px;
  letter-spacing: 1.1px; color: #8a99b2; font-weight: 700;
}
.tiny-square { width: 7px; height: 7px; background: #e99ade; border-radius: 2px; }
.mode-control { display: flex; align-items: center; gap: 3px; padding: 3px; background: #0b1221; border: 1px solid #29374f; border-radius: 8px; margin-left: auto; }
.mode-button, .guides-button, .template-preview-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; color: #9ba9c0; background: transparent; padding: 8px 11px;
  font: 600 11px "Space Grotesk", sans-serif; border-radius: 5px;
}
.mode-button svg, .guides-button svg { width: 14px; height: 14px; }
.mode-button:hover, .guides-button:hover, .template-preview-toggle:hover { color: #eef2fc; }
.mode-button.is-active { background: #293b56; color: #f2f6ff; box-shadow: 0 1px 4px #0005; }
.guides-button { border: 1px solid #29374f; padding: 10px 12px; }
.guides-button.is-active { border-color: #676788; color: #ded8f3; background: #202740; }
.template-preview-toggle {
  padding: 9px 10px; border: 1px solid #435774;
  background: #15243c; color: #b7c7e0; white-space: nowrap;
}
.template-preview-toggle[aria-pressed="true"] {
  background: #473052; border-color: #e9a1dd; color: #ffe9fc;
}
.template-toggle-icon { font-size: 16px; line-height: 1; }
.template-toggle-state {
  display: inline-grid; place-items: center; min-width: 24px;
  border-radius: 3px; padding: 2px 4px; background: #0d1424;
  font: 700 9px/1.5 "Space Grotesk", sans-serif; letter-spacing: .5px;
}
.template-preview-toggle[aria-pressed="true"] .template-toggle-state { background: #7d467a; }
.template-preview-details {
  padding: 11px 16px 13px; border-top: 1px solid #394961;
  background: #20273b; color: #c2d3e8;
  font: 500 11px/1.55 "Space Grotesk", sans-serif;
}
.template-preview-details[hidden] { display: none; }
.template-preview-details p[hidden] { display: none; }
.template-preview-details > span { vertical-align: middle; }
.template-preview-details p { color: #aebdd2; font-size: 10px; margin: 6px 0 0; }
.template-preview-badge {
  color: #ffe4ac; font: 700 9px "Space Grotesk", sans-serif;
  border: 1px solid #b5945f; padding: 3px 6px; border-radius: 3px; margin-right: 8px;
}
.template-preview-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px;
}
#template-frame-offsets {
  color: #e5e6f7; font: 600 11px "Space Grotesk", sans-serif;
}
#fit-template-frame {
  min-height: 34px; border: 1px solid #9ca7ce; background: #334a66;
  border-radius: 5px; color: white; cursor: pointer;
  padding: 6px 12px; font: 600 11px "Space Grotesk", sans-serif;
}
#fit-template-frame:hover { border-color: white; background: #425c7c; }
#fit-template-frame:disabled { opacity: .4; cursor: default; }
#template-fit-warning.is-warning { color: #ffe09d; }

.canvas-wrap { position: relative; padding: 17px; background: #091221; }
.canvas-wrap::after {
  content: ""; position: absolute; pointer-events: none; inset: 17px;
  box-shadow: inset 0 0 0 1px #ebefff18, 0 0 0 1px #070c1899;
  border-radius: 4px;
}
#preview {
  display: block; width: 100%; height: auto; aspect-ratio: 960 / 544;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; border-radius: 3px; background: #161b34;
}
#preview.dragging { cursor: grabbing; }
.screen-corner {
  position: absolute; z-index: 1; pointer-events: none; width: 13px; height: 13px;
  border: 2px solid #b9aacb; opacity: .6;
}
.screen-corner-tl { left: 13px; top: 13px; border-right: 0; border-bottom: 0; }
.screen-corner-tr { right: 13px; top: 13px; border-left: 0; border-bottom: 0; }
.screen-corner-bl { left: 13px; bottom: 13px; border-right: 0; border-top: 0; }
.screen-corner-br { right: 13px; bottom: 13px; border-left: 0; border-top: 0; }
.preview-bottom {
  padding: 13px 16px; display: flex; gap: 14px; justify-content: space-between;
  align-items: center; flex-wrap: wrap;
  border-top: 1px solid #29364d;
}
.help-copy { font-size: 11px; color: #a6b2c7; line-height: 1.5; }
.pointer-symbol { font-size: 16px; color: #e5a6e2; padding-right: 6px; }
.keyboard-tip { color: #718198; font-size: 9px; font-weight: 700; white-space: nowrap; }
kbd {
  display: inline-block; min-width: 16px; text-align: center; margin: 0 1px;
  color: #a1b1cd; font: 600 11px/16px "Space Grotesk",sans-serif;
  border: 1px solid #354762; border-radius: 3px;
}
.keyboard-tip small { font-size: 9px; color: #bba6bc; margin-left: 5px; }

.measurements { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.measurements { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.measurements .measurement:nth-child(n+5) { display: none; }
.measurement {
  min-width: 0; background: #111c2d; border: 1px solid #2b3a54; border-radius: 9px;
  padding: 15px 12px; position: relative;
}
.measurement::before { content: ""; width: 2px; height: 13px; position: absolute; left: 0; top: 17px; background: #a373b5; opacity: .8; }
.measurement > span { display: block; white-space: nowrap; font-size: 8px; letter-spacing: 1px; font-weight: 700; color: #8495af; margin-bottom: 7px; }
.measurement strong { font: 600 22px/1.1 "Space Grotesk",sans-serif; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: #edf0f7; }
.measurement small { color: #8c9ab1; font-size: 10px; margin-left: 4px; }

.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.auxiliary-tools { position: relative; color: #aabbd0; }
.auxiliary-tools summary {
  list-style-position: inside; cursor: pointer; padding: 10px 12px;
  border: 1px solid #3b4c67; border-radius: 7px;
  font-size: 12px; font-weight: 700;
}
.auxiliary-tools[open] { width: 100%; }
.auxiliary-buttons {
  display: flex; flex-wrap: wrap; gap: 9px; padding: 10px 0 2px;
}
.editor-actions button {
  min-height: 39px; border-radius: 7px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.editor-actions button:hover { transform: translateY(-1px); }
.editor-actions svg { height: 15px; width: 15px; }
.action-primary { padding: 0 16px; background: #f4b8ed; color: #2c1b38; border: 1px solid #f4b8ed; }
.action-primary:hover { background: #ffd2f8; }
.action-secondary { padding: 0 16px; background: #18253b; color: #d5dfef; border: 1px solid #3b4c67; }
.action-secondary:hover { border-color: #7a8ba6; }
.action-reset { margin-left: auto; background: none; border: 1px solid transparent; color: #9dabc0; padding: 0 4px; }
.action-reset span { font-size: 19px; }
.action-reset:hover { color: white; }

.vpk-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 12px;
  padding: 16px; border: 1px solid #3a4762; border-radius: 10px;
  background: #142238;
}
.vpk-panel strong { font: 700 13px "Space Grotesk", sans-serif; }
.vpk-panel p { color: #a9b8cf; font-size: 11px; margin: 6px 0 0; line-height: 1.5; max-width: 480px; }
.vpk-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.vpk-actions button {
  border-radius: 7px; min-height: 38px; padding: 7px 12px; font-size: 12px;
  font-weight: 700;
}
.vpk-actions button:disabled { opacity: .48; }
.advanced-collapse {
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.advanced-collapse summary {
  color: #cedaee; cursor: pointer;
  font: 700 12px "Space Grotesk", sans-serif;
  list-style-position: inside;
}
.advanced-collapse summary small {
  margin-left: 8px; font-size: 10px; font-weight: 500; color: #8799b1;
}
.advanced-collapse[open] summary { margin-bottom: 12px; }
.advanced-collapse .inspector-section { border-bottom: 0; padding-bottom: 0; }
.export-compression { margin: 14px 0 9px; }

.inspector { padding: 0 20px 18px; overflow: hidden; }
.inspector-header { padding: 22px 0 17px; border-bottom: 1px solid var(--line); }
.inspector-title-row { display: flex; align-items: center; justify-content: space-between; }
.inspector-header h2 { font-size: 24px; font-weight: 600; letter-spacing: -1px; margin: 5px 0 4px; }
.inspector-glyph { color: #8395b1; font-size: 27px; line-height: 1; }
.inspector-header p { margin: 0; color: #94a3ba; font-size: 11px; line-height: 1.55; }
.inspector-section { padding: 19px 0 18px; border-bottom: 1px solid var(--line); }
.subhead { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.sub-number { color: #e2a4e5; font-size: 10px; font-weight: 700; }
.subhead h3 { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sub-rule { height: 1px; background: #35445b; opacity: .55; flex: 1; margin-left: 6px; }

.asset-card {
  padding: 11px; border: 1px solid #36445f; background: #162138;
  border-radius: 8px; margin-bottom: 10px; transition: border-color .2s ease, background .2s ease;
}
.asset-card.dragover { border-color: #eb9de5; background: #322642; }
.extra-assets { margin: 10px 0; border: 1px solid #36445f; border-radius: 7px; padding: 11px; }
.extra-assets summary { cursor: pointer; font-size: 11px; font-weight: 700; color: #dce2f1; }
.extra-assets[open] summary { margin-bottom: 12px; }
.extra-assets .asset-card { margin-bottom: 9px; }
.asset-topline { display: flex; align-items: center; gap: 11px; }
.asset-thumb {
  display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px;
  border-radius: 6px; border: 1px solid #62729a55;
  background-color: #71009e; background-size: cover; background-position: center;
  overflow: hidden;
}
#button-thumb { background-color: #e014d0; }
.asset-thumb-icon { font-size: 18px; color: #f9d5ff; }
.asset-name { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 3px; }
.asset-name strong { font-size: 12px; }
.asset-name span { font-size: 10px; color: #98a6bc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asset-tag {
  font-size: 8px; color: #8a9ab2; background: #243148;
  padding: 6px 7px; border-radius: 4px; white-space: nowrap; letter-spacing: .3px;
}
.asset-buttons { margin-top: 10px; display: flex; gap: 8px; }
.asset-buttons button { border-radius: 5px; padding: 8px 10px; font-size: 10px; font-weight: 700; }
.asset-upload { flex: 1; text-align: center; background: #273650; color: #d6e2f3; border: 1px solid #486084; }
.asset-upload:hover { background: #334665; }
.asset-clear { color: #a9b7cf; background: transparent; border: 1px solid #40506c; }
.asset-clear:hover { color: #f5f7ff; border-color: #798ba8; }
.section-note { font-size: 10px; color: #8597af; line-height: 1.65; margin: 6px 0 0; }

.palette-group { margin: 0 0 14px; }
.palette-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 14px; }
.palette-heading label { font-weight: 700; font-size: 11px; color: #d6deef; }
.palette-heading output {
  font-size: 10px; color: #ebc2ef; font-family: "Space Grotesk",sans-serif;
  padding: 4px 7px; background: #332740; border-radius: 4px;
}
.swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.swatch { position: relative; border: 1px solid #4b5c76; border-radius: 5px; aspect-ratio: 1 / 1; padding: 0; transition: transform .14s ease, outline-color .14s ease; }
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { outline: 2px solid #f8e5fc; outline-offset: 2px; z-index: 1; }
.swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; display: grid; place-items: center; inset: 0; color: #0d1020; font-size: 13px; font-weight: 800; text-shadow: 0 1px #fff5; }

.geometry-caption { margin: -6px 0 14px; font-size: 10px; line-height: 1.6; color: #94a2bb; }
.geometry-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.axis-options {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px;
  margin-top: 13px; padding: 10px 12px; border: 1px solid #33445e;
  background: #101c30; border-radius: 7px;
}
.axis-options-title { color: #99acc5; font-size: 10px; font-weight: 700; margin-right: auto; }
.axis-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: #e4e6f6; font-size: 11px; font-weight: 600; white-space: nowrap; }
.axis-option input { accent-color: #f4b8ed; width: 16px; height: 16px; margin: 0; }
.axis-options-note { margin: 6px 0 0; color: #91a0b9; font-size: 10px; line-height: 1.5; }
.editor-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 13px 0;
  color: #e4e6f6; cursor: pointer; font-size: 12px; font-weight: 600;
}
.editor-check input { accent-color: #f4b8ed; margin: 3px 0 0; width: 17px; height: 17px; flex: none; }
.editor-check span { display: flex; flex-direction: column; gap: 3px; }
.editor-check small { color: #91a0b9; font-size: 10px; font-weight: 400; line-height: 1.5; }
.xml-settings { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.xml-settings .field:nth-child(3), .xml-settings .field:nth-child(4) { grid-column: 1/-1; }
.xml-settings .field > span { font-size: 10px; }
.xml-settings select, .xml-settings input {
  background: #0d1829; border: 1px solid #40516b; border-radius: 6px;
  color: #f4f7ff; font: 500 12px/1.4 "Space Grotesk",sans-serif;
  padding: 9px 10px; width: 100%; min-width: 0; outline: none;
}
.xml-settings select:focus, .xml-settings input:focus { border-color: #dcb0ef; }
.export-side { margin: 12px 0 0; width: 100%; border-radius: 6px; min-height: 42px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font: 700 12px "Space Grotesk",sans-serif; color: #e7ecf7; display: flex; justify-content: space-between; align-items: baseline; }
.field small { color: #8799b3; font-size: 8px; font-weight: 600; }
.input-container { border: 1px solid #40516b; background: #0d1829; border-radius: 6px; display: flex; align-items: center; padding-right: 10px; }
.input-container:focus-within { border-color: #dcb0ef; box-shadow: 0 0 0 2px #c7a1ea27; }
.input-container input {
  width: 100%; min-width: 0; appearance: textfield; -moz-appearance: textfield;
  border: none; border-radius: 6px; background: transparent; color: #f4f7ff;
  font: 600 18px "Space Grotesk",sans-serif; padding: 8px 10px;
  outline: none; font-variant-numeric: tabular-nums;
}
.input-container input::-webkit-inner-spin-button, .input-container input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-container > span { font-size: 10px; color: #8998b2; }
.derived-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.derived-coordinates > div { display: flex; flex-direction: column; gap: 5px; border: 1px solid #33445e; background: #1a2940; padding: 10px; border-radius: 6px; }
.derived-coordinates > div > span { color: #8fa0b9; font-size: 8px; font-weight: 700; letter-spacing: .5px; }
.derived-coordinates strong { font: 600 15px "Space Grotesk",sans-serif; font-variant-numeric: tabular-nums; }
.derived-coordinates strong small { color: #91a4bf; font-size: 10px; }

.storage-note { margin-top: 17px; }
.storage-indicator { display: flex; align-items: center; gap: 8px; color: #bfe5d4; font-size: 11px; }
.storage-light { width: 7px; height: 7px; }
.storage-note p { font-size: 10px; color: #8392aa; line-height: 1.65; margin: 9px 0 0; }
.page-footnote {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 25px; padding: 18px 0 0; border-top: 1px solid #27364d;
  color: #8696af; font-size: 10px; line-height: 1.7;
}
.page-footnote strong { color: #d8e0f0; }
.page-footnote a { color: #d9acd8; text-decoration: underline; text-decoration-color: #d9acd85c; text-underline-offset: 3px; }
.footnote-marker { display: inline-block; width: 7px; height: 7px; border: 1px solid #db9ccf; transform: rotate(45deg); margin-right: 7px; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  max-width: min(360px, calc(100vw - 32px)); min-height: 46px;
  display: flex; align-items: center;
  padding: 12px 18px; border: 1px solid #617594; border-radius: 9px;
  background: #253650; color: #f7f7fd; font-size: 12px;
  box-shadow: 0 16px 60px #0008; transform: translateY(24px);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.toast.visible { transform: translateY(0); opacity: 1; }

@media (max-width: 1350px) {
  .workspace { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr); gap: 18px; }
  .page-shell { padding-left: 26px; padding-right: 26px; }
  .topbar { padding-left: 26px; padding-right: 26px; }
  .intro-facts { gap: 18px; padding-left: 22px; }
  .fact { min-width: 83px; }
  .fact strong { font-size: 18px; }
  .measurement { padding: 12px 8px; }
  .measurement strong { font-size: 19px; }
  .measurement > span { font-size: 7px; }
}
@media (max-width: 1090px) {
  .workspace { grid-template-columns: 1fr; }
  .inspector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .inspector-header { grid-column: 1 / -1; }
  .inspector-geometry { grid-column: 1 / -1; }
  .inspector-section:nth-of-type(2) { border-bottom: 1px solid var(--line); }
  .storage-note { grid-column: 1 / -1; }
  .intro { align-items: start; }
  .intro-facts { margin-top: 35px; }
}
@media (max-width: 680px) {
  .ambient { display: none; }
  .topbar { padding: 15px 15px; gap: 8px; align-items: start; }
  .brand-mark { width: 33px; height: 33px; border-radius: 8px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 13px; letter-spacing: -.4px; padding-bottom: 13px; }
  .brand-name small { font-size: 7px; letter-spacing: 1px; }
  .header-right { gap: 7px; }
  .header-link, .version { display: none; }
  .download-link { padding: 10px; font-size: 10px; }
  .download-link svg { width: 13px; }
  .page-shell { padding: 26px 13px 16px; }
  .intro { flex-direction: column; align-items: start; gap: 15px; margin-bottom: 26px; }
  .eyebrow { font-size: 9px; letter-spacing: 1px; }
  h1 { font-size: clamp(38px, 10.5vw, 58px); letter-spacing: -2px; margin-bottom: 11px; }
  .intro p { font-size: 12px; line-height: 1.7; }
  .intro-facts { margin: 0; padding: 0; border: 0; gap: 24px; }
  .fact { min-width: 60px; }
  .fact > span { font-size: 8px; }
  .fact strong { font-size: 16px; }
  .section-head h2 { font-size: 18px; }
  .hint-pill { display: none; }
  .preview-top { padding: 10px; gap: 8px; }
  .screen-name { width: 100%; }
  .mode-control { margin-left: 0; }
  .guides-button { margin-left: auto; }
  .template-preview-toggle { flex: 1 1 100%; min-height: 37px; }
  .template-preview-details { padding: 10px; }
  .canvas-wrap { padding: 8px; }
  .canvas-wrap::after { inset: 8px; }
  .screen-corner { display: none; }
  .preview-bottom { padding: 10px; }
  .keyboard-tip { font-size: 8px; }
  .measurements { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .measurement { padding: 10px; }
  .measurement strong { font-size: 21px; }
  .measurement > span { font-size: 8px; }
  .editor-actions { gap: 8px; }
  .editor-actions button { font-size: 10px; min-height: 35px; }
  .action-primary, .action-secondary { flex: 1 1 auto; }
  .action-reset { margin-left: 0; }
  .inspector { display: block; padding: 0 14px 14px; }
  .inspector-section { padding: 16px 0; }
  .storage-note { margin-bottom: 4px; }
  .page-footnote { gap: 9px; margin-top: 21px; }
  .toast { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}