:root{color-scheme:light;--linen: #f7f4ee;--surface: #ffffff;--surface-sunken: #f2eee6;--ink: #1f2933;--ink-secondary: #4b5965;--border-control: #74818b;--divider: #d5dce0;--accent: #87503b;--accent-contrast: #ffffff;--accent-hover: #6f4130;--error: #a12828;--success: #24613b;--warning-text: #805000;--warning-bg: #fff4d6;--focus: #1d4ed8;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 20px;--text-xl: 24px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--control-height: 36px;--radius-control: 6px;--radius-panel: 8px;--header-height: 56px;--toolbar-height: 44px;--inspector-width: 280px;--motion: .14s;font-family:var(--font-ui)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--linen);color:var(--ink);font-size:var(--text-sm);line-height:1.45;-webkit-text-size-adjust:100%}#app{display:grid;grid-template-rows:minmax(var(--header-height),auto) var(--toolbar-height) minmax(0,1fr) auto;height:100%;min-height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}:where(button,input,select,a,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-control)}@media (prefers-reduced-motion: reduce){*{transition-duration:0ms!important;animation-duration:0ms!important}}.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-1) var(--space-4);border-bottom:1px solid var(--divider);background:var(--surface);min-width:0}.wordmark{display:flex;margin:0;align-items:center;gap:var(--space-2);flex:0 0 auto;font-size:var(--text-md);font-weight:700;letter-spacing:.01em;color:var(--ink)}.wordmark svg{display:block;color:var(--accent)}.header-title{flex:1 1 0;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--ink-secondary);border-left:1px solid var(--divider);padding-left:var(--space-3)}.header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--space-2);flex:0 1 auto;min-width:0;margin-left:auto}.header-actions select.field-input{width:auto;min-width:5.5em}.app-toolbar{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);border-bottom:1px solid var(--divider);background:var(--surface-sunken);overflow-x:auto}.toolbar-group{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto}.toolbar-group+.toolbar-group{padding-left:var(--space-4);border-left:1px solid var(--divider)}.toolbar-label{font-size:var(--text-xs);color:var(--ink-secondary);margin-right:var(--space-1)}.app-main{display:grid;grid-template-columns:minmax(0,1fr) var(--inspector-width);min-height:0}@media (max-width: 1199px){:root{--inspector-width: 248px}}.canvas-host{position:relative;min-width:0;min-height:0;background:var(--surface)}.editor-canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px;cursor:crosshair;background:var(--surface)}.editor-canvas:focus-visible{outline:3px solid var(--focus)}.app-panel{position:relative;border-left:1px solid var(--divider);background:var(--linen);overflow-y:auto;padding:var(--space-3);min-width:0}.app-footer{position:relative;border-top:1px solid var(--divider);background:var(--surface);padding:var(--space-2) var(--space-4)}.status{margin:0;font-size:var(--text-xs);color:var(--ink-secondary);font-variant-numeric:tabular-nums}.autosave-alert{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--error);border-left-width:4px;border-radius:var(--radius-control);background:#fdf1f1}.autosave-alert[hidden]{display:none}.autosave-alert-text{flex:1 1 260px;margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--error);font-weight:600}.panel-section{border:1px solid var(--divider);border-radius:var(--radius-panel);background:var(--surface);margin-bottom:var(--space-3);padding:0 var(--space-3) var(--space-3)}.panel-section>summary{cursor:pointer;padding:var(--space-3) 0;font-size:var(--text-sm);font-weight:600;color:var(--ink);list-style-position:inside}.panel-section>summary::marker{color:var(--ink-secondary)}.field{display:block;margin:var(--space-3) 0}.field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink);margin-bottom:var(--space-1)}.field-hint{display:block;font-size:var(--text-xs);color:var(--ink-secondary);margin-top:var(--space-1);font-variant-numeric:tabular-nums}.field-error{display:block;font-size:var(--text-xs);font-weight:600;color:var(--error);margin-top:var(--space-1)}.field-error:empty{display:none}.field-input{width:100%;min-width:0;height:var(--control-height);padding:0 var(--space-2);font-family:inherit;font-size:var(--text-sm);color:var(--ink);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-control);transition:border-color var(--motion) ease,background-color var(--motion) ease}.field-input[aria-invalid=true]{border-color:var(--error);border-width:2px}.field-input:hover:not(:disabled){border-color:var(--ink)}input.field-input[type=number]{font-variant-numeric:tabular-nums}select.field-input{height:var(--control-height)}.measure{display:flex;align-items:center;gap:var(--space-2)}.measure .field-input{flex:1 1 auto}.measure-unit{flex:0 0 auto;font-size:var(--text-sm);color:var(--ink-secondary);font-variant-numeric:tabular-nums}.row{display:flex;gap:var(--space-2);align-items:center}.row.wrap{flex-wrap:wrap}.example-row{flex-direction:column;align-items:stretch}.example-row .field-input{width:100%}.example-row .btn{align-self:flex-start}.row-sep{color:var(--ink-secondary)}.hint{margin:var(--space-2) 0 0;font-size:var(--text-xs);line-height:1.45;color:var(--ink-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-3);font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-control);cursor:pointer;white-space:nowrap;transition:background-color var(--motion) ease,border-color var(--motion) ease}.btn:hover:not(:disabled):not([aria-disabled=true]){background:var(--surface-sunken);border-color:var(--ink)}.btn:active:not(:disabled):not([aria-disabled=true]){background:var(--divider)}.btn:disabled,.btn[aria-disabled=true]{color:var(--ink-secondary);background:var(--surface-sunken);border-color:var(--divider);cursor:not-allowed}.btn svg{flex:0 0 auto}.btn-primary{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-primary:active:not(:disabled){background:var(--accent-hover)}.btn-danger{color:var(--error);border-color:var(--error)}.btn-danger:hover:not(:disabled){background:#fdf1f1;border-color:var(--error)}.btn-icon{min-width:var(--control-height);padding:0 var(--space-2)}.tool-btn.is-active{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.tool-btn.is-active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.palette-list{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-2)}.palette-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;padding:var(--space-2);border:1px solid var(--divider);border-radius:var(--radius-control)}.palette-row.is-active{border-color:var(--accent);background:var(--surface-sunken)}.swatch{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-2) 0 var(--space-1);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-control);font-family:inherit;font-size:var(--text-xs);font-weight:600;color:var(--ink);cursor:pointer}.swatch:hover{border-color:var(--ink)}.swatch[aria-pressed=true]{border-color:var(--accent);border-width:2px}.swatch-chip{width:20px;height:20px;border:1px solid var(--border-control);border-radius:4px}.swatch-state{font-variant-numeric:tabular-nums}.palette-label{flex:1 1 110px;min-width:96px;height:var(--control-height);padding:0 var(--space-2);font-family:inherit;font-size:var(--text-sm);color:var(--ink);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-control)}.palette-color{flex:0 0 48px;width:48px;height:var(--control-height);padding:2px;background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-control);cursor:pointer}.palette-count{flex:0 0 auto;margin-left:auto;font-size:var(--text-xs);color:var(--ink-secondary);text-align:right;font-variant-numeric:tabular-nums}.palette-row .swatch,.palette-row .btn-icon{flex:0 0 auto}.table-host{overflow-x:auto}.table-host:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}.data-table caption{text-align:left;font-size:var(--text-xs);color:var(--ink-secondary);padding-bottom:var(--space-1)}.table-caption{margin:0 0 var(--space-1);font-size:var(--text-xs);color:var(--ink-secondary)}.data-table th,.data-table td{padding:var(--space-1);border-bottom:1px solid var(--divider);text-align:left;white-space:nowrap}.data-table tbody td:first-child,.data-table tfoot th:first-child{max-width:92px;overflow:hidden;text-overflow:ellipsis}.data-table thead th{color:var(--ink-secondary);font-weight:600}.data-table tfoot th{color:var(--ink);font-weight:700;border-bottom:none;border-top:1px solid var(--border-control)}.data-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.data-table .strong{font-weight:700}.chip{display:inline-block;width:10px;height:10px;border:1px solid var(--border-control);border-radius:2px;vertical-align:middle}.notes{margin:var(--space-2) 0 0;padding-left:var(--space-4);font-size:var(--text-xs);line-height:1.45;color:var(--ink-secondary)}.notes li.warn{color:var(--warning-text)}.message-box{position:relative;margin-bottom:var(--space-3);padding:var(--space-2) calc(var(--control-height) + var(--space-3)) var(--space-2) var(--space-3);border:1px solid var(--divider);border-left-width:4px;border-radius:var(--radius-panel);background:var(--surface)}.message-box[hidden]{display:none}.message-box.is-info{border-left-color:var(--success)}.message-box.is-warn{border-left-color:var(--warning-text);background:var(--warning-bg)}.message-box.is-error{border-left-color:var(--error);background:#fdf1f1}.message-text{margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--ink)}.message-box.is-error .message-text{color:var(--error);font-weight:600}.message-details{margin:var(--space-1) 0 0;padding-left:var(--space-4);font-size:var(--text-xs);color:var(--ink-secondary)}.message-close{position:absolute;top:var(--space-1);right:var(--space-1);min-height:var(--control-height);min-width:var(--control-height);padding:0;font-size:var(--text-md);line-height:1}.disabled-reason{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--ink-secondary)}.visually-hidden{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (pointer: coarse){:root{--control-height: 44px;--toolbar-height: 52px}.field-input,.palette-label,.btn{font-size:var(--text-md)}}@media (max-width: 1023px){.app-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(320px,52vh) minmax(0,1fr);overflow-y:auto}.app-panel{border-left:none;border-top:1px solid var(--divider);overflow-y:visible}.app-toolbar{flex-wrap:nowrap}.header-title{display:none}}@media (max-width: 560px){#app{grid-template-rows:minmax(var(--header-height),auto) minmax(var(--toolbar-height),auto) minmax(0,1fr) auto}.app-toolbar{flex-wrap:wrap;gap:var(--space-1) var(--space-4);padding:var(--space-1) var(--space-3);overflow-x:visible}.toolbar-group{flex-wrap:wrap;flex:0 1 auto;min-width:0}.toolbar-group+.toolbar-group{padding-left:0;border-left:0}.app-header{gap:var(--space-2);padding:var(--space-1) var(--space-3)}.header-title{display:none}.app-main{grid-template-rows:minmax(260px,44vh) minmax(0,1fr)}}