/* Shared visual system, based on the Kaupunkikartta workspace. */
/* Self-hosted OFL fonts (licenses in fonts/). Browsers download a file only
   when the page uses that family, weight and character range. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(./fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(./fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(./fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(./fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(./fonts/ibm-plex-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(./fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(./fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(./fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(./fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(./fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(./fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(./fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(./fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(./fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(./fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(./fonts/ibm-plex-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --ink: #213b4a;
  --ink-dark: #172c38;
  --muted: #536975;
  --line: #d7e0e1;
  --wash: #e9eef0;
  --paper: #fbfcf8;
  --white: #fff;
  --laser: #ef633d;
  --action: #ad3b1d;
  --body: 'IBM Plex Sans', sans-serif;
  --display: 'Barlow Condensed', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --page: var(--wash);
  --scene: #e2e9eb;
  --accent: var(--action);
  --green: var(--ink);
  --green-light: #e9f0f0;
  --blue: var(--ink);
  --blue-dark: var(--ink-dark);
  --blue-wash: #e9f0f0;
  --success: #317666;
  --warning: #8b6428;
  --warning-wash: #fbf5e9;
  --soft: #e9f0f0;
  --cover: #e2e9eb;
  --pop: #ef633d;
  --mint: #eef4f1;
  --radius: 0;
  --rule: var(--line);
  --card: var(--ink-dark);
  --card-text: var(--paper);
  --wood: #eadbbd;
  --road: #5c5347;
  font-family: var(--body);
  font-synthesis: none;
}
body { margin: 0; color: var(--ink); background: var(--wash); font-family: var(--body); }
button, input, select { font: inherit; }
input, textarea { caret-color: var(--ink); }
::selection { background: #ef633d40; color: var(--ink-dark); }
:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; }
a { text-underline-offset: 4px; }
.site-topbar {
  display: flex; align-items: center; flex: none; gap: 24px;
  min-height: 72px; padding: 10px 31px; border-bottom: 1px solid var(--line);
  background: #f8faf8; color: var(--ink); font: 13px/1.4 var(--body);
}
.site-back {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  flex: none; color: var(--ink); text-decoration: none; font-size: 12px;
}
.site-back > span:first-child {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line); font-size: 22px; line-height: 1;
}
.site-back:hover { text-decoration: underline; }
.site-back:hover > span:first-child { border-color: var(--ink); background: white; }
.site-brand {
  display: flex; align-items: center; gap: 10px; flex: none; color: var(--ink-dark);
  font: 700 27px/1 var(--display); letter-spacing: .025em; text-transform: uppercase;
}
.site-mark {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px;
  width: 27px; height: 27px; border: 2px solid var(--ink); transform: rotate(-9deg);
}
.site-mark span { border: 1px solid var(--ink); }
.site-mark span:nth-child(2) { background: var(--laser); border-color: var(--laser); }
.site-mark span:nth-child(3) { border-top: 0; border-right: 0; }
.site-subtitle, .site-badge { font: 500 10px/1.4 var(--mono); letter-spacing: .08em; }
.site-subtitle { padding-left: 24px; border-left: 1px solid var(--line); color: var(--muted); }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px; margin-left: auto; }
.site-actions:empty { display: none; }
.site-help, .site-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--ink); font: 13px/1.4 var(--body); white-space: nowrap;
}
.site-help:hover, .site-action:hover { color: var(--ink-dark); text-decoration: underline; }
.site-action .icon { width: 18px; height: 18px; }
.site-badge { flex: none; padding: 10px 12px; border: 1px solid var(--line); background: white; white-space: nowrap; }
.tutorial-page .primary-link { background: var(--action); border-color: var(--action); }
.tutorial-page .primary-link:hover { background: #923017; }
@media (max-width: 1380px) {
  .site-subtitle { display: none; }
  .site-topbar { gap: 20px; padding-inline: 24px; }
  .site-badge { font-size: 9px; }
}
@media (max-width: 1100px) {
  .site-badge { display: none; }
  .site-topbar { gap: 16px; padding-inline: 20px; }
}
@media (max-width: 600px) {
  .site-topbar { flex-wrap: wrap; gap: 0 12px; min-height: 64px; padding: 10px 16px; }
  .site-brand { font-size: 24px; }
  .site-back { width: 44px; min-height: 44px; justify-content: flex-start; }
  .site-back > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-actions { flex: 1 0 100%; margin-left: 0; padding-top: 6px; justify-content: flex-end; gap: 12px; }
  .site-help, .site-action { font-size: 12px; }
  .site-subtitle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Dark workshop design for the catalog and generators.
   Previews keep their real material colors; only the surrounding interface is dark.
   Printable tutorials keep the light palette above. */
html:has(> body:is(.generator-page, .catalog-page)) { color-scheme: dark; background: #0a0a0b; }
:is(.generator-page, .catalog-page) {
  --ink: #ededeb;
  --ink-dark: #f4f4f2;
  --muted: #99999e;
  --faint: #96969b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --wash: #0a0a0b;
  --paper: #0f0f11;
  --white: #151517;
  --surface: #151517;
  --raised: #202023;
  --field: #0f0f11;
  --selected: #2c2c30;
  --lime: #e2f3a0;
  --lime-hover: #f1fac9;
  --lime-wash: rgba(226, 243, 160, .08);
  --lime-line: rgba(226, 243, 160, .55);
  --on-fill: #131313;
  --laser: var(--lime);
  --action: var(--lime);
  --accent: var(--lime);
  --pop: var(--lime);
  --blue: var(--lime);
  --blue-dark: var(--lime-hover);
  --blue-wash: var(--lime-wash);
  --green: var(--ink);
  --green-light: var(--lime-wash);
  --soft: var(--raised);
  --mint: var(--raised);
  --scene: #0e0e10;
  --cover: var(--raised);
  --card: var(--surface);
  --card-text: var(--ink);
  --success: #8fdc8f;
  --warning: #f3c66b;
  --warning-wash: rgba(217, 164, 65, .12);
  --danger: #ff8589;
  --body: 'Geist', system-ui, sans-serif;
  --display: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --engrave: 'Barlow Condensed', sans-serif;
  --radius-panel: 20px;
  --radius-inner: 14px;
  --radius-control: 10px;
  min-height: 100vh;
  margin: 0;
  padding: 12px 12px 12px 88px;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
:is(.generator-page, .catalog-page) ::selection { background: rgba(226, 243, 160, .3); color: #fff; }
:is(.generator-page, .catalog-page) :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
:is(.generator-page, .catalog-page) input::placeholder { color: var(--faint); opacity: 1; }
:is(.generator-page, .catalog-page) input[type="range"] { accent-color: var(--lime); }
:is(.generator-page, .catalog-page) * { scrollbar-width: thin; scrollbar-color: #2a2a2d transparent; }
:is(.generator-page, .catalog-page) ::-webkit-scrollbar { width: 8px; height: 8px; }
:is(.generator-page, .catalog-page) ::-webkit-scrollbar-thumb { background: #2a2a2d; border-radius: 8px; }
:is(.generator-page, .catalog-page) ::-webkit-scrollbar-track { background: transparent; }

.site-rail {
  position: fixed; z-index: 40; top: 12px; bottom: 12px; left: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 64px; padding: 16px 0;
  border: 1px solid rgba(255, 255, 255, .05); border-radius: var(--radius-panel);
  background: #141416;
}
.site-rail-brand { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; color: var(--lime); }
.site-rail-brand svg { width: 30px; height: 24px; fill: currentColor; }
.site-rail-brand > span { display: none; }
.site-rail-links { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.site-rail-link {
  position: relative; display: flex; align-items: center; justify-content: center; flex: none; gap: 10px; width: 44px; min-height: 44px;
  border-radius: 12px; color: var(--muted); transition: background .15s, color .15s;
  text-decoration: none;
}
.site-rail-link:hover { background: var(--raised); color: var(--ink); }
.site-rail-link[aria-current="page"] { background: var(--ink); color: #121212; }
.site-rail-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-rail-label { position: absolute; left: calc(100% + 14px); z-index: 1; width: max-content; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 500 13px/1.4 var(--body); visibility: hidden; }
.site-rail-link:is(:hover, :focus-visible) .site-rail-label { visibility: visible; }
.site-rail-spacer { flex: 1; }
.generator-page .skip-link, .catalog-page .skip-link { position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); z-index: 100; padding: 12px 18px; border-radius: var(--radius-control); background: var(--lime); color: var(--on-fill); font: 500 14px var(--body); transform: translateY(calc(-100% - max(12px, env(safe-area-inset-top)) - 4px)); }
:is(.generator-page, .catalog-page) .skip-link:focus { transform: none; }

/* Page heading: breadcrumb, generator name, actions and language. */
:is(.generator-page, .catalog-page) .site-topbar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px;
  min-height: 0; padding: 4px 4px 14px; border: 0; background: transparent;
  color: var(--ink); font: 13px/1.4 var(--body);
}
:is(.generator-page, .catalog-page) .site-badge { order: 1; }
:is(.generator-page, .catalog-page) .site-actions { order: 2; }
:is(.generator-page, .catalog-page) .site-heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-right: auto; }
:is(.generator-page, .catalog-page) .site-crumbs { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 12px; }
:is(.generator-page, .catalog-page) .site-back { display: inline; min-height: 0; color: inherit; font-size: inherit; text-decoration: none; }
:is(.generator-page, .catalog-page) .site-back:hover { color: var(--ink); text-decoration: none; }
:is(.generator-page, .catalog-page) .site-brand {
  display: block; margin: 0; color: var(--ink);
  font: 600 30px/1.15 var(--body); letter-spacing: -.02em; text-transform: none;
}
:is(.generator-page, .catalog-page) .site-badge {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 999px; background: #141416;
  color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0;
}
:is(.generator-page, .catalog-page) .site-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
:is(.generator-page, .catalog-page) .site-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
:is(.generator-page, .catalog-page) :is(.site-help, .site-action) {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; min-height: 0; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 999px; background: var(--raised);
  color: var(--ink); font: 500 13px var(--body); text-decoration: none; white-space: nowrap;
}
:is(.generator-page, .catalog-page) :is(.site-help, .site-action):hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
:is(.generator-page, .catalog-page) .site-action[aria-label] { width: 38px; padding: 0; justify-content: center; }
:is(.generator-page, .catalog-page) :is(.site-help, .site-action) svg { width: 16px; height: 16px; }
:is(.generator-page, .catalog-page) .site-actions :is(.button-primary, .button-secondary, .button) { height: 38px; min-height: 0; border-radius: 999px; }
:is(.generator-page, .catalog-page) .language-switch {
  gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 999px; background: #141416; color: var(--muted);
}
:is(.generator-page, .catalog-page) .language-switch button { min-height: 0; height: 30px; padding: 0 12px; border-radius: 999px; font: 500 12px var(--body); }
:is(.generator-page, .catalog-page) .language-switch button:hover { color: var(--ink); }
:is(.generator-page, .catalog-page) .language-switch button[aria-pressed="true"] { background: var(--selected); color: #f4f4f2; }

/* Shared controls. */
.generator-page :is(.primary-button, .button-primary) { border: 0; border-radius: 999px; background: var(--lime); color: var(--on-fill); font-weight: 600; box-shadow: none; }
.generator-page :is(.primary-button, .button-primary):not(:disabled):hover { background: var(--lime-hover); color: var(--on-fill); }
.generator-page :is(.primary-button, .button-primary):disabled { background: var(--lime); color: var(--on-fill); opacity: .4; cursor: not-allowed; }
.generator-page :is(.secondary-button, .button-secondary) { border: 1px solid rgba(255, 255, 255, .07); border-radius: 999px; background: var(--raised); color: var(--ink); }
.generator-page :is(.secondary-button, .button-secondary):hover { border-color: var(--line-strong); color: var(--ink); }
.generator-page :is(.unit-input, .number-input) { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-control); background: var(--field); }
.generator-page :is(.unit-input input, .number-input input) { color: var(--ink); font-family: var(--mono); }
.generator-page :is(.field-label, .setting-label) { color: var(--muted); font: 400 12px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.generator-page :is(.step-index, .section-number) { color: var(--lime); }
.generator-page :is(select, input[type="text"], input[type="search"], input:not([type])) { color-scheme: dark; }
.generator-page .segmented button.is-selected { border-color: transparent; background: var(--selected); color: #f4f4f2; box-shadow: none; }
.generator-page .size-presets button.is-selected { border-color: var(--lime-line); background: var(--lime-wash); color: var(--lime); box-shadow: none; }
.generator-page :is(.section-heading h2, h2) { text-transform: none; }

@media (max-width: 860px) {
  :is(.generator-page, .catalog-page) { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .site-rail { position: relative; inset: auto; flex-direction: row; width: 100%; height: 64px; margin-bottom: 12px; padding: 0 6px; gap: 6px; }
  .site-rail-brand { flex: none; width: 36px; margin: 0; }
  .site-rail-links { position: relative; flex-direction: row; align-items: center; gap: 4px; min-width: 0; height: 100%; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .site-rail-links::-webkit-scrollbar { display: none; }
  .site-rail-link { width: auto; padding: 0 12px; }
  .site-rail-link svg { flex: none; width: 16px; height: 16px; }
  .site-rail-label { position: static; padding: 0; border: 0; background: none; color: inherit; visibility: visible; white-space: nowrap; font-size: 12px; }
  .site-rail-spacer { display: none; }
  :is(.generator-page, .catalog-page) .site-topbar { padding: 4px 4px 12px; }
  :is(.generator-page, .catalog-page) .site-brand { font-size: 24px; }
  .generator-page input:is([type="text"], [type="search"], [type="number"], :not([type])), .generator-page select { min-height: 44px; font-size: 16px; }
  .generator-page :is(.search-form, .search-input, .search-field, .unit-input, .number-input, .dimension-inputs label > div) { min-height: 44px; height: auto; }
  .generator-page :is(.search-form, .search-input, .search-field) > button { min-width: 44px; min-height: 44px; }
  :is(.generator-page, .catalog-page) :is(.site-help, .site-action),
  :is(.generator-page, .catalog-page) .language-switch button,
  .generator-page :is(.segmented button, .size-presets button, .reset-label, .material-pick, .unit-switch button, .view-tabs button, .view-switch button, .palette, .secondary-button, .button, .button-primary, .button-secondary, .rotation-row button) { min-height: 44px; }
  :is(.generator-page, .catalog-page) .site-action[aria-label], .generator-page .rotation-row button { min-width: 44px; }
  .generator-page :is(.line-toggle, .feature-toggle) { min-height: 48px; }
  .generator-page input[type="range"] { min-height: 44px; }
  .generator-page .mobile-preview { top: env(safe-area-inset-top, 0px); }
}
@media (max-width: 600px) {
  :is(.generator-page, .catalog-page) .site-topbar { align-items: flex-start; flex-direction: column; flex-wrap: nowrap; }
  :is(.generator-page, .catalog-page) .site-actions { justify-content: flex-start; width: 100%; padding: 0; }
  :is(.generator-page, .catalog-page) .site-badge { display: none; }
  :is(.generator-page, .catalog-page) .site-back { width: auto; min-height: 0; }
  :is(.generator-page, .catalog-page) :is(.site-help, .site-action) { height: 36px; padding: 0 12px; font-size: 12px; }
}
@media (min-width: 1280px) {
  :is(.generator-page, .catalog-page) { padding-left: 196px; }
  .site-rail { width: 172px; align-items: stretch; padding: 16px 10px; }
  .site-rail-brand { display: flex; align-items: center; gap: 10px; width: auto; padding-inline: 10px; text-decoration: none; }
  .site-rail-brand > span { display: inline; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
  .site-rail-links { align-items: stretch; }
  .site-rail-link { justify-content: flex-start; width: auto; padding: 0 10px; }
  .site-rail-link svg { flex: none; }
  .site-rail-label { position: static; padding: 0; border: 0; background: none; color: inherit; visibility: visible; font-size: 12px; }
}
@media (pointer: coarse) {
  :is(.generator-page, .catalog-page) button { touch-action: manipulation; }
  :is(.generator-page, .catalog-page) .language-switch button,
  :is(.generator-page, .catalog-page) :is(.site-help, .site-action) { min-height: 44px; }
}