@font-face{font-family:InterTight;src:url('fonts/InterTight-Latin.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:NotoThai;src:url('fonts/NotoSansThai-Web.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#111312;--card:#202220;--surface:#292c29;--field:#171917;--line:#414640;--text:#f1f2ee;--muted:#a8afa2;--lime:#b9efad;font-family:InterTight,NotoThai,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;height:100svh;min-height:650px;display:flex;flex-direction:column;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.32}a{color:inherit;text-decoration:none}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:2px}input::placeholder,textarea::placeholder{color:#929b8b;opacity:1}input,textarea{min-width:0}textarea{resize:vertical}fieldset{padding:0;margin:0;border:0;min-width:0}i{font-style:normal}.icon{display:block;width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-90px;left:20px;z-index:100;background:var(--lime);color:#192315;padding:12px;border-radius:8px}.skip-link:focus{top:10px}[hidden]{display:none!important}
.topbar{height:76px;flex-shrink:0;display:flex;align-items:center;gap:18px;padding:0 30px;border-bottom:1px solid #ffffff0d;background:#151715;z-index:20}.wordmark{font-size:27px;font-weight:650;letter-spacing:-1.4px;display:flex;align-items:center;gap:10px}.brand-dots{display:grid;grid-template-columns:repeat(2,5px);gap:3px;transform:rotate(-13deg)}.brand-dots i{width:5px;height:5px;border-radius:50%;background:#ef8155}.brand-dots i:nth-child(2){background:#f0cd70}.brand-dots i:nth-child(3){background:var(--lime)}.brand-dots i:nth-child(4){background:#83b8de}.top-divider{height:22px;width:1px;background:#ffffff1b}.workspace-name{font-size:12px;color:#aeb7a7}.project-tab{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff04;padding:10px 14px;font-size:12px;max-width:270px;white-space:nowrap}.tab-dot{height:5px;width:5px;border-radius:50%;background:var(--lime);flex-shrink:0}#tab-name{max-width:150px;overflow:hidden;text-overflow:ellipsis}.local-badge{font-size:9px;color:#a9b59d;border-left:1px solid #ffffff16;padding-left:10px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.work-menu{position:relative}.work-menu summary{list-style:none;display:flex;align-items:center;gap:7px;color:#bdc4b6;font-size:12px;padding:8px 0;cursor:pointer}.work-menu summary::-webkit-details-marker{display:none}.work-menu summary .icon{width:13px}.work-links{position:absolute;top:37px;right:0;min-width:260px;border:1px solid var(--line);background:#242824;padding:8px;border-radius:12px;box-shadow:0 10px 40px #0008}.work-links a{display:flex;gap:12px;align-items:center;padding:14px 9px;font-size:16px}.work-links a:hover{background:#ffffff08;border-radius:7px}.work-links a span{font-size:12px;color:var(--muted);flex:1}.languages{display:flex;gap:2px;padding:3px;background:#ffffff05;border:1px solid #ffffff0a;border-radius:8px}.languages button{font-size:11px;min-width:31px;min-height:29px;background:transparent;border:0;border-radius:5px;color:#a6af9e}.languages button[aria-pressed=true]{background:#383f33;color:#eff4e9}.share-button{display:flex;align-items:center;gap:8px;background:#f1f3ed;color:#252b20;border:0;border-radius:8px;padding:11px 15px;font-size:12px;font-weight:550;min-height:39px}.share-button .icon{width:15px;height:15px}.share-button:hover{background:#dff3d7}main{display:flex;flex-direction:column;flex:1;min-height:0}.workspace-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 42px 22px;flex-shrink:0;background:linear-gradient(#141613,#121412)}.workspace-intro h1{font-size:29px;line-height:1.2;letter-spacing:-.9px;font-weight:450;margin:0 0 8px}.workspace-intro p{font-size:12px;color:#a3ac9a;margin:0}.starter{display:flex;align-items:center;gap:12px}.starter label{font-size:10px;color:#a3ad99}.starter select{max-width:210px;background:#252a22;color:#d2ddc6;border:1px solid #b5c7a222;border-radius:8px;padding:10px 28px 10px 12px;font-size:12px;min-height:38px}
.viewport{position:relative;flex:1;min-height:400px;overflow:hidden;background-color:#111312;background-image:radial-gradient(circle,#b9c6ad24 1px,transparent 1px);background-size:24px 24px;cursor:grab;touch-action:none}.viewport[data-mode=pan]{cursor:grab}.viewport.is-panning{cursor:grabbing}.world{position:absolute;left:0;top:0;width:1480px;height:720px;transform-origin:0 0;will-change:transform}.wires{position:absolute;inset:-2500px;width:6500px;height:6500px;pointer-events:none;overflow:visible}.wires path{fill:none;stroke:#8d9684;stroke-width:1.3;opacity:.65}.wires path[data-wire=idea-style]{stroke:#8dbba0}.wires path[data-wire=features-style]{stroke:#c293bb}.wires path[data-wire=style-preview]{stroke:#a0b8dc}.wires path.disconnected{opacity:.13;stroke-dasharray:4 7}.node{position:absolute;background:linear-gradient(140deg,#232623,#1c1f1c);border:1px solid #62695d70;border-radius:17px;box-shadow:0 12px 32px #0003,inset 0 1px 0 #ffffff04;cursor:auto;min-width:0}.node.selected{border-color:#a1b58f;box-shadow:0 0 0 2px #a1b58f15,0 12px 32px #0003}.node.is-dragging{z-index:12!important;box-shadow:0 18px 50px #0008}.node-header{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px}.drag-handle{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:44px;border:0;background:transparent;padding:0;color:#e0e5da;text-align:left;font-size:13px;cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}.grip{margin-left:auto;color:#87907e;opacity:.6}.grip .icon{width:13px;height:13px}.dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 7px currentColor;flex-shrink:0}.dot.amber{background:#edd77e;color:#edd77e55}.dot.mint{background:#8bdfaa;color:#8bdfaa55}.dot.pink{background:#e4a5cf;color:#e4a5cf55}.dot.lavender{background:#c1a3ed;color:#c1a3ed55}.dot.blue{background:#90c3ed;color:#90c3ed55}.node-body{background:linear-gradient(130deg,#2c302b,#252925);border:1px solid #c6d1bc14;border-radius:11px;margin:0 7px 7px;padding:16px}.field-label{display:block;font-size:12px;color:#c5cebc;line-height:1.5;margin:0 0 9px}.node input:not([type]),.node input[type=text],.node textarea{width:100%;background:var(--field);border:1px solid #ffffff08;border-radius:8px;padding:12px;font-size:12px;line-height:1.65;color:#ecf1e5}.node textarea{min-height:99px}.type-options{display:grid;gap:5px;margin-top:19px}.type-options legend{font-size:11px;color:#a8b29d;margin-bottom:10px}.type-options label{position:relative;display:flex;align-items:center;gap:10px;padding:11px 10px;border:1px solid #ffffff0a;border-radius:8px;font-size:12px;cursor:pointer;background:#ffffff02;color:#b9c3ae}.type-options input{position:absolute;opacity:0;width:1px;height:1px}.type-options .icon{width:16px;height:16px}.radio-dot{width:10px;height:10px;border:1px solid #7e8b70;border-radius:50%;margin-left:auto;display:grid;place-items:center}.type-options label:has(:checked){background:#b9efad0d;border-color:#b9efad55;color:#d9edc5}.type-options :checked~.radio-dot::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--lime)}.type-options label:has(:focus-visible){outline:2px solid var(--lime);outline-offset:2px}.microcopy{font-size:10px;color:#a0ac93;margin:14px 0 0;line-height:1.6}.port{position:absolute;width:9px;height:9px;border-radius:50%;background:#bcd398;border:2px solid #22281e;box-shadow:0 0 0 1px #70845c;top:50%;z-index:3;transform:translateY(-50%)}.port.input{left:-5px}.port.output{right:-5px}.idea-node .port{background:#8bdfaa;box-shadow:0 0 0 1px #53735a}.features-node .port{background:#e4a5cf;box-shadow:0 0 0 1px #845e79}.style-node #port-style-in-a{top:30%;background:#8bdfaa}.style-node #port-style-in-b{top:72%;background:#e4a5cf}.style-node #port-style-out,.preview-node .port{background:#90c3ed;box-shadow:0 0 0 1px #68829d}.node.off .port{background:#444b3d;box-shadow:0 0 0 1px #555e4f}.node-toggle{border:0;border-radius:20px;width:25px;height:15px;background:#51564a;padding:3px;display:flex;align-items:center;flex-shrink:0}.node-toggle i{width:9px;height:9px;background:#bec6b3;border-radius:50%}.node-toggle[aria-pressed=true]{background:#b9efad55;justify-content:flex-end}.node-toggle[aria-pressed=true] i{background:#d1f3bc}.node.off .node-fields{opacity:.4}.input-meta{display:flex;justify-content:space-between;gap:6px;margin-top:9px;color:#9ca88e;font-size:9px}.audience-label{margin-top:15px}.feature-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.feature-option{position:relative;display:flex;align-items:center;gap:6px;padding:11px 8px;min-width:0;min-height:40px;border:1px solid #ffffff0e;border-radius:7px;background:#ffffff02;cursor:pointer;font-size:11px;color:#aebba1}.feature-option input{position:absolute;opacity:0;width:1px;height:1px}.feature-option .icon{width:14px;height:14px}.feature-check{margin-left:auto;width:12px;height:12px;border:1px solid #78866a;border-radius:3px;flex-shrink:0;display:grid;place-items:center}.feature-check .icon{width:10px;height:10px;visibility:hidden}.feature-option:has(:checked){background:#c3a3e80c;border-color:#c6a2e24d;color:#eadbf6}.feature-option:has(:checked) .feature-check{background:#cbb1e9;border-color:#cbb1e9;color:#2c2334}.feature-option:has(:checked) .feature-check .icon{visibility:visible}.feature-option:has(:focus-visible){outline:2px solid var(--lime);outline-offset:2px}.segmented{display:flex;gap:4px;border:1px solid #ffffff0c;background:#171c16;padding:4px;border-radius:8px}.segmented button{display:flex;justify-content:center;align-items:center;gap:7px;flex:1;border:0;padding:9px 8px;border-radius:5px;background:transparent;color:#aab69e;font-size:11px}.segmented .icon{width:14px;height:14px}.segmented button[aria-pressed=true]{background:#373e31;color:#e9f3de}.field-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:22px;margin-bottom:10px}.field-row .field-label{margin:0}.field-row output{font-size:10px;color:#a6b497}.swatches{display:flex;gap:8px;align-items:center}.swatches>button{position:relative;width:25px;height:25px;border-radius:50%;background:var(--swatch);border:3px solid #252b23;padding:0;box-shadow:0 0 0 1px #ffffff16}.swatches>button[aria-pressed=true]{box-shadow:0 0 0 1px var(--swatch)}.swatches>button[aria-pressed=true]::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#0008;left:7px;top:7px}.custom-colour{position:relative;width:25px;height:25px;display:grid;place-items:center;cursor:pointer;border:1px dashed #98a48988;border-radius:50%;color:#a7b697;overflow:hidden}.custom-colour input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.custom-colour .icon{width:13px;height:13px;pointer-events:none}.layout-label{margin-top:22px}.layout-options{display:flex;gap:6px}.layout-options button{display:flex;flex:1;align-items:center;flex-direction:column;gap:8px;padding:9px 5px;border:1px solid #ffffff12;background:#ffffff02;border-radius:7px;color:#9fad95;font-size:10px}.layout-options button[aria-pressed=true]{border-color:#b9efad5e;background:#b9efad08;color:#d3e9be}.layout-icon{display:flex;gap:3px;width:40px;height:25px}.layout-icon i{background:currentColor;opacity:.45;border-radius:2px;flex:1}.layout-icon.split i:first-child{flex:1.5}.layout-icon.stack{flex-direction:column}.layout-icon.editorial{flex-direction:column}.layout-icon.editorial i:first-child{flex:.3;width:60%}.layout-icon.editorial i:last-child{flex:1}.radius-label{margin-top:22px}.node input[type=range]{width:100%;height:14px;accent-color:var(--lime);cursor:pointer;margin:1px 0}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#9eaa92;margin-top:3px}
.project-node{width:220px}.idea-node,.features-node{width:310px}.style-node{width:270px}.preview-node{width:400px;background:#1c211d}.preview-node .node-header{padding-inline:15px}.live-label{display:flex;gap:5px;align-items:center;font-size:9px;color:#bacbac}.live-label i{width:4px;height:4px;background:#b9efad;border-radius:50%}.preview-body{padding:0 7px}.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:31px;border-radius:9px 9px 0 0;background:#292e29;color:#9fae95;padding:0 10px;font-size:8px;overflow:hidden}.preview-bar .icon{width:10px;height:10px}.browser-dots{display:flex;gap:3px}.browser-dots i{width:4px;height:4px;border-radius:50%;background:#6c7861}.browser-dots i:first-child{background:#b58d7a}.browser-dots i:nth-child(2){background:#b4ac6d}.browser-dots i:nth-child(3){background:#90a17d}#preview-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}.preview-well{background:#111711;min-height:390px;display:flex;justify-content:center;padding:0;overflow:hidden}.preview-well.mobile{padding:13px 0;background:repeating-linear-gradient(45deg,#181f16,#181f16 1px,#1b2319 1px,#1b2319 8px)}.preview-bottom{display:flex;justify-content:space-between;color:#9ead91;font-size:9px;padding:12px 8px}.preview-toolbar{display:flex;align-items:center;gap:4px;border-top:1px solid #ffffff0b;padding:9px 12px}.preview-toolbar [role=group]{display:flex;gap:2px}.toolbar-divider{height:20px;width:1px;background:#ffffff12;margin:0 6px}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:33px;padding:7px;border:0;border-radius:7px;color:#b7c1ab;background:transparent}.icon-button .icon{width:16px;height:16px}.icon-button:hover:not(:disabled){color:#e5f0dc;background:#ffffff08}.icon-button.selected{background:#e8eddf;color:#283321}.preview-share{display:flex;align-items:center;gap:7px;background:transparent;border:0;border-radius:6px;margin-left:auto;padding:8px;font-size:10px;color:#c8e9b3}.preview-share:hover{background:#b9efad10}.preview-share .icon{width:14px;height:14px}
/* The preview is drawn from the actual configuration. */
.mock-screen{--accent:#b9efad;--accent-ink:#15220f;--radius:16px;--preview-bg:#141a15;--preview-panel:#202922;--preview-ink:#edf3e6;--preview-muted:#a6b49f;--preview-line:#ffffff16;background:var(--preview-bg);color:var(--preview-ink);width:100%;min-width:0;font-family:InterTight,NotoThai,Arial,sans-serif;overflow:hidden;transition:background .2s,color .2s}.mock-screen[data-theme=light]{--preview-bg:#f5f5f0;--preview-panel:#e8ebe2;--preview-ink:#243021;--preview-muted:#62715b;--preview-line:#20301c20}.mock-nav{height:43px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 19px;border-bottom:1px solid var(--preview-line);font-size:9px}.mock-logo{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:70%}.mock-logo i{color:var(--accent)}.mock-logo .icon{width:15px;height:15px}.mock-nav-right{font-size:8px;color:var(--preview-muted)}.mock-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:15px;padding:27px 19px;align-items:center;min-height:194px}.mock-eyebrow{color:var(--accent);font-size:8px;letter-spacing:.3px;display:block;margin-bottom:10px}.mock-heading{font-size:26px;line-height:1.09;letter-spacing:-1.1px;font-weight:550;margin:0 0 10px;overflow-wrap:anywhere}.mock-description{font-size:9px;line-height:1.65;color:var(--preview-muted);margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.mock-cta{display:inline-flex;gap:10px;align-items:center;border-radius:calc(var(--radius)*.45);padding:8px 11px;background:var(--accent);color:var(--accent-ink);font-size:8px;font-weight:600;margin-top:15px}.mock-cta .icon{width:10px;height:10px}.mock-art{position:relative;height:145px;background:var(--preview-panel);border:1px solid var(--preview-line);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center}.sculpture{width:92px;height:92px;position:relative;transform:rotate(-22deg)}.sculpture i{position:absolute;inset:0;border:15px solid var(--accent);border-radius:28px;box-shadow:inset 1px 1px 0 #ffffff70,1px 2px 0 #ffffff20,8px 15px 19px #0003}.sculpture i:nth-child(2){transform:rotate(60deg) scale(.82);opacity:.65}.sculpture i:nth-child(3){transform:rotate(120deg) scale(.6);opacity:.4}.art-lines{position:absolute;inset:12px;border:1px solid var(--preview-line);border-radius:50%;transform:rotate(-30deg) scaleX(1.3)}.art-corner{position:absolute;right:9px;bottom:8px;font-size:7px;color:var(--preview-muted)}.mock-section{border-top:1px solid var(--preview-line);padding:16px 19px}.mock-section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:10px;font-weight:550}.mock-section-header .icon{width:12px;height:12px;color:var(--accent)}.mock-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gallery-tile{height:55px;border-radius:calc(var(--radius)*.55);background:var(--preview-panel);position:relative;overflow:hidden}.gallery-tile::before{content:"";position:absolute;width:44px;height:44px;border:7px solid var(--accent);border-radius:50%;left:18%;top:6px;transform:rotate(-30deg);opacity:.7}.gallery-tile:nth-child(2)::before{border-radius:8px;transform:rotate(32deg);width:35px;height:35px;left:25%;top:10px;opacity:.45}.gallery-tile:nth-child(3)::before{border-radius:100% 10% 100% 10%;width:50px;height:50px;top:10px;opacity:.9}.mock-contact{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px}.mock-contact span{font-size:8px;color:var(--preview-muted)}.mock-pill{background:var(--preview-panel);padding:7px 10px;border:1px solid var(--preview-line);border-radius:calc(var(--radius)*.5);color:var(--preview-ink);font-size:8px}.mock-mini-row{display:flex;gap:7px;align-items:center;justify-content:space-between;padding:9px 0;font-size:9px;border-bottom:1px solid var(--preview-line)}.mock-mini-row:last-child{border-bottom:0}.mock-mini-row .icon{width:12px;height:12px;color:var(--accent)}.mini-status{font-size:7px;color:var(--preview-muted)}.mock-search{display:flex;align-items:center;gap:8px;border:1px solid var(--preview-line);padding:9px;border-radius:calc(var(--radius)*.4);font-size:8px;color:var(--preview-muted)}.mock-search .icon{width:12px;height:12px}.mock-chart{display:flex;gap:6px;align-items:flex-end;height:55px;padding:4px 0}.mock-chart i{flex:1;border-radius:3px 3px 0 0;background:var(--accent);opacity:.6}.mock-chart i:nth-child(2n){opacity:.9}.mock-feature-note{font-size:8px;color:var(--preview-muted);line-height:1.7}.mock-footer{font-size:7px;color:var(--preview-muted);padding:13px 19px;border-top:1px solid var(--preview-line);display:flex;justify-content:space-between}.mock-screen[data-layout=stack] .mock-hero{display:flex;flex-direction:column;text-align:center;padding-top:23px}.mock-screen[data-layout=stack] .mock-art{width:100%;height:100px;order:2;margin-top:10px}.mock-screen[data-layout=editorial] .mock-hero{display:block}.mock-screen[data-layout=editorial] .mock-heading{font-family:Georgia,NotoThai,serif;font-size:35px;font-weight:400;letter-spacing:-1.4px}.mock-screen[data-layout=editorial] .mock-art{height:95px;margin-top:18px}.mock-screen[data-layout=editorial] .mock-eyebrow{letter-spacing:1px}.mock-screen.mobile{width:236px;border:4px solid #4b5646;border-radius:26px;box-shadow:0 8px 20px #0005}.mock-screen.mobile .mock-nav{padding:5px 13px;height:38px}.mock-screen.mobile .mock-nav-right{display:none}.mock-screen.mobile .mock-hero{display:flex;flex-direction:column;text-align:center;padding:22px 13px}.mock-screen.mobile .mock-heading{font-size:27px}.mock-screen.mobile .mock-art{height:105px;width:100%;margin-top:12px}.mock-screen.mobile .mock-section{padding:13px}.mock-screen.mobile .mock-gallery{gap:4px}.mock-screen.mobile .mock-footer{padding-inline:13px}.app-welcome{padding:23px 19px 17px}.app-welcome .mock-heading{font-size:24px}.app-welcome .mock-description{margin-top:9px}.app-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 19px 18px}.app-summary div{padding:13px;background:var(--preview-panel);border:1px solid var(--preview-line);border-radius:var(--radius);font-size:9px}.app-summary .icon{color:var(--accent);margin-bottom:9px}.app-summary span{display:block;color:var(--preview-muted);font-size:8px;margin-top:5px}.automation-flow{display:flex;flex-direction:column;align-items:center;padding:5px 20px 22px}.automation-step{width:100%;display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--preview-line);border-radius:var(--radius);background:var(--preview-panel);font-size:10px}.automation-step>.icon{color:var(--accent);width:20px;height:20px}.automation-step span span{display:block;font-size:8px;color:var(--preview-muted);margin-top:4px}.automation-connector{height:18px;width:1px;background:var(--accent);opacity:.55}.automation-step.end{border-color:var(--accent)}.mock-screen[data-kind=automation][data-layout=split] .automation-flow{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}.mock-screen[data-kind=automation][data-layout=split] .automation-connector{display:none}.mock-screen[data-kind=automation][data-layout=editorial] .automation-step{border-radius:0;background:transparent;border-width:0 0 1px;padding-left:0}.mock-screen[data-kind=app][data-layout=stack] .app-summary{grid-template-columns:1fr}.mock-screen[data-kind=app][data-layout=editorial] .app-welcome .mock-heading{font-family:Georgia,NotoThai,serif;font-size:31px}.mock-screen[data-kind=app][data-layout=editorial] .app-summary div{background:transparent;border-width:0 0 1px;border-radius:0}
.canvas-controls{position:absolute;right:20px;bottom:86px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid #ffffff19;border-radius:12px;background:#252a24ed;box-shadow:0 8px 25px #0005;cursor:auto}.canvas-controls output{font-size:9px;color:#b5c3a7;padding:5px 0}.canvas-controls>span{height:1px;background:#ffffff12;width:23px;margin:4px 0}.canvas-dock{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;border:1px solid #ffffff22;background:#242a23f2;border-radius:13px;box-shadow:0 8px 30px #0006;cursor:auto;backdrop-filter:blur(12px)}.canvas-dock [role=group]{display:flex;gap:4px}.canvas-dock .icon-button{min-width:36px;min-height:36px}.dock-reset{display:flex;align-items:center;gap:7px;font-size:11px;padding:8px;border:0;background:transparent;white-space:nowrap;color:#bcc9b1}.dock-reset .icon{width:14px;height:14px}.canvas-hint{position:absolute;bottom:32px;left:30px;font-size:10px;color:#8f9c84;pointer-events:none}footer{display:flex;align-items:center;gap:17px;flex-shrink:0;min-height:37px;padding:0 30px;border-top:1px solid #ffffff0b;background:#141713;font-size:9px;color:#939f86}.footer-brand span{margin-left:11px;color:#707d64}#save-status{margin-left:auto}footer button{border:0;background:transparent;font-size:9px;color:#b1bca5;padding:10px 0}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#a9c18f}dialog{width:min(580px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto;background:#23291f;border:1px solid #626f54;color:#f0f5e8;border-radius:18px;padding:25px;box-shadow:0 20px 120px #000b}dialog::backdrop{background:#060906bd;backdrop-filter:blur(6px)}dialog h2{font-size:29px;font-weight:500;letter-spacing:-.8px;line-height:1.25;margin:18px 0 12px}dialog p,dialog li{font-size:13px;line-height:1.7;color:#b6c3a9}dialog li{margin:8px 0}dialog textarea{width:100%;background:#141b10;border:1px solid #536346;border-radius:8px;padding:15px;color:#e3efd9;font-size:12px;line-height:1.7}.dialog-actions{display:flex;gap:10px;margin-top:18px}.primary-button,.secondary-button{display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;padding:12px 16px;border-radius:8px;min-height:43px}.primary-button{background:var(--lime);color:#213218;border:1px solid #caefb9;flex:1}.secondary-button{background:#ffffff04;border:1px solid #637552;color:#dce9ce}.primary-button:hover{background:#d0f6bd}.secondary-button:hover{background:#ffffff0a}.text-button{border:0;background:transparent;color:#c1d7ab;font-size:11px;padding:10px 0}.share-notice{font-size:10px!important}#copy-status{min-height:20px;color:var(--lime);font-size:11px}.expanded-dialog{width:min(940px,calc(100vw - 32px));background:#1c211a}.expanded-dialog .dialog-top{margin-bottom:16px}#expanded-preview .mock-screen{max-width:100%;min-height:450px}#expanded-preview .mock-nav{font-size:14px;height:60px;padding-inline:36px}#expanded-preview .mock-logo{font-size:19px}#expanded-preview .mock-nav-right{font-size:12px}#expanded-preview .mock-hero{padding:40px 36px;gap:35px}#expanded-preview .mock-heading{font-size:48px}#expanded-preview .mock-description{font-size:15px}#expanded-preview .mock-art{height:245px}#expanded-preview .sculpture{transform:rotate(-22deg) scale(1.6)}#expanded-preview .mock-cta{font-size:12px;padding:12px 18px}#expanded-preview .mock-section{padding:24px 36px}#expanded-preview .mock-section-header{font-size:16px}#expanded-preview .gallery-tile{height:90px}#expanded-preview .app-welcome{padding:30px}#expanded-preview .mock-screen.mobile{margin:auto;max-width:340px;width:100%}#expanded-preview .mock-screen.mobile .mock-heading{font-size:33px}#expanded-preview .mock-screen.mobile .mock-art{height:130px}#expanded-preview .mock-screen.mobile .mock-nav{padding:0 14px}.noscript{position:fixed;inset:20% 10% auto;background:#30382a;padding:24px;z-index:100}.noscript a{text-decoration:underline}
html[lang=th] body{font-family:NotoThai,InterTight,sans-serif}html[lang=th] .wordmark,html[lang=th] .project-tab{font-family:InterTight,NotoThai,sans-serif}html[lang=th] .workspace-intro h1{font-size:27px;line-height:1.5;letter-spacing:-.7px}html[lang=th] .drag-handle{font-size:12px}html[lang=th] .feature-option{font-size:10px}html[lang=th] .mock-screen{font-family:NotoThai,InterTight,sans-serif}html[lang=th] .mock-heading{line-height:1.4;font-size:23px;letter-spacing:-.6px}html[lang=th] .mock-screen[data-layout=editorial] .mock-heading{font-size:28px}html[lang=th] .mock-description{font-size:9px}html[lang=th] .layout-options button{font-size:9px}html[lang=th] .workspace-intro p{font-size:11px}
@media(max-width:1100px){.workspace-name,.top-divider{display:none}.project-tab{max-width:200px}.topbar{padding-inline:22px}.top-actions{gap:15px}.workspace-intro{padding-inline:28px}.workspace-intro h1{font-size:25px}.canvas-hint{display:none}.starter label{display:none}}
@media(max-width:700px){html[data-editor-mode=cards] body{height:auto;min-height:100svh;overflow:auto}html[data-editor-mode=cards] .topbar{height:68px;padding:0 18px;gap:12px;position:sticky;top:0}html[data-editor-mode=cards] .wordmark{font-size:23px}html[data-editor-mode=cards] .brand-dots{grid-template-columns:repeat(2,4px);gap:2px}html[data-editor-mode=cards] .brand-dots i{width:4px;height:4px}html[data-editor-mode=cards] .project-tab,html[data-editor-mode=cards] .work-menu,html[data-editor-mode=cards] .workspace-name,html[data-editor-mode=cards] .top-divider{display:none}html[data-editor-mode=cards] .top-actions{gap:10px}html[data-editor-mode=cards] .share-button{padding:9px 10px;font-size:11px;min-height:35px}html[data-editor-mode=cards] .share-button .icon{display:none}html[data-editor-mode=cards] .languages button{min-width:29px;min-height:29px}html[data-editor-mode=cards] .workspace-intro{padding:27px 20px 20px;display:block}html[data-editor-mode=cards] .workspace-intro h1{font-size:29px;line-height:1.2;max-width:300px}html[data-editor-mode=cards] .workspace-intro p{font-size:12px;line-height:1.6;max-width:300px}html[data-editor-mode=cards] .starter{margin-top:18px;gap:10px}html[data-editor-mode=cards] .starter label{display:block;font-size:10px}html[data-editor-mode=cards] .starter select{font-size:11px;flex:1;max-width:none}html[data-editor-mode=cards] .viewport{overflow:visible;min-height:0;touch-action:pan-y;padding:12px 20px 85px;cursor:auto}html[data-editor-mode=cards] .world{position:relative;width:auto;height:auto;display:flex;flex-direction:column;gap:24px;transform:none!important;will-change:auto}html[data-editor-mode=cards] .node{position:relative!important;left:auto!important;top:auto!important;width:100%!important;transform:none!important;z-index:auto!important}html[data-editor-mode=cards] .node-header{min-height:46px}html[data-editor-mode=cards] .drag-handle{min-height:46px;cursor:default;font-size:14px}html[data-editor-mode=cards] .grip{display:none}html[data-editor-mode=cards] .node-body{padding:18px}html[data-editor-mode=cards] .project-node .type-options{grid-template-columns:1fr 1fr 1fr;gap:5px}html[data-editor-mode=cards] .type-options label{justify-content:center;gap:5px;flex-wrap:wrap;padding:12px 7px;font-size:11px}html[data-editor-mode=cards] .type-options .radio-dot{display:none}html[data-editor-mode=cards] .type-options .icon{width:14px;height:14px}html[data-editor-mode=cards] .field-label{font-size:13px}html[data-editor-mode=cards] .node input:not([type]),html[data-editor-mode=cards] .node textarea{font-size:14px;min-height:43px}html[data-editor-mode=cards] .node textarea{min-height:120px}html[data-editor-mode=cards] .input-meta{font-size:10px}html[data-editor-mode=cards] .feature-option{font-size:12px;padding:13px 10px}html[data-editor-mode=cards] .feature-option .icon{width:16px;height:16px}html[data-editor-mode=cards] .feature-check{width:14px;height:14px}html[data-editor-mode=cards] .feature-check .icon{width:11px;height:11px}html[data-editor-mode=cards] .feature-options{gap:9px}html[data-editor-mode=cards] .segmented button{font-size:13px;min-height:39px}html[data-editor-mode=cards] .layout-options button{padding:12px 6px;font-size:11px}html[data-editor-mode=cards] .layout-icon{width:48px;height:30px}html[data-editor-mode=cards] .swatches{gap:13px}html[data-editor-mode=cards] .swatches>button,html[data-editor-mode=cards] .custom-colour{width:29px;height:29px}html[data-editor-mode=cards] .swatches>button[aria-pressed=true]::after{left:9px;top:9px}html[data-editor-mode=cards] .field-row output{font-size:11px}html[data-editor-mode=cards] .range-labels{font-size:10px}html[data-editor-mode=cards] .wires,html[data-editor-mode=cards] .port,html[data-editor-mode=cards] .canvas-controls,html[data-editor-mode=cards] .canvas-hint{display:none}html[data-editor-mode=cards] .canvas-dock{position:fixed;bottom:14px;z-index:30;padding:6px;gap:3px;width:max-content;max-width:calc(100vw - 28px);box-shadow:0 5px 30px #0008}html[data-editor-mode=cards] .canvas-dock [role=group],html[data-editor-mode=cards] .canvas-dock [role=group]+.toolbar-divider{display:none}html[data-editor-mode=cards] .canvas-dock .icon-button{min-width:36px;min-height:36px}html[data-editor-mode=cards] .dock-reset{font-size:11px}html[data-editor-mode=cards] .preview-well{min-height:360px}html[data-editor-mode=cards] .preview-toolbar{gap:2px;padding-inline:9px}html[data-editor-mode=cards] .preview-share{font-size:11px}html[data-editor-mode=cards] .mock-heading{font-size:25px}html[data-editor-mode=cards] .preview-bottom{font-size:10px}html[data-editor-mode=cards] .preview-bar{height:34px}html[data-editor-mode=cards] .preview-node .node-header{padding:0 14px}html[data-editor-mode=cards] footer{padding:14px 20px 84px;flex-wrap:wrap;gap:12px;font-size:10px}html[data-editor-mode=cards] #save-status{margin-left:0;font-size:10px}html[data-editor-mode=cards] .footer-brand{width:100%}html[data-editor-mode=cards] footer button{font-size:10px}html[data-editor-mode=cards] .dialog-actions{flex-direction:column}html[data-editor-mode=cards] dialog{padding:22px}html[data-editor-mode=cards] dialog h2{font-size:26px}html[data-editor-mode=cards] #expanded-preview .mock-hero{padding:23px 18px;gap:16px}html[data-editor-mode=cards] #expanded-preview .mock-heading{font-size:29px}html[data-editor-mode=cards] #expanded-preview .mock-description{font-size:12px}html[data-editor-mode=cards] #expanded-preview .mock-art{height:140px}html[data-editor-mode=cards] #expanded-preview .sculpture{transform:rotate(-22deg) scale(.9)}html[data-editor-mode=cards] #expanded-preview .mock-nav{padding:0 18px}html[data-editor-mode=cards] #expanded-preview .mock-logo{font-size:13px}html[data-editor-mode=cards] #expanded-preview .mock-nav-right{font-size:8px}html[data-editor-mode=cards] #expanded-preview .mock-section{padding:18px}html[data-editor-mode=cards][lang=th] .workspace-intro h1{font-size:27px}html[data-editor-mode=cards][lang=th] .type-options label{font-size:10px}html[data-editor-mode=cards][lang=th] .feature-option{font-size:11px}html[data-editor-mode=cards][lang=th] .layout-options button{font-size:11px}html[data-editor-mode=cards] .node-toggle{width:32px;height:20px}html[data-editor-mode=cards] .node-toggle i{width:13px;height:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Keep accent text readable when the visitor selects a light or dark colour. */
.mock-eyebrow,.mock-logo i,.mock-section-header .icon,.mock-mini-row .icon,.app-summary .icon,.automation-step>.icon{color:var(--accent-text,var(--accent))}