:root{--bg: #faf8f3;--fg: #2a2a2a;--line: #d8d4cb;--muted: #888;--accent: #6b8e7f;--pane-bg: #fdfcf8;--danger: #c0392b}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,sans-serif;color:var(--fg);background:var(--bg)}#app{display:grid;grid-template-columns:1fr 1fr;height:100vh}#compose-pane,#render-pane{display:flex;flex-direction:column;background:var(--pane-bg);position:relative;overflow:hidden;min-width:0}#compose-pane{border-right:1px solid var(--line)}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1rem;font-size:.8rem;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bg);flex-shrink:0;height:2.2rem}.pane-glyph{font-family:Georgia,Times New Roman,serif;font-size:1.4rem;font-weight:500;color:var(--accent);line-height:1}.header-btn{background:none;border:1px solid var(--line);color:var(--muted);font-family:inherit;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:3px;cursor:pointer;transition:border-color .1s,color .1s}.header-btn:hover{border-color:var(--accent);color:var(--accent)}.header-btn-group{display:inline-flex;gap:.3rem}#palette{position:absolute;top:2.2rem;left:0;bottom:0;width:180px;border-right:1px solid var(--line);padding:.75rem .5rem;overflow-y:auto;font-size:.85rem;background:var(--pane-bg)}.palette-category{margin-bottom:1rem;padding-left:.4rem;border-left:3px solid transparent;transition:border-color .1s}.palette-category[data-role=vectors]{border-left-color:#7896b4}.palette-category[data-role=renderables]{border-left-color:#dcaa5a}.palette-category[data-role="canvas & effects"]{border-left-color:#8caa8c}.palette-category[data-role="where we go"]{border-left-color:#966e91}.palette-category[data-role=modifiers]{border-left-color:#6e5546}.palette-category[data-role=colors]{border-left-color:#00000014}.palette-category h3{margin:0 0 .4rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.palette-items{display:grid;grid-template-columns:repeat(auto-fill,44px);gap:.4rem}.palette-item{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:6px;cursor:grab;overflow:hidden;-webkit-user-select:none;user-select:none;transition:border-color .1s,box-shadow .1s}.palette-item:hover{border-color:var(--accent);box-shadow:0 1px 4px #6b8e7f33}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.palette-item:focus-visible,.header-btn:focus-visible,.dial-panel-toggle:focus-visible,.dial-panel-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.dial-row input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.palette-item:active{cursor:grabbing}.palette-item img{display:block;width:100%;height:100%;object-fit:contain}.palette-placeholder{font-size:.7rem;color:var(--muted);font-style:italic;text-align:center}.palette-builtin{font-size:1.5rem;color:var(--accent);font-weight:500;line-height:1}.palette-modifier-item{border-style:dashed;background:#fbf8f3}.palette-modifier-item .palette-builtin{font-size:1.1rem}.palette-color-item{border:none;background:transparent;padding:4px}.palette-swatch{width:100%;height:100%;border-radius:50%;box-shadow:0 1px 3px #0000001f;transition:transform .1s ease-out}.palette-color-item:hover .palette-swatch{transform:scale(1.12)}g.node.is-color-drop-target .node-bg{stroke-width:3;filter:drop-shadow(0 0 6px rgba(150,110,145,.6))}g.node-mod-badge circle{transition:stroke-width .1s ease-out,fill .1s ease-out}g.node-mod-badge:hover circle{stroke-width:4;fill:#f4ece0}#compose-canvas{flex:1;margin-left:180px;position:relative;overflow:hidden}#compose-canvas svg{width:100%;height:100%;display:block}g.node{cursor:move}g.node:hover .node-bg{stroke:var(--accent);stroke-width:2}g.node.arrow-valid-target .node-bg{stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(107,142,127,.6))}g.node.arrow-invalid-target .node-bg{stroke:var(--danger);stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(192,57,43,.4))}g.node.arrow-invalid-target{cursor:not-allowed}g.node text{pointer-events:none;-webkit-user-select:none;user-select:none}g.edge .edge-mod-icons{pointer-events:all;-webkit-user-select:none;user-select:none}g.edge .edge-mod-icon circle{transition:stroke-width .12s ease-out,fill .12s ease-out}g.edge .edge-mod-icon:hover circle{stroke-width:2;fill:#f4ece0}g.edge.is-mod-drop-target .edge-visible{stroke-width:3;filter:drop-shadow(0 0 4px #87b095)}g.edge.is-mod-drop-invalid .edge-visible{stroke:#c47878;filter:drop-shadow(0 0 4px #c47878)}g.edge .edge-visible{transition:stroke-width .12s ease-out}g.edge:hover .edge-visible{stroke-width:2}g.edge.is-composition .edge-visible{stroke-width:2.5}g.edge.is-composition:hover .edge-visible{stroke-width:3.5}g.edge .edge-mid{transition:r .12s ease-out,stroke-width .12s ease-out}g.edge:hover .edge-mid{r:6;stroke-width:2}#render-frame{flex:1;border:none;background:#fff;width:100%;min-height:0}#dial-panel{position:absolute;bottom:.6rem;right:.6rem;z-index:10}.dial-panel-inner{background:#f7f1e6eb;border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 10px #00000014;padding:.4rem;min-width:180px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dial-panel-inner.is-collapsed .dial-panel-body{display:none}.dial-panel-inner.is-collapsed{min-width:0}.dial-panel-header{display:flex;justify-content:space-between;align-items:center;gap:.3rem;margin-bottom:.3rem}.dial-panel-toggle,.dial-panel-reset{background:none;border:1px solid var(--line);color:var(--muted);font-size:.85rem;width:1.4rem;height:1.4rem;border-radius:3px;cursor:pointer;line-height:1;padding:0}.dial-panel-toggle:hover,.dial-panel-reset:hover{color:var(--accent);border-color:var(--accent)}.dial-panel-body{display:flex;flex-direction:column;gap:.25rem}.dial-row{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:.65rem;color:var(--muted)}.dial-icons{display:inline-flex;align-items:center;gap:.15rem;width:2.2rem;flex-shrink:0}.dial-glyph-img{width:1rem;height:1rem;object-fit:contain;opacity:.85}.dial-sym{font-size:.85rem;line-height:1;color:var(--accent)}.dial-row input[type=range]{flex:1;height:1rem;margin:0;accent-color:var(--accent)}