:root{--nc-drafting-grey:#d7dbde;--nc-draft-white:#fff;--nc-runtime-black:#171414;--nc-latitude-blue:#3c4653;--nc-current-blue:#6885a6;--nc-overcast-white:#f4fcff;--nc-beacon-orange:#ed8452;--panel-bg:var(--nc-drafting-grey);--panel-chrome:var(--nc-drafting-grey);--panel-border:#c3c9cd;--preview-bg:var(--nc-draft-white);--text-strong:var(--nc-runtime-black);--text-muted:var(--nc-latitude-blue);--nav-orange:var(--nc-beacon-orange);--nav-orange-border:#ed845259;--nav-orange-soft:#ed845247;--nav-orange-ring:#ed84528c}@font-face{font-family:volksans Mono;src:url(/graph-generator/fonts/volksansMono-Normal.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:volksans Mono;src:url(/graph-generator/fonts/volksansMono-SemiBold.woff2)format("woff2");font-weight:600;font-display:swap}:root{color:var(--text-strong);background:var(--panel-bg);font-family:volksans Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;line-height:1.35}*{box-sizing:border-box}html{height:100%}body{height:100%;margin:0;overflow-x:hidden}#root{height:100%}.app-shell{grid-template-rows:1fr;grid-template-columns:282px 1fr;height:100%;min-height:0;max-height:100%;display:grid;overflow:hidden}.panel{--panel-chrome:var(--panel-bg);border-right:1px solid var(--panel-border);background:var(--panel-chrome);scrollbar-width:thin;scrollbar-color:#dad9d8 transparent;height:100%;min-height:0;padding:24px 16px 24px 18px;overflow:hidden auto}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-track{background:0 0}.panel::-webkit-scrollbar-thumb{background-color:#dad9d8;border:none;border-radius:0}.panel::-webkit-scrollbar-thumb:hover{background-color:#dad9d8}.panel::-webkit-scrollbar-corner{background:0 0}.panel-header{margin-bottom:16px}.panel-brand-row{align-items:flex-start;gap:10px;display:inline-flex}.panel-brand-mark{width:32px;height:auto;display:block}.panel-brand-wordmark{width:auto;height:23px;margin-top:8px;display:block}.panel-tagline{color:var(--text-strong);margin:10px 0 0;font-size:12px;line-height:normal}.tool-switcher{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;display:grid}button,select,input{font:inherit}button{border:1px solid var(--text-strong);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:0 0;border-radius:0;padding:7px 8px;font-size:12px}button:not(:disabled),select:not(:disabled),input[type=checkbox]:not(:disabled){cursor:pointer}input[type=range]:not(:disabled){cursor:ew-resize}input[type=number]:not(:disabled){cursor:text}button.active{background:var(--text-strong);border-color:var(--text-strong);color:var(--nc-draft-white)}.control-group{border:none;border-bottom:1px solid var(--nc-latitude-blue);background:0 0;border-radius:0;margin-bottom:12px;padding:0 0 8px}.control-group h3{text-transform:uppercase;letter-spacing:.06em;color:var(--text-strong);margin:0 0 8px;font-size:12px;font-weight:600}label{color:var(--text-muted);text-transform:lowercase;gap:2px;margin-bottom:7px;font-size:14px;display:grid}.label-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.section-heading-row{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.section-heading-row h3{margin-bottom:0}.field-shuffle-btn{letter-spacing:.05em;text-transform:lowercase;flex:none;width:auto;min-width:0;margin:0;padding:4px 8px;font-size:10px}.flow-subsection-marker{position:relative}.flow-marker-shuffle-btn{position:absolute;top:6px;right:8px}.flow-subsection-marker-title{padding-right:4.75rem}.field-presets-block{border-top:1px solid var(--nc-latitude-blue);margin-top:2px;padding-top:10px}.field-presets-block select{width:100%}.field-presets-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-strong);margin:0 0 6px;font-size:12px;font-weight:600}.inline-manual-toggle{color:var(--text-muted);align-items:center;gap:6px;font-size:14px;display:inline-flex}.inline-manual-toggle.figma-inline-toggle{width:auto;margin-bottom:0;display:inline-flex}.detail-subsection{margin-bottom:10px}.detail-subsection:last-child{margin-bottom:0}.flow-style-stack{gap:10px;margin-top:4px;display:grid}.flow-subsection{border:1px solid var(--text-strong);gap:2px;padding:8px 10px 6px;display:grid}.flow-subsection-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-strong);margin:0 0 6px;font-size:11px;font-weight:600}.flow-subsection>label:not(.flow-subsection-lock){margin-bottom:5px}.flow-subsection-lock{border-top:1px solid #dad9d8;margin-top:4px;margin-bottom:0;padding-top:6px}.flow-subsection-lock .island-labels-text{font-size:12px}.dots-toggle-row{color:var(--text-muted);text-transform:lowercase;cursor:pointer;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;font-size:14px;display:flex}.dots-inline-label{flex:1}.detail-shuffle-btn{text-transform:none;letter-spacing:.02em;width:100%;margin-top:2px;margin-bottom:0;font-size:11px}.island-global-block{border-bottom-color:var(--text-muted)}.island-individual-block{border-bottom:none;margin-bottom:12px}.island-individual-title{margin:0 0 6px}.island-individual-panel{border:1px solid var(--text-strong);gap:6px;padding:8px;display:grid}.island-tab-strip{align-items:stretch;gap:6px;display:flex}.island-tab-figma{text-transform:none;letter-spacing:.02em;flex:1 1 0;justify-content:center;align-items:center;height:32px;padding:4px;font-size:12px;display:inline-flex}.island-slider-tight{margin-bottom:0}.composition-dim-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.composition-dim-row>label{min-width:0}input.composition-field[type=number]{border:none;width:100%;min-width:0;max-width:100%;padding:2px 0}input[type=range]{appearance:none;background:0 0;width:100%;height:20px;margin:-7px 0}input[type=range]::-webkit-slider-runnable-track{border:1px solid var(--text-strong);background:linear-gradient(to right, var(--text-strong) 0 var(--fill,45%), #dad9d8 var(--fill,45%) 100%);height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;width:0;height:0}input[type=range]::-moz-range-thumb{border:none;width:0;height:0}input[type=range]::-moz-range-track{border:1px solid var(--text-strong);background:linear-gradient(to right, var(--text-strong) 0 var(--fill,45%), #dad9d8 var(--fill,45%) 100%);height:6px}.slider-row{grid-template-columns:1fr 40px;align-items:center;gap:6px;display:grid}.slider-value{color:var(--text-strong);text-align:center;background:0 0;border:none;border-radius:0;padding:0;font-size:14px}input[type=number],select{border:1px solid #0000;border-bottom-color:var(--text-strong);color:var(--text-strong);background:0 0;border-radius:0;padding:2px 0;font-size:16px}select.geometric-preset-select{border-bottom-color:#0000}input:disabled{opacity:.5;cursor:not-allowed}.inline-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.toggle{grid-template-columns:auto 1fr;align-items:center;gap:6px}input[type=checkbox]{appearance:none;background:0 0;border:none;width:24px;height:20px;margin:-7px 0;display:inline-block;position:relative}input[type=checkbox]:before{content:"";background:0 0;width:24px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #a5a3a1}input[type=checkbox]:checked:before{box-shadow:inset 0 0 0 1px var(--text-strong)}input[type=checkbox]:after{content:"";background:#a5a3a1;width:12px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}input[type=checkbox]:checked:after{background:var(--text-strong);left:auto;right:0}.export-actions{gap:8px;display:grid}.notice{color:var(--text-muted);margin:10px 0 2px;font-size:12px}.preview{--preview-chrome:#fff;background:var(--preview-chrome);flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;min-height:0;padding:0;display:flex}.preview-frame{width:100%;height:100%;min-height:0;box-shadow:none;background:0 0;border:none;border-radius:0;flex:1 1 0;padding:0;overflow:hidden}.preview-shell{width:100%;height:100%;min-height:0;position:relative}.preview-fixed-chrome{z-index:20;pointer-events:none;position:absolute;inset:0}.preview-fixed-chrome .export-floating-btn{pointer-events:auto}.preview-canvas{touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#dad9d8 transparent;overflow-anchor:none;overscroll-behavior:none;width:100%;height:100%;min-height:0;position:relative;overflow:auto}.preview-canvas::-webkit-scrollbar{width:6px;height:6px}.preview-canvas::-webkit-scrollbar-track{background:0 0}.preview-canvas::-webkit-scrollbar-thumb{background-color:#dad9d8;border:none;border-radius:0}.preview-canvas::-webkit-scrollbar-thumb:hover{background-color:#dad9d8}.preview-canvas::-webkit-scrollbar-corner{background:0 0}.preview-canvas.preview-canvas--space-pan{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.preview-canvas.preview-canvas--space-pan *{cursor:inherit}.preview-canvas.preview-canvas--space-pan.preview-canvas--space-pan-dragging{cursor:grabbing}.preview-composition-viewport{box-sizing:border-box;justify-content:center;align-items:center;width:max-content;min-width:100%;height:max-content;min-height:100%;padding:48px;display:flex}.preview-composition-pan-layer{flex:none;justify-content:center;align-items:center;display:flex}.preview-zoom-badge{z-index:10;color:var(--text-muted);background:var(--preview-chrome);border:1px solid var(--text-strong);-webkit-user-select:none;user-select:none;pointer-events:none;margin:0;padding:6px 10px;font-size:12px;line-height:1.2;position:absolute;top:24px;right:24px}.preview-composition-root{flex-shrink:0;position:relative}.preview-svg-host{border:1px solid var(--nav-orange-border);position:absolute;inset:0}.preview-canvas svg{width:100%;height:100%;display:block;overflow:visible}.preview-overlay-stack{z-index:10;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute;top:24px;left:24px}.export-floating{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.export-floating-row{gap:4px;display:flex}.export-floating-btn{text-transform:none;letter-spacing:.02em;background:var(--preview-chrome);width:114px;font-size:12px}.island-labels-row{cursor:pointer;align-items:center;gap:6px;width:100%;margin:0;display:flex}.island-labels-row.flow-marker-master-toggle{margin-bottom:14px}.island-labels-text{color:var(--text-muted);text-transform:lowercase;white-space:nowrap;font-size:14px;line-height:normal}.export-floating-notice{color:var(--text-muted);margin:0;font-size:12px}.island-handle{border:2px solid var(--nav-orange);background:var(--nav-orange-soft);z-index:3;cursor:grab;width:20px;height:20px;color:var(--nav-orange);border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:10px;font-weight:600;line-height:1;display:inline-flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #ffffffe6}.island-handle:active{cursor:grabbing}.island-handle.is-selected{border-color:var(--text-strong);background:var(--nav-orange);color:#fff;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--nav-orange-ring)}.island-handle-static{cursor:pointer}@media (width<=1100px){body{height:auto;min-height:100%;overflow-y:auto}#root{height:auto;min-height:100%}.app-shell{grid-template-rows:auto minmax(50vh,1fr);grid-template-columns:1fr;height:auto;min-height:100dvh;max-height:none;overflow:visible}.panel{border-right:none;border-bottom:1px solid var(--panel-border);height:auto;min-height:0;max-height:none}.preview{min-height:min(70vh,900px)}.preview-frame{flex:auto;min-height:min(70vh,900px)}}.small-screen-notice{display:none}@media (width<=1100px){.small-screen-notice{z-index:100;background:var(--panel-bg);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}}.small-screen-notice-card{border:1px solid var(--text-strong);background:var(--panel-bg);text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:320px;padding:32px 28px;display:flex}.small-screen-notice-mark{width:40px;height:auto}.small-screen-notice-text{text-transform:uppercase;letter-spacing:.08em;color:var(--text-strong);margin:0;font-size:13px;font-weight:600;line-height:1.5}.small-screen-notice-text:before{content:"[!] ";color:var(--nav-orange)}.small-screen-notice-btn{text-transform:lowercase;letter-spacing:.04em;padding:8px 14px;font-size:11px}