:root{--radius: 6px;--radius-md: 12px;--radius-lg: 20px;--row-radius: 10px;--control-radius: calc(var(--radius) - 1px);--col-w: clamp(20rem, 50cqi, 44rem);--panel-w: clamp(14rem, 28cqi, 18rem);--bg: oklch(12% .01 250);--surface: oklch(15% .025 250);--text: oklch(88% .01 250);--text-dim: color-mix(in oklch, var(--surface), var(--text) 67%);--text-low: color-mix(in oklch, var(--surface), var(--text) 40%);--bdr: color-mix(in oklch, var(--surface), var(--text) 12%);--bg-hover: color-mix(in oklch, white 10%, transparent);--bg-glass: color-mix(in oklch, var(--surface) 88%, transparent);--flow: oklch(70% .12 250);--accent: oklch(65% .1 290);--flow-hover: color-mix(in oklch, var(--flow), white 20%);--dm: oklch(55% .08 320);--danger: oklch(62% .15 25);--bg-flow: color-mix(in oklch, var(--flow) 5%, transparent);--flow-selected: color-mix(in oklch, var(--flow) 22%, transparent);--bg-layout: color-mix(in oklch, var(--accent) 5%, transparent);--sep-base: clamp(.125rem, .1rem + .25cqi, .25rem);--sep-mult: 1.2;--sep: calc(var(--sep-base) * var(--sep-mult));--gap-xs: var(--sep);--gap-sm: calc(var(--sep) * 3);--gap-md: calc(var(--sep) * 5);--gap-lg: calc(var(--sep) * 8);--pad-sm: calc(var(--sep) * 2.5);--pad-md: calc(var(--sep) * 6);--pad-lg: calc(var(--sep) * 10);--pad-page: clamp(1rem, 4cqi, 3rem);--touch-min: 2.75rem;--z-ambience: 0;--z-surface: 10;--z-surface-active: 20;--z-region: 30;--z-hud: 40;--z-popover: 50;--z-tooltip: 60;--z-dev: 70;--z-tile: 0;--z-tile-hover: 1;--z-tile-selected: 2;--z-tile-editor: 3;--z-tile-handle: 4;--dur-fast: .15s;--dur-slow: .35s;--delay-popover: 30ms;--delay-collapse: 60ms;--delay-chrome: .28s;--stagger-step: 40ms;--stagger-fine: 15ms;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;--font: var(--font-sans);--size: 1rem;--size-sm: .875rem;--size-md: var(--size);--size-lg: 1.125rem;--ls: -.02em;--weight: 400;--panel-blur: 12px;--glass-fill: var(--bg-glass);--glass-fill-strong: color-mix(in oklch, var(--surface) 94%, transparent);--glass-border: color-mix(in oklch, var(--surface), var(--text) 14%);--glass-border-strong: color-mix( in oklch, var(--flow) 35%, var(--glass-border) );--shadow-panel: 0 12px 32px oklch(0% 0 0 / .22), inset 0 1px 0 color-mix(in oklch, white 5%, transparent);--shadow-panel-active: 0 18px 38px oklch(0% 0 0 / .28), 0 0 0 1px oklch(70% .12 250 / .14);--shadow-tooltip: 0 10px 24px oklch(0% 0 0 / .24);--input-fill: color-mix(in oklch, var(--surface) 86%, transparent);--row-hover-fill: color-mix(in oklch, white 12%, transparent);--row-selected-fill: var(--flow-selected);--dot-fill: var(--bg);--dot-shadow: 0 0 4px color-mix(in oklch, var(--flow) 8%, transparent);--tile-shadow: 0 1px 8px color-mix(in oklch, black 20%, transparent);--tile-shadow-hover: 0 0 16px color-mix(in oklch, var(--flow) 18%, transparent), 0 2px 12px color-mix(in oklch, black 25%, transparent);color-scheme:dark}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0;scrollbar-color:var(--bdr) transparent;scrollbar-width:thin}html,body,#root{inline-size:100%;block-size:100%;overflow:hidden}body{font-family:var(--font);font-size:var(--size);font-weight:var(--weight);line-height:1.55;color:var(--text);letter-spacing:var(--ls);-webkit-font-smoothing:antialiased;background:var(--bg)}#root{display:flex;container-type:inline-size}::selection{color:#e4e4e4;background:color-mix(in oklch,var(--flow) 30%,transparent)}button,input{font-family:inherit;font-size:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:none}button,.cmd{cursor:pointer}button:disabled{cursor:default}.lbl{display:block;margin-block-end:var(--gap-xs);font-family:var(--font-mono);font-size:var(--size-sm);font-weight:600;text-transform:uppercase;color:var(--text-low)}.error{color:var(--danger)}.icon{display:inline-flex;flex-shrink:0;align-items:center;pointer-events:none;>svg{inline-size:var(--icon-size, 1.25em);block-size:var(--icon-size, 1.25em)}}:focus-visible{outline:1.5px solid var(--flow);outline-offset:2px}:where(.tab,.tools,.tooltip,.dev[data-open]>button,.dev[data-open]>div){background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-panel);backdrop-filter:blur(var(--panel-blur)) saturate(1.4)}:where(.cmd,.tool){display:flex;gap:var(--gap-sm);align-items:center;min-block-size:var(--touch-min);padding:var(--gap-xs) var(--pad-sm);font-size:var(--size-md);color:var(--text-dim);white-space:nowrap;border-radius:var(--row-radius);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}:where(.cmd,.tool):hover{color:var(--text);background:var(--row-hover-fill)}:where(.cmd.selected,.tool.selected,.tool.flash){color:var(--flow);background:var(--row-selected-fill)}:where(.space.feed>.tile:before,.tile>.dot){background:var(--dot-fill);border-radius:50%;box-shadow:var(--dot-shadow)}:where(.space.deck>.tile,.space.flow>.tile){position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:var(--tile-w);block-size:var(--tile-h);padding:var(--gap-sm) var(--pad-md);overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;cursor:grab;background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--tile-shadow),inset 0 1px color-mix(in oklch,white 6%,transparent);backdrop-filter:blur(var(--panel-blur)) saturate(1.4);transform:translate3d(var(--tile-x),var(--tile-y),0)}:where(.space.deck>.tile:hover,.space.flow>.tile:hover){border-color:var(--glass-border-strong);box-shadow:var(--tile-shadow-hover),inset 0 1px color-mix(in oklch,white 8%,transparent)}:root[data-panning]{cursor:grab}:root[data-panning]:active{cursor:grabbing}@media(prefers-reduced-motion:reduce){:root{--dur-fast: 0s;--dur-slow: 0s;--delay-popover: 0ms;--delay-collapse: 0ms;--delay-chrome: 0ms;--stagger-step: 0ms;--stagger-fine: 0ms}}.dev{inline-size:0;overflow:hidden;pointer-events:auto;transition:inline-size var(--dur-slow) var(--ease-out)}.dev[data-open]{inline-size:calc(var(--panel-w) + 2 * var(--pad-sm));max-block-size:calc(100dvh - 2 * var(--pad-sm));padding:var(--pad-sm);overflow-y:auto;>button{inline-size:100%;padding:var(--pad-sm);margin-block-start:var(--gap-sm);border-radius:var(--radius-md)}>div{min-inline-size:var(--panel-w);max-block-size:70dvh;padding:var(--pad-md);margin-block-start:var(--gap-sm);overflow-y:auto;border-radius:var(--radius-md);>table{inline-size:100%;margin-block-end:var(--gap-sm);border-collapse:collapse}& td{padding-block:0;padding-inline:var(--pad-sm)}& td:first-child{opacity:.6}>button{inline-size:100%;border-radius:var(--radius)}>button:disabled{opacity:.4}}}.tile{pointer-events:none;border:1px solid var(--bdr)}.space.feed>.tile{padding:var(--gap-sm);pointer-events:auto;border:none;border-radius:var(--radius);transition:background var(--dur-fast)}.space.feed>.tile:hover{background:var(--bg-hover)}.space{display:flex;flex-shrink:0;flex-direction:column;overflow:scroll;pointer-events:all}.space.feed{max-inline-size:var(--col-w);padding:var(--pad-md);margin-inline:auto;overflow-y:auto}.space.feed .space.feed{padding-inline-start:var(--gap-md);margin-inline-start:var(--gap-xs)}.contact{display:flex;align-items:center;gap:var(--gap-sm)}.sec{position:relative;z-index:var(--z-tile-editor);display:block;min-block-size:1.4em;line-height:1.65;color:var(--text);word-break:break-word;white-space:pre-wrap;caret-color:var(--flow);outline:none}.ctrl{display:contents}.actor{display:flex;flex-direction:column;scroll-behavior:auto;&:after{display:block;flex-shrink:0;block-size:50dvh;content:""}}.actor>.lbl{display:none}.guide{position:fixed;inset:0;z-index:var(--z-hud);pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.guide.sideline{opacity:0;pointer-events:none}.guide-rail{position:absolute;inset-block:0;inline-size:1px;pointer-events:auto;cursor:col-resize;background:linear-gradient(to bottom,transparent 0%,color-mix(in oklch,var(--flow) 10%,transparent) 12%,color-mix(in oklch,var(--flow) 16%,transparent) 50%,color-mix(in oklch,var(--flow) 10%,transparent) 88%,transparent 100%);transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);&:before{content:"";position:absolute;inset:0 -8px}}.guide-rail:hover,.guide.dragging .guide-rail{background:linear-gradient(to bottom,transparent 0%,color-mix(in oklch,var(--flow) 22%,color-mix(in oklch,white 30%,transparent)) 12%,color-mix(in oklch,var(--flow) 32%,color-mix(in oklch,white 20%,transparent)) 50%,color-mix(in oklch,var(--flow) 22%,color-mix(in oklch,white 30%,transparent)) 88%,transparent 100%);box-shadow:0 0 6px color-mix(in oklch,var(--flow) 12%,transparent)}.guide-dash{position:absolute;inset-inline-start:-3px;inline-size:7px;block-size:1px;background:color-mix(in oklch,var(--flow),white 30%);box-shadow:0 0 4px color-mix(in oklch,var(--flow) 40%,transparent)}.guide-check{position:absolute;inset-inline-end:8px;inset-block-start:50%;transform:translateY(-50%);inline-size:12px;block-size:12px;fill:none;stroke:color-mix(in oklch,var(--flow),white 35%);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px color-mix(in oklch,var(--flow) 50%,transparent));animation:guide-check-in 1.4s var(--ease-out) forwards}@keyframes guide-check-in{0%{opacity:0;transform:translateY(-50%) scale(.7)}12%{opacity:1;transform:translateY(-50%) scale(1)}65%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.guide.sideline{transition:none}.guide-check{animation:none;opacity:0}}.selection-box{position:fixed;z-index:var(--z-region);pointer-events:none;background:color-mix(in oklch,var(--flow) 14%,transparent);border:1.5px solid var(--flow);border-radius:var(--radius)}.tablet{position:absolute;inset-block-end:100%;inset-inline-start:calc(50% - (1.5rem + var(--pad-sm)) / 2);inline-size:min(22rem,calc(100vw - 2 * var(--pad-page)));min-inline-size:12rem;padding-block:var(--gap-xs);margin:0 0 var(--pad-sm);pointer-events:none;list-style:none;background:#050505d4;border-color:var(--glass-border-strong);border-radius:var(--radius-md);opacity:0;transform:translate(-50%) translateY(8px) scale(.96);transition:opacity .2s var(--delay-popover) var(--ease-in),transform .2s var(--delay-popover) var(--ease-in),box-shadow .2s var(--delay-popover) var(--ease-in)}.spacebar.tab .tablet{pointer-events:auto;box-shadow:var(--shadow-panel-active);opacity:1;transform:translate(-50%);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}.cmd{touch-action:pan-y;opacity:0;transform:translate(-6px);transition:opacity .18s var(--ease-in),transform .18s var(--ease-in),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);&:nth-last-child(2){transition-delay:var(--stagger-fine)}&:nth-last-child(3){transition-delay:calc(var(--stagger-fine) * 2)}&:nth-last-child(4){transition-delay:calc(var(--stagger-fine) * 3)}&:nth-last-child(5){transition-delay:calc(var(--stagger-fine) * 4)}&:nth-last-child(6){transition-delay:calc(var(--stagger-fine) * 5)}}.spacebar.tab .cmd{opacity:1;transform:none;transition-delay:0ms;transition-duration:.25s,.25s,var(--dur-fast),var(--dur-fast),var(--dur-fast);&:nth-child(2){transition-delay:var(--stagger-step)}&:nth-child(3){transition-delay:calc(var(--stagger-step) * 2)}&:nth-child(4){transition-delay:calc(var(--stagger-step) * 3)}&:nth-child(5){transition-delay:calc(var(--stagger-step) * 4)}&:nth-child(6){transition-delay:calc(var(--stagger-step) * 5)}}.cmd.selected{background:var(--bg-hover)}.options{display:flex;gap:var(--gap-xs);padding-inline-start:var(--gap-sm);margin-inline-start:auto}.option{display:flex;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;font-size:.625rem;color:var(--text-dim);border-radius:var(--control-radius);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);&:hover{color:var(--text);background:var(--bg-hover)}&.active{color:var(--flow);background:var(--flow-selected)}}.spacebar{position:absolute;inset-block-end:var(--pad-lg);inset-inline-start:50%;z-index:var(--z-hud);display:flex;flex-direction:column;gap:var(--pad-sm);align-items:center;inline-size:max-content;pointer-events:auto;transform:translate(-50%)}.spacebar.tab{z-index:var(--z-popover)}.spacebar>span{position:relative;display:flex;gap:var(--pad-sm);align-items:center}.io{display:block;inline-size:0;block-size:0;overflow:hidden;border:1px solid transparent;border-radius:var(--radius-lg);caret-color:var(--flow);outline:none;opacity:0;transition:inline-size .2s var(--ease-out),block-size .2s var(--ease-out),padding .2s var(--ease-out),opacity .2s var(--ease-out),background .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);&::placeholder{color:var(--text-low)}}.spacebar.bar>span>.io,.spacebar.tab>span>.io{inline-size:clamp(12rem,34cqi,18rem);block-size:var(--touch-min);padding-inline:var(--gap-md);background:var(--input-fill);border-color:var(--glass-border);box-shadow:var(--shadow-panel);opacity:1;backdrop-filter:blur(var(--panel-blur)) saturate(1.4);transition:inline-size var(--dur-slow) var(--ease-out),block-size var(--dur-slow) var(--ease-out),padding var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out),background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);&:focus{border-color:var(--flow);box-shadow:var(--shadow-panel-active)}}.spacebar.tab>span>.io{border-color:var(--glass-border-strong);box-shadow:var(--shadow-panel-active)}.pip{position:relative;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;background:radial-gradient(circle at 36% 32%,color-mix(in oklch,var(--flow),white 40%),var(--flow) 55%,color-mix(in oklch,var(--flow),black 25%));border-radius:50%;box-shadow:0 0 10px color-mix(in oklch,var(--flow) 40%,transparent),0 0 24px color-mix(in oklch,var(--flow) 12%,transparent);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);&:before{content:"";position:absolute;inset:calc((var(--touch-min) - 1.5rem) / -2)}&:hover{transform:scale(1.12);box-shadow:0 0 14px color-mix(in oklch,var(--flow) 55%,transparent),0 0 30px color-mix(in oklch,var(--flow) 20%,transparent)}}.pip:active{transform:scale(.88)}.spacebar.fab .pip{animation:pip-settle var(--delay-chrome) var(--ease-out),pip-glow 3s ease-in-out var(--delay-chrome) infinite}@keyframes pip-settle{0%{transform:scale(1.15)}}@keyframes pip-glow{0%,to{box-shadow:0 0 10px color-mix(in oklch,var(--flow) 40%,transparent),0 0 24px color-mix(in oklch,var(--flow) 12%,transparent)}50%{box-shadow:0 0 14px color-mix(in oklch,var(--flow) 55%,transparent),0 0 30px color-mix(in oklch,var(--flow) 20%,transparent)}}@media(prefers-reduced-motion:reduce){.spacebar.fab .pip{animation:none}}.hud{position:fixed;inset:0;z-index:var(--z-hud);pointer-events:none;isolation:isolate}.app{position:relative;display:grid;inline-size:100%;block-size:100%;overflow:clip;background:var(--bg);isolation:isolate}.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,oklch(70% .12 250 / .02),transparent 40%),radial-gradient(circle at 80% 80%,oklch(65% .1 290 / .02),transparent 40%)}.grain{position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02}.app>.glow,.app>.grain{z-index:var(--z-ambience)}.app>.actor>.ctrl>.space,.app>.space{position:relative}.app>.dev{position:fixed;inset-block-start:var(--pad-sm);inset-inline-end:var(--pad-sm);z-index:var(--z-dev);display:flex;justify-content:flex-end}