:root{--app-bg: #f3f4f6;--panel-bg: rgba(255, 255, 255, .94);--panel-strong: #ffffff;--panel-border: rgba(17, 24, 39, .11);--panel-muted: #6b7280;--text-strong: #111827;--text-soft: #4b5563;--accent: #111827;--accent-soft: rgba(17, 24, 39, .08);--canvas-bg: #f3f0e9;--shadow-soft: 0 6px 18px rgba(15, 23, 42, .05);--shadow-panel: 0 12px 28px rgba(15, 23, 42, .08);--toolbar-size: 88px;--inspector-width: 360px;--topbar-height: 56px;--status-height: 28px;--radius-lg: 18px;--radius-md: 14px;--radius-sm: 11px;--transition-fast: .16s ease}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--app-bg);color:var(--text-strong);font-family:Avenir Next,Segoe UI,sans-serif}body{min-height:100dvh}[hidden]{display:none!important}button,input[type=range],select{appearance:none;font:inherit}button{border:1px solid var(--panel-border);background:var(--panel-strong);color:var(--text-strong);border-radius:12px;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}button:hover{border-color:#11182733}button:focus-visible,select:focus-visible,input[type=range]:focus-visible{outline:2px solid rgba(17,24,39,.28);outline-offset:2px}svg{display:block}#app-shell{display:grid;grid-template-rows:var(--topbar-height) minmax(0,1fr) var(--status-height);width:100%;height:100dvh}#top-bar{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr) auto;align-items:center;gap:16px;height:var(--topbar-height);padding:0 16px;background:#f9fafbeb;border-bottom:1px solid var(--panel-border);backdrop-filter:blur(14px)}.topbar-brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#fff;border:1px solid var(--panel-border);box-shadow:none}.brand-mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.brand-copy{min-width:0}.brand-kicker,.section-label,.sheet-kicker,.rail-label,.action-group-label{margin:0;font-size:11px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--panel-muted)}.brand-title{margin:2px 0 0;font-size:16px;line-height:1.1;font-weight:700}#top-breadcrumb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0}.crumb-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--panel-border);color:var(--text-strong);font-size:12px;font-weight:600;white-space:nowrap}.crumb-pill--muted{color:var(--text-soft)}.crumb-separator{color:var(--panel-muted);font-size:13px}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.status-pill,.action-group{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--panel-border);color:var(--text-soft);font-size:12px;font-weight:600;white-space:nowrap}.seed-output{font-variant-numeric:tabular-nums;color:var(--text-strong)}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:11px;background:#fff;box-shadow:none}.action-button--ghost{background:#fff}.action-button:active{transform:translateY(1px)}.button-icon,.option-chip__icon,.tool-button__icon{display:inline-flex;align-items:center;justify-content:center}.button-icon svg,.option-chip__icon svg,.tool-button__icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#mobile-sheet-toggle{display:none}#workspace-grid{display:grid;grid-template-columns:var(--toolbar-size) minmax(0,1fr) var(--inspector-width);min-height:0}#tool-rail{display:flex;flex-direction:column;gap:14px;min-height:0;padding:16px 10px;background:#f9fafb;border-right:1px solid var(--panel-border)}.rail-head{padding:2px 4px 0}#brush-picker{display:flex;flex-direction:column;gap:8px}.tool-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:74px;padding:10px 6px;border-radius:16px;background:#fff;color:var(--text-soft)}.tool-button__icon{width:22px;height:22px}.tool-button__label{font-size:11px;font-weight:600;letter-spacing:.01em}.tool-button__shortcut{position:absolute;top:7px;right:7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#1118270f;color:var(--panel-muted);font-size:10px;line-height:18px;font-weight:700}.tool-button[data-active=true]{background:#eef0f3;color:var(--accent);border-color:#1118272e;box-shadow:inset 0 0 0 1px #1118270d}.tool-button[data-active=true] .tool-button__shortcut{background:#11182714;color:var(--accent)}#canvas-stage{min-width:0;min-height:0;padding:0;background:var(--canvas-bg)}#canvas-root{width:100%;height:100%;border-radius:0;overflow:hidden;background:var(--canvas-bg);box-shadow:none}canvas{display:block;cursor:crosshair}#inspector{min-height:0;background:#f9fafb;border-left:1px solid var(--panel-border)}#inspector-shell{display:flex;flex-direction:column;gap:12px;height:100%;padding:14px;overflow-y:auto}#mobile-sheet-handle,#mobile-sheet-header,#mobile-sheet-tabs,#mobile-sheet-scrim{display:none}.panel-card,.inspector-card,.control-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.panel-card{padding:14px}.panel-card--summary{padding:16px 14px}.panel-card--stack,.inspector-stack{display:flex;flex-direction:column;gap:12px}.panel-head,.inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.panel-title,.editor-title,#inspector-title{margin:4px 0 0;font-size:17px;line-height:1.2;font-weight:700;color:var(--text-strong)}#inspector-title{margin-top:6px}.panel-meta,.section-meta,.controls-note,.summary-copy{margin:0;font-size:12px;line-height:1.45;color:var(--text-soft)}#inspector-kicker{color:var(--panel-muted)}.summary-copy{margin-top:8px}.inspector-card{display:flex;flex-direction:column;gap:10px;padding:12px}.segmented-grid,.chip-grid{display:grid;gap:8px}.segmented-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-grid--wide{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-grid--dual{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-grid--triple,.chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.chip-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}.stack-row{display:flex;flex-direction:column;gap:8px}.option-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:10px 12px;text-align:center;font-size:12px;line-height:1.15;color:var(--text-soft);background:#fff}.option-chip--icon{flex-direction:column;gap:6px;min-height:58px;padding:9px 6px}.option-chip__label{display:block}.option-chip[data-active=true]{background:#eef0f3;color:var(--accent);border-color:#1118272e}.select-control{display:flex;flex-direction:column;gap:8px}.select-control span{font-size:12px;color:var(--text-soft)}.select-control select{min-height:42px;padding:0 12px;border-radius:11px;border:1px solid var(--panel-border);background:#fff;color:var(--text-strong)}#pigment-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pigment-chip{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-width:0;min-height:52px;padding:9px 10px;background:#fff}.pigment-chip__swatch{width:34px;height:34px;border-radius:11px;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 1px #fff6}.pigment-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text-soft)}.pigment-chip[data-active=true]{background:#eef0f3;border-color:#1118272e;box-shadow:inset 0 0 0 1px #1118270d}.pigment-chip[data-active=true] .pigment-chip__label{color:var(--accent)}#controls{display:flex;flex-direction:column;gap:12px}.control-card{overflow:hidden}.control-card summary{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 14px;list-style:none;cursor:pointer}.control-card summary::-webkit-details-marker{display:none}.control-card summary:after{content:"";width:8px;height:8px;margin-top:6px;border-right:1.8px solid var(--panel-muted);border-bottom:1.8px solid var(--panel-muted);transform:rotate(45deg);transition:transform var(--transition-fast)}.control-card[open] summary:after{transform:rotate(225deg)}.control-card__body{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px}.controls-title{margin:0;font-size:13px;font-weight:700;color:var(--text-strong)}.control{display:flex;flex-direction:column;gap:7px}.control span{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.25;color:var(--text-soft)}.control output{font-variant-numeric:tabular-nums;color:var(--text-strong)}input[type=range]{width:100%;height:6px;border-radius:999px;background:#1118271f;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid rgba(17,24,39,.2);box-shadow:0 1px 4px #0f172a24;cursor:pointer}input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid rgba(17,24,39,.2);box-shadow:0 1px 4px #0f172a24;cursor:pointer}#status-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;height:var(--status-height);padding:0 16px;background:#f8f9fce6;background:#f9fafb;border-top:1px solid var(--panel-border);color:var(--text-soft)}#status-bar p{margin:0;min-width:0;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#shortcut-status,#pressure-status{font-variant-numeric:tabular-nums}#mobile-sheet-scrim{position:fixed;inset:0;z-index:16;border:0;background:#1118272e}@media(max-width:900px){:root{--topbar-height: 58px}#app-shell{grid-template-rows:var(--topbar-height) minmax(0,1fr)}#top-bar{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:0 12px}.brand-title{font-size:14px}#top-breadcrumb{justify-content:flex-start;overflow:hidden}.crumb-pill{min-height:28px;padding:0 10px;font-size:11px}.topbar-actions{gap:8px}.status-pill,.action-group{min-height:32px;padding:0 10px;font-size:11px}#top-seed-group{display:none!important}#mobile-sheet-toggle{display:inline-flex}#workspace-grid{grid-template-columns:minmax(0,1fr)}#tool-rail{position:fixed;right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:18;padding:10px 12px;border:1px solid var(--panel-border);border-radius:20px;background:#f9fafb;box-shadow:var(--shadow-panel)}.rail-head{display:none}#brush-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.tool-button{min-height:66px;gap:6px;padding:8px 4px;border-radius:14px}.tool-button__label{font-size:10px}.tool-button__shortcut{display:none}#canvas-stage{padding:0}#canvas-root{border-radius:0}#inspector{position:fixed;right:12px;left:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:19;min-height:0;max-height:min(72vh,620px);border:1px solid var(--panel-border);border-radius:22px;background:#f9fafb;box-shadow:var(--shadow-panel);transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}#inspector[data-open=true]{transform:translateY(0);opacity:1;pointer-events:auto}#inspector-shell{gap:10px;padding:10px 10px calc(12px + env(safe-area-inset-bottom))}#mobile-sheet-handle{display:block;width:42px;height:5px;margin:2px auto 0;border-radius:999px;background:#66748a47}#mobile-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-sheet-title p{margin:0}#mobile-sheet-mode{margin-top:2px;font-size:14px;font-weight:700;color:var(--text-strong)}#mobile-sheet-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sheet-tab{min-height:40px;font-size:12px;font-weight:600;background:#fff}.sheet-tab[data-active=true]{background:#eef0f3;color:var(--accent);border-color:#1118272e}#inspector[data-tab=mode] [data-mobile-panel=color],#inspector[data-tab=mode] [data-mobile-panel=controls],#inspector[data-tab=color] [data-mobile-panel=mode],#inspector[data-tab=color] [data-mobile-panel=controls],#inspector[data-tab=controls] [data-mobile-panel=mode],#inspector[data-tab=controls] [data-mobile-panel=color]{display:none}#pigment-picker{grid-template-columns:1fr}.segmented-grid--wide,.chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chip-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}#status-bar{display:none}#mobile-sheet-scrim[data-open=true]{display:block}}