.app{height:100dvh;min-height:640px;background:#141618;color:#e6e7e8;font-family:Arial,'PingFang SC',sans-serif;font-size:13px;overflow:hidden}.app *{box-sizing:border-box}.app button,.app input,.app textarea,.app select{font:inherit}.app button,.app a{color:inherit}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #35383c;background:#25282b;border-radius:7px;cursor:pointer;padding:9px 12px}.app button:hover{background:#34393c}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid #dcf391;outline-offset:3px}.header{height:70px;display:flex;align-items:center;padding:0 24px;gap:16px;border-bottom:1px solid #303236;background:#1a1c1f}.header a{text-decoration:none}.header i,.controls i{height:22px;width:1px;background:#393c40}.brand{font-size:19px;font-weight:800;letter-spacing:2px}.brand span{color:#e0f3a0;margin-left:6px}.back{display:flex}.crumb{display:flex;align-items:center;gap:10px;color:#898e94}.badge{font-size:10px;padding:4px 7px;background:#292d31;color:#a0a6ac;border-radius:4px}.spacer{flex:1}.header .export{background:#d9ef9b;color:#263019;border:0}.workspace{display:flex;height:calc(100% - 70px)}.rail{width:72px;flex-shrink:0;border-right:1px solid #303236;background:#1a1c1f;display:flex;align-items:center;gap:12px;flex-direction:column;padding:26px 0 18px}.rail button{width:42px;height:42px;background:transparent;border:0;padding:10px;color:#999fa5}.rail button[aria-pressed=true]{background:#d9ef9b;color:#24301d}.rail svg{width:19px}.rail hr{width:28px;border:0;border-top:1px solid #373a3d;margin:5px}.rail>span{font-size:30px;color:#aab095}.canvasArea{flex:1;min-width:0;position:relative;background-image:radial-gradient(#35383b .7px,transparent .7px);background-size:22px 22px}.canvasTitle{position:absolute;top:32px;left:34px;pointer-events:none;z-index:2}.eyebrow{font-size:9px;letter-spacing:2px;color:#9ba58a}.canvasTitle h1{font-size:22px;letter-spacing:.3px;margin:10px 0}.canvasTitle h1 span{color:#737a80;font-size:13px;font-weight:400}.canvasTitle p{color:#757d83;margin:0}.viewport{position:absolute;inset:120px 0 64px;overflow:hidden;touch-action:none}.world{position:absolute;transform-origin:0 0;pointer-events:none}.wires{position:absolute;left:-10000px;top:-10000px;width:20000px;height:20000px;overflow:visible}.wires path{transform:translate(10000px,10000px);fill:none;stroke:#a7bb76;stroke-width:2;opacity:.6}.card{position:absolute;width:320px;background:#222629;border:1px solid #42484d;border-radius:12px;pointer-events:auto;box-shadow:0 12px 32px #0003;overflow:visible}.selected{border-color:#d9ef9b;box-shadow:0 0 0 3px #d9ef9b12,0 12px 32px #0004}.cardHead{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#292d30;border-radius:12px 12px 0 0;cursor:grab;touch-action:none;color:#bac0c4}.cardHead>span:first-child{display:flex;align-items:center;gap:10px}.cardBody{padding:25px 22px 20px;min-height:205px}.nodeType{font-size:10px;color:#a4af89;letter-spacing:1px}.cardBody p{white-space:pre-wrap;font-size:15px;line-height:1.9;overflow-wrap:anywhere;color:#d0d3d4;margin:17px 0 0;max-height:210px;overflow:auto}.card footer{border-top:1px solid #363b3e;padding:13px 20px;color:#80898f;font-size:11px;position:relative}.port{position:absolute;width:10px;height:10px;background:#d9ef9b;right:-6px;top:14px;border-radius:50%;box-shadow:0 0 0 4px #1a1d20}.image{cursor:pointer;height:228px;position:relative;overflow:hidden}.image img{width:100%;height:100%;object-fit:contain}.landscape{height:100%;background:linear-gradient(115deg,transparent 48%,#dae7b344 49%,transparent 55%),linear-gradient(35deg,#33483b,#738273 45%,#d0c7a1);padding:27px;color:#eef0db;display:flex;flex-direction:column;justify-content:center}.landscape span{font-size:10px;letter-spacing:4px}.landscape b{font-size:32px;margin:12px 0;font-family:serif;font-weight:400}.landscape small{font-size:8px;letter-spacing:3px}.sample{position:absolute;bottom:12px;left:18px;font-size:10px;color:#faf8df;background:#18201b88;border-radius:5px;padding:5px 8px}.disconnected{font-size:11px;color:#acb59b;padding:0 20px 18px}.canvasBottom{position:absolute;bottom:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:12px}.canvasBottom>span{font-size:10px;color:#818b80}.controls{display:flex;align-items:center;background:#24272a;border:1px solid #3a3e42;box-shadow:0 4px 20px #0004;border-radius:9px;padding:4px;gap:4px}.controls button{border:0;background:transparent;padding:8px}.controls>span{font-size:11px;width:38px;text-align:center}.inspector{width:290px;background:#1c1f22;border-left:1px solid #34383c;padding:0 22px 24px;overflow:auto;flex-shrink:0}.panelHeading{display:flex;align-items:center;gap:9px;height:66px;margin-bottom:26px;border-bottom:1px solid #34383c}.panelHeading>span{margin-left:auto;font-size:10px;color:#7e878d}.inspector h2{font-size:18px;margin:12px 0 27px;font-weight:500}.inspector label{display:block;color:#959ea4;font-size:11px;margin:20px 0 10px}.inspector input,.inspector textarea,.inspector select{display:block;width:100%;margin-top:10px;background:#141719;color:#d3d8db;border:1px solid #383f44;border-radius:7px;padding:12px;outline-color:#d9ef9b}.inspector textarea{height:155px;resize:vertical;line-height:1.8}.inspector select{font-size:11px}.wide{width:100%;margin-top:10px}.notice{border:1px solid #47523a;background:#29312455;padding:17px;border-radius:8px;margin-top:24px;color:#c7d4b4}.notice strong{display:block;font-size:12px;margin:12px 0}.notice p{font-size:11px;line-height:1.9;color:#929e8b;margin:0}.connection{width:100%;margin-top:9px;font-size:10px!important;justify-content:space-between!important}.connection span{color:#9aa488}.delete{margin-top:28px;color:#c9928b!important;background:transparent!important;border:0!important;padding-left:0!important}.help{margin-top:35px;padding-top:18px;border-top:1px solid #33393e;font-size:10px;line-height:2;color:#737e85}@media(min-width:1600px){.inspector{width:330px}.canvasTitle{top:45px}.viewport{top:150px}}@media(max-width:1000px){.inspector{width:240px;padding:0 15px 20px}.header{gap:10px;padding:0 15px}.crumb,.badge{display:none}.canvasTitle{left:20px}.canvasBottom{left:12px;right:12px}.canvasBottom>span{max-width:100px}}@media(max-width:700px){.app{height:auto;min-height:100dvh;overflow:auto}.header{height:60px}.header strong,.header>i,.header>a:not(.brand):not(.back){display:none}.brand{font-size:16px}.workspace{height:auto;flex-wrap:wrap}.rail{width:52px;height:640px;padding-top:20px;gap:7px}.rail button{width:37px;height:37px}.canvasArea{width:calc(100% - 52px);height:640px;flex:none}.canvasTitle h1{font-size:19px}.canvasTitle h1 span{display:block;font-size:11px;margin-top:8px}.canvasTitle p{font-size:11px}.canvasBottom{flex-direction:column;align-items:flex-start;bottom:15px}.canvasBottom>span{max-width:none}.inspector{width:100%;border-left:0;border-top:1px solid #34383c;padding:0 24px 24px}.panelHeading{margin-bottom:20px}.inspector textarea{height:120px}.help{margin-top:18px}}
/* Nodes are real editors in world coordinates. The header alone owns node movement. */
.card{display:flex;flex-direction:column;overflow:hidden;min-width:260px;min-height:300px}.cardHead{flex-shrink:0;user-select:none}.cardHead>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cardBody{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}.cardBody input,.cardBody textarea{width:100%;color:#e0e4e5;background:#181c1f;border:1px solid #3c454b;border-radius:6px;padding:10px;outline-color:#d9ef9b}.cardBody textarea{flex:1;min-height:55px;resize:none;line-height:1.7;touch-action:auto}.cardBody input{flex-shrink:0}.card footer{flex-shrink:0}.image{flex:1;min-height:0}.resize{position:absolute!important;right:0;bottom:0;width:25px;height:25px;padding:0!important;border:0!important;border-radius:5px 0 0!important;cursor:nwse-resize!important;touch-action:none}.viewport{overscroll-behavior:contain}.disconnected{flex-shrink:0}.port{right:0}.world{width:0;height:0}
.card{overflow:visible}.cardBody{overflow:hidden}.inputPort,.outputPort{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid #1a1d20;border-radius:50%;background:#d9ef9b;pointer-events:none}.inputPort{left:-5px}.outputPort{right:-5px}.cardHead:active{cursor:grabbing}
/* Full-screen canvas: chrome floats above the world and never reserves layout space. */
.app{height:100dvh;min-height:0;overflow:hidden}.workspace{position:absolute;inset:0;height:100%;display:block}.canvasArea{position:absolute;inset:0;width:100%;height:100%;background:none}.viewport{inset:0;background-color:#16191c;background-image:radial-gradient(circle,#556068 1px,transparent 1px);background-size:24px 24px}.canvasTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:absolute;z-index:5;top:16px;left:16px;right:auto;height:48px;max-width:calc(100% - 32px);padding:6px 10px;gap:12px;background:#202529eb;border:1px solid #424a51;border-radius:12px;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.header strong,.header>i,.header .crumb,.header .badge{display:none}.header .brand{font-size:14px}.header .brand span{font-size:18px}.header a[href='/account']{font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .export{padding:8px}.rail{position:absolute;z-index:4;left:16px;top:50%;transform:translateY(-50%);width:48px;height:auto;padding:6px;gap:5px;border:1px solid #424a51;border-radius:12px;background:#202529eb;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.rail button{width:34px;height:34px;padding:8px}.rail>.spacer,.rail>span{display:none}.rail hr{margin:3px}.canvasBottom{z-index:3;bottom:16px;left:16px;right:16px;pointer-events:none;flex-direction:row;align-items:center}.canvasBottom>span{max-width:none;padding:7px 10px;border-radius:7px;background:#202529c9}.controls{pointer-events:auto}.inspector{display:none;position:absolute;z-index:4;top:76px;left:16px;width:280px;max-height:calc(100dvh - 160px);height:auto;border:1px solid #424a51;border-radius:12px;padding:0 18px 20px;box-shadow:0 12px 32px #0005}.inspectorOpen{display:block}.inspectorClosed{display:none}.panelHeading{height:48px;margin-bottom:18px}.inspector h2{font-size:16px;margin-bottom:16px}.inspector .help{margin-top:18px}@media(max-width:700px){.header{top:10px;left:10px;max-width:calc(100% - 20px);gap:8px}.header>a:not(.brand):not(.back){display:none}.header .brand{font-size:12px}.header .export{font-size:11px}.rail{left:10px}.canvasBottom{left:10px;right:10px;bottom:10px;align-items:flex-end;gap:6px}.canvasBottom>span{max-width:110px;font-size:9px}.controls{gap:1px}.controls button{padding:6px}.inspector{left:10px;top:68px;width:min(280px,calc(100vw - 20px))}}
/* Dock and contextual actions leave both sides of the canvas clear. */
.rail{left:50%;top:auto;bottom:18px;transform:translateX(-50%);width:auto;height:58px;flex-direction:row;padding:7px 10px;gap:8px;border-radius:19px}.rail hr{width:1px;height:27px;border:0;background:#465059}.rail button{width:40px;height:40px;border-radius:11px;transition:transform .16s,background .16s}.rail button:hover{transform:translateY(-5px) scale(1.08)}.canvasBottom{top:16px;bottom:auto;left:auto;right:16px;flex-direction:column;align-items:flex-end}.canvasBottom>span{display:none}.contextMenu{position:absolute;z-index:10;width:240px;max-height:min(420px,calc(100dvh - 24px));overflow:auto;padding:8px;background:#252b30f5;border:1px solid #47525b;border-radius:14px;box-shadow:0 16px 50px #0005;backdrop-filter:blur(18px)}.contextMenu>button{display:flex;width:100%;justify-content:flex-start;border:0;background:transparent}.menuTitle{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 8px;font-size:11px;color:#aebac4}.menuTitle button{padding:3px 8px}.contextMenu label{display:block;padding:8px;font-size:11px}.contextMenu select{display:block;width:100%;padding:8px;margin-top:6px;background:#171c20;color:inherit;border:1px solid #46515a;border-radius:6px}.card footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px}.card footer button{padding:2px 8px;border:0;background:transparent}.app[data-theme=light]{color-scheme:light;color:#25323b;background:#f5f6f8}.app[data-theme=dark]{color-scheme:dark}.app[data-theme=light] .viewport{background-color:#f5f6f8;background-image:radial-gradient(circle,#b8c3cc 1px,transparent 1px)}.app[data-theme=light] .header,.app[data-theme=light] .rail,.app[data-theme=light] .controls,.app[data-theme=light] .contextMenu{background:#ffffffed;border-color:#d3dce3;box-shadow:0 8px 28px #3c52601a}.app[data-theme=light] button{background:#edf1f4;border-color:#d5dfe5;color:#344650}.app[data-theme=light] button:hover{background:#dde6eb}.app[data-theme=light] .card{background:#fff;border-color:#b8c8d2;box-shadow:0 10px 30px #31465918}.app[data-theme=light] .cardHead{background:#eef3f6;color:#405663}.app[data-theme=light] .cardBody input,.app[data-theme=light] .cardBody textarea,.app[data-theme=light] .contextMenu select{background:#f7f9fa;color:#243641;border-color:#d6e0e6}.app[data-theme=light] .nodeType,.app[data-theme=light] .disconnected,.app[data-theme=light] .menuTitle{color:#567047}.app[data-theme=light] .selected{border-color:#60863b}.app[data-theme=light] .card footer{border-color:#e1e7eb;color:#526878}.app[data-theme=light] .wires path{stroke:#628e3e;opacity:.9}.app[data-theme=light] .brand span{color:#60863b}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}@media(max-width:700px){.rail{left:50%;bottom:12px;gap:4px;height:54px;padding:5px 8px}.rail button{width:36px;height:36px}.canvasBottom{top:70px;right:10px;bottom:auto}.controls{gap:0}.controls button{padding:5px}}
.rail button{background:transparent;color:#bfcbd3}.rail button[aria-pressed=true]{background:#d9ef9b;color:#24301d}.app[data-theme=light] .rail button{background:transparent;color:#405663}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}
/* Preview cards drag from any content area; editing is an explicit mode. */
.preview{cursor:grab;user-select:none;touch-action:none}.preview:active{cursor:grabbing}.preview input,.preview textarea{pointer-events:none;user-select:none}.preview .image{cursor:grab}.preview img{-webkit-user-drag:none;pointer-events:none}.editing{cursor:default}.editing .cardBody{user-select:text}.editing .image{cursor:pointer}.editing{outline:2px solid #93b569;outline-offset:3px}.card footer{gap:6px}.card footer>button:first-of-type{margin-left:auto}

.startPanel{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);width:min(700px,calc(100% - 40px));text-align:center;pointer-events:none}.startPanel>span{font-size:9px;letter-spacing:3px;color:#8d9884}.startPanel h2{font-size:30px;font-weight:400;letter-spacing:-1px;margin:18px 0}.startPanel p{font-size:12px;opacity:.5;margin-bottom:30px}.startPanel>div{display:flex;justify-content:center;gap:12px}.startPanel button,.startPanel a{pointer-events:auto}.startPanel>div button{padding:18px 24px;border-radius:12px;gap:15px}.startPanel>button{margin-top:25px;border:0;background:transparent;font-size:11px;opacity:.65}.startPanel>a{display:block;font-size:10px;margin-top:25px;opacity:.5;text-decoration:none}.app[data-theme=light] .startPanel>button{background:transparent}@media(max-width:700px){.startPanel h2{font-size:23px}.startPanel>div{flex-wrap:wrap;gap:8px}.startPanel>div button{padding:12px;font-size:11px}}