:root{color-scheme:light;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#2c4662;background:#dceafb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 5% 3%,#f0faff 0,transparent 50%),radial-gradient(ellipse at 95% 70%,#e6defd 0,transparent 55%),linear-gradient(145deg,#dcecfb,#f1ecfa 75%,#dff4f2)}.ambient{pointer-events:none;position:fixed;border-radius:50%;filter:blur(70px);opacity:.4}.ambient.a{width:420px;height:420px;top:-140px;right:-150px;background:#b2bbfa}.ambient.b{width:450px;height:450px;bottom:-200px;left:-150px;background:#88e0db}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3889d0;outline-offset:3px}a{color:inherit}.global-header{position:relative;z-index:2;display:flex;align-items:center;gap:20px;padding:17px clamp(18px,4vw,54px);border-bottom:1px solid #ffffffa9;background:#ffffff67;backdrop-filter:blur(25px)}.global-header a{text-decoration:none}.brand{font-weight:760;font-size:14px;letter-spacing:-.04em}.brand span:last-child{font-weight:470;color:#6686a4}.brand-mark{color:#4d88a5;font-size:19px;margin-right:6px}.global-label{font-size:10px;letter-spacing:.14em;font-weight:750;color:#83a1bd;margin:auto}.back-home{padding:7px 12px;border:1px solid white;border-radius:999px;background:#ffffff99;color:#557696;font-size:11px;font-weight:700}.shell{position:relative;z-index:1;width:min(1490px,calc(100% - 28px));margin:22px auto 110px}.demo-banner{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:13px;padding:12px 17px;background:#edf6ffdf;border:1px solid #bddaf6;border-radius:14px;font-size:11px;color:#627e9e}.demo-banner strong{font-size:10px;letter-spacing:.12em;color:#386b9e}.live-dot,.mini-led{display:inline-block;border-radius:50%;width:8px;height:8px;background:#5eb6a1;box-shadow:0 0 0 4px #ccf0e7;flex:none}.app{overflow:hidden;border-radius:24px;border:1px solid #ffffffde;background:#ffffffa4;box-shadow:0 24px 80px #415f8739,0 5px 16px #476b8b20;backdrop-filter:blur(22px)}.app-bar{height:59px;display:flex;align-items:center;gap:20px;padding:0 17px;background:linear-gradient(#ffffffef,#f4f8ffcb);border-bottom:1px solid #d7e5f3}.traffic{display:flex;gap:7px}.traffic i{height:11px;width:11px;border-radius:50%;background:#f56e70}.traffic i:nth-child(2){background:#f9bd54}.traffic i:nth-child(3){background:#5acb7c}.app-identity{display:flex;align-items:center;gap:15px;min-width:0}.app-identity strong{letter-spacing:-.035em;font-size:13px}.app-identity span{font-size:11px;color:#8da0b7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-identity b{color:#bed0dc;margin:0 6px}.local-status{margin-left:auto;color:#519884;background:#e0f6ee;border:1px solid #c8eade;padding:5px 9px;border-radius:20px;font-size:10px;white-space:nowrap}.reset-button{color:#5c7796;background:#f8fbff;border:1px solid #dce8f4;padding:8px 11px;border-radius:9px;font-weight:650;font-size:11px;white-space:nowrap}.reset-button:hover{background:#e7f1fd}.app-grid{display:grid;grid-template-columns:196px minmax(0,1fr) 246px;min-height:780px}.side{border-right:1px solid #dce7f2;background:#f0f6ffb3;padding:25px 12px;display:flex;flex-direction:column;gap:12px}.sidebar-label,.eyebrow{font-size:9px;letter-spacing:.13em;font-weight:800;color:#829eb9}.side-project{display:flex;align-items:center;gap:10px;padding:9px 5px 14px;border-bottom:1px solid #dce8f4}.side-project strong{display:block;font-size:11px}.side-project small{display:block;color:#99adc0;font-size:10px}.side-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:white;background:linear-gradient(140deg,#90bce9,#84a2da);font-size:21px}.side-nav{display:grid;gap:4px;margin-top:7px}.tool{display:flex;align-items:center;gap:9px;width:100%;padding:10px 10px;text-align:left;border:0;background:transparent;border-radius:10px;color:#6986a0;font-size:11px;font-weight:670}.tool>span{font-size:17px;width:23px;color:#7ca3c7}.tool small{margin-left:auto;font-size:8px;color:#a3acc1;font-weight:500}.tool:hover,.tool.active{color:#356da7;background:#dceafb}.tool.active>span{color:#4b83d5}.side-note{margin-top:auto;background:#ffffff87;border:1px solid #e1edf9;padding:13px;border-radius:14px}.side-note strong{font-size:11px}.side-note p{font-size:10px;line-height:1.7;color:#8099af;margin-bottom:0}.stage{padding:25px clamp(14px,2.2vw,32px) 20px;min-width:0}.stage-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.stage-top h1{font-size:clamp(24px,2.1vw,31px);letter-spacing:-.065em;line-height:1.15;margin:4px 0;color:#254966;font-weight:690}.stage-top p{font-size:11px;color:#8ba1b7;margin:0}.stage-badge{white-space:nowrap;border:1px solid #e2dfef;border-radius:30px;background:#f6f0ff;color:#8f7bb4;padding:7px 9px;font-size:9px;letter-spacing:.08em;font-weight:780}.canvas-tools{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid #dae8f4;border-bottom:0;border-radius:15px 15px 0 0;background:#fafdffb0}.page-crumb{display:flex;align-items:center;gap:10px;color:#9db0c2;font-size:10px;min-width:0}.page-crumb strong{font-size:11px;color:#4e7090}.page-crumb .mini-led{width:6px;height:6px;box-shadow:none}.canvas-actions{display:flex;gap:7px;flex-wrap:wrap}.canvas-actions button,.content-heading>button{border:1px solid #dbe7f5;border-radius:9px;padding:7px 9px;background:white;color:#517da5;font-size:10px;font-weight:700}.canvas-actions button:hover,.content-heading>button:hover{background:#eaf5ff}.site-frame{border:1px solid #d6e3f1;border-radius:0 0 14px 14px;background:white;overflow:hidden;box-shadow:0 9px 22px #6c93bc1a;--ink:#345476;--muted:#7795b0;--surface:#e9f6fe;--pale:#f4faff;--accent:#5f91c8;--art-a:#81bbef;--art-b:#e1edfc}.site-frame[data-theme=lilac]{--ink:#62547c;--muted:#9d8cb6;--surface:#f2eaff;--pale:#faf6ff;--accent:#8e79cb;--art-a:#bba3e8;--art-b:#f7dcec}.site-frame[data-theme=mint]{--ink:#3d6a65;--muted:#78a49d;--surface:#e1f8ed;--pale:#f4fcf9;--accent:#59a999;--art-a:#7bd1c1;--art-b:#d2f4e7}.browser-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;height:31px;border-bottom:1px solid #e8eff6;color:#afbdca;background:#fafcff;font-size:9px;padding:0 11px}.browser-dots{letter-spacing:2px;font-size:7px;color:#b8cbdc}.browser-url{border:1px solid #e6edf4;background:#fff;padding:3px 18px;border-radius:7px;max-width:66%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-surface{color:var(--ink);background:#fff;min-width:0}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px clamp(15px,3vw,31px);border-bottom:1px solid #eaf0f4;background:#fff;position:relative}.site-logo{font-size:12px;letter-spacing:-.04em;white-space:nowrap}.site-logo>span{font-size:16px;color:var(--accent);margin-right:4px}.site-logo>span:last-child{color:var(--muted);font-size:12px;margin:0}.site-header nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px}.site-header nav button{background:transparent;border:0;border-radius:7px;padding:8px 10px;color:var(--muted);font-size:10px;font-weight:700}.site-header nav button.active,.site-header nav button:hover{color:var(--ink);background:var(--pale)}.site-menu{display:none;background:none;border:0;color:var(--ink)}.site-hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:288px;background:linear-gradient(140deg,var(--pale),#fff)}.hero-copy{padding:clamp(23px,4vw,44px) 14px clamp(23px,4vw,44px) clamp(19px,4vw,44px);position:relative;z-index:1}.site-kicker,.sample-content small{font-size:9px;letter-spacing:.13em;color:var(--muted);font-weight:790}.site-hero h2{font-weight:560;letter-spacing:-.065em;line-height:1.1;font-size:clamp(27px,3.5vw,47px);max-width:430px;margin:12px 0 14px}.site-hero p{font-size:11px;line-height:1.75;max-width:350px;color:var(--muted)}.site-cta{margin-top:10px;padding:10px 14px;border-radius:40px;background:var(--ink);color:white;border:0;font-size:10px;font-weight:720}.site-cta span{padding-left:12px}.hero-art{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--art-a),var(--art-b))}.hero-orbit{position:absolute;width:245px;height:245px;left:45%;top:38%;transform:translate(-50%,-50%);border:1px solid #ffffffb5;border-radius:50%;box-shadow:0 0 0 23px #ffffff28,0 0 0 67px #ffffff1f}.hero-core{position:absolute;width:135px;height:135px;left:46%;top:43%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(120deg,#ffffffcb,#ffffff12);box-shadow:15px 26px 35px #3f6aa734,inset -12px -20px 27px #85acd744}.hero-stem{position:absolute;width:75px;height:180px;left:53%;bottom:-50px;transform:rotate(-33deg);border-radius:50px 50px 0 0;background:linear-gradient(100deg,#fffa,#ffffff20);filter:blur(1px)}.hero-art-label{position:absolute;right:20px;bottom:16px;letter-spacing:.17em;color:#ffffffd7;font-weight:750;font-size:8px}.sample-content{padding:25px clamp(18px,3vw,30px) 31px;position:relative}.content-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.content-heading h3{font-size:19px;font-weight:600;letter-spacing:-.05em;margin:4px 0 18px}.sample-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.sample-card{padding:12px;border:1px solid #e9eef4;border-radius:12px;background:var(--pale);min-height:114px;min-width:0}.card-art{height:47px;border-radius:8px;overflow:hidden;background:linear-gradient(115deg,var(--art-a),var(--art-b));margin-bottom:10px;position:relative}.card-art:after{content:"";position:absolute;width:64px;height:64px;border-radius:20px;transform:rotate(36deg);top:15px;left:37%;background:#ffffff69}.sample-card:nth-child(2) .card-art:after{border-radius:50%;top:-24px}.sample-card:nth-child(3) .card-art:after{border-radius:0;transform:skew(-18deg);left:52%}.sample-card strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-card p{margin:3px 0 0;font-size:10px;color:var(--muted)}.tab-section{margin-top:23px;padding-top:19px;border-top:1px solid #e7eff5}.tab-topline{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}.site-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e9eff5;margin:12px 0 0}.site-tabs button{border:0;border-radius:8px 8px 0 0;background:transparent;padding:10px 12px;color:var(--muted);font-size:10px;font-weight:740}.site-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px var(--accent)}.tab-panel{background:var(--pale);padding:15px 17px;min-height:74px;border-radius:0 0 12px 12px}.tab-panel strong{display:block;font-size:12px}.tab-panel p{font-size:10px;line-height:1.65;margin:4px 0 0;color:var(--muted)}.site-window{position:absolute;z-index:3;max-width:min(355px,calc(100% - 36px));width:320px;top:28px;right:18px;border:1px solid #ffffffeb;border-radius:17px;background:#ffffffef;box-shadow:0 18px 60px #28547a4d;backdrop-filter:blur(16px);overflow:hidden}.site-window[hidden]{display:none}.floating-top{display:flex;align-items:center;gap:8px;justify-content:space-between;background:#eef6ffc7;border-bottom:1px solid #dbe7f3;padding:9px 13px;font-size:9px;color:#7898b4}.floating-dots{color:#e8a69d}.floating-top button{border:0;background:transparent;color:#7a96b1;font-size:21px;line-height:1}.floating-body{padding:22px}.floating-body h3{font-size:22px;letter-spacing:-.04em;margin:9px 0}.floating-body p{font-size:11px;line-height:1.7;color:var(--muted)}.sample-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:17px clamp(18px,3vw,30px);border-top:1px solid #e9eff5;color:var(--muted);font-size:8px;letter-spacing:.08em}.stage-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:13px;color:#879fb4;font-size:10px}.stage-foot span:last-child{white-space:nowrap;color:#7fafa1}.inspector{padding:24px 17px;background:#fafcffc4;border-left:1px solid #dbe6f2;min-width:0}.inspector-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;border-bottom:1px solid #e1eaf2;padding-bottom:11px;letter-spacing:.1em;color:#93a9c0;font-size:9px;font-weight:780}.inspector-title small{color:#6d9ac0;font-size:8px}.inspector-pane[hidden]{display:none}.inspector-pane h2{font-size:19px;letter-spacing:-.04em;line-height:1.2;margin:0 0 7px}.inspector-pane>p{font-size:11px;color:#8aa0b8;line-height:1.65;margin:0 0 19px}.inspector-pane label{display:block;color:#6582a0;font-size:10px;font-weight:740;margin:15px 0 7px}.inspector-pane input,.inspector-pane textarea{display:block;width:100%;background:white;border:1px solid #d7e4f2;border-radius:10px;padding:10px;font-size:11px;color:#315570;resize:vertical;line-height:1.5}.inspector-tip{margin-top:21px;padding:12px;background:#eaf5ff;border:1px solid #dcecfb;border-radius:11px;font-size:10px;color:#7294b5;line-height:1.65}.primary{border:0;background:linear-gradient(115deg,#4c91dc,#6e85d9);color:white;border-radius:10px;font-size:11px;font-weight:740;padding:11px}.primary:hover{filter:brightness(1.05)}.full{width:100%;margin-top:12px}.page-list{display:grid;gap:6px}.page-list button{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:10px 12px;background:white;border:1px solid #e1ebf6;border-radius:10px;font-size:11px;color:#67829d}.page-list button.selected{background:#e7f1ff;border-color:#bcd8fa;color:#3767a1;font-weight:740}.page-list button span{color:#a1b1c1}.action-tile{display:block;width:100%;text-align:left;margin-bottom:8px;border-radius:11px;border:1px solid #dbe7f5;background:white;padding:12px;color:#3c6b94}.action-tile:hover{background:#eff7ff}.action-tile strong{display:block;font-size:11px}.action-tile span{display:block;font-size:10px;color:#8ca3b8;margin-top:4px;line-height:1.5}.mini-divider{height:1px;background:#e2ebf5;margin:22px 0}.theme-picks{display:grid;gap:9px}.theme-pick{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #e0e8f3;background:#fff;padding:11px 12px;border-radius:11px;color:#64809c;font-size:11px;font-weight:700}.theme-pick.selected{background:#eff5ff;border-color:#a8cef1;color:#426d9e}.theme-dot{height:24px;width:24px;border-radius:9px;box-shadow:inset 0 0 0 1px #fff9}.theme-dot.sky{background:linear-gradient(130deg,#84c5f5,#daefff)}.theme-dot.lilac{background:linear-gradient(130deg,#af9bef,#f8e2ff)}.theme-dot.mint{background:linear-gradient(130deg,#72cdb2,#e6f9e7)}.idea-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.idea-chips button{background:#eef6ff;color:#628ab2;border:1px solid #dcebf9;border-radius:999px;font-size:10px;padding:6px 8px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stats>div{padding:12px 10px;border:1px solid #dce8f5;background:#f0f7fd;border-radius:11px}.stats small{display:block;font-size:10px;color:#7d9ab4}.stats strong{font-size:22px;font-weight:650;color:#4b74a3}.activity-log{margin-top:17px;display:grid;gap:8px;font-size:10px;color:#7893ad}.activity-log div{padding:9px 10px;border-bottom:1px solid #e8eff5}.below{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:46px clamp(12px,4vw,40px) 30px}.below>div{max-width:700px}.below small{font-size:9px;color:#8c9eba;letter-spacing:.15em;font-weight:800}.below h2{font-size:28px;line-height:1.18;letter-spacing:-.055em;margin:9px 0;color:#365a7b}.below p{max-width:650px;font-size:12px;color:#7b95af;line-height:1.75}.below a{text-decoration:none;padding:10px 14px;border:1px solid white;background:#ffffffa8;border-radius:11px;font-size:11px;font-weight:690;white-space:nowrap}
@media(max-width:1180px){.app-grid{grid-template-columns:165px minmax(0,1fr) 220px}.side{padding:18px 8px}.stage{padding:21px 16px}.inspector{padding:20px 11px}.site-hero{min-height:245px}.site-hero h2{font-size:32px}.hero-art{min-height:210px}}
@media(max-width:925px){.app-grid{grid-template-columns:150px minmax(0,1fr)}.inspector{grid-column:2;border-left:0;border-top:1px solid #dbe6f2}.inspector-pane{max-width:550px}.inspector-title{margin-bottom:18px}.stage{padding:18px}.side{grid-row:1 / span 2}.stage-top{margin-bottom:15px}}
@media(max-width:650px){.global-label,.app-identity span,.local-status{display:none}.global-header{padding:13px 16px}.shell{width:calc(100% - 16px);margin-top:12px}.app-grid{display:flex;flex-direction:column}.side{border-right:0;border-bottom:1px solid #dce7f2;padding:13px}.side-project,.side-note,.sidebar-label{display:none}.side-nav{display:flex;gap:6px;overflow-x:auto;margin:0;padding-bottom:3px}.tool{flex:none;width:auto;padding:8px 10px;white-space:nowrap}.tool>span{width:auto;font-size:14px}.tool small{display:none}.app-bar{height:52px;padding:0 12px;gap:11px}.stage{padding:17px 11px}.stage-top h1{font-size:24px}.stage-badge{display:none}.canvas-tools{display:block}.canvas-actions{margin-top:9px}.site-header{padding:14px}.site-header nav{display:none;position:absolute;z-index:5;right:9px;left:9px;top:49px;padding:8px;background:white;border:1px solid #dae8f4;box-shadow:0 9px 20px #486d9140;border-radius:11px}.site-header nav.open{display:flex;justify-content:flex-start}.site-menu{display:block}.site-hero{grid-template-columns:1fr}.hero-copy{padding:26px 21px}.site-hero h2{max-width:450px;font-size:33px}.hero-art{min-height:130px}.hero-orbit{width:170px;height:170px;top:70%}.hero-core{width:90px;height:90px;top:70%}.sample-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-card:nth-child(3){grid-column:1 / -1}.inspector{padding:23px 17px}.below{display:block;padding:32px 15px}.below h2{font-size:24px}.below a{display:inline-block;margin-top:10px}.stage-foot{display:block}.stage-foot span:last-child{display:block;margin-top:6px}}
@media(max-width:390px){.site-hero h2{font-size:29px}.sample-cards{grid-template-columns:1fr}.sample-card:nth-child(3){grid-column:auto}.browser-url{max-width:75%}.back-home{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Client view makes the result a full sample website, not just an editor thumbnail. */
.client-preview-button{border:1px solid #bdd8ef;background:linear-gradient(115deg,#e6f6ff,#f1efff);border-radius:10px;padding:8px 12px;color:#3c6f9e;font-size:11px;font-weight:760}
.site-toast{margin:9px 0;padding:11px 14px;background:#e9f8ff;border:1px solid #bcdeef;border-radius:11px;color:#327a9c;font-size:11px;font-weight:730}
.site-toast[hidden]{display:none}
.demo-spotlight{animation:demo-spotlight 1.3s ease}
@keyframes demo-spotlight{0%,100%{box-shadow:0 9px 22px #6c93bc1a}38%{box-shadow:0 0 0 5px #81c9ff,0 12px 30px #4c9fce52}}
.client-view .side,.client-view .inspector,.client-view .stage-top,.client-view .canvas-tools,.client-view .stage-foot,.client-view .site-toast{display:none!important}
.client-view .app-grid{display:block;min-height:0}
.client-view .stage{padding:10px;max-width:none}
.client-view .site-frame{border-radius:15px}
.client-view .site-hero{min-height:420px}
.client-view .site-hero h2{font-size:clamp(37px,5vw,70px);max-width:650px}
.client-view .site-hero p{font-size:15px;max-width:470px}
.client-view .site-header{padding:23px clamp(20px,4vw,58px)}
.client-view .sample-content{padding:31px clamp(18px,4vw,55px)}
.client-view .sample-card{min-height:156px}
.client-view .card-art{height:79px}
.client-view .sample-footer{padding:21px clamp(18px,4vw,55px)}
@media(max-width:650px){.client-preview-button{font-size:10px;padding:7px}.client-view .stage{padding:5px}.client-view .site-hero{min-height:280px}.client-view .site-hero h2{font-size:33px}.client-view .site-hero p{font-size:11px}.client-view .sample-card{min-height:110px}.client-view .card-art{height:50px}}
@media(prefers-reduced-motion:reduce){.demo-spotlight{animation:none}}

/* The four one-click actions stay immediately above an actual website preview. */
:root{color:#17354f}
.shell{width:min(1530px,calc(100% - 22px));margin:12px auto 55px}
.demo-banner{margin-bottom:8px;padding:8px 12px;background:#edf6ff;border-color:#a7cae5;color:#365f7d}
.app{border-color:#b8cee0;box-shadow:0 13px 45px #38608331}
.app-grid{grid-template-columns:150px minmax(0,1fr) 210px;min-height:600px}
.app-bar{height:52px}
.side{padding:15px 9px;background:#ecf3fa}.side-note{padding:10px}
.side-note p{margin:3px 0 0}
.stage{padding:13px}.stage-top{margin-bottom:8px}
.stage-top h1{font-size:23px;margin:3px 0}
.instant-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:9px}
.instant-action{min-width:0;display:grid;grid-template-columns:29px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;text-align:left;padding:9px 7px;background:#f8fcff;border:1px solid #b9d2e6;border-radius:11px;color:#255779}
.instant-action:hover{border-color:#5a9dd6;background:#e2f2ff;box-shadow:0 0 0 2px #9edbff77}
.instant-action:active{transform:scale(.98)}
.instant-symbol{grid-row:1/3;width:29px;height:29px;display:grid;place-items:center;background:#dbeaff;border-radius:8px;font-size:20px;color:#367abb}
.instant-action:nth-child(2) .instant-symbol{background:#ddf4e6;color:#418c68}
.instant-action:nth-child(3) .instant-symbol{background:#eaddff;color:#805aba}
.instant-action:nth-child(4) .instant-symbol{background:#ffeedc;color:#af6e42}
.instant-action strong{font-size:12px;line-height:1.1}
.instant-action small{font-size:9px;line-height:1.2;color:#6887a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-inline-status{margin-bottom:7px;padding:7px 10px;background:#e4f6e9;border:1px solid #8ad2a4;color:#226848;border-radius:9px;font-size:11px;font-weight:730}
.demo-inline-status[hidden]{display:none}
.canvas-tools{padding:8px 10px;background:#eaf2f9;border-color:#bfcfdf}
.site-frame{border-color:#bfcfdf}
.browser-bar{height:25px}
.site-header{padding:12px 16px}.site-header nav button{padding:6px 9px}
.site-hero{min-height:185px}.hero-copy{padding:22px 13px 20px 22px}
.site-hero h2{font-size:clamp(27px,2.9vw,37px);font-weight:650;margin:8px 0}
.site-hero p{color:var(--ink);opacity:.85;font-size:11px}
.site-cta{padding:8px 11px;margin-top:4px}
.hero-orbit{height:160px;width:160px}.hero-core{width:83px;height:83px}
.sample-content{padding:13px 17px}
.content-heading h3{font-size:16px;margin:3px 0 7px}
.tab-section{margin:0 0 10px;padding:0;border:0}
.tab-topline{display:none}.site-tabs{margin-top:0;gap:3px}
.site-tabs button{padding:7px 10px}
.tab-panel{padding:9px 12px;min-height:49px;border:1px solid #deebf2}
.tab-panel p{line-height:1.45}
.sample-cards{gap:7px}.sample-card{min-height:88px;padding:8px;border-color:#d4e5f1}
.card-art{height:32px;margin-bottom:6px}.sample-card strong{font-size:10px}.sample-card p{font-size:9px}
.sample-footer{padding:11px 17px}
.site-window{top:15px;right:12px;border-color:#a8c2da;box-shadow:0 15px 45px #24517067}
.floating-body{padding:16px}.floating-body h3{font-size:21px}
.inspector{padding:16px 12px;background:#f5f9ff}
.inspector-title{margin-bottom:15px}.inspector-pane h2{font-size:18px}
.inspector-pane>p{margin-bottom:10px}.inspector-pane label{margin:11px 0 5px}
.inspector-pane textarea,.inspector-pane input{padding:9px}
.action-tile{padding:10px}
.stage-foot{margin-top:7px}.below{padding:20px 20px}.below h2{font-size:21px}
.client-view .instant-tools,.client-view .demo-inline-status{display:none!important}
@media(max-width:1080px){.app-grid{grid-template-columns:130px minmax(0,1fr) 190px}.stage{padding:9px}.inspector{padding:9px}.side{padding:12px 6px}.instant-action{padding:8px 5px}}
@media(max-width:850px){.app-grid{grid-template-columns:1fr}.side{grid-row:auto;border-right:0;border-bottom:1px solid #cbdde9;padding:8px}.side-nav{display:flex;overflow-x:auto;white-space:nowrap}.sidebar-label,.side-project,.side-note{display:none}.tool{flex:none;width:auto}.inspector{grid-column:1}.instant-tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.instant-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.app-bar{gap:7px;padding:0 9px}.app-identity span,.local-status{display:none}.site-hero{grid-template-columns:1fr}.hero-copy{padding:20px}.hero-art{min-height:90px}.site-hero h2{font-size:30px}.site-header{flex-wrap:wrap}.site-header .site-menu{display:none}.site-header nav{display:flex;position:static;justify-content:flex-start;gap:1px}.site-header nav button{padding:5px 6px;font-size:10px}.sample-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.sample-card:nth-child(3){grid-column:auto}.sample-card p{display:none}}

/* Monitor display: sample site is a separate device, not a panel of Studio. */
.stage{background:#e3e9f5}
.demo-monitor-stage{
 position:relative;display:flex;flex-direction:column;align-items:center;
 padding:clamp(10px,2vw,22px) clamp(11px,2vw,24px) 17px;
 border:1px solid #6d9bc5;border-radius:14px;
 background:
 radial-gradient(ellipse at 10% 82%,#74c05e 0,transparent 31%),
 radial-gradient(ellipse at 92% 93%,#478d6e 0,transparent 33%),
 radial-gradient(ellipse at 35% 18%,#d2f5ff 0,transparent 55%),
 linear-gradient(160deg,#6bb7eb 0%,#a5d8fd 51%,#6babcd 75%,#5e9b95 100%);
 box-shadow:inset 0 0 0 2px #ffffff4a;
}
.demo-monitor-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff24,transparent 45%);border-radius:14px}
.monitor-hardware{
 width:100%;position:relative;z-index:1;
 padding:10px 10px 0;border:2px solid #263a5b;border-bottom:0;
 border-radius:15px 15px 6px 6px;
 background:linear-gradient(135deg,#2e435e,#111f35 62%,#223a57);
 box-shadow:0 13px 26px #1134575c, inset 0 2px #8aa5c955;
}
.monitor-screen{
 position:relative;height:clamp(300px,44vh,455px);overflow:auto;overscroll-behavior:contain;scrollbar-color:#7096b4 #e0ebf7;
 border:1px solid #9cbbcf;border-radius:4px;
 background:#fff;box-shadow:inset 0 0 0 2px #223d61;
}
.monitor-screen .site-frame{margin:0;border:0!important;border-radius:0!important;box-shadow:none!important}
.monitor-screen .site-hero{min-height:198px;background:linear-gradient(115deg,var(--pale),#fff)}
.monitor-screen .site-surface{background:#fff}
.monitor-chin{height:28px;display:flex;align-items:center;justify-content:center;gap:10px;color:#c5d5ec;font-size:8px;letter-spacing:.17em;font-weight:800}
.monitor-power{width:11px;height:11px;border:1px solid #6987aa;border-radius:3px}
.monitor-light{width:6px;height:6px;background:#90edb5;border-radius:50%;box-shadow:0 0 6px #90edb599}
.monitor-neck{width:64px;height:15px;background:linear-gradient(90deg,#34465e,#6f86a2,#2b3a52);box-shadow:0 7px 13px #1c47623d}
.monitor-base{width:min(190px,40%);height:11px;background:linear-gradient(#a8bcd4,#314965);border-radius:70% 70% 7px 7px;box-shadow:0 4px 12px #2a4d6579}
.canvas-tools{border-radius:10px 10px 0 0}
.demo-monitor-stage{border-radius:0 0 13px 13px}
.client-view .demo-monitor-stage{padding:0;background:white;border:0;box-shadow:none}
.client-view .demo-monitor-stage:before,.client-view .monitor-chin,.client-view .monitor-neck,.client-view .monitor-base{display:none}
.client-view .monitor-hardware{padding:0;border:0;background:transparent;box-shadow:none}
.client-view .monitor-screen{height:auto;overflow:visible;border:0;box-shadow:none}
.client-view .site-frame{border-radius:14px!important}
.client-view .app-grid{background:white}
@media(max-width:900px){.monitor-screen{height:410px}}
@media(max-width:560px){
 .demo-monitor-stage{padding:8px 7px 12px}
 .monitor-hardware{padding:6px 6px 0;border-radius:9px 9px 4px 4px}
 .monitor-chin{height:23px;font-size:7px}
 .monitor-screen{height:370px}
 .monitor-neck{height:10px;width:48px}
 .monitor-base{height:8px}
}