:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  color: #30363b;
  background: #353d45;
  --line: #d3d6d7;
  --muted: #778088;
  --accent: #aa603d;
  --ease: cubic-bezier(.22,.68,0,1);
  interpolate-size: allow-keywords;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button, select, a.button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #a56644; outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
.app-header { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 44px; padding: 0 20px; background: #242e36; color: #eaece9; border-bottom: 1px solid #182129; }
.app-name { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; letter-spacing: -.6px; }
.app-name > span { color: #8f9ca5; font-size: 11px; font-weight: 400; letter-spacing: 2px; border-left: 1px solid #4d5861; padding-left: 14px; }
.app-navigation { align-self: stretch; display: flex; align-items: stretch; gap: 28px; }
.app-navigation a { position: relative; display: flex; align-items: center; font-size: 12px; color: #9eabb4; transition: color 160ms; }
.app-navigation a::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: #c08459; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
.app-navigation a[aria-current], .app-navigation a:hover { color: #fff; }
.app-navigation a[aria-current]::after, .app-navigation a:hover::after { transform: scaleX(1); }
.local-indicator { margin-left: auto; color: #9ba7ae; font-size: 11px; display: flex; gap: 8px; align-items: center; }
.local-indicator::before { content: ""; width: 5px; height: 5px; background: #9baa9e; border-radius: 50%; }
.parameter-toggle, .parameter-scrim { display: none; }
.command-bar { min-height: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: #f1f2ef; border-bottom: 1px solid #c4c9ca; }
.template-picker { display: flex; align-items: center; gap: 12px; width: 292px; flex-shrink: 0; }
.template-picker label { color: #737c82; font-size: 11px; }
.template-picker select { width: 238px; height: 31px; background: #fff; }
.standard-picker { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.standard-picker label { font-size: 11px; color: #737c82; }
.standard-picker select { height: 31px; width: 96px; background: #fff; }
.command-bar { flex-wrap: wrap; }
.command-group { display: flex; align-items: center; gap: 6px; }
.command-group + .command-group { border-left: 1px solid var(--line); padding-left: 16px; }
.button { min-height: 31px; padding: 5px 11px; border: 1px solid transparent; border-radius: 3px; background: transparent; line-height: 19px; white-space: nowrap; font-size: 12px; text-align: center; transition: background 160ms, border-color 160ms, color 160ms, transform 180ms var(--ease); }
.button:hover { background: #e2e5e3; border-color: #c8cecc; transform: translateY(-1px); }
.button.primary { color: #fff; background: #9d5737; border-color: #9d5737; padding-inline: 15px; }
.button.primary > span { display: inline-block; margin-left: 12px; color: #e8c6b7; transition: transform 220ms var(--ease); }
.button.primary:hover { background: #88472c; border-color: #88472c; }
.button.primary:hover > span { transform: translate(2px,-2px); }
.button:active { transform: translateY(0) scale(.97); }
.button:disabled, .button[aria-disabled="true"] { color: #a3abae; background: transparent; border-color: transparent; cursor: default; pointer-events: none; transform: none; }
.button.primary:disabled { background: #b9866c; color: #fff; }
.tool-label { font-size: 10px; color: var(--muted); margin-right: 4px; }
.preview-zoom { margin-left: auto; }
.zoom-button { width: 29px; padding-inline: 0; font-size: 16px; }
#zoom-level { min-width: 40px; text-align: center; font: 11px/1 "SFMono-Regular", Consolas, monospace; }
.generator-layout { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); flex: 1; min-height: 0; }
.generator-input { display: flex; flex-direction: column; min-height: 0; background: #f5f6f3; border-right: 1px solid #252e35; }
.pane-heading { display: flex; align-items: center; gap: 12px; height: 40px; flex-shrink: 0; padding: 0 16px; background: #eeefec; border-bottom: 1px solid #d6dad7; }
.pane-heading h1, .pane-heading h2 { font-size: 12px; font-weight: 600; }
.pane-heading > span { font: 10px/1 "SFMono-Regular", Consolas, monospace; color: #7c858a; }
.generator-input .pane-heading > span { margin-left: auto; }
#generator-form { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: #c9ceca transparent; }
summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 500; padding: 12px 16px; transition: background 160ms; }
summary:hover { background: #e9ece7; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "›"; width: 9px; color: #6a756e; font-size: 16px; line-height: 1; transition: transform 200ms var(--ease); }
details[open] > summary::before { transform: rotate(90deg); }
details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--ease), content-visibility 240ms allow-discrete; }
details[open]::details-content { block-size: auto; }
.identity-settings { border-bottom: 1px solid #d8dcd6; }
.identity-settings[open] { padding-bottom: 8px; }
.identity-fields, #parameter-fields { display: block; }
.identity-settings[open] .identity-fields, .drawing-help[open] p { animation: detail-enter 220ms var(--ease) both; }
.property-group { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #68736a; padding: 16px 16px 7px; }
.identity-fields label, .parameter-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 8px; min-height: 35px; padding: 3px 16px; font-size: 12px; transition: background 160ms; }
.parameter-row { animation: row-enter 300ms var(--ease) both; animation-delay: calc(var(--row-order, 0) * 12ms); }
.parameter-row:focus-within { background: #e9ede6; }
.field-label { line-height: 1.45; color: #505b55; }
input, select { min-width: 0; height: 27px; border: 1px solid #d6dbd5; border-radius: 2px; background: #fff; padding: 3px 7px; font-size: 12px; transition: background 180ms, border-color 180ms, box-shadow 180ms; }
input { width: 100%; }
input[type="number"], #projectId, #sequence { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
input[type="number"] { text-align: right; }
input:hover, select:hover { border-color: #acb5ad; }
input:focus, select:focus { outline: none; border-color: #b17a55; box-shadow: 0 0 0 2px #b17a5518; background: #fff; }
.parameter-row:not(.is-edited) input, .parameter-row:not(.is-edited) select { background: #ecefe9; }
.parameter-row.is-edited input, .parameter-row.is-edited select { border-left: 2px solid #af7755; }
.parameter-source { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.parameter-notes { margin: 15px 16px 4px; padding-top: 12px; border-top: 1px solid #dce0d9; color: #68736a; font-size: 11px; line-height: 1.9; }
.drawing-help { margin-top: 3px; }
.drawing-help p { padding: 0 16px 8px 33px; color: #66716a; font-size: 11px; line-height: 1.7; }
.generator-output { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.drawing-heading { background: #353f48; border-color: #48525a; color: #e3e8ea; }
.drawing-heading h2 { height: 100%; display: flex; gap: 28px; align-items: center; border-bottom: 2px solid #c18b64; padding-right: 12px; }
.drawing-heading h2 span { color: #9aa8b1; font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.drawing-heading > span { color: #9eacb6; }
#output-state { margin-left: auto; display: flex; align-items: center; gap: 7px; }
#output-state::before { content: ""; width: 4px; height: 4px; background: #7d8a93; border-radius: 50%; transition: background 200ms; }
.is-ready #output-state::before { background: #d2b28f; animation: ready-pulse 600ms var(--ease); }
.drawing-viewport { flex: 1; min-height: 0; overflow: auto; padding: 32px; background: #3e474f; scrollbar-width: thin; scrollbar-color: #6d787f #3e474f; container-type: size; }
.empty-preview { display: flex; align-items: center; justify-content: center; min-height: 100%; animation: sheet-enter 420ms var(--ease) both; }
.empty-paper { position: relative; width: min(100%, 1000px); aspect-ratio: 420 / 297; min-height: 230px; border: 1px solid #d0d4cc; background: #f7f7f2; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 5px 16px #11192024; }
.empty-paper h3 { color: #687269; font-size: 14px; font-weight: 400; }
.empty-paper p { margin-top: 9px; font-size: 11px; color: #6f786f; }
.empty-crosshair { position: relative; width: 23px; height: 23px; margin: 0 auto 17px; }
.empty-crosshair::before, .empty-crosshair::after { content: ""; position: absolute; background: #bac0b7; }
.empty-crosshair::before { width: 23px; height: 1px; left: 0; top: 11px; }
.empty-crosshair::after { width: 1px; height: 23px; left: 11px; top: 0; }
.paper-caption, .paper-footer { position: absolute; font: 9px/1.5 "SFMono-Regular", Consolas, monospace; color: #a2aaa0; }
.paper-caption { top: 18px; left: 20px; letter-spacing: 1.5px; }
.paper-footer { bottom: 18px; right: 20px; }
#generated-output { width: 100%; width: min(100%, calc(100cqh * 1.414)); margin: 0 auto; animation: sheet-enter 440ms var(--ease) both; }
.generated-sheet { width: 100%; background: #fff; border: 1px solid #bfc8c7; box-shadow: 0 5px 18px #17212a40; overflow: visible; }
.generated-sheet > svg { display: block; width: 100%; height: auto; background: white; transition: width 260ms var(--ease); }
.status-bar { min-height: 29px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid #202a32; background: #29333c; padding: 6px 14px; font-size: 10px; color: #a3afb7; }
.status-dot { width: 4px; height: 4px; border-radius: 50%; background: #7e8b94; flex-shrink: 0; transition: background 200ms; }
.is-ready .status-dot { background: #c59a75; }
#generation-status { flex: 1; min-width: 0; }
.output-facts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 13px; font-size: 10px; font-variant-numeric: tabular-nums; }
.output-facts span + span { border-left: 1px solid #4a555e; padding-left: 13px; }
.errors { font-size: 12px; line-height: 1.6; color: #943c2e; background: #f4e5de; border-bottom: 1px solid #dfc4b7; padding: 12px 16px; white-space: pre-line; animation: detail-enter 200ms var(--ease); }
.is-generating #generate > span { animation: generate-turn 700ms linear infinite; }
@keyframes row-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheet-enter { from { opacity: 0; transform: translateY(10px) scale(.988); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes detail-enter { from { opacity: .2; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ready-pulse { 0% { box-shadow: 0 0 0 0 #d2b28f60; } 100% { box-shadow: 0 0 0 6px #d2b28f00; } }
@keyframes generate-turn { to { transform: rotate(360deg); } }
@media (max-width: 1150px) {
  .command-bar { flex-wrap: wrap; gap: 8px 12px; }
  .template-picker { width: 292px; }
  .command-group + .command-group { padding-left: 10px; }
  .tool-label { display: none; }
  .drawing-viewport { padding: 22px; }
  .output-facts span:first-child { display: none; }
  .output-facts span:nth-child(2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .app-header { height: 48px; gap: 22px; padding-inline: 14px; }
  .app-name { font-size: 16px; }
  .app-name > span, .local-indicator { display: none; }
  .app-navigation { gap: 20px; }
  .parameter-toggle { display: block; margin-left: auto; padding: 7px 0 7px 12px; background: transparent; border: 0; color: #d5b59d; font-size: 11px; cursor: pointer; }
  .command-bar { z-index: 4; }
  .template-picker { width: auto; flex: 1; min-width: 220px; }
  .template-picker select { flex: 1; width: auto; }
  .command-group + .command-group { border-left: 0; padding-left: 0; }
  .export-tools { flex: 1; }
  .generator-layout { grid-template-columns: 1fr; overflow: hidden; }
  .generator-input { position: absolute; inset: 0 auto 0 0; width: min(320px, calc(100vw - 30px)); z-index: 3; border-right: 1px solid #26313a; transform: translateX(-100%); visibility: hidden; transition: transform 260ms var(--ease), visibility 260ms; }
  .parameters-open .generator-input { transform: translateX(0); visibility: visible; }
  .parameter-scrim:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 2; border: 0; background: #16212b66; animation: detail-enter 220ms var(--ease); cursor: pointer; }
  .identity-fields label, .parameter-row { grid-template-columns: minmax(0, 1fr) minmax(110px, 42%); min-height: 38px; }
  .drawing-viewport { padding: 14px; }
  .empty-paper { min-height: 190px; }
  .status-bar { flex-wrap: wrap; }
  .output-facts { flex-basis: 100%; justify-content: flex-start; padding-left: 13px; }
  .output-facts span:first-child { display: inline; }
  .output-facts span:nth-child(2) { border-left: 1px solid #4a555e; padding-left: 13px; }
}
@media (max-width: 400px) { .app-header { gap: 18px; } .app-navigation { gap: 14px; } .parameter-toggle { padding-left: 4px; } .template-picker { min-width: 100%; } }
@media (max-width: 400px) { .button.primary { padding-inline: 11px; } .button.primary > span { margin-left: 5px; } .standard-picker { gap: 6px; } }
@media (pointer: coarse) { input, select { min-height: 34px; } .button { min-height: 36px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } details::details-content { transition: none !important; } }