#app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}#header{flex:0 0 auto;z-index:var(--z-nav)}#main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;z-index:var(--z-grid)}#Canvas{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:var(--bg);background-image:radial-gradient(var(--grid-dot) 1px,transparent 1px);background-size:20px 20px}#Canvas.Canvas--addingEdge{cursor:crosshair}.Node{width:100px;height:100px;position:absolute;-webkit-user-select:none;user-select:none;z-index:var(--z-nodes);font-family:var(--font-display)}.Node__content{width:100%;height:100%;position:relative;display:inline-flex;justify-content:center;align-items:center;background-color:var(--node-bg);color:var(--node-text);border:solid 3px var(--node-ring);border-radius:50%;box-sizing:border-box;box-shadow:var(--shadow-md);cursor:pointer;font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}.Node:hover .Node__content{border-color:var(--accent);transform:scale(1.03)}.Node--menu .Node__content,.Node--renaming .Node__content{border-color:var(--accent);box-shadow:var(--glow),var(--shadow-md)}.Node--endNode .Node__content{border-style:double;border-width:7px}.Node--dragging .Node__content{box-shadow:var(--shadow-lg);cursor:grabbing}.Node__addEdgeOverlay{display:none}.Canvas--addingEdge .Node__addEdgeOverlay{display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;cursor:pointer;z-index:var(--z-overlay)}.Node__renameInput{width:80px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:calc(var(--z-menu) + 1);font-family:var(--font-display);font-size:var(--fs-md);color:var(--text);background-color:var(--surface);border:none;border-radius:var(--radius-md)}.Node__renameInput:focus-visible{outline:none}.Node__renameActions{position:absolute;left:50%;top:100%;transform:translate(-50%,12px);display:flex;gap:var(--space-2);z-index:var(--z-menu)}.Node__renameBtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast) var(--ease-out)}.Node__renameBtn:hover{transform:scale(1.1)}.Node__renameBtn--confirm{background-color:var(--success);color:#fff}.Node__renameBtn--cancel{background-color:var(--surface-2);color:var(--text-muted)}.Node__subNodeBtn{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:46px;height:46px;color:var(--text-muted);background-color:var(--surface);border:solid 1px var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.3);z-index:var(--z-menu);transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.Node__subNodeBtn svg{width:22px;height:22px}.Node--menu .Node__subNodeBtn{opacity:1;pointer-events:auto;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1);transition-delay:calc(var(--i) * 18ms)}.Node--menu .Node__subNodeBtn:hover{color:var(--accent);border-color:var(--accent);background-color:var(--accent-soft);transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.14);transition-delay:0ms}.Node--menu .Node__subNodeBtn--danger:hover{color:var(--accent-contrast);border-color:var(--danger);background-color:var(--danger)}.Node--active .Node__content{background-color:var(--accent);color:var(--accent-contrast);border-color:var(--accent-hover);animation:node-pulse 1.2s ease-in-out infinite}.Node--accepted .Node__content{background-color:var(--success);color:#fff;border-color:var(--success);animation:node-pop .4s var(--ease-spring)}.Node--rejected .Node__content{background-color:var(--danger);color:#fff;border-color:var(--danger);animation:node-shake .4s ease-out}@keyframes node-pulse{0%,to{box-shadow:0 0 0 4px var(--accent-soft)}50%{box-shadow:0 0 0 12px transparent}}@keyframes node-pop{0%{transform:scale(1)}50%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes node-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.Arrow__label{position:absolute;transform:translate(-50%,-50%);z-index:var(--z-nodes);display:flex;align-items:center;justify-content:center;width:max-content;padding:var(--space-1) var(--space-2);line-height:1;font-family:var(--font-display);font-size:var(--fs-md);cursor:pointer;padding:var(--space-2) var(--space-3);font-family:var(--font-body);color:var(--text);background-color:var(--surface);border:solid 2px var(--border);border-radius:var(--radius-md);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.Arrow__label:focus,.Arrow__label:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--glow)}.Arrow__label--hidden{display:none}.Arrow__label--empty{min-width:26px;min-height:26px;padding:0;color:var(--text-muted);border-style:dashed;opacity:.75}.Arrow__label--empty:hover{opacity:1;color:var(--accent);border-color:var(--accent)}.Arrow__input{width:4ch;padding:0;text-align:center;font-size:inherit;font-family:inherit;color:var(--text);background:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.Button.AddNodeButton--hero{flex-direction:column;gap:var(--space-2);width:132px;height:132px;border-radius:var(--radius-lg);border:2px dashed var(--border);color:var(--accent);background-color:var(--surface);box-shadow:var(--shadow-md);font-size:var(--fs-md)}.Button.AddNodeButton--hero:hover{border-color:var(--accent);background-color:var(--accent-soft)}.Button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);letter-spacing:.3px;white-space:nowrap;border-radius:var(--radius-pill);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.Button:hover{transform:translateY(-1px) scale(1.04)}.Button:active{transform:translateY(0) scale(.97)}.Button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none}.Button--md{height:40px;padding:0 var(--space-4)}.Button--sm{height:32px;padding:0 var(--space-3);font-size:var(--fs-xs)}.Button--primary{color:var(--accent-contrast);background-color:var(--accent);box-shadow:var(--shadow-sm)}.Button--primary:hover{background-color:var(--accent-hover)}.Button--ghost{color:var(--text);background-color:var(--surface-2)}.Button--ghost:hover{color:var(--accent);background-color:var(--accent-soft)}.Button--danger{color:var(--danger);background-color:var(--danger-soft)}.Button--danger:hover{color:var(--accent-contrast);background-color:var(--danger)}.Button--icon{width:40px;height:40px;padding:0;color:var(--text-muted);background-color:var(--surface-2)}.Button--icon:hover{color:var(--accent);background-color:var(--accent-soft)}.Button--icon.Button--sm{width:32px;height:32px}.Navbar{height:var(--bar-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);background-color:var(--surface);border-bottom:solid 1px var(--border)}.Navbar__brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--accent);-webkit-user-select:none;user-select:none;cursor:default}.Navbar__logo{flex:none;display:block;color:var(--accent)}.Navbar__wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);line-height:1;letter-spacing:.5px}.Navbar__themeToggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-pill);color:var(--text-muted);background-color:var(--surface-2);transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.Navbar__themeToggle:hover{transform:translateY(-1px) scale(1.04)}.Navbar__themeToggle:active{transform:translateY(0) scale(.97)}.Navbar__themeToggle:hover{color:var(--accent);background-color:var(--accent-soft)}.Toolbar{height:var(--bar-height);flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);background-color:var(--surface);border-bottom:solid 1px var(--border);color:var(--text)}.Toolbar__group{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}.Toolbar__divider{flex:0 0 auto;width:1px;height:32px;background-color:var(--border)}.Toolbar__result{padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:800;letter-spacing:1px;white-space:nowrap}.Toolbar__result--running{color:var(--accent);background-color:var(--accent-soft)}.Toolbar__result--accepted{color:var(--accent-contrast);background-color:var(--success);box-shadow:0 0 16px var(--success-soft)}.Toolbar__result--rejected{color:var(--accent-contrast);background-color:var(--danger);box-shadow:0 0 16px var(--danger-soft)}.InputSequence{display:flex;align-items:center;gap:var(--space-3);flex:1 1 auto;min-width:0;height:100%}.InputSequence__add{flex:0 0 auto;width:220px;height:40px;padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text);background-color:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-md);outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.InputSequence__add:focus{border-style:solid;border-color:var(--accent);box-shadow:var(--glow)}.InputSequence__add::placeholder{color:var(--text-muted)}.InputSequence__list{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-1);flex:1 1 auto;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.InputSequence__list::-webkit-scrollbar{height:6px}.InputSequence__list::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:var(--radius-pill)}.InputSequence__hint{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.SymbolChip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:40px;padding:0 var(--space-3);box-sizing:border-box;font-family:var(--font-display);font-size:var(--fs-md);color:var(--text);background-color:var(--surface-2);border:solid 2px var(--border);border-radius:var(--radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.SymbolChip__value{line-height:1;pointer-events:none}.SymbolChip__remove{position:absolute;top:-7px;right:-7px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--accent-contrast);background-color:var(--text-muted);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}.SymbolChip__remove:hover{background-color:var(--danger);transform:scale(1.18)}.SymbolChip--dragging{cursor:grabbing;border-color:var(--accent);box-shadow:var(--shadow-lg);z-index:1}.SymbolChip--consumed{opacity:.4}.SymbolChip--cursor{color:var(--accent-contrast);background-color:var(--accent);border-color:var(--accent-hover);transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-md)}.SymbolChip--accepted{color:#fff;background-color:var(--success);border-color:var(--success)}.SymbolChip--rejected{color:#fff;background-color:var(--danger);border-color:var(--danger)}.SymbolChip--locked{cursor:default}.ErrorBoundary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);min-height:100vh;padding:var(--space-6);text-align:center;background-color:var(--bg);color:var(--text)}.ErrorBoundary__title{margin:0;font-family:var(--font-display);font-size:var(--fs-2xl)}.ErrorBoundary__body{margin:0;max-width:42ch;color:var(--text-muted);font-size:var(--fs-md)}.ErrorBoundary__button{transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);background-color:var(--accent);color:var(--accent-contrast);font-weight:700}.ErrorBoundary__button:hover{transform:translateY(-1px) scale(1.04)}.ErrorBoundary__button:active{transform:translateY(0) scale(.97)}.ErrorBoundary__button:focus-visible{outline:none;box-shadow:var(--glow)}:root{--bg: #eae4f8;--surface: #ffffff;--surface-2: #f0ecfb;--text: #2e2a3f;--text-muted: #7a7690;--border: #e6e1f5;--accent: #7c5cff;--accent-hover: #6a49f2;--accent-soft: #ece7ff;--accent-contrast: #ffffff;--success: #16a34a;--success-soft: #dcfce7;--danger: #f43f5e;--danger-soft: #ffe4e9;--node-bg: var(--surface);--node-ring: #6f61b8;--node-text: var(--text);--edge: #8478b0;--grid-dot: #cabce9;--bg-white: var(--bg);--bg-blue: var(--surface-2);--grey: var(--text);--grey-blue: var(--surface-2);--cyan: var(--accent);--sky-blue: var(--accent);--light-blue: var(--accent-soft);--dark-blue: var(--accent);--font-families: var(--font-body);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-pill: 999px;--fs-xs: 12px;--fs-sm: 14px;--fs-base: 16px;--fs-md: 18px;--fs-lg: 22px;--fs-xl: 28px;--fs-2xl: 36px;--font-display: "Fredoka", "Concert One", system-ui, sans-serif;--font-body: "Nunito", "Roboto", system-ui, -apple-system, sans-serif;--shadow-sm: 0 1px 3px rgba(46, 42, 63, .08);--shadow-md: 0 6px 18px rgba(46, 42, 63, .12);--shadow-lg: 0 14px 40px rgba(46, 42, 63, .18);--glow: 0 0 0 4px var(--accent-soft);--z-grid: 0;--z-edges: 5;--z-nodes: 100;--z-menu: 400;--z-overlay: 1000;--z-nav: 1100;--dur-fast: .12s;--dur-base: .2s;--dur-slow: .32s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--bar-height: 68px;color:var(--text);background-color:var(--bg);font-family:var(--font-body);line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}:root[data-theme=dark]{--bg: #16141f;--surface: #211d2e;--surface-2: #2b2640;--text: #ece9f5;--text-muted: #a29db8;--border: #35304a;--accent: #9b83ff;--accent-hover: #ac97ff;--accent-soft: #2e2748;--accent-contrast: #16141f;--success: #34d399;--success-soft: #123524;--danger: #fb7185;--danger-soft: #3d1622;--node-bg: #2b2640;--node-ring: #8b7fc4;--edge: #8379ac;--grid-dot: #322c4a;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 6px 18px rgba(0, 0, 0, .45);--shadow-lg: 0 14px 40px rgba(0, 0, 0, .55)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:var(--bg);color:var(--text)}body,.Navbar,.Toolbar,#Canvas{transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}button{all:unset;display:inline-block;box-sizing:border-box;font-family:var(--font-body);cursor:pointer}input[type=text]:focus-visible{outline:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}