/* Playable Studio — Charcoal Atelier */
:root{color-scheme:dark;--ink:#f0eef5;--muted:#a5a1b0;--line:#333039;--paper:#111115;--white:#1c1b22;--orange:#b299f4;--orange-soft:#292235;--violet:#b299f4;--cyan:#9ce5f2;--gold:#ddc18c;--radius:16px;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);scroll-padding-top:100px}
body{background:#111115;color:var(--ink)}::selection{background:#766098;color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}h1,h2,h3{font-weight:550}p{color:var(--muted)}.muted{color:#87828f}.eyebrow{color:var(--violet);font-size:10px;letter-spacing:1.8px;font-weight:600}.live-dot{background:var(--cyan);box-shadow:0 0 12px #9ce5f244}.brand{font-size:18px;letter-spacing:-.6px;font-weight:650}.brand em{color:#9993a8}.brand-mark{background:#292333;color:var(--violet);border:1px solid #493c5c;border-radius:9px;box-shadow:none;width:34px;height:34px}.btn{background:#eee9f7;color:#24212d;border-radius:9px;font-size:13px;padding:14px 21px;font-weight:600;box-shadow:none}.btn:hover{background:#fff;color:#24212d;box-shadow:0 6px 24px #0003;transform:translateY(-2px)}.btn.orange{background:var(--violet);color:#21182e}.btn.orange:hover{background:#c5b1ff;color:#21182e}.btn.light,.btn.ghost,.btn.white{background:#211f27;border:1px solid #413a4b;color:#e0dae9}.btn.ghost{background:transparent}.btn.light:hover,.btn.ghost:hover,.btn.white:hover{background:#302a3c;color:#fff;border-color:#88739f}.btn.text{color:var(--cyan);background:none}.btn.small{border-radius:7px}.icon-btn{color:#a49cad;border-radius:8px}.icon-btn:hover{background:#302936;color:#eae3f4}.skip-link{background:#292235;color:#fff}
.nav-shell{height:80px;background:#111115e8;border-bottom:1px solid #302b35;backdrop-filter:blur(22px)}.nav{max-width:1440px;padding:0 54px}.nav-links{color:#aca6b7;font-size:12px;gap:30px}.nav-links a:hover{color:var(--cyan)}.nav-actions{color:#c3bccc}.nav-actions .btn{background:#2a2534;color:#cfbffa;border:1px solid #4b3e61}
.atelier-hero{max-width:1440px;margin:auto;padding:160px 54px 82px;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;text-align:left;min-height:0;overflow:visible;align-items:center}.hero-copy{padding-bottom:20px;position:relative}.hero-copy:before{content:'';position:absolute;width:1px;height:70px;background:linear-gradient(transparent,#72608c);left:-24px;top:10px}.atelier-hero .eyebrow{justify-content:flex-start;font-size:9px}.atelier-hero h1{font-size:clamp(52px,5.6vw,82px);letter-spacing:-4.5px;line-height:1.08;margin:28px 0 25px;font-weight:500;max-width:600px}.atelier-hero h1 span{color:#b6a0ed}.hero-intro{font-size:16px;color:#a5a1b0;line-height:1.8;margin:0;max-width:450px;letter-spacing:0}.hero-actions{justify-content:flex-start;gap:12px;margin:32px 0 0}.hero-footnote{display:flex;gap:24px;padding-top:48px;font-size:8px;letter-spacing:1.2px;color:#8e859b}.atelier-stage{background:#19181f;border:1px solid #3d3549;border-radius:16px;box-shadow:0 36px 65px #0004,0 0 90px #70509e0a;overflow:hidden;position:relative}.stage-topline,.stage-bottom{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;font-size:8px;letter-spacing:1.3px;color:#a69aac;border-bottom:1px solid #302a39}.stage-topline>span{display:flex;align-items:center;gap:8px}.stage-topline i{width:5px;height:5px;border-radius:50%;background:var(--cyan)}.stage-topline svg,.stage-bottom svg{width:13px;height:13px}.stage-grid{height:475px;position:relative;display:grid;grid-template-columns:1fr 170px;gap:8px;padding:25px 20px 22px 36px;background-image:linear-gradient(#b8a6d509 1px,transparent 1px),linear-gradient(90deg,#b8a6d509 1px,transparent 1px);background-size:36px 36px}.stage-guides{position:absolute;left:15px;top:20px;bottom:25px;display:flex;flex-direction:column;gap:14px;color:#6e647b;font-size:7px;letter-spacing:2px;writing-mode:vertical-rl}.stage-guides i{width:1px;flex:1;background:#3d334b;margin:auto}.stage-grid .hero-phone{position:relative;inset:auto;transform:rotate(-4deg);margin:auto;width:218px;height:420px;border:5px solid #39323e;border-radius:30px;box-shadow:0 18px 36px #0007,0 0 0 1px #655b70;transition:transform .4s}.stage-grid .hero-phone:hover,.stage-grid .hero-phone:focus-within{transform:rotate(0)}.stage-grid .phone:before{width:62px;height:15px;top:6px;background:#241e2b}.stage-controls{display:flex;justify-content:center;flex-direction:column;gap:16px;padding-left:4px}.stage-module{padding:17px 14px;border:1px solid #3b3345;background:#24202bc9;border-radius:8px}.module-index{display:block;font-size:7px;letter-spacing:1px;color:#a494b7;margin-bottom:13px}.stage-module strong{font-size:12px;line-height:1.6;font-weight:450;color:#e6deef}.atelier-swatches{display:flex;gap:7px;margin-top:15px}.atelier-swatches i{width:21px;height:21px;border-radius:6px;background:#b199ef}.atelier-swatches i:nth-child(2){background:#8adbe9}.atelier-swatches i:nth-child(3){background:#dbc18d}.atelier-swatches i:nth-child(4){background:#655173}.signal-bars{display:flex;gap:5px;align-items:flex-end;height:38px;margin-top:8px}.signal-bars i{width:7px;height:45%;background:#9782b7;border-radius:2px}.signal-bars i:nth-child(3n){height:90%;background:#c0aaf2}.signal-bars i:nth-child(2n){height:65%}.stage-status{font-size:9px;display:flex;align-items:center;gap:7px;color:var(--cyan);padding:4px}.stage-status svg{width:13px;height:13px}.stage-bottom{border-top:1px solid #302a39;border-bottom:0;color:#b8a6cd;font-size:8px;padding:16px 22px}.stage-bottom span:last-child{color:var(--cyan);letter-spacing:0}.capability-strip{max-width:1332px;margin:0 auto 50px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #302c37;border-bottom:1px solid #302c37;padding:25px 0;gap:25px}.capability-strip>span{font-size:8px;letter-spacing:1.8px;color:#766e83}.capability-strip>div{display:flex;gap:10px;align-items:center;color:#b6aebe;font-size:12px}.capability-strip svg{width:16px;height:16px;color:#c6b294}
.section{max-width:1332px;padding-top:95px;padding-bottom:95px}.section-head{margin-bottom:38px}.section-head h2,.roadmap h2{font-size:clamp(32px,4.2vw,54px);font-weight:500;letter-spacing:-2px;line-height:1.12}.section-head p,.story-card p,.roadmap-text p,.faq details p,.final-cta p{color:#a49caa;font-size:14px;line-height:1.8}.experience-section,.templates-section{background:#151419}.experience-section,.templates-section{max-width:none}.experience-inner,.templates-inner{max-width:1224px;margin:auto}.live-studio{background:#1a181f;border:1px solid #3a3145;border-radius:15px;box-shadow:0 30px 65px #0003}.live-toolbar{background:#201b28;border-color:#3a3145;color:#a99db7}.live-title{color:#b3a8c2}.live-status{color:var(--cyan)}.live-status i{background:var(--cyan)}.demo-canvas{background:radial-gradient(ellipse at 50% 60%,#3c2b4c 0,transparent 65%),#18161d;background-size:auto}.demo-controls{background:#211d28;border-color:#393044}.demo-controls h3{color:#ede6f8;font-weight:500;font-size:27px;letter-spacing:-1px}.panel-kicker,.demo-foot,.canvas-caption,.demo-feedback{color:#a397b0}.demo-feedback i{background:var(--cyan)}.control-divider{border-color:#3c3247}.control-group label,.field-label{color:#c0b3cd}.control-group label span{color:#9885ad}.field,.select,.search{background:#19161f;color:#e8dff2;border:1px solid #43384f;border-radius:8px}.field:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #9ce5f210}.field::placeholder,.search input::placeholder{color:#857792}.search input{color:#e8dff2}.search input:focus{outline-color:var(--cyan)}.segmented{background:#15121c;border:1px solid #362d41}.segmented button{color:#afa2bd}.segmented button.active{background:#4b3a64;color:#ecddff;box-shadow:none}.swatch[aria-pressed=true]{outline-color:#ceb7f8}.window-dots i{background:#584761}.window-dots i:nth-child(2){background:#aa9064}.window-dots i:nth-child(3){background:#6d9da5}
.story-grid{gap:20px}.story-card,.story-card.dark,.story-card.wide{background:#1b1920;border:1px solid #38303f;border-radius:14px;box-shadow:none}.story-card{padding:36px}.story-card.dark{background:#262031}.story-card h3{font-weight:500;letter-spacing:-1px;font-size:30px;color:#f0e9f8}.card-index{color:var(--gold);font-size:9px;letter-spacing:1.4px}.story-card.dark p{color:#b6a7c6}.mini-phone{background:#2b2335;border-color:#655375;box-shadow:0 15px 25px #0003}.code-art{background:#19151f;border:1px solid #483754;color:#b49ecc}.code-art b{color:#a8e2e8}.code-art span{color:#dfbf82}.file-tile{background:#2c2437;color:#c2a5f4;border:1px solid #584169;box-shadow:0 15px 30px #0002}.network-mini span{background:#282131;border-color:#44334f;color:#b7a6c8}.template-card{background:#201c27;border:1px solid #3c3049;border-radius:12px;box-shadow:none;transition:transform .25s,border-color .25s}.template-card:hover{border-color:#a789c9;transform:translateY(-5px);box-shadow:0 16px 32px #0003}.template-info{background:#201c27;color:#eee4f8;border-color:#382e43}.template-info p{color:#a899b8}.template-arrow{background:#30263e;color:#c7a4ff}.template-art{background:radial-gradient(ellipse at 50% 65%,#56406c,transparent 75%),#2c2337}.template-card:nth-child(2) .template-art{background:radial-gradient(ellipse at 50% 65%,#635735,transparent 75%),#30291f}.template-card:nth-child(3) .template-art{background:radial-gradient(ellipse at 50% 65%,#285057,transparent 75%),#192c30}.roadmap-item{border-color:#3b3145}.roadmap-item>svg{color:var(--violet);background:#30263e}.roadmap-item h3{color:#e1d8eb}.roadmap-item p{color:#9f90ae}.soon{background:#312939;color:#c5afdc;border:1px solid #4b3b59}.faq details{border-color:#383040}.faq summary{color:#e7dced}.faq h2{font-weight:500;letter-spacing:-1.5px}.final-cta{background:radial-gradient(ellipse at 50% 120%,#3f2f54 0,transparent 65%),#17141e;border-top:1px solid #382e43;padding:110px 24px}.final-cta h2{color:#f4ecfc;font-weight:500;letter-spacing:-3px}.final-cta h2 span{color:#bba0ed}.footer{background:#111115;border-color:#332a3c;color:#a28caf}.footer p,.footer a:not(.brand){color:#9a8ca6}
/* Workspace: dense surfaces, clear hierarchy. */
.studio-shell,.studio-main,.app-content{background:#131217}.sidebar{background:#19161e;border-color:#393040}.workspace-switch{background:#231d2d;border-color:#463450;color:#d0c0e1;border-radius:9px}.workspace-avatar,.profile-avatar{background:#3d2d50;color:#cbaaf6}.workspace-switch strong,.profile strong{color:#dfd0ed}.workspace-switch small,.profile small{color:#a08cad}.side-label{color:#897994;letter-spacing:1.8px;font-size:9px}.side-nav a{color:#b2a2bf;border-radius:7px;min-height:43px}.side-nav a:hover{background:#2b2235;color:#eadbf9}.side-nav a.active{background:#342640;color:#d5b5ff;border-left:2px solid #be98ee}.side-nav a .count{background:#4b355e;color:#d9beee}.local-note{border-color:#45314f;background:#241c2c;color:#ac96bd}.profile{border-color:#3b2e43}.app-topbar{height:76px;background:#17141cbf;border-color:#382b42;backdrop-filter:blur(16px)}.breadcrumb{color:#a993b9}.breadcrumb span:last-child{color:#e0ceef}.app-top-actions{color:#b8a4c7}.local-badge{color:#abced6;background:#23353a;border:1px solid #3d515a;border-radius:4px;font-size:8px}.app-content{max-width:1500px;padding:44px 40px 70px}.dashboard-intro{margin-bottom:32px}.dashboard-intro h1{font-size:36px;font-weight:500;letter-spacing:-1.4px;color:#eee3f8}.dashboard-intro p{font-size:13px;color:#ac99ba;margin-top:10px}.dashboard-intro .eyebrow{color:#a994be;font-size:8px}.workspace-overview{display:grid;grid-template-columns:1.8fr 1fr;gap:20px;margin-bottom:28px}.dashboard-feature{margin:0;min-height:265px;border:1px solid #514060;border-radius:12px;background:linear-gradient(115deg,#372942,#261e30);padding:32px;grid-template-columns:1.1fr 1fr}.feature-content .eyebrow{color:#d2bc91;font-size:8px}.feature-content h2{color:#f0e5fd;font-size:31px;font-weight:500;letter-spacing:-1.2px;line-height:1.15;margin-top:17px}.feature-content p{color:#b7a4c6;font-size:12px;line-height:1.7}.feature-content .btn{font-size:11px;padding:12px 17px}.feature-art-inner{background:none!important;filter:saturate(.65)}.workspace-live{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:25px;border:1px solid #3a5157;border-radius:12px;background:radial-gradient(ellipse at 100% 0,#25444d 0,transparent 75%),#1a242a;transition:border-color .25s}.workspace-live:hover{border-color:#90d8e4}.workspace-live .eyebrow{font-size:7px;color:#9ce5f2;letter-spacing:1.1px}.workspace-live h3{font-size:23px;color:#e1f5fb;font-weight:500;letter-spacing:-.6px;margin-top:auto}.workspace-live p{font-size:11px;line-height:1.7;margin:8px 0 17px;color:#97b4c0}.workspace-live>span{font-size:11px;color:#a4e3f0;display:flex;align-items:center;gap:8px}.workspace-live>span svg{width:14px;height:14px}.live-pitch-symbol{position:absolute;right:22px;top:64px;width:56px;height:56px;border:1px solid #54818b;border-radius:50%;display:grid;place-items:center;color:#a7e4ed;background:#85d5e60b}.stat-row{border:1px solid #392f43;background:#1c1722;border-radius:9px;padding:19px 0;margin-bottom:35px}.stat{border-color:#3c2f47}.stat>svg{background:#33273e;color:#c3a5e4}.stat strong{color:#e7d9f3;font-weight:500}.stat span{color:#ab97bb}.projects-header h2{color:#e9dcf5;font-weight:500;font-size:20px}.project-tabs{border-color:#3c3045;gap:30px}.project-tabs button{color:#a38caf;padding:15px 0;font-size:11px}.project-tabs button.active{color:#cdb1ef;border-color:#b799db}.project-grid{gap:19px}.project-card{background:#201a28;border-color:#45334f;border-radius:11px}.project-open{background:transparent;color:inherit}.project-card:hover{border-color:#9470b3;box-shadow:0 10px 28px #0003}.project-card-info{background:#201a28;padding:18px 18px 0}.project-card h3{font-size:14px;color:#e7d9f3;font-weight:550}.project-meta{color:#b39ec3;font-size:10px;margin-top:10px}.project-card-footer{background:#201a28;padding:13px 17px 15px}.status,.project-card-footer .status{color:#b59bc8;font-size:9px}.project-card .status.ready{color:#9edfd3}.project-card .status.review{color:#dcc28c}.new-project-card{background:#19151f;border:1px dashed #5a416b;color:#be9cda;border-radius:11px}.new-project-card:hover{background:#2a1e34;color:#e0bef8;border-color:#ba97d2}.new-project-card small{color:#9c82af}.new-project-card>svg{background:#302039;color:#c2a0e1}.page-title{color:#efe1fa;font-weight:500;letter-spacing:-1.4px}.page-description{color:#aa94bb}.settings-card,.help-item{background:#211a29;border-color:#473352;border-radius:12px}.settings-card h2,.help-item strong{color:#e7d5f5;font-weight:500}.settings-card p,.help-item p,.connection-row small{color:#b49dc6}.connection-row{border-color:#4a3658;color:#dfcbee}.info-banner,.qa-note{background:#2a2232;border-color:#473752;color:#bfa7d1}.storage-alert{background:#403224;color:#ecd5a8}
/* Editor / inspector */
.editor-shell,.editor-workspace{background:#121116}.editor-top{background:#1d1824;border-color:#493451}.editor-name{color:#eddbfc;background:transparent}.save-state{color:#aa8eba}.editor-project .divider{background:#4f395c}.editor-rail{background:#1b1522;border-color:#43304d}.rail-btn{color:#a184b6}.rail-btn:hover{background:#31203f;color:#e3c5fa}.rail-btn.active{background:#422b52;color:#d8b2f6}.editor-settings,.editor-inspector{background:#241b2c;border-color:#4a3454}.editor-settings h2,.editor-inspector h3{color:#ead1fc;font-weight:500}.editor-settings .subtext,.inspector-muted,.event-empty{color:#b395c5}.editor-settings .control-group label{color:#c7acd9}.editor-settings .control-group label span{color:#a984bf}.editor-settings .field{background:#19121f;border-color:#4d365c;color:#ecd7fb}.editor-settings input[type=range]{accent-color:#b98bde}.editor-canvas{background:radial-gradient(ellipse at 50% 70%,#3b274a 0,transparent 68%),radial-gradient(#55415f 1px,transparent 1px);background-size:auto,22px 22px}.editor-device{border-color:#6b4e7d;box-shadow:0 30px 70px #0007;background:#19121e}.device-toolbar{background:#1d1624;border-color:#422d4e}.device-switch{background:#2b1e36;border-color:#4d345c}.device-switch button{color:#ba97cf}.device-switch button.active{background:#573b6b;color:#ecd1ff}.zoom-label{color:#a985be}.editor-playbar{background:#211729;border-color:#46314f;color:#b79bc7}.editor-playbar button{background:#3e2a4a;color:#dcc0ef}.metric-pair,.check-item{color:#b69ac8}.metric-pair strong{color:#d4eff5}.meter{background:#33233d}.meter span{background:#9273b6}.check-item svg{color:#9acee1}.check-item.warn{color:#d3b781}.event{border-color:#44304e;background:#2c2035;color:#d4b6e7}.editor-inspector .event,.editor-inspector .event span{color:#bfa0d2}.mobile-editor-tabs{background:#251b2e;border-color:#4b3459}.mobile-editor-tabs button{background:#372541;color:#c5a3da}.mobile-editor-tabs button.active{background:#65447b;color:#f0d9ff}
/* Sign in and dialogs */
.login-page,.login-form-side{background:#151219}.login-art{background:radial-gradient(ellipse at 35% 60%,#4c355f 0,transparent 68%),#211829;border-color:#44304f;position:relative;overflow:hidden}.login-art:after{content:'';position:absolute;inset:90px 35px 60px;border:1px solid #80609225;border-radius:50% 50% 12px 12px;pointer-events:none}.login-art h1{font-size:clamp(44px,5vw,72px);letter-spacing:-3px;font-weight:500;color:#f1e2fa}.login-art h1 span{color:#b294d6}.login-art p{color:#b3a1c2;max-width:350px;line-height:1.8}.login-art .login-card-art{filter:saturate(.6);background:none}.login-foot{color:#927ca1;letter-spacing:1.5px;font-size:8px}.login-back{color:#a98ebb}.login-box{max-width:390px}.login-box h2{color:#ecdcf8;letter-spacing:-1.3px;font-weight:500;font-size:34px}.login-box>p{color:#b49ac5;font-size:14px;line-height:1.8}.login-note,.login-info,.login-box .or{color:#ad93be}.login-info{background:#241b2e;border-color:#43304e}.login-box .or:before,.login-box .or:after{background:#43304e}dialog#modal{background:#241a2e;color:#eddafa;border:1px solid #725080;border-radius:16px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#07050bbd;backdrop-filter:blur(8px)}.modal-head{border-color:#51365d}.modal-head h2{color:#f0dbff}.modal-head p,.modal-body>p{color:#bda1ce}.export-option{background:#302039;border-color:#54355f;color:#e6c9f8}.export-option:hover{background:#432b50;border-color:#9c6cba}.export-option small{color:#b89acb}.empty{color:#d1b3e2}.empty p{color:#ac8fbd}#toast{background:#d4c0ea;color:#281931;border:1px solid #f0dbff}.editor-settings .mobile-settings-nav button{background:#382342;color:#c4a1d8}.editor-settings .mobile-settings-nav button.active{background:#684780;color:#f5dcff}
/* Responsive composition */
@media(min-width:1600px){.atelier-hero{gap:90px}.stage-grid{height:510px}.stage-grid .hero-phone{width:234px;height:456px}}
@media(max-width:1150px){.nav{padding:0 30px}.atelier-hero{padding:140px 30px 70px;gap:28px;grid-template-columns:1fr 1.1fr}.atelier-hero h1{font-size:62px;letter-spacing:-3.5px}.stage-grid{grid-template-columns:1fr 138px;padding:20px 12px 20px 24px;height:420px}.stage-grid .hero-phone{width:191px;height:372px}.stage-module{padding:13px 10px}.atelier-swatches{gap:5px}.atelier-swatches i{width:18px;height:18px}.hero-actions{flex-wrap:wrap}.capability-strip{margin-left:30px;margin-right:30px}.workspace-overview{grid-template-columns:1.55fr 1fr}.dashboard-feature{padding:26px;grid-template-columns:1fr}.feature-art{opacity:.3;position:absolute;right:-35px;bottom:-20px;pointer-events:none}.feature-content{z-index:1}.workspace-live{padding:22px}.dashboard-intro h1{font-size:30px}}
@media(max-width:850px){.nav-links{display:none}.atelier-hero{grid-template-columns:1fr;padding-top:125px;gap:45px}.hero-copy{max-width:650px}.atelier-hero h1{font-size:76px}.hero-footnote{padding-top:30px}.atelier-stage{max-width:640px;width:100%;margin:auto}.stage-grid{height:450px;grid-template-columns:1fr 190px;padding:25px 35px}.stage-grid .hero-phone{width:210px;height:400px}.stage-module{padding:20px}.capability-strip{flex-wrap:wrap;justify-content:center;gap:25px}.capability-strip>span{width:100%;text-align:center}.workspace-overview{grid-template-columns:1fr}.workspace-live{min-height:210px}.live-pitch-symbol{right:30px;top:50%;transform:translateY(-50%)}.workspace-live h3{margin-top:24px}.story-card{padding:28px}.login-art h1{font-size:51px}}
@media(max-width:680px){.nav-shell{height:68px}.nav{padding:0 20px}.nav .brand{font-size:15px}.nav .brand-mark{width:29px;height:29px}.nav-actions{gap:13px;font-size:10px}.nav-actions .btn{font-size:10px;padding:10px 13px}.atelier-hero{padding:108px 22px 42px;gap:32px}.hero-copy:before{display:none}.atelier-hero .eyebrow{font-size:7px;letter-spacing:1.3px}.atelier-hero h1{font-size:clamp(47px,11.8vw,72px);letter-spacing:-2.8px;margin:25px 0 20px}.hero-intro{font-size:14px;line-height:1.75}.hero-actions{gap:9px;margin-top:24px;flex-wrap:nowrap}.hero-actions .btn{font-size:11px;padding:13px 14px;gap:7px}.hero-actions svg{width:15px}.hero-footnote{font-size:6px;gap:18px;letter-spacing:1px;padding-top:27px}.stage-topline{padding:15px;font-size:6px;letter-spacing:.8px}.stage-grid{height:355px;padding:18px 12px 16px 22px;grid-template-columns:minmax(0,1fr) 106px;gap:8px}.stage-grid .hero-phone{width:164px;height:318px;border-width:4px;border-radius:26px}.stage-grid .phone:before{height:12px;width:52px}.stage-controls{gap:12px;padding:0}.stage-module{padding:12px 9px}.module-index{font-size:5px;letter-spacing:.5px;margin-bottom:9px}.stage-module strong{font-size:9px}.atelier-swatches{gap:4px;margin-top:12px}.atelier-swatches i{height:16px;width:16px;border-radius:4px}.signal-bars{gap:4px;height:27px}.signal-bars i{width:5px}.stage-status{font-size:6px;gap:4px;padding:0}.stage-status svg{width:10px}.stage-bottom{font-size:6px;padding:13px 15px;letter-spacing:.6px}.stage-guides{left:8px;font-size:5px}.stage-guides i{opacity:.5}.capability-strip{margin:0 22px 20px;padding:22px 0;gap:20px}.capability-strip>div{font-size:9px;gap:6px}.capability-strip svg{width:13px}.capability-strip>span{font-size:7px}.section{padding-top:60px;padding-bottom:60px}.section-head h2,.roadmap h2{font-size:36px;letter-spacing:-1.5px}.section-head p,.story-card p,.roadmap-text p,.faq details p{font-size:12px}.section-head{margin-bottom:26px}.demo-controls{padding:25px}.demo-controls h3{font-size:25px}.story-card h3{font-size:27px}.story-card{padding:27px}.template-info p{font-size:10px}.final-cta{padding:75px 22px}.final-cta h2{font-size:46px;letter-spacing:-2px}.footer p,.footer a:not(.brand){font-size:10px}.app-content{padding:30px 20px 50px}.dashboard-intro h1{font-size:27px;letter-spacing:-1.1px}.dashboard-intro .eyebrow{font-size:7px}.dashboard-intro p{font-size:11px}.dashboard-intro .btn{font-size:10px;padding:11px 14px}.workspace-overview{gap:13px}.dashboard-feature{padding:26px;min-height:255px}.feature-content h2{font-size:29px}.feature-content p{font-size:11px}.workspace-live{min-height:205px}.workspace-live h3{font-size:24px}.stat-row{padding:17px 5px}.stat strong{font-size:22px}.stat span{font-size:8px}.projects-header h2{font-size:19px}.project-tabs{gap:24px}.project-tabs button{font-size:10px}.project-grid{gap:12px}.project-card-info{padding:15px 12px 0}.project-card h3{font-size:12px}.project-meta{font-size:8px}.project-card-footer{padding:10px 10px 13px}.new-project-card{font-size:11px}.new-project-card small{font-size:8px}.login-art{min-height:290px}.login-art-content h1{font-size:44px;letter-spacing:-2px}.login-box h2{font-size:30px}.editor-settings{background:#241b2c}.editor-settings .field{font-size:13px}.editor-settings .control-group label{font-size:12px}.editor-settings .subtext{font-size:11px}.modal-body .template-info p{font-size:7px}.modal-body .template-info h3{font-size:8px}}
@media(max-width:370px){.stage-grid{grid-template-columns:minmax(0,1fr) 93px;height:320px;padding-left:16px;padding-right:8px}.stage-grid .hero-phone{width:146px;height:284px}.stage-module{padding:10px 7px}.atelier-swatches i{width:14px;height:14px}.hero-actions .btn{padding:12px 10px;font-size:10px}.nav .brand em{display:none}.capability-strip{gap:16px}}
@media(prefers-reduced-motion:reduce){.stage-grid .hero-phone,.template-card,.workspace-live{transition:none}.motion-ready .reveal{opacity:1;transform:none}}