/* Reference-led canvas: neutral charcoal, floating chrome, luminous ports. */
:root{--bg:#101010;--card:#202020;--surface:#2b2b2b;--field:#171717;--line:#494949;--text:#f1f1f1;--muted:#a4a4a4;--lime:#88efa1}
body{min-height:560px;background:#101010;font-weight:400}
input::placeholder,textarea::placeholder{color:#8c8c8c}
.topbar{position:absolute;inset:25px 30px auto;height:48px;padding:0;background:transparent;border:0;gap:25px;pointer-events:none}
.topbar>*{pointer-events:auto}.wordmark{width:42px;height:44px;display:grid;place-items:center}.orbit-mark{display:block;width:29px;height:18px;border:4px solid #f4f4f4;border-radius:50%;transform:rotate(44deg);box-shadow:inset 1px 1px 0 #ffffff40}
.studio-menu{display:flex;gap:5px}.studio-menu button{height:44px;min-width:83px;border:1px solid #ffffff03;border-radius:10px;background:#1d1d1d;color:#dedede;font-size:12px}.studio-menu button:first-child{background:#262626}.studio-menu button:hover{background:#303030}
.project-tab{height:44px;border:0;background:#252525;gap:18px;border-radius:10px;padding:0 17px;font-size:12px;max-width:240px}.project-tab .icon{width:13px;height:13px;color:#868686}.tab-chevron{transform:rotate(90deg)}.project-tab>[data-icon]:last-child{transform:rotate(-90deg)}
.top-actions{gap:8px}.work-menu summary{height:44px;background:#202020;padding:0 14px;border:1px solid #ffffff05;border-radius:10px;color:#ccc;font-size:12px}.work-links{background:#252525}.languages{height:44px;background:#202020;border:0;align-items:center;border-radius:10px}.languages button{color:#999}.languages button[aria-pressed=true]{background:#333;color:#fff}
.share-button{position:absolute;right:0;top:66px;height:43px;min-width:114px;justify-content:center;background:#fafafa;color:#222;font-size:13px;font-weight:450;border-radius:11px}.share-button:hover{background:#e8e8e8}
main{position:relative;min-height:0}.viewport{background-color:#101010;background-image:radial-gradient(circle,#2b2b2b 1.1px,transparent 1.3px);background-size:26px 26px;min-height:0}.world{width:1660px;height:820px}
.workspace-intro{position:absolute;inset:108px 30px auto;z-index:15;padding:0;background:transparent;display:block;pointer-events:none}.workspace-intro>div:first-of-type{position:absolute;left:50%;top:22px;transform:translateX(-50%);text-align:center;white-space:nowrap}.workspace-intro h1,html[lang=th] .workspace-intro h1{font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5;margin:0;color:#999}.workspace-intro p{display:none}
.canvas-brand{display:flex;align-items:center;gap:8px;color:#d8d8d8;font-size:12px;letter-spacing:-.1px}.canvas-brand>span:not(.brand-signal){color:#737373}.brand-signal{width:28px;height:28px;border-radius:50%;background:#f2ef76;display:block;position:relative;margin-right:2px}.brand-signal::before{content:"";position:absolute;left:8px;top:9px;width:2px;height:10px;background:#222;box-shadow:5px -3px #222,10px 2px #222}
.starter{display:none;pointer-events:auto;position:absolute;left:60px;top:-32px;width:265px;border:1px solid #444;background:#202020;box-shadow:0 15px 40px #0008;padding:15px;border-radius:12px;z-index:25}.starter.menu-open{display:grid;gap:8px}.starter label{display:block;color:#aaa;font-size:11px}.starter select{background:#141414;border:1px solid #444;color:#ddd;width:100%;max-width:none;font-size:12px}
.node{background:linear-gradient(135deg,#202020,#181818);border:1px solid #474747;border-radius:19px;box-shadow:0 3px 5px #0003;isolation:isolate}.node::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}.node.selected{border-color:#6c6c6c;box-shadow:0 0 0 1px #ffffff12,0 12px 35px #0004}.node.is-dragging{box-shadow:0 18px 50px #0008}
.project-node{width:275px}.idea-node,.features-node{width:330px}.style-node{width:330px}.preview-node{width:390px;background:#191919}
.project-node::before{background:radial-gradient(ellipse at 25% 100%,#d9dd5226,transparent 50%)}.style-node::before{background:radial-gradient(ellipse 80% 30% at 65% 0,#b166cb45,transparent 75%),radial-gradient(ellipse 30% 20% at 100% 10%,#5aadea55,transparent 90%)}.preview-node::before{background:radial-gradient(ellipse 40% 20% at 70% 10%,#5ba1d52b,transparent 100%)}
.node-header{padding:0 21px;min-height:47px;gap:13px}.drag-handle,html[lang=th] .drag-handle{min-height:47px;font-size:14px;letter-spacing:0;color:#e3e3e3;gap:10px;font-weight:400}.grip{opacity:0;transition:opacity .15s;color:#999}.node:hover .grip,.drag-handle:focus-visible .grip{opacity:.65}.dot{width:7px;height:7px;background:#f6f6f6!important;color:#fff!important;box-shadow:0 0 6px #ffffff70}
.node-body{background:#2b2b2b;border:1px solid #555;border-bottom-color:#3b3b3b;border-radius:15px;margin:0 8px 8px;padding:18px 17px}.node-body input:not([type]),.node-body input[type=text],.node-body textarea{font-size:14px;line-height:1.5;color:#e1e1e1;background:#181818;border:1px solid #202020;border-radius:10px;padding:12px 13px}.node-body textarea{height:83px;min-height:83px;max-height:125px;resize:vertical}.field-label{font-size:13px;color:#bcbcbc;margin-bottom:9px}.input-meta{font-size:10px;color:#858585;margin-top:9px}.audience-label{margin-top:17px}.microcopy{color:#969696;font-size:11px;margin-top:14px}.type-options{gap:5px;margin-top:17px}.type-options legend{color:#969696;font-size:12px}.type-options label{background:#202020;color:#c2c2c2;border:1px solid #343434;padding:12px;font-size:13px}.type-options label:has(:checked){background:#191919;color:#eee;border-color:#777957}.type-options .radio-dot{border-color:#777}.type-options :checked~.radio-dot::after{background:#eeee74}
.node-toggle{background:transparent!important;border:0!important;min-width:24px;width:24px;height:28px;padding:7px;opacity:1;display:grid;place-items:center}.node-toggle i{width:8px;height:8px;position:static;transform:none!important;margin:0;border-radius:50%;background:#777!important;box-shadow:none}.node-toggle[aria-pressed=true] i{background:#69e79a!important;box-shadow:0 0 8px #62df8b55}.features-node .node-toggle[aria-pressed=true] i{background:#ff696b!important;box-shadow:0 0 8px #ff696b44}.style-node .node-toggle[aria-pressed=true] i{background:#7bbff5!important;box-shadow:0 0 8px #7bbff544}
.port{width:7px;height:7px;border:0;box-shadow:0 0 6px #ffffff30;background:#ddd}.project-node .port{background:#f0f36f}.idea-node .port{background:#71eba0}.features-node .port{background:#f66d71}.style-node .port{background:#d8c4ed}.preview-node .port{background:#6ab9f6}.wires path,.wires path[data-wire]{stroke:#858585;stroke-width:1.15;opacity:.6}.wires path.disconnected{opacity:.2;stroke-dasharray:5 7}
.idea-node>.node-header{position:absolute;bottom:100%;left:0;right:0;margin-bottom:11px;padding-left:12px}.idea-node>.node-header .node-toggle{display:grid;position:absolute;top:72px;right:13px;z-index:2}.idea-node{background:#2b2b2b;border:0}.idea-node>.node-body{margin:0;border-color:#505050;border-radius:17px;padding:23px}.idea-node .node-fields::before{content:none;display:block;width:7px;height:7px;background:#72e49a;border-radius:50%;position:absolute;top:28px;right:24px;box-shadow:0 0 9px #69e89a55}.idea-node .field-label:first-of-type{padding-left:17px;position:relative;margin-bottom:18px}.idea-node .field-label:first-of-type::before{content:"";width:7px;height:7px;border-radius:50%;background:#72e49a;position:absolute;left:0;top:6px}.idea-node.off .node-fields::before{background:#777}.idea-node .input-meta{display:none}.idea-node .audience-label{font-size:12px;margin-top:17px}.idea-node .node-fields #audience{font-size:13px;padding:10px 12px}.build-button{position:absolute;right:0;bottom:calc(100% + 18px);display:flex;align-items:center;gap:6px;border:1px solid #b0fbbd;background:#86eea0;color:#183321;border-radius:10px;padding:9px 12px;font-size:13px;box-shadow:inset 0 1px 1px #ffffff70}.build-button .icon{width:14px;height:14px}.build-button:hover{background:#a1f8b5}
.features-node{background:#292929;border-color:#4e4e4e}.features-node .node-body{border:0;background:transparent;padding-top:7px}.features-node .dot{background:#ff6e71!important;box-shadow:0 0 6px #ff6e7144}.feature-options{gap:7px}.feature-option,html[lang=th] .feature-option{font-size:12px;padding:10px 8px;min-height:36px;background:#202020;border-color:#3e3e3e;color:#bcbcbc;border-radius:7px}.feature-option:has(:checked){background:#191919;border-color:#575757;color:#e4e4e4}.feature-check{border-color:#666}.feature-option:has(:checked) .feature-check{background:#e2b9e1;color:#3a293d;border-color:#e2b9e1}.feature-option>.icon{color:#adadad}.features-node .microcopy{margin-top:12px;font-size:10px}
.signal-list{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#a1a1a1;margin:0 0 28px}.signal-list>span{display:flex;gap:9px;align-items:center}.signal{display:block;width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px currentColor}.signal.yellow{background:#e9f276;color:#e9f25044}.signal.green{background:#70e69c;color:#70e69c44}.signal.red{background:#fc7174;color:#fc717444}
.style-node .field-label{color:#aaa;font-size:13px}.segmented{background:#191919;border-color:#202020;border-radius:10px;padding:4px}.segmented button{font-size:12px;color:#aaa;border-radius:7px}.segmented button[aria-pressed=true]{background:#393939;color:#fff}.field-row{margin-top:20px}.field-row output{color:#969696;font-size:11px}.swatches{gap:13px}.swatches>button{width:25px;height:25px}.swatches>button[aria-pressed=true]{outline:1px solid #eee;outline-offset:3px}.custom-colour{border-color:#777;color:#aaa}.layout-label,.radius-label{margin-top:20px}.layout-options{gap:7px}.layout-options button,html[lang=th] .layout-options button{background:#1b1b1b;border-color:#333;color:#999;font-size:11px;padding:9px 7px}.layout-options button[aria-pressed=true]{border-color:#737373;background:#202020;color:#ddd}.layout-icon{width:40px;height:22px}.node input[type=range]{accent-color:#b9b9b9}.range-labels{color:#8b8b8b}.style-node .node-body{padding:20px}
.preview-node .node-header{position:absolute;left:0;right:0;bottom:100%;padding-left:17px;margin-bottom:10px}.preview-node .live-label{font-size:9px;color:#888}.preview-node .live-label i{background:#80c9ff}.preview-body{padding:13px 9px 8px}.preview-bar{background:transparent;color:#a0a0a0;padding:0 10px;height:33px;margin-bottom:10px}.browser-dots{display:none}#preview-url{font-size:12px}.preview-bar::before{content:"";width:7px;height:7px;background:#6cbbf4;box-shadow:0 0 7px #6cbbf455;border-radius:50%;margin-right:0}#preview-url{margin-right:auto}.preview-bar>.icon,.preview-bar>[data-icon]{display:none}.preview-well{height:485px;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:17px;background:#101010;scrollbar-width:thin;scrollbar-color:#505050 transparent;display:block}.preview-well.mobile{display:flex;background:#202020;padding:10px}.preview-bottom{font-size:10px;color:#9b9b9b;padding:11px 8px 1px}.preview-toolbar{position:absolute;top:calc(100% + 20px);left:-4px;right:-4px;background:#272727;border:1px solid #414141;border-radius:16px;padding:8px;box-shadow:inset 0 0 0 5px #222;gap:4px}.preview-toolbar .icon-button{background:#1a1a1a;border:1px solid #353535;border-radius:9px;min-width:38px;min-height:39px;color:#a8a8a8}.preview-toolbar .icon-button.selected{color:#fff;background:#353535}.preview-share{font-size:11px;color:#ddd}.toolbar-divider{background:#ffffff18}
.mock-screen{--preview-bg:#151515;--preview-panel:#272727;--preview-ink:#f0f0f0;--preview-muted:#aaa;--preview-line:#ffffff16}.mock-screen[data-theme=light]{--preview-bg:#f1f0ef;--preview-panel:#e3e2e1;--preview-ink:#222;--preview-muted:#656565;--preview-line:#0002}.mock-nav{height:38px;font-size:9px;padding-inline:18px}.mock-logo{font-weight:450;font-size:10px}.mock-nav-right{font-size:8px}.mock-screen[data-kind=website] .mock-nav{display:none}.mock-screen[data-kind=website] .mock-hero{position:relative;display:block;min-height:485px;padding:0;isolation:isolate;overflow:hidden}.mock-screen[data-kind=website] .mock-art{position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;border-radius:0;z-index:-2;background:#0d1112}.mock-art img{height:100%;width:100%;object-fit:cover;display:block}.mock-screen[data-kind=website] .mock-hero::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#070b1380);z-index:-1}.mock-screen[data-kind=website] .mock-hero-copy{padding:24px;min-height:485px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;color:#fff}.mock-screen[data-kind=website] .mock-eyebrow{color:#fff;font-size:11px;letter-spacing:0;margin-bottom:11px}.mock-screen[data-kind=website] .mock-heading{font-size:25px;font-weight:450;letter-spacing:-.5px;line-height:1.2;max-width:300px}.mock-screen[data-kind=website] .mock-description{color:#f0eff2;font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.mock-screen[data-kind=website] .mock-cta{align-self:flex-start;padding:9px 13px;font-size:10px;max-width:100%;background:var(--accent);color:var(--accent-ink)}.art-corner{display:none}.mock-screen[data-kind=website][data-layout=stack] .mock-hero{display:flex;flex-direction:column}.mock-screen[data-kind=website][data-layout=stack] .mock-art{position:relative;order:0;height:280px;min-height:280px;z-index:0}.mock-screen[data-kind=website][data-layout=stack] .mock-hero-copy{min-height:0;order:1;text-align:center;align-items:center;color:var(--preview-ink);background:var(--preview-bg)}.mock-screen[data-kind=website][data-layout=stack] .mock-description,.mock-screen[data-kind=website][data-layout=stack] .mock-eyebrow{color:var(--preview-muted)}.mock-screen[data-kind=website][data-layout=stack] .mock-cta{align-self:center}.mock-screen[data-kind=website][data-layout=editorial] .mock-hero-copy{justify-content:flex-start;background:linear-gradient(#000c,transparent 55%)}.mock-screen[data-kind=website][data-layout=editorial] .mock-heading{font-family:Georgia,NotoThai,serif;font-size:35px}.mock-screen[data-kind=website][data-theme=light][data-layout=split] .mock-hero-copy{background:linear-gradient(transparent 35%,#fff9);color:#1a2029}.mock-screen[data-kind=website][data-theme=light][data-layout=split] .mock-description,.mock-screen[data-kind=website][data-theme=light][data-layout=split] .mock-eyebrow{color:#323c49}.mock-screen.mobile{border-color:#505050}.mock-screen.mobile .mock-hero,.mock-screen.mobile .mock-hero-copy{min-height:430px}.mock-screen.mobile .mock-hero-copy{padding:18px}.mock-screen.mobile .mock-heading{font-size:25px}
.icon-button{color:#aaa;border-radius:9px}.icon-button.selected{background:#fafafa;color:#333}.icon-button:hover:not(:disabled){background:#363636;color:#fff}.icon-button.selected:hover{background:#fff;color:#222}.canvas-controls{right:25px;top:50%;bottom:auto;transform:translateY(-40%);background:transparent;border:0;box-shadow:none;gap:7px;padding:0}.canvas-controls .icon-button{background:#252525;border:1px solid #3b3b3b;border-radius:11px;width:43px;height:43px;color:#aaa}.canvas-controls output{font-size:10px;color:#777;order:2}.canvas-controls>span{display:none}.canvas-controls #zoom-out{order:1}.canvas-controls #fit{order:3}.canvas-controls #arrange{order:4}
.canvas-dock{display:block;bottom:31px;padding:0;width:390px;border:1px solid #555;border-top:2px solid #887085;background:#191919;border-radius:17px;box-shadow:0 3px 30px #0005;overflow:hidden;backdrop-filter:blur(15px)}.prompt-strip{padding:14px 17px 13px;background:linear-gradient(120deg,#817f8c35,#8a426b26);box-shadow:inset 0 2px 3px #ffffff15}.prompt-strip>span{font-size:10px;color:#a7a1ad}.prompt-strip p{margin:6px 0 0;font-size:12px;line-height:1.5;color:#c2bdc5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dock-buttons{display:flex;align-items:center;gap:7px;padding:9px 10px}.canvas-dock .icon-button{width:35px;min-width:35px;height:39px}.canvas-dock [role=group]{gap:3px}.dock-reset{font-size:0;padding:9px;color:#a3a3a3}.dock-reset .icon{width:16px;height:16px}.canvas-dock .toolbar-divider{margin:0 2px}.canvas-hint{bottom:55px;left:30px;color:#707070;font-size:11px;max-width:180px;line-height:1.6}
footer{position:absolute;inset:auto 26px 12px;z-index:10;min-height:0;height:18px;padding:0;background:transparent;border:0;font-size:9px;color:#727272;pointer-events:none}footer>*{pointer-events:auto}.footer-brand span{color:#646464}footer button{font-size:9px;color:#8c8c8c;padding:0}
dialog{background:#242424;border-color:#565656;color:#eee}dialog::backdrop{background:#080808c7}.dialog-top{color:#b4b4b4}dialog p,dialog li{color:#b6b6b6}dialog textarea{background:#171717;border-color:#4b4b4b;color:#dedede}.secondary-button{border-color:#626262;color:#ddd}.primary-button{color:#163823;border-color:#a3f3b6}.text-button{color:#c2c2c2}.expanded-dialog{background:#202020}#expanded-preview .mock-screen{max-width:100%}#expanded-preview .mock-screen[data-kind=website] .mock-hero{min-height:600px}#expanded-preview .mock-screen[data-kind=website] .mock-hero-copy{min-height:600px;padding:40px;max-width:none}#expanded-preview .mock-screen[data-kind=website] .mock-art{height:100%}#expanded-preview .mock-screen[data-kind=website] .mock-art img{object-position:center 35%}#expanded-preview .mock-screen[data-kind=website] .mock-heading{font-size:46px;max-width:600px}#expanded-preview .mock-screen[data-kind=website] .mock-description{font-size:16px;max-width:500px}#expanded-preview .mock-screen[data-layout=stack] .mock-art{height:380px}#expanded-preview .mock-screen[data-layout=stack] .mock-hero-copy{min-height:200px}
@media(max-width:1100px) and (min-width:701px){.topbar{inset:20px 22px auto;gap:16px}.studio-menu button{min-width:66px}.project-tab{max-width:175px;font-size:11px;gap:8px}.work-menu{display:none}.canvas-hint{display:none}.workspace-intro{inset-inline:25px}.canvas-brand{font-size:11px}}
@media(max-width:700px){html[data-editor-mode=cards] body{min-height:100svh;height:auto;overflow:auto}html[data-editor-mode=cards] .topbar{position:relative;inset:auto;height:79px;padding:15px 18px;gap:12px;background:#101010}html[data-editor-mode=cards] .wordmark{width:32px}html[data-editor-mode=cards] .orbit-mark{width:25px;height:16px;border-width:3px}html[data-editor-mode=cards] .studio-menu{gap:4px}html[data-editor-mode=cards] .studio-menu button{min-width:55px;height:37px;font-size:11px}html[data-editor-mode=cards] .studio-menu button#edit-menu{display:none}html[data-editor-mode=cards] .top-actions{gap:5px}html[data-editor-mode=cards] .languages{height:37px}html[data-editor-mode=cards] .languages button{min-width:26px}html[data-editor-mode=cards] .share-button{position:static;min-width:0;height:37px;min-height:37px;padding:8px 10px;font-size:11px}html[data-editor-mode=cards] .topbar .project-tab{display:none}html[data-editor-mode=cards] .workspace-intro{position:relative;inset:auto;display:block;padding:12px 22px 60px}html[data-editor-mode=cards] .canvas-brand{font-size:11px}html[data-editor-mode=cards] .brand-signal{width:23px;height:23px}html[data-editor-mode=cards] .brand-signal::before{left:6px;top:6px}html[data-editor-mode=cards] .workspace-intro>div:first-of-type{position:static;transform:none;white-space:normal;text-align:left;margin-top:22px}html[data-editor-mode=cards] .workspace-intro h1,html[data-editor-mode=cards][lang=th] .workspace-intro h1{font-size:20px;color:#eee;max-width:none;line-height:1.5}html[data-editor-mode=cards] .starter{left:22px;top:0}html[data-editor-mode=cards] .viewport{padding:18px 20px 100px;background-size:22px 22px;overflow:visible}html[data-editor-mode=cards] .world{width:auto;height:auto;gap:28px}html[data-editor-mode=cards] .node{border-radius:17px}html[data-editor-mode=cards] .idea-node{margin-top:58px}html[data-editor-mode=cards] .preview-node{margin-top:58px;margin-bottom:80px}html[data-editor-mode=cards] .node-header{min-height:47px;padding-inline:18px}html[data-editor-mode=cards] .drag-handle,html[data-editor-mode=cards][lang=th] .drag-handle{font-size:14px}html[data-editor-mode=cards] .node-body{padding:19px}html[data-editor-mode=cards] .project-node .type-options{grid-template-columns:1fr;gap:5px}html[data-editor-mode=cards] .type-options label{justify-content:flex-start;padding:12px;font-size:13px}html[data-editor-mode=cards] .type-options .radio-dot{display:grid}html[data-editor-mode=cards] .node-body input:not([type]),html[data-editor-mode=cards] .node-body textarea{font-size:14px}html[data-editor-mode=cards] .idea-node .node-body{padding:22px}html[data-editor-mode=cards] .feature-option,html[data-editor-mode=cards][lang=th] .feature-option{font-size:12px;padding:12px 9px}html[data-editor-mode=cards] .style-node .node-body{padding:22px}html[data-editor-mode=cards] .signal-list{margin-bottom:20px}html[data-editor-mode=cards] .field-label,html[data-editor-mode=cards] .style-node .field-label{font-size:13px}html[data-editor-mode=cards] .preview-well{height:470px;min-height:0}html[data-editor-mode=cards] .preview-toolbar{padding:8px;gap:3px}html[data-editor-mode=cards] .preview-toolbar .icon-button{min-width:32px;width:32px;min-height:35px}html[data-editor-mode=cards] .preview-share{font-size:10px;padding:6px}html[data-editor-mode=cards] .preview-toolbar .toolbar-divider{margin-inline:2px}html[data-editor-mode=cards] .preview-body{padding-inline:8px}html[data-editor-mode=cards] .preview-bottom{font-size:9px}html[data-editor-mode=cards] .mock-screen[data-kind=website] .mock-hero,html[data-editor-mode=cards] .mock-screen[data-kind=website] .mock-hero-copy{min-height:470px}html[data-editor-mode=cards] .mock-screen[data-kind=website] .mock-hero-copy{padding:20px}html[data-editor-mode=cards] .canvas-dock{position:fixed;bottom:14px;width:auto;max-width:calc(100vw - 30px);border-radius:13px;border:1px solid #555;z-index:30}html[data-editor-mode=cards] .prompt-strip{display:none}html[data-editor-mode=cards] .dock-buttons{gap:6px;padding:7px}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;height:36px}html[data-editor-mode=cards] .dock-reset{font-size:11px}html[data-editor-mode=cards] .canvas-dock .dock-reset span{display:block}html[data-editor-mode=cards] .canvas-controls{display:none}html[data-editor-mode=cards] footer{position:relative;inset:auto;height:auto;min-height:60px;background:#101010;padding:12px 22px 85px;gap:12px;font-size:10px}html[data-editor-mode=cards] .footer-brand{width:100%}html[data-editor-mode=cards] #save-status{font-size:10px}html[data-editor-mode=cards] footer button{font-size:10px}html[data-editor-mode=cards] #expanded-preview .mock-screen[data-kind=website] .mock-hero-copy{padding:25px;min-height:500px}html[data-editor-mode=cards] #expanded-preview .mock-screen[data-kind=website] .mock-hero{min-height:500px}html[data-editor-mode=cards] #expanded-preview .mock-screen[data-kind=website] .mock-heading{font-size:32px}html[data-editor-mode=cards] #expanded-preview .mock-screen[data-kind=website] .mock-description{font-size:13px}html[data-editor-mode=cards] .dialog-actions{flex-direction:column}}

.mock-screen{border-radius:var(--radius)}
.view-mode{display:none;align-items:center;gap:6px;background:#262626;border:1px solid #444;border-radius:9px;color:#ddd;padding:9px;font-size:11px}.view-mode .icon{width:14px;height:14px}
@media(max-width:700px){.view-mode{display:flex}.studio-menu{display:none!important}.topbar .work-menu,.topbar .project-tab{display:none}.topbar{gap:12px}.top-actions{gap:6px}.share-button{position:static;min-width:0;min-height:37px;height:37px;padding:8px 10px;font-size:11px}.languages{height:37px}.languages button{min-width:26px}.share-button .icon{display:none}html[data-editor-mode=canvas] .topbar{inset:18px 17px auto;height:40px}html[data-editor-mode=canvas] .wordmark{width:30px}html[data-editor-mode=canvas] .orbit-mark{width:25px;height:17px;border-width:3px}html[data-editor-mode=canvas] .workspace-intro{inset:83px 18px auto}html[data-editor-mode=canvas] .canvas-brand{font-size:10px}html[data-editor-mode=canvas] .brand-signal{width:22px;height:22px}html[data-editor-mode=canvas] .brand-signal::before{left:5px;top:6px}html[data-editor-mode=canvas] .workspace-intro>div:first-of-type{top:45px}html[data-editor-mode=canvas] .workspace-intro h1,html[data-editor-mode=canvas][lang=th] .workspace-intro h1{font-size:12px}html[data-editor-mode=canvas] .canvas-dock{width:min(350px,calc(100vw - 40px));bottom:36px}html[data-editor-mode=canvas] .dock-buttons{gap:3px}html[data-editor-mode=canvas] .canvas-dock .icon-button{width:32px;min-width:32px}html[data-editor-mode=canvas] .canvas-controls{right:10px;top:calc(50% + 120px);gap:4px}html[data-editor-mode=canvas] .canvas-controls .icon-button{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:9px}html[data-editor-mode=canvas] .canvas-hint{display:none}html[data-editor-mode=canvas] .footer-brand{display:none}html[data-editor-mode=canvas] footer{inset:auto 18px 12px;font-size:9px}html[data-editor-mode=canvas] #save-status{margin-left:0}html[data-editor-mode=canvas] footer button{margin-left:auto}html[data-editor-mode=canvas] .starter{left:0;top:0}}
@media(max-width:420px){.studio-menu #help-menu{display:none}.topbar{gap:10px;padding-inline:16px}.top-actions{gap:5px}}

@media(max-width:700px){html[data-editor-mode=canvas] .canvas-hint{display:block;top:160px;bottom:auto;left:30px;right:30px;max-width:none;text-align:center;font-size:10px;color:#858585}}

/* Canvas pan/zoom owns its viewport; focus must not scroll the hidden overflow. */
html:not([data-editor-mode=cards]) .viewport{overflow:clip}