/* Canvas is the primary interaction; quieter controls leave room for the connections. */
.graph-editor #wires,.graph-editor .mobile-wire,.graph-editor #node-project,.graph-editor #node-features,.graph-editor #outcome-strip,.graph-editor .starter,.graph-editor #port-idea-in,.graph-editor #port-features-in,.graph-editor #port-style-in-a,.graph-editor #port-style-in-b,.graph-editor .mobile-settings{display:none!important}
.graph-editor #node-idea{width:410px}.graph-editor #node-style{width:330px}.graph-editor #idea{min-height:115px}.graph-editor #node-idea fieldset>label[for=project-name]{font-size:11px;margin:0 0 4px}.graph-editor #node-idea #project-name{margin-bottom:15px;min-height:36px}.graph-editor #node-idea .node-header{position:relative}
#graph-actions{display:flex;align-items:center;gap:10px;margin-top:18px;pointer-events:auto}#graph-actions button{background:#202120;border:1px solid #ffffff23;border-radius:10px;padding:9px 15px;color:#e4e5df;font:inherit;font-size:12px;cursor:pointer}#graph-actions button:first-child{background:#d9edcf;color:#182316}#graph-status{position:absolute;bottom:20px;left:24px;max-width:calc(100% - 250px);font-size:11px;color:#b3beb2;pointer-events:none;z-index:4}
#intent-prediction{border-top:1px solid #ffffff1c;margin-top:16px;padding-top:13px}#intent-summary{font-size:12px;line-height:1.7;color:#e0e6dc;margin:0 0 10px}#intent-apply{width:100%;border:1px solid #b9efad45;background:#b9efad15;border-radius:10px;padding:11px;color:#d1eac9;cursor:pointer;font:inherit;font-size:12px}#intent-apply:disabled{opacity:.45;cursor:default}#intent-note{display:block;font-size:10px;line-height:1.7;color:#9b9f98;margin-top:8px}
#graph-wires{position:absolute;left:-2500px;top:-2500px;width:6500px;height:6500px;overflow:visible;z-index:0;pointer-events:none;fill:none}.graph-cable{stroke:#a8ba9f;stroke-width:2;opacity:.6;vector-effect:non-scaling-stroke}.graph-cable.selected{stroke:#d5ffbd;stroke-width:3;opacity:1;filter:drop-shadow(0 0 5px #b9efad90)}.cable-hit{stroke:transparent;stroke-width:18;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}.pending-cable{stroke:#ddfacb;stroke-width:2.5;stroke-dasharray:8 7;vector-effect:non-scaling-stroke}
.graph-port{position:absolute;z-index:5;top:54px;width:30px;height:30px;border:0;background:transparent;border-radius:50%;padding:0;cursor:crosshair;touch-action:none;display:grid;place-items:center;transition:filter .2s,background .2s}.graph-port:before{content:'';width:12px;height:12px;border:2px solid #d8e6d1;background:#495842;border-radius:50%;box-shadow:0 0 0 5px #121511}.graph-port.in{left:-15px}.graph-port.out{right:-15px}.graph-port.armed:before,.graph-port.compatible:before{background:#c4f4ad;box-shadow:0 0 0 7px #aef58624,0 0 20px #b9efad}.graph-port:focus-visible{outline:2px solid #c4f4ad;outline-offset:4px}#node-style>.graph-port:before{background:#bba6de}#node-preview>.graph-port:before{background:#98c5f2}
.flow-node{position:absolute;width:275px;min-height:170px;background:linear-gradient(150deg,#30332e,#222420);border:1px solid #76856c77;border-radius:18px;color:#edf0e9;padding:0 20px 18px;box-shadow:0 12px 50px #0003;z-index:2}.flow-node header{display:flex;gap:8px;align-items:center;margin:0 -7px 14px}.flow-handle{flex:1;min-width:0;text-align:left;font:inherit;color:inherit;font-size:15px;border:0;background:none;cursor:grab;padding:17px 6px;touch-action:none}.flow-delete{background:none;border:0;color:#a9b4a2;font-size:22px;cursor:pointer;min-width:30px;min-height:36px}.flow-node p{font-size:12px;line-height:1.8;color:#b9c0b3;margin:10px 0 20px}.flow-node small{font-size:10px;color:#c4ddb8}.flow-node.transformer{background:linear-gradient(150deg,#312e39,#242229);border-color:#b7a5d459}.flow-node.transformer small{color:#c8b9df}.flow-node.unconnected{border-style:dashed;opacity:.65}.flow-node.unconnected small{color:#dec5a0}
#graph-output-summary{margin:12px 20px 17px;font-size:11px;color:#b4c5a9;line-height:1.8}#graph-dialog{width:min(540px,calc(100vw - 32px));max-height:80dvh;overflow:auto;border:1px solid #ffffff26;border-radius:22px;padding:24px;background:#20231f;color:#ecf1e8}#graph-dialog::backdrop{background:#060906bc;backdrop-filter:blur(14px)}#graph-dialog header{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:20px}#graph-dialog h2{font-size:19px;margin:0}#graph-dialog button{border:1px solid #ffffff24;background:#ffffff08;color:inherit;padding:11px;border-radius:10px;font:inherit;cursor:pointer}#graph-dialog-close{font-size:20px!important}.node-choice{margin:4px}.connection-row{display:flex;align-items:center;gap:20px;justify-content:space-between;border-top:1px solid #ffffff14;padding:12px 0;font-size:13px}.connection-row button{flex-shrink:0}#graph-dialog-body>p{font-size:12px;line-height:1.8;color:#aeb8a8}.app-card .app-art img{width:100px;height:100px;object-fit:contain;position:relative;z-index:3}.app-art:has(img)>i{display:none}
@media(max-width:800px){.graph-editor #world{gap:24px}.graph-editor #node-idea{width:auto}.graph-editor #node-style{display:block!important;order:3;width:auto}.graph-editor #node-style .node-fields{max-height:250px;overflow:auto}.graph-editor #node-preview{order:6}.graph-editor .workspace-intro{padding-bottom:12px}#graph-actions{flex-wrap:wrap;gap:8px}#graph-actions button{min-height:42px}#graph-status{position:sticky;bottom:84px;left:auto;max-width:none;z-index:6;background:#192015ed;border:1px solid #b9efad30;border-radius:12px;padding:10px 14px;margin:0 14px;font-size:11px;line-height:1.6}#graph-status:empty{display:none}#graph-wires{display:none}#graph-nodes{display:contents}.flow-node{position:relative!important;left:auto!important;top:auto!important;width:auto;margin:0 22px;order:4;min-height:150px}.graph-port{width:44px;height:44px;top:48px}.graph-port.in{left:-19px}.graph-port.out{right:-19px}.graph-editor #node-idea,.graph-editor #node-style,.graph-editor #node-preview{margin-left:22px;margin-right:22px}.graph-editor #node-idea>.graph-port,.graph-editor #node-style>.graph-port{top:50px}.graph-editor .node:after{pointer-events:none}#intent-note{font-size:11px}#graph-output-summary{font-size:12px}.graph-editor .mobile-actions{z-index:7}}
@media(prefers-reduced-motion:reduce){.graph-port{transition:none}}

.graph-editor #node-style .signal-list{display:none}.style-details>summary{padding:20px;font-size:13px;cursor:pointer;color:#c7c7cf}.style-details .node-fields{border-top:1px solid #ffffff15}.graph-editor .workspace-intro h1{font-size:16px;line-height:1.5}.graph-editor .workspace-intro{top:96px}.graph-editor #graph-actions{margin-top:10px}.graph-editor .node .graph-port{visibility:visible;opacity:1}.graph-editor #node-idea .node-body{padding-bottom:18px}.graph-editor #node-idea #idea{min-height:90px;height:90px}.graph-editor #node-style{min-height:100px}.graph-editor .workspace-intro .starter-select{display:none}
@media(max-width:800px){.graph-editor .workspace-intro{position:relative;top:auto}.graph-editor .workspace-intro h1{font-size:26px;max-width:310px}.graph-editor #node-idea #idea{min-height:130px;height:auto}.graph-editor #node-style .node-fields{max-height:none}.style-details>summary{min-height:48px}.graph-editor #graph-status{margin-bottom:12px}.graph-editor #node-preview .preview-well{height:350px}}
.graph-editor .workspace-intro>div:first-of-type{position:static;transform:none;white-space:normal;text-align:left;margin:0}.graph-editor .workspace-intro h1,html[lang=th] body.graph-editor .workspace-intro h1{font-size:16px;color:#b5bcb1;line-height:1.5;margin:0}.graph-editor #graph-actions{margin-top:10px}.graph-cable[data-source=style]{stroke:#bba6de}.graph-cable[data-target=output]{stroke:#91c7ff}.signal-change .graph-cable{animation:graph-signal .7s ease-out}@keyframes graph-signal{from{opacity:1;stroke-width:3}to{opacity:.6;stroke-width:2}}
@media(max-width:800px){html[data-editor-mode=cards] body.graph-editor .flow-node{display:block!important;margin:0 22px;max-width:calc(100% - 44px);width:calc(100% - 44px)}html[data-editor-mode=cards][lang=th] body.graph-editor .workspace-intro h1,html[data-editor-mode=cards] body.graph-editor .workspace-intro h1{font-size:26px;color:#eef0e9;max-width:340px}body.graph-editor #graph-status{font-size:10px}.graph-editor #node-idea #project-name{margin-top:0}.graph-editor #graph-nodes+.node{margin-top:0}}
@media(prefers-reduced-motion:reduce){.signal-change .graph-cable{animation:none}}
body[data-motion=none] .graph-cable{animation:none}

/* A dedicated workflow rail never inherits the old floating intro layout. */
.canvas-workflow{position:absolute;inset:104px 24px auto;z-index:15;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:center;gap:20px;padding:15px 20px;background:#171a17ed;border:1px solid #ffffff18;border-radius:17px;box-shadow:0 8px 28px #0002;backdrop-filter:blur(16px)}
.canvas-workflow>.canvas-brand,.canvas-workflow>.starter,.canvas-workflow .workflow-heading>p{display:none}
.workflow-heading{position:static;min-width:0;transform:none;margin:0;text-align:left;white-space:normal}
.canvas-workflow h1,html[lang=th] .canvas-workflow h1{font-size:18px;font-weight:450;line-height:1.6;letter-spacing:0;color:#edf0e9;margin:0 0 9px}
.workflow-steps{display:flex;flex-wrap:wrap;gap:7px 17px;counter-reset:workflow;list-style:none;padding:0;margin:0;color:#aab4a6;font-size:11px;line-height:1.6}
.workflow-steps li{display:flex;align-items:center;gap:6px;counter-increment:workflow}
.workflow-steps li:before{content:counter(workflow);display:grid;place-items:center;flex:0 0 18px;height:18px;border:1px solid #b5c7ab44;border-radius:50%;font-size:10px;color:#d3e7c7}
.canvas-workflow #graph-actions{display:flex;align-items:center;gap:13px;margin:0;white-space:nowrap}
.graph-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:310px}
.canvas-workflow #graph-actions button{min-height:42px;padding:9px 13px;font-size:12px;background:#ffffff06;color:#d7dfd3;border-color:#ffffff20}
.canvas-workflow #graph-actions button:hover{background:#ffffff0e;border-color:#a4b399}

#flow-toolbar #build-preview{position:static;inset:auto;transform:none;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;min-width:135px;min-height:46px;background:#d8edcc;color:#1c2e16;border:1px solid #e5f6db;border-radius:11px;font-size:13px;box-shadow:0 3px 15px #a5d2910a}
#flow-toolbar #build-preview:hover{background:#e8f7df;color:#16220f}
.graph-editor #node-idea .idea-name-detail{margin:15px 0 0;border-top:1px solid #ffffff14;padding-top:9px}
.idea-name-detail>summary{font-size:11px;line-height:1.8;color:#aeb8a8;padding:7px 0;cursor:pointer}
.graph-editor #node-idea .idea-name-detail label{font-size:11px;margin:10px 0 4px}
.graph-editor #node-idea .idea-name-detail #project-name{margin:0 0 5px}
.graph-editor .canvas-hint{display:none}
.graph-editor #graph-status{max-width:260px;font-size:10px;line-height:1.7;bottom:38px}
.graph-editor #node-idea .node-header{position:relative}
.graph-editor #node-idea #idea{height:130px;min-height:130px}

/* Display the supplied logo unchanged, without zoom, masking, or extra rings. */
.graph-editor .topbar{height:72px;inset:16px 24px auto;gap:18px}
.graph-editor .topbar .wordmark{display:flex;align-items:center;gap:12px;flex-shrink:0;width:auto;min-width:0;height:72px;background:transparent;border-radius:0;overflow:visible;box-shadow:none;text-decoration:none}
.graph-editor .topbar .modulus-logo{display:block;flex:0 0 72px;width:72px;height:72px;min-width:72px;object-fit:contain;transform:none;border:0;border-radius:14px;background:#fff;box-shadow:none;padding:0;filter:none}
.modulus-word{color:#eceee9;font-size:24px;font-weight:450;letter-spacing:-1px;line-height:1}
.graph-editor .studio-menu #edit-menu{display:none}

/* Real app marks retain their complete viewBox and brand contrast. */
#apps-dialog .app-destination{grid-template-columns:76px minmax(0,1fr) 18px;gap:17px;min-height:116px;padding:16px;border-radius:17px}
#apps-dialog .app-destination .app-art{box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative;width:76px;height:76px;min-width:76px;aspect-ratio:1;padding:12px;border-radius:15px;overflow:visible;isolation:auto;background:#f3f5ee;box-shadow:none}
#apps-dialog .app-destination.app-a8 .app-art{background:#363142}
#apps-dialog .app-destination .app-art img{display:block;box-sizing:border-box;position:static;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;object-fit:contain;object-position:center;padding:0;margin:0;transform:none;filter:none;border:0;border-radius:0}
#apps-dialog .app-art i{display:none}
#apps-dialog .app-product-name{display:block;font-size:12px;line-height:1.2;font-weight:600;color:#c8dfc5;margin-bottom:5px}
#apps-dialog .app-a8 .app-product-name{color:#d0c5eb}
#apps-dialog .app-copy{min-width:0}
#apps-dialog .app-copy strong{font-size:15px;line-height:1.6}
#apps-dialog .app-copy small{margin-top:4px;line-height:1.7}
@media(max-width:1100px){.graph-editor .modulus-word{display:none}.canvas-workflow{gap:14px;padding:14px 16px}.canvas-workflow h1,html[lang=th] .canvas-workflow h1{font-size:16px}.workflow-steps{gap:7px 10px}.canvas-workflow #graph-actions{gap:8px}.canvas-workflow #graph-actions button{padding-inline:10px}.graph-edit-actions{max-width:270px}}
@media(max-width:800px){
 html[data-editor-mode=cards] body.graph-editor .topbar{position:relative;inset:auto;min-height:90px;height:auto;padding:13px 18px;gap:10px}
 html[data-editor-mode=cards] body.graph-editor .topbar .wordmark{width:64px;height:64px;min-width:64px}
 html[data-editor-mode=cards] body.graph-editor .topbar .modulus-logo{flex-basis:64px;width:64px;height:64px;min-width:64px;border-radius:13px}
 .canvas-workflow{position:relative;inset:auto;display:block;padding:12px 22px 18px;border:0;border-bottom:1px solid #ffffff10;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
 .canvas-workflow h1,html[lang=th] .canvas-workflow h1{font-size:25px;line-height:1.5;max-width:340px;margin-bottom:12px}
 .workflow-steps{font-size:11px;gap:8px 14px}
 .canvas-workflow #graph-actions{margin-top:20px;display:block;white-space:normal}
 .canvas-workflow .graph-edit-actions{max-width:none;justify-content:flex-start;gap:9px}
 .canvas-workflow #graph-actions button{min-height:44px;padding:11px 14px;font-size:12px}
 
 #flow-toolbar #build-preview{display:none}
 html[data-editor-mode=cards] body.graph-editor #world{gap:20px}
 html[data-editor-mode=cards] body.graph-editor .flow-node{width:100%!important;max-width:none;margin:0!important;order:3}
 html[data-editor-mode=cards] body.graph-editor #node-style{order:4;margin:0!important}
 html[data-editor-mode=cards] body.graph-editor #node-preview{margin:8px 0 0!important}
 .graph-editor #graph-status{position:relative;bottom:auto;left:auto;max-width:none;margin:16px 0 0;padding:12px;border-radius:10px;font-size:11px}
 #apps-dialog{padding:21px;width:min(520px,calc(100% - 28px))}
 #apps-dialog .app-destination{grid-template-columns:64px minmax(0,1fr) 14px;gap:13px;padding:13px;min-height:107px}
 #apps-dialog .app-destination .app-art{width:64px;height:64px;min-width:64px;padding:10px;border-radius:12px}
 #apps-dialog .app-copy strong{font-size:14px}
 #apps-dialog .app-copy small{font-size:11px}
}
@media(max-width:380px){.graph-editor .topbar #apps-label{display:none}#apps-dialog .app-destination{gap:10px;padding:11px;grid-template-columns:54px minmax(0,1fr) 12px}#apps-dialog .app-destination .app-art{width:54px;height:54px;min-width:54px;padding:8px}#apps-dialog .app-copy strong{font-size:13px}}
/* Canvas metadata belongs beside view controls, away from the primary actions. */
.graph-editor #graph-count{position:absolute;left:50%;bottom:94px;transform:translateX(-50%);z-index:4;width:max-content;max-width:calc(100% - 44px);padding:6px 12px;border:1px solid #ffffff14;border-radius:20px;background:#171a17eb;color:#aeb8a8;font-size:11px;line-height:1.6;white-space:nowrap;pointer-events:none}
@media(max-width:800px){html[data-editor-mode=cards] .graph-editor #graph-count{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto 18px;font-size:11px}}

/* The cat introduces the canvas; phone visitors see the result before the form. */
#start-idea{border:0;cursor:pointer;font:inherit;font-size:inherit;text-align:left}
#start-idea:focus-visible{outline:2px solid #b9efad;outline-offset:4px}
@media(max-width:800px){
 html[data-editor-mode=cards] body.graph-editor #node-preview:has(.cat-art){order:-1;margin:0!important}
 html[data-editor-mode=cards] body.graph-editor #node-preview:has(.cat-art) .preview-well{height:350px}
}

/* Appearance feeds the middle lane from its left, keeping the curve off the cards. */
@media(min-width:801px){.graph-editor #node-style>.graph-port.out{right:auto;left:-15px}}