:root{--canopy-bg: #161625;--canopy-header-bg: #12121f;--canopy-panel-bg: #1a1a2c;--canopy-surface: #222238;--canopy-border: #28283e;--canopy-glow: rgba(130, 80, 223, .06);--canopy-fg: #e4e4f0;--canopy-text-secondary: #b8b8d0;--canopy-muted: #8888a8;--canopy-text-dim: #8a8aaa;--canopy-accent: #8250df;--canopy-accent-hover: rgba(130, 80, 223, .12);--canopy-accent-text: #b090e0;--canopy-focus-ring: #a070ef;--canopy-keyword: #c792ea;--canopy-identifier: #82aaff;--canopy-number: #f78c6c;--canopy-string: #c3e88d;--canopy-operator: #ff5370;--canopy-error: #cf222e;--canopy-error-text: #ef4444;--canopy-success: #34d058;--canopy-peer-blue: #58a6ff;--canopy-shadow-heavy: rgba(0, 0, 0, .5);--canopy-hover-overlay: rgba(255, 255, 255, .03);--canopy-accent-border: rgba(130, 80, 223, .2);--canopy-error-bg: rgba(207, 34, 46, .1);--canopy-error-border: rgba(207, 34, 46, .2);--canopy-scrollbar: rgba(255, 255, 255, .08);--canopy-scrollbar-hover: rgba(255, 255, 255, .15);--canopy-fg-inverse: #fff;--canopy-font-mono: "Iosevka", "Iosevka Web", monospace;--canopy-font-ui: "Manrope", system-ui, sans-serif;--text-label: .6875rem;--text-caption: .8125rem;--text-small: .875rem;--text-body: 1rem;--text-code: 1.125rem;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--leading-tight: 1.3;--leading-normal: 1.5;--leading-relaxed: 1.65;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--canopy-bg);color:var(--canopy-fg);font-family:var(--canopy-font-ui);font-size:var(--text-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}:focus-visible{outline:2px solid var(--canopy-focus-ring);outline-offset:2px}button:focus-visible,.action-btn:focus-visible,.tab:focus-visible,.tree-toggle:focus-visible{outline:2px solid var(--canopy-focus-ring);outline-offset:1px;border-radius:var(--radius-sm)}.app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;animation:fade-in var(--duration-slow) var(--ease-out-quart)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.toolbar{display:flex;align-items:center;padding:0 var(--space-lg);height:48px;background:var(--canopy-header-bg);border-bottom:1px solid var(--canopy-border);box-shadow:0 1px 0 var(--canopy-glow);gap:var(--space-sm);flex-shrink:0}.toolbar-title{font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--canopy-text-secondary);letter-spacing:-.01em;margin-right:var(--space-sm)}.toolbar-spacer{flex:1}.toolbar-btn,.tab,.panel-toggle,.example-btn{font-family:var(--canopy-font-ui);font-size:var(--text-caption);font-weight:var(--weight-medium);padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;color:var(--canopy-text-dim);transition:background var(--duration-fast) var(--ease-out-quart),color var(--duration-fast) var(--ease-out-quart);min-height:32px}.tab.active{background:var(--canopy-accent);color:var(--canopy-fg-inverse)}.toolbar-btn:hover,.tab:hover,.panel-toggle:hover,.example-btn:hover{background:var(--canopy-surface);color:var(--canopy-text-secondary)}.panel-toggle.active{background:var(--canopy-surface);color:var(--canopy-fg)}.workspace{display:flex;flex:1;overflow:hidden}.outline-panel{width:220px;background:var(--canopy-panel-bg);border-right:1px solid var(--canopy-border);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),width 0ms var(--duration-normal)}.panel-header{padding:var(--space-lg) var(--space-lg) var(--space-md)}.panel-label{font-size:var(--text-label);font-weight:var(--weight-semibold);color:var(--canopy-text-dim);letter-spacing:.1em;text-transform:uppercase;line-height:var(--leading-tight)}.panel-section{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--canopy-border);margin-top:auto}.tree-rows{padding:0 var(--space-sm);flex:1}.tree-item{display:flex;flex-direction:column}.tree-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-small);color:var(--canopy-text-secondary);line-height:var(--leading-tight);transition:background var(--duration-fast) var(--ease-out-quart)}.tree-row:hover{background:var(--canopy-hover-overlay)}.tree-row.selected{background:var(--canopy-accent-hover);color:var(--canopy-accent-text)}.tree-accent{width:3px;height:16px;border-radius:1px;flex-shrink:0;opacity:.7;transition:opacity var(--duration-fast) var(--ease-out-quart)}.tree-row:hover .tree-accent,.tree-row.selected .tree-accent{opacity:1}.tree-row.kind-lambda .tree-accent{background:var(--canopy-keyword)}.tree-row.kind-let .tree-accent{background:var(--canopy-identifier)}.tree-row.kind-module .tree-accent{background:var(--canopy-accent)}.tree-row.kind-app .tree-accent{background:var(--canopy-text-dim)}.tree-row.kind-int .tree-accent{background:var(--canopy-number)}.tree-row.kind-var .tree-accent{background:var(--canopy-identifier)}.tree-row.kind-if .tree-accent{background:var(--canopy-keyword)}.tree-row.kind-binop .tree-accent{background:var(--canopy-operator)}.tree-row.kind-error .tree-accent{background:var(--canopy-error)}.tree-toggle{font-size:var(--text-label);width:16px;text-align:center;background:none;border:none;color:var(--canopy-text-dim);cursor:pointer;padding:0;flex-shrink:0;transition:color var(--duration-fast) var(--ease-out-quart)}.tree-toggle:hover{color:var(--canopy-text-secondary)}.tree-label-text{font-family:var(--canopy-font-mono);font-size:var(--text-small);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-row.depth-1{padding-left:24px}.tree-row.depth-2{padding-left:40px}.tree-row.depth-3{padding-left:56px}.tree-row.depth-4{padding-left:72px}.tree-row.depth-5{padding-left:88px}.tree-row.depth-6{padding-left:104px}.tree-row.depth-7{padding-left:120px}.collapsed-badge{font-size:var(--text-label);color:var(--canopy-text-dim);margin-left:auto;background:var(--canopy-surface);padding:2px var(--space-sm);border-radius:var(--radius-sm);flex-shrink:0}.no-tree-note{font-size:var(--text-small);color:var(--canopy-muted);padding:var(--space-lg)}.peer-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-small);color:var(--canopy-text-secondary);padding:var(--space-xs) 0}.peer-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.peer-dot.connected{background:var(--canopy-string);box-shadow:0 0 6px var(--canopy-string);animation:pulse-connected 2s ease-in-out infinite}.peer-dot.connecting{background:var(--canopy-number);box-shadow:0 0 4px var(--canopy-number);animation:pulse-connecting 1s ease-in-out infinite}.peer-dot.offline{background:var(--canopy-muted);box-shadow:none;opacity:.6}.peer-dot.error{background:var(--canopy-operator);box-shadow:0 0 6px var(--canopy-operator)}@keyframes pulse-connected{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulse-connecting{0%,to{opacity:1}50%{opacity:.3}}.empty-state{padding:var(--space-lg)}.empty-state-text{font-size:var(--text-small);color:var(--canopy-text-dim);line-height:var(--leading-relaxed)}.hidden-trigger{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}.editor-wrapper{flex:1;overflow:hidden;position:relative;background:var(--canopy-bg)}canopy-editor{display:block;width:100%;height:100%}.inspector-panel{width:240px;background:var(--canopy-panel-bg);border-left:1px solid var(--canopy-border);overflow-y:auto;flex-shrink:0;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),width 0ms var(--duration-normal)}.inspector-section{padding:var(--space-lg)}.inspector-section+.inspector-section{border-top:1px solid var(--canopy-border)}.inspector-label{font-size:var(--text-label);font-weight:var(--weight-semibold);color:var(--canopy-text-dim);letter-spacing:.1em;text-transform:uppercase;line-height:var(--leading-tight);margin-bottom:var(--space-md)}.inspector-row{display:flex;gap:var(--space-sm);padding:var(--space-xs) 0;line-height:var(--leading-normal)}.inspector-key{font-size:var(--text-small);font-weight:var(--weight-regular);color:var(--canopy-muted);width:76px;flex-shrink:0;white-space:nowrap}.inspector-value{font-size:var(--text-small);font-weight:var(--weight-regular);color:var(--canopy-fg);font-family:var(--canopy-font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}.inspector-actions{display:flex;flex-direction:column;gap:var(--space-xs)}.action-btn{font-family:var(--canopy-font-ui);font-size:var(--text-small);font-weight:var(--weight-medium);padding:var(--space-sm) var(--space-md);background:var(--canopy-surface);border:1px solid transparent;border-radius:var(--radius-md);color:var(--canopy-text-secondary);cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-out-quart),border-color var(--duration-fast) var(--ease-out-quart),color var(--duration-fast) var(--ease-out-quart)}.action-btn:hover{background:var(--canopy-accent-hover);border-color:var(--canopy-accent-border);color:var(--canopy-accent-text)}.action-btn.danger{color:var(--canopy-error-text)}.action-btn.danger:hover{background:var(--canopy-error-bg);border-color:var(--canopy-error-border);color:var(--canopy-error-text)}.bottom-panel{background:var(--canopy-panel-bg);border-top:1px solid var(--canopy-border);max-height:200px;flex-shrink:0;display:grid;grid-template-rows:1fr;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),grid-template-rows var(--duration-normal) var(--ease-out-quart)}.bottom-tabs{display:flex;padding:0 var(--space-md);gap:var(--space-xs);height:36px;align-items:center;border-bottom:1px solid var(--canopy-border)}.bottom-tabs .tab{border-radius:0;border-bottom:2px solid transparent;padding-bottom:calc(var(--space-sm) - 2px)}.bottom-tabs .tab.active{background:transparent;color:var(--canopy-accent-text);border-bottom-color:var(--canopy-accent)}.bottom-content{padding:var(--space-md) var(--space-lg);overflow-y:auto;max-height:160px;font-size:var(--text-small);line-height:var(--leading-normal)}.no-problems{font-size:var(--text-small);color:var(--canopy-success)}.problem-item{padding:var(--space-xs) 0;font-size:var(--text-small)}.problem-text{color:var(--canopy-error-text);font-family:var(--canopy-font-mono);letter-spacing:-.01em}.state-row{display:flex;gap:var(--space-sm);padding:var(--space-xs) 0}.state-label{font-size:var(--text-small);font-weight:var(--weight-regular);color:var(--canopy-muted);width:88px}.state-value{font-size:var(--text-small);color:var(--canopy-fg);font-family:var(--canopy-font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}.graphviz-content{overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:var(--space-md)}.graphviz-content svg{max-width:100%;height:auto}.panel-scrim{display:none}.panel-visible{opacity:1;transform:translate(0) translateY(0);pointer-events:auto;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),width 0ms 0ms}.outline-panel.panel-hidden{opacity:0;transform:translate(-16px);pointer-events:none;width:0;overflow:hidden;border-color:transparent;padding:0;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),width 0ms var(--duration-normal),padding 0ms var(--duration-normal),border-color 0ms var(--duration-normal)}.inspector-panel.panel-hidden{opacity:0;transform:translate(16px);pointer-events:none;width:0;overflow:hidden;border-color:transparent;padding:0;transition:opacity var(--duration-normal) var(--ease-out-quart),transform var(--duration-normal) var(--ease-out-quart),width 0ms var(--duration-normal),padding 0ms var(--duration-normal),border-color 0ms var(--duration-normal)}.bottom-panel.panel-hidden{opacity:0;transform:translateY(8px);pointer-events:none;overflow:hidden;border:none;display:grid;grid-template-rows:0fr}.bottom-panel.panel-hidden>*{min-height:0;overflow:hidden}@media (max-width: 1024px){.outline-panel{width:180px}.inspector-panel{width:200px}}@media (max-width: 768px){.app-shell{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.toolbar{padding-left:max(var(--space-sm),env(safe-area-inset-left));padding-right:max(var(--space-sm),env(safe-area-inset-right));gap:var(--space-xs);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.toolbar-title{font-size:var(--text-small)}.example-btn{display:none}.toolbar-btn,.tab,.panel-toggle{min-height:44px;min-width:44px;padding:var(--space-md) var(--space-md)}.toolbar-spacer{flex:0 0 var(--space-xs)}.outline-panel,.inspector-panel{position:fixed;top:calc(48px + env(safe-area-inset-top,0px));bottom:0;z-index:20;width:min(280px,80vw);overflow-y:auto;opacity:1;pointer-events:auto}.panel-scrim{display:block;position:fixed;inset:0;top:calc(48px + env(safe-area-inset-top,0px));z-index:15;background:var(--canopy-shadow-heavy);opacity:1;pointer-events:auto;transition:opacity var(--duration-normal) var(--ease-out-quart)}.panel-scrim.scrim-hidden{opacity:0;pointer-events:none}.outline-panel{left:0;border-right:1px solid var(--canopy-border);box-shadow:8px 0 32px var(--canopy-shadow-heavy);transform:translate(0);transition:transform var(--duration-normal) var(--ease-out-quart)}.outline-panel.panel-hidden{transform:translate(-100%);box-shadow:none;pointer-events:none;width:min(280px,80vw);overflow:hidden;border:none;padding:0;opacity:1}.inspector-panel{right:0;border-left:1px solid var(--canopy-border);box-shadow:-8px 0 32px var(--canopy-shadow-heavy);transform:translate(0);transition:transform var(--duration-normal) var(--ease-out-quart)}.inspector-panel.panel-hidden{transform:translate(100%);box-shadow:none;pointer-events:none;width:min(280px,80vw);overflow:hidden;border:none;padding:0;opacity:1}.bottom-panel{max-height:45vh}.bottom-content{max-height:40vh}.tree-row.depth-1{padding-left:20px}.tree-row.depth-2{padding-left:32px}.tree-row.depth-3{padding-left:44px}.tree-row.depth-4{padding-left:56px}.tree-row.depth-5,.tree-row.depth-6,.tree-row.depth-7{padding-left:64px}.tree-row{padding-top:10px;padding-bottom:10px;min-height:44px}.tree-toggle{width:28px;min-height:28px;font-size:var(--text-small)}.panel-section{padding:var(--space-md) var(--space-lg)}}@media (max-width: 480px){.toolbar-title{display:none}.outline-panel,.inspector-panel,.outline-panel.panel-hidden,.inspector-panel.panel-hidden{width:100vw}}@media (hover: none){.tree-row:hover{background:transparent}.toolbar-btn:hover,.tab:hover,.panel-toggle:hover,.example-btn:hover{background:transparent;color:var(--canopy-text-dim)}.tab.active:hover{background:var(--canopy-accent);color:var(--canopy-fg-inverse)}.panel-toggle.active:hover{background:var(--canopy-surface);color:var(--canopy-fg)}}@media (max-width: 768px) and (orientation: landscape){.toolbar{height:40px}.outline-panel,.inspector-panel,.outline-panel.panel-hidden,.inspector-panel.panel-hidden,.panel-scrim{top:calc(40px + env(safe-area-inset-top,0px))}.bottom-panel{max-height:30vh}.bottom-content{max-height:25vh}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--canopy-scrollbar);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--canopy-scrollbar-hover)}.app-shell,.app-shell *{scrollbar-width:thin;scrollbar-color:var(--canopy-scrollbar) transparent}.action-overlay-scrim{position:fixed;inset:0;z-index:50;background:#0000004d}.action-overlay-panel{position:fixed;z-index:51;min-width:200px;max-width:280px;max-height:360px;overflow-y:auto;background:var(--canopy-panel-bg);border:1px solid var(--canopy-accent);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0006,0 0 0 1px #8250df26;padding:var(--space-xs) 0;animation:overlay-enter var(--duration-fast) var(--ease-out-quart)}@keyframes overlay-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.action-overlay-list{display:flex;flex-direction:column}.action-group-label{font-size:var(--text-label);font-weight:var(--weight-semibold);color:var(--canopy-text-dim);letter-spacing:.1em;text-transform:uppercase;padding:var(--space-sm) var(--space-lg) var(--space-xs);border-top:1px solid var(--canopy-border);margin-top:var(--space-xs)}.action-overlay-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);cursor:pointer;font-size:var(--text-small);color:var(--canopy-fg);transition:background var(--duration-fast) var(--ease-out-quart)}.action-overlay-item:hover{background:#8250df26}.action-overlay-item.danger{color:var(--canopy-error-text)}.action-overlay-item.danger:hover{background:var(--canopy-error-bg)}.action-mnemonic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-family:var(--canopy-font-mono);font-size:var(--text-label);font-weight:var(--weight-semibold);color:var(--canopy-accent);background:#8250df33;border-radius:var(--radius-sm);flex-shrink:0;text-transform:uppercase}.action-label-text{font-family:var(--canopy-font-ui);font-size:var(--text-small);white-space:nowrap}.name-prompt-container{padding:var(--space-md) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.name-prompt-label{font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--canopy-text-secondary)}.name-prompt-input-row{display:flex}.name-prompt-input{flex:1;font-family:var(--canopy-font-mono);font-size:var(--text-small);padding:var(--space-sm) var(--space-md);background:var(--canopy-surface);border:1px solid var(--canopy-border);border-radius:var(--radius-md);color:var(--canopy-fg);outline:none;transition:border-color var(--duration-fast) var(--ease-out-quart)}.name-prompt-input:focus{border-color:var(--canopy-accent);box-shadow:0 0 0 2px #8250df33}.name-prompt-input::placeholder{color:var(--canopy-text-dim)}.name-prompt-error{font-size:var(--text-label);color:var(--canopy-error-text);padding-top:var(--space-xs)}@media (max-width: 768px){.action-overlay-panel{min-width:240px;max-width:min(320px,90vw)}.action-overlay-item{min-height:44px;padding:var(--space-md) var(--space-lg)}.name-prompt-input{min-height:44px;font-size:var(--text-body)}}