@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--bg:#100e17;--panel:#1a1725;--line:#332b43;--text:#f7f3ff;--muted:#bcb2ca;--purple:#bd9aff;--bright:#8b5cf6;--soft:#211733;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);scroll-behavior:smooth}
*{box-sizing:border-box} body{margin:0} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} button{cursor:pointer} button:disabled{opacity:.6;cursor:default} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #d5bfff;outline-offset:3px}
button,.button{border:1px solid var(--line);border-radius:10px;background:#211b2d;color:var(--text);padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s,filter .25s,box-shadow .25s;white-space:nowrap}
button:hover,.button:hover{background:#35274a;transform:translateY(-1px)} button:active,.button:active{transform:scale(.97);filter:hue-rotate(14deg)} .primary{background:linear-gradient(165deg,#ab78f7,#6e3cdb);border-color:#b68ff5;box-shadow:inset 0 1px #ddc4fa80,0 6px 20px #7541e633;color:white;font-weight:700}.primary:hover{background:linear-gradient(165deg,#ba8dfa,#7b48e5);box-shadow:inset 0 1px #e5d0fb,0 7px 24px #7541e66a}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:9px;background:#100d19;color:var(--text);padding:10px 12px} textarea{min-height:145px;resize:vertical} label{display:grid;gap:7px;font-size:.87rem;color:var(--muted)} h1,h2,h3,p{margin:0} p{line-height:1.65;color:var(--muted)} .muted{color:var(--muted)} .small{font-size:.82rem} .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.site-header,.site-footer{max-width:1280px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.site-header nav{display:flex;gap:26px;color:var(--muted);font-size:.9rem}.brand{display:inline-flex;gap:9px;align-items:center;font-size:1.13rem;font-weight:700;letter-spacing:-.035em}.brand b{font-size:1.55rem;color:#c6a4ff;text-shadow:0 0 18px #a066ff}.site-footer{border-top:1px solid var(--line);margin-top:45px;font-size:.83rem;color:var(--muted)}
.hero{max-width:1280px;margin:30px auto 0;padding:24px 32px 40px;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:35px}.eyebrow{display:block;color:#d1b7ff;text-transform:uppercase;letter-spacing:.16em;font-size:.73rem;font-weight:700;margin-bottom:13px}.hero h1{font:normal clamp(4rem,7.1vw,7rem)/.91 'Instrument Serif',Georgia,serif;letter-spacing:-.04em}.hero h1 em{color:#c8a5ff}.hero p{max-width:420px;margin:24px 0;font-size:1.03rem}.hero-art{min-height:370px;aspect-ratio:1.38;border-radius:28px;border:1px solid #49345d;background:#191127 url('/hero.webp') center/cover;box-shadow:0 30px 80px #07050e99}
.section{max-width:1280px;margin:auto;padding:46px 32px}.section h2{font:normal clamp(2.8rem,5vw,4.4rem)/1 'Instrument Serif',Georgia,serif;margin-bottom:14px}.section-intro{margin-bottom:26px;max-width:650px}.showcase,.plans{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}.plans{grid-template-columns:repeat(4,1fr)}.surface,.plan,.card{padding:21px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(155deg,#221b30,#171320);backdrop-filter:blur(12px)}.surface h3,.plan h3{margin-bottom:8px}.surface p,.plan p{font-size:.87rem}.surface .icon{display:block;font-size:1.45rem;color:var(--purple);margin-bottom:13px}.plan.featured{border-color:#9a69df;box-shadow:0 0 30px #6f3bd72f}.plan .price{color:var(--text);font-size:1.7rem;margin:16px 0 5px}.plan ul{padding-left:18px;color:var(--muted);line-height:1.7;font-size:.84rem;min-height:98px}.plan button{width:100%}
dialog{width:min(490px,calc(100% - 26px));max-height:90dvh;overflow:auto;background:#1c1727;color:var(--text);border:1px solid #533a70;border-radius:18px;padding:24px;box-shadow:0 24px 90px #0009} dialog::backdrop{background:#0c0814b8;backdrop-filter:blur(6px)} .dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px} dialog form{display:grid;gap:13px} dialog .summary{padding:12px;background:#120e1b;border:1px solid var(--line);border-radius:9px} #notice{position:fixed;z-index:10;bottom:20px;left:50%;transform:translateX(-50%);background:#302344;border-radius:10px;max-width:calc(100% - 30px);padding:12px 17px;box-shadow:0 8px 20px #0005}#notice:empty{display:none}
.workspace{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}.sidebar{padding:18px 13px;border-right:1px solid var(--line);background:#15111d;display:flex;flex-direction:column;gap:10px}.sidebar .brand{margin:0 8px 12px}.sidebar button,.sidebar select{justify-content:flex-start}.sidebar h2{margin:14px 8px 3px;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.sidebar .tree button{width:100%;border:0;background:transparent;text-align:left;white-space:normal}.sidebar .tree button:hover,.sidebar .tree button.active{background:#33244a}.sidebar details{padding-left:11px}.sidebar summary{cursor:pointer;padding:7px;color:#e1cef9}.main{min-width:0}.workspace-head{padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:#15111d}.dashboard{padding:32px}.dashboard h1{font-size:2.4rem;letter-spacing:-.06em}.dashboard .actions{margin:18px 0}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}.card{text-align:left;color:var(--text);display:grid;gap:8px}.card .mini{height:80px;border-radius:8px;display:grid;place-items:center;background:radial-gradient(ellipse at 60% 10%,#4b2d75,#1c152a);color:#d5b6ff;font-size:1.7rem}.empty{padding:45px 18px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted)}
.board-tools{padding:9px 14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:#1a1424}.board-tools button{padding:7px 10px}.board-tools select{width:auto}.board-tools output{font-size:.8rem;min-width:42px;color:var(--muted)}.viewport{height:calc(100dvh - 113px);min-height:420px;position:relative;overflow:hidden;touch-action:none;background-color:#100e17;background-image:radial-gradient(#463856 1px,transparent 1px);background-size:22px 22px;cursor:grab}.viewport:active{cursor:grabbing}.world{position:absolute;width:10000px;height:10000px;transform-origin:0 0;pointer-events:none}.edges{position:absolute;width:100%;height:100%;pointer-events:none}.node{display:flex;flex-direction:column;position:absolute;background:#241b34;border:1px solid #7658a4;border-radius:11px;overflow:hidden;pointer-events:auto;cursor:default;box-shadow:0 7px 21px #07050c80}.node.selected{border-color:#e0c7ff}.node-head{display:flex;align-items:center;background:#322347;padding:6px 9px;gap:7px;cursor:move}.node-head strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-head button{padding:2px 6px;border-radius:5px}.node-body{overflow:auto;overscroll-behavior:contain;padding:10px;flex:1;font-size:.85rem;white-space:pre-wrap;line-height:1.45}.node-body img,.node-body iframe{width:100%;height:100%;object-fit:contain;border:0}.compact .node-body,.compact .resize,.compact .node-head button{display:none}.compact .node-head{height:100%;font-size:1.5rem}.resize{position:absolute;right:2px;bottom:2px;cursor:nwse-resize;padding:0 5px!important}.board-help{margin-left:auto;color:var(--muted);font-size:.74rem}.active-tool{border-color:#c59cff;background:#3f2a5d}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-art{min-height:260px;max-height:430px}.plans{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:175px minmax(0,1fr)}.board-help{display:none}} @media(max-width:550px){.site-header,.site-footer,.hero,.section{padding-left:17px;padding-right:17px}.site-header nav{display:none}.site-header .actions .primary{display:none}.hero{margin-top:10px;gap:20px}.hero h1{font-size:4.2rem}.showcase{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.workspace{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);max-height:230px;overflow:auto}.dashboard{padding:20px}.viewport{height:65dvh}.workspace-head{padding:10px}.site-footer{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.board-menu{position:fixed;inset:auto;margin:0;width:min(260px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:10px;gap:5px;color:var(--text);background:#20192e;border:1px solid #6d4e94;border-radius:13px;box-shadow:0 14px 38px #000a}
.board-menu:popover-open{display:grid}.board-menu strong,.board-menu-divider{padding:5px 8px}.board-menu-divider{border-top:1px solid var(--line);color:var(--purple);font-size:.8rem}.board-menu button{justify-content:flex-start;padding:6px 8px;text-align:left}.board-menu label{padding:2px 4px}.node.selected{outline:2px solid #d7b3ff;outline-offset:2px}.prototype-preview p{margin-bottom:12px}
.lasso-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.lasso-overlay polygon{fill:#a855f733;stroke:#d3adff;stroke-width:2;stroke-dasharray:5 4}
.viewport.lasso-active,.viewport.lasso-active .node,.viewport.lasso-active .node-head{cursor:crosshair}
.edge-visible{fill:none;stroke:#ba9bf7;stroke-width:2.6}.edge-hit{fill:none;stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
.edge-label{fill:#f7eeff;stroke:#1a1228;stroke-width:5;paint-order:stroke;font-size:15px;font-weight:600;pointer-events:bounding-box;cursor:pointer}
[data-edge]:hover .edge-visible,[data-edge]:focus-visible .edge-visible{stroke:#e5cfff;stroke-width:4}
.edge-handle{visibility:hidden;fill:#9b62e6;stroke:#f0dcff;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none;cursor:grab}
[data-edge]:hover .edge-handle{visibility:visible;pointer-events:all}
.edge-routing .edge-handle{visibility:visible;cursor:grabbing}
.edge-routing .edge-visible{stroke:#e5cfff;stroke-width:4}
.dense-handoffs .edge-label{visibility:hidden}
.dense-handoffs [data-edge]:is(:hover,:focus-visible,.edge-routing) .edge-label{visibility:visible}
.dense-handoffs .node-body{overflow-wrap:anywhere}
.account-page{width:min(480px,calc(100% - 32px));margin:clamp(30px,13vh,125px) auto;display:grid;gap:22px}
.account-page .surface,.account-page form{display:grid;gap:14px}
.account-page h1{font-size:clamp(1.8rem,5vw,2.9rem);margin:0}
.share-access li{margin-bottom:8px}
.board-readonly :is(#workflow,#note,#section,.sticky-pad,#attach,#connect,#model,#undo,#redo,#lasso,#selection-type,#line-jumps,#selection-count,[data-port],.resize){display:none}
.board-readonly label:has(> #model),.board-readonly label:has(> #selection-type),.board-readonly .board-help,.board-readonly .board-tool-row:has(> #undo),.board-readonly .section-node [data-edit]{display:none}
.board-readonly .edge-handle{display:none}
.presence-strip{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
.presence-strip:empty{display:none}
.presence-strip span{border:1px solid var(--person);border-radius:20px;padding:3px 8px;max-width:100%;overflow-wrap:anywhere}
.remote-cursors{position:absolute;inset:0;z-index:4;pointer-events:none}
.remote-cursor{position:absolute;transform:scale(var(--cursor-scale,1));transform-origin:top left;transition:left .13s linear,top .13s linear;white-space:nowrap;color:#161121;background:var(--person);padding:3px 8px;border-radius:5px 10px 10px 10px;font-size:12px;font-weight:700;margin:8px}
.remote-cursor::before{content:"";position:absolute;top:-8px;left:-8px;width:14px;height:17px;background:var(--person);clip-path:polygon(0 0,0 100%,38% 67%,100% 58%)}
.board-shell .viewport{background-image:none;background-color:#0b0a10}
.world{background:#100e17 radial-gradient(circle,#5a496e 1px,transparent 1.2px) -10px -10px/20px 20px}
.world::before{content:"";position:absolute;inset:0;outline:1px solid rgb(166 166 170 / .6);outline-offset:-1px;pointer-events:none}
.board-dimensions{position:absolute;bottom:14px;right:16px;z-index:5;background:#161220e8;color:#d9cce7;padding:5px 9px;border-radius:6px;font-size:.75rem;pointer-events:none}
.edge-weight{fill:#fffdf7;stroke:#8c7aa4}
.weight-guide{visibility:hidden;fill:none;stroke:#fff8;stroke-width:10;vector-effect:non-scaling-stroke;stroke-opacity:0;pointer-events:none}
[data-edge]:hover .weight-guide,.edge-routing .weight-guide{visibility:visible;stroke-opacity:.18;pointer-events:stroke}
[data-edge]:hover .edge-weight{pointer-events:all}
.ink-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-canvas-tool="draw"],[data-canvas-tool="draw"] .node,[data-canvas-tool="frame"],[data-canvas-tool="frame"] .node{cursor:crosshair}
[data-canvas-tool="erase"] .ink-layer path{pointer-events:stroke;cursor:crosshair}
[data-canvas-tool="erase"] .ink-layer path:hover{opacity:.45}
.sticky-tools,.pen-tools{display:grid;padding:7px;border:1px solid var(--line);border-radius:8px}
.sticky-tools summary,.pen-tools summary{cursor:pointer}
.sticky-tools[open] summary,.pen-tools[open] summary{margin-bottom:8px}
.pen-tools label{margin-top:6px}
.sticky-dispenser .node-body{padding:6px}
.sticky-dispenser .sticky-swatch{border:0;width:22px;height:22px;padding:0;background:var(--paper);box-shadow:0 3px var(--shade);border-radius:3px 3px 6px 3px;cursor:grab;touch-action:none}
.board-readonly .sticky-tools{display:none}
.board-shared-edit :is(#workflow,#attach),.board-shared-edit label:has(> #model){display:none}
.node-run-status{color:#f1deff;background:#4c3267;border-radius:5px;padding:2px 5px;font-size:.68rem;white-space:nowrap}
[data-milestone-status="pass"] .node-run-status{background:#24513f}
[data-milestone-status="fail"] .node-run-status,[data-milestone-status="hold"] .node-run-status{background:#733855}
.compact .node-run-status{display:none}
.milestone-panel{display:grid;gap:12px}
.milestone-panel h3,.milestone-panel p{margin:0}
.milestone-brief,.milestone-reply{white-space:pre-wrap;overflow-wrap:anywhere}
.milestone-brief{max-height:144px;overflow:auto}
.milestone-reply{max-height:280px;overflow:auto;padding:10px;background:var(--bg);border-radius:8px}
.milestone-panel details{padding:10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.milestone-panel details[open]>*+*{margin-top:10px}
.milestone-panel summary{cursor:pointer}
.milestone-check{display:flex;align-items:center;gap:8px}
.milestone-check input{width:auto}
#line-jumps[aria-pressed="true"]{border-color:#a47bd4;background:#38264f}
#draft-description{min-height:62px}
#draft-status:empty{display:none}
#draft-preview:not([hidden]){display:grid;gap:8px}
#draft-preview button{justify-self:start}
.selection-box{position:absolute;z-index:3;pointer-events:none;border:1px solid #dfbfff;background:#a855f738}
.sections,.nodes,.edges{position:absolute;inset:0;pointer-events:none}
.sections{z-index:0}.edges{z-index:1}.nodes{z-index:2}
.section-node{background:#6f4b9634;border:2px solid #805ea5;border-radius:18px;box-shadow:none}
.section-node .node-head{background:#412c57;cursor:grab}
.section-node .node-body{pointer-events:none}
.section-node.selected{outline-offset:3px}
.paper-node{background:#faf5ea;color:#292239;border-color:#cbbbd9;box-shadow:0 2px 0 #cebfe5,0 7px 18px #0e071e9c}
.paper-node .node-head{background:#e9dff1;color:#392b4b;border-bottom:1px solid #d5c8df}
.paper-node .node-head button{background:#f8f0ff;color:#4b3368;border-color:#cdbbdc}
.paper-node .node-body{padding:16px 15px;font-family:Georgia,serif;line-height:1.55}
.sticky-yellow{--paper:#f6df79;--shade:#cda448}.sticky-rose{--paper:#f4a9c2;--shade:#c76a88}.sticky-mint{--paper:#a0dfbc;--shade:#64a887}.sticky-blue{--paper:#a6d7f5;--shade:#689fbe}.sticky-lilac{--paper:#d4b7f2;--shade:#a382ca}
.sticky-pad{display:flex;align-items:center;gap:6px;padding:3px 5px 7px}
.board-tools .sticky-swatch{position:relative;width:25px;height:23px;padding:0;border:0;border-radius:3px 3px 6px 3px;background:linear-gradient(155deg,#fff5,var(--paper) 55%);box-shadow:0 3px var(--shade),0 5px #21112b;cursor:grab;touch-action:none}
.board-tools .sticky-swatch:active,.board-tools .sticky-swatch.peeled{cursor:grabbing;transform:translateY(2px)}
.sticky-swatch:last-child::after,.sticky-note::after{content:"";position:absolute;pointer-events:none;bottom:0;right:0;width:12px;height:12px;background:linear-gradient(135deg,#fff8 45%,var(--shade) 51%);border-radius:2px 0 2px 0}
.sticky-ghost{position:fixed;z-index:50;top:0;left:0;width:76px;height:62px;background:var(--paper);box-shadow:0 8px 14px #0007;pointer-events:none}
.sticky-note{background:var(--paper);color:#302238;border-color:var(--shade);border-radius:7px 7px 12px 7px;box-shadow:1px 5px 12px #10081e85}
.sticky-note .node-head{background:#0001;cursor:grab}.sticky-note .node-head button{padding:1px 4px}
.sticky-note .node-body{cursor:text;padding:9px 9px 15px}.sticky-note .node-body textarea{height:100%;min-height:0;padding:2px 4px;resize:none;background:#fffc;color:#281e32}
.sticky-note .resize{z-index:1}
#output-status:empty{display:none}#output-preview img{display:block;width:100%;max-height:280px;object-fit:contain;border-radius:8px}
.workspace-board{display:block;min-height:100dvh}
.workspace-board>.sidebar,.workspace-board .workspace-head[hidden]{display:none}
.board-shell{display:grid;grid-template-columns:220px minmax(0,1fr);height:100dvh}
.board-shell>.viewport{height:auto;min-height:0}
.board-shell>.board-tools{min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:9px;padding:14px 12px;border-right:1px solid var(--line);border-bottom:0}
.board-tools button{white-space:normal}
.board-tool-title{font-weight:700;overflow-wrap:anywhere;margin:4px 0 2px}
.board-tool-row{display:flex;align-items:center;gap:5px}
.board-tool-row output{text-align:center}
.board-tools .board-help{display:block;margin:0}
.board-account{padding-top:6px;border-top:1px solid var(--line)}
.board-account summary{cursor:pointer;color:var(--muted);font-size:.84rem}
.board-account .actions{display:grid;margin-top:8px}
.paper-node{background:#fffdf7;color:#28252c;border-radius:2px;border-color:#ded6c9;box-shadow:2px 3px 0 #c1b8b0,5px 8px 16px #0e071e88}
.paper-node .node-head{background:#f4eee3;color:#38303b;border-color:#e0d8ca}
.paper-node .node-head button,.paper-node .resize{background:#fffaf2;color:#4b3d4c;border-color:#ded5cb}
.paper-node .node-body{padding:20px 19px;font-family:Georgia,serif;overflow-wrap:anywhere}
.node .resize{touch-action:none}
.sticky-note .resize{min-width:22px;min-height:22px;background:var(--shade);border:0;color:#302238}
.sticky-note .node-body textarea{display:block;min-height:24px}
dialog:has(#manual-workflow){width:min(680px,calc(100% - 26px))}
dialog:has(#manual-workflow) textarea[name="description"]{min-height:200px}
#output-preview ol{display:grid;gap:9px;padding-left:24px;line-height:1.5}
@media(max-width:550px){
  .board-shell{grid-template-columns:136px minmax(0,1fr)}
  .board-shell>.board-tools{padding:9px 6px;gap:6px}
  .board-tools button{padding:5px 6px;font-size:.78rem}
  .board-tools .sticky-pad{flex-wrap:wrap}
  .board-tool-row{flex-wrap:wrap}
  .board-tools select{max-width:100%}
}