:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--chrome-bg-app: #121212;--chrome-bg-surface: #1a1a1a;--chrome-bg-panel: #1e1e1e;--chrome-bg-raised: #262626;--chrome-bg-canvas-surround: #161616;--chrome-border: #333333;--chrome-border-strong: #4a4a4a;--chrome-text: #eaeaea;--chrome-text-muted: #999999;--chrome-text-faint: #666666;--chrome-accent: #4da3ff;--chrome-accent-soft: #2d4a6b;--chrome-accent-hover: #6db5ff;--chrome-danger: #c0392b;--chrome-warning: #e0b04d;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--focus-ring: 0 0 0 2px var(--chrome-accent);--control-height: 32px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);color:var(--chrome-text);background:var(--chrome-bg-app)}button,input,select,textarea{font-family:inherit;font-size:var(--text-sm);color:var(--chrome-text)}label{display:inline-flex;align-items:center;gap:var(--space-1)}button{background:var(--chrome-bg-raised);border:1px solid var(--chrome-border);border-radius:var(--radius-sm);height:var(--control-height);padding:0 var(--space-3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .1s ease,border-color .1s ease}button:hover:not(:disabled){background:var(--chrome-border-strong);border-color:var(--chrome-border-strong)}button:active:not(:disabled){background:var(--chrome-accent-soft)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{background:var(--chrome-bg-raised);border:1px solid var(--chrome-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2)}textarea{padding:var(--space-2)}input[type=text],input[type=number],select{height:var(--control-height);padding:0 var(--space-2)}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;background-size:14px;padding-right:calc(var(--space-2) * 2 + 14px)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--chrome-border-strong)}input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}input[type=checkbox],input[type=radio]{background:initial;border:initial;padding:0;cursor:pointer}input[type=color]{padding:0;cursor:pointer}input[type=range]{background:transparent;border:none;padding:0;min-width:0}.panel{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);color:var(--chrome-text)}.btn{background:var(--chrome-bg-raised);color:var(--chrome-text);border:1px solid var(--chrome-border)}.btn.active{background:var(--chrome-accent-soft);border-color:var(--chrome-accent);color:var(--chrome-accent)}.btn.active:hover:not(:disabled){background:var(--chrome-accent-soft);border-color:var(--chrome-accent-hover)}.btn-primary{background:var(--chrome-accent);border-color:var(--chrome-accent);color:#06121e;font-weight:500}.btn-primary:hover:not(:disabled){background:var(--chrome-accent-hover);border-color:var(--chrome-accent-hover)}.btn-secondary{background:var(--chrome-bg-raised);border:1px solid var(--chrome-border-strong);color:var(--chrome-text)}.icon-btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--chrome-text-muted)}.icon-btn:hover:not(:disabled){background:var(--chrome-bg-raised);color:var(--chrome-text)}.icon-btn.active{background:var(--chrome-accent-soft);border-color:var(--chrome-accent);color:var(--chrome-accent)}.row{display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);transition:background-color .1s ease}.row:hover{background:var(--chrome-bg-raised)}.row.active{background:var(--chrome-accent-soft);border:1px solid var(--chrome-accent)}.cell{border-radius:var(--radius-sm);transition:background-color .1s ease,border-color .1s ease}.cell:hover{background:var(--chrome-bg-raised)}.cell.active{background:var(--chrome-accent-soft);border-color:var(--chrome-accent)}.tab-bar{display:flex;border-bottom:1px solid var(--chrome-border)}.tab-button{flex:1;background:transparent;border:none;border-radius:0;border-bottom:2px solid transparent;color:var(--chrome-text-muted);padding:var(--space-2) var(--space-2);font-size:var(--text-xs)}.tab-button:hover:not(:disabled){background:var(--chrome-bg-raised);color:var(--chrome-text)}.tab-button.active{color:var(--chrome-accent);border-bottom-color:var(--chrome-accent)}.manual-content a{color:var(--chrome-accent);text-decoration:none}.manual-content a:hover{color:var(--chrome-accent-hover);text-decoration:underline}.app-shell{display:flex;flex-direction:column;height:100vh}.app-shell--dimmed{filter:brightness(.35) saturate(.75);pointer-events:none}.startup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#00000059}.startup-overlay__panel{background:var(--chrome-bg-panel);border:1px solid var(--chrome-border-strong);border-radius:var(--radius-md);box-shadow:0 8px 24px #00000080}.app-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--chrome-bg-surface);border-bottom:1px solid var(--chrome-border)}.app-logo{font-size:var(--text-lg);font-weight:500;margin:0}.app-context-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--chrome-bg-panel);border-bottom:1px solid var(--chrome-border);font-size:var(--text-xs);color:var(--chrome-text-muted)}.context-bar-divider{width:1px;align-self:stretch;background:var(--chrome-border);margin:0 var(--space-2)}.app-workspace{display:flex;flex:1;min-height:0}.tool-rail{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--chrome-bg-panel);border-right:1px solid var(--chrome-border)}.tool-rail-divider{width:20px;height:1px;background:var(--chrome-border);margin:var(--space-1) 0}.canvas-region{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0}.canvas-editor-area{flex:1;min-height:0;position:relative;overflow:hidden}.canvas-region-stretch{align-self:stretch;width:100%;flex-shrink:0}.resize-handle-row{height:6px;flex-shrink:0;cursor:row-resize;background:transparent;border-radius:var(--radius-sm)}.resize-handle-row:hover{background:var(--chrome-accent)}.resize-handle-col{width:6px;flex-shrink:0;cursor:col-resize;background:transparent;border-radius:var(--radius-sm)}.resize-handle-col:hover{background:var(--chrome-accent)}.swatch{transition:transform .1s ease}.swatch:hover{transform:scale(1.1)}.side-panel{flex-shrink:0;display:flex;background:var(--chrome-bg-panel)}.side-panel-content{flex:1;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--chrome-border);overflow:auto}.tile-preview-cell{line-height:0}.tile-preview-cell svg{display:block;width:100%;height:100%}