:root{--bg:#07080d;--panel:#121318;--line:#252831;--muted:#9ca2ad;--blue:#3b84ff;--pink:#d4387c;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#03050d;color:#f7f7f9;font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;overflow-x:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}p,h1,h2,h3{margin-top:0}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #4d9cff;outline-offset:3px}[hidden]{display:none!important}
.site-header{height:80px;position:fixed;inset:0 0 auto;z-index:100;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.header-inner{height:100%;max-width:1440px;padding:0 27px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:inline-flex;align-items:center;flex:none;width:154px;height:30px}.brand img{width:154px;height:auto}.main-nav{display:flex;align-items:center;gap:54px;margin-left:120px;white-space:nowrap}.main-nav a{font-size:16px;color:#c9cbcc;transition:color .25s}.main-nav a:hover,.main-nav a.active{color:#fff}.header-actions{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:15px;color:#d7d9de}.avatar{display:inline-block;width:28px;height:28px;background:#4762c1;border-radius:50%;flex:none}.mobile-menu{display:none;border:0;color:#fff;background:transparent;font-size:25px}.btn{min-height:48px;padding:0 25px;border-radius:8px;border:1px solid #333741;display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,background .3s}.btn:hover{transform:translateY(-3px)}.btn.light{background:#fff;color:#0b0c12;border-color:#fff}.btn.light:hover{box-shadow:0 8px 28px #fff2}.btn.dark{background:#14161c;color:#eee}.btn.dark:hover{background:#1d222d}
.home{background:linear-gradient(180deg,#000 0%,#000a34 45%,#020510 92%)}.intro-shell{height:200vh;position:relative}.intro-stage{height:100vh;min-height:650px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#000 0%,#000a34 50%,#020510 100%)}.intro-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 48% 54%,#16398340,transparent 50%)}.hero-cube{position:absolute;z-index:-1;width:min(63vw,908px);height:auto;left:50%;top:54%;transform:translate(-50%,-50%);opacity:1;transform-origin:center;will-change:transform,opacity;pointer-events:none}.hero-content{position:absolute;inset:80px 0 0;display:flex;align-items:center;justify-content:center;opacity:1;pointer-events:auto}.hero-enter,.black-enter{font-size:24px;display:inline-flex;align-items:center;gap:14px;background:#000b;color:#fff;padding:2px 15px 3px 24px;box-shadow:0 0 10px #000;border-radius:3px;transition:transform .3s var(--ease),box-shadow .3s}.hero-enter:hover,.black-enter:hover{transform:scale(1.06);box-shadow:0 0 20px #327bffc0}.hero-enter span,.black-enter span{color:#3996ff}.hero-scroll{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font-size:12px;color:#b5bbca;letter-spacing:.08em;display:flex;align-items:center;gap:12px;white-space:nowrap}.hero-scroll b{font-size:22px;font-weight:300}.capability-content{position:absolute;inset:80px 0 0;opacity:0;transform:translateY(45px);pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 4vw 5vh}.section-heading{text-align:center;max-width:1000px;margin:0 auto 64px}.section-heading h1{font-size:clamp(36px,4.4vw,64px);font-weight:600;line-height:1.15;margin:0 0 24px}.section-heading p{font-size:20px;color:#d1d2d8;margin-bottom:20px}.black-enter{font-size:22px}.feature-cards{display:grid;grid-template-columns:repeat(3,minmax(0,312px));gap:52px;justify-content:center;width:100%}.feature-card{min-height:345px;border:1px solid #42434d;border-radius:12px;background:linear-gradient(160deg,#56587370,#1c2243b8);padding:30px 31px 23px;position:relative;box-shadow:inset 0 0 80px #ffffff0b;display:flex;flex-direction:column}.feature-card-1{background:linear-gradient(160deg,#4a131c9c,#1c1129ce)}.feature-card-2{background:linear-gradient(160deg,#51400b91,#19191dd6)}.feature-accent{width:50px;height:8px;border-radius:8px;background:#3895ff;margin-bottom:16px}.feature-card-1 .feature-accent{background:#f1457b}.feature-card-2 .feature-accent{background:#ffcb2b}.feature-card small{color:#57a0ff;font-size:19px}.feature-card-1 small{color:#ff4e8c}.feature-card-2 small{color:#f3bf30}.feature-card h3{font-size:34px;font-weight:600;margin:22px 0 12px}.feature-card p{font-size:17px;line-height:1.6;color:#c5c7d0;margin-bottom:auto}.feature-card span{font-size:15px;color:#c0c2cb;margin-top:28px}.capability-anchor{position:absolute;top:50%;left:0;width:1px;height:1px;scroll-margin-top:0}
.cases-outer{scroll-margin-top:80px;padding:0 27px 80px;background:linear-gradient(180deg,#020510,#000a34 70%,#010a26)}.case-board{position:relative;max-width:1385px;aspect-ratio:1385/803;min-height:640px;margin:auto;background:#fff;color:#141720;border-radius:18px;overflow:hidden;isolation:isolate}.case-board h2{position:absolute;top:7%;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;font-size:clamp(30px,3.1vw,44px);font-weight:600;letter-spacing:.02em;background:linear-gradient(90deg,#d34478,#3b84ff);color:transparent;background-clip:text;-webkit-background-clip:text}.case-intro{position:absolute;top:17%;left:50%;transform:translateX(-50%);font-size:20px;color:#494949;text-align:center;white-space:nowrap}.case-categories{position:absolute;top:25%;left:5.8%;width:18.5%;z-index:30}.case-category{width:100%;height:44px;border:0;border-bottom:1px solid #ececec;background:transparent;color:#727272;font-size:24px;font-weight:500;text-align:left;padding-left:14px;white-space:nowrap;transition:color .3s,background .45s var(--ease),transform .35s var(--ease)}.case-category:hover{color:#174080;transform:translateX(3px)}.case-category.active{color:#17355e;background:linear-gradient(90deg,#4a91ff,#eaf3ff 95%,transparent);border-left:4px solid #3b84ff;padding-left:10px}.case-stack{position:absolute;inset:0;z-index:10;transition:transform .8s var(--ease);transform:translate3d(var(--shift-x,0%),var(--shift-y,0%),0);will-change:transform}.case-card{position:absolute;width:25%;aspect-ratio:1.62;border:1px solid #bfd6fb;background:#f5f5f5;border-radius:11px;padding:10px;box-shadow:0 8px 24px #1f2e4b12;transform:rotate(10deg);transform-origin:center;transition:transform .55s var(--ease),box-shadow .55s var(--ease),top .7s var(--ease),opacity .45s;will-change:transform}.case-card img{width:100%;height:100%;object-fit:cover;border-radius:7px}.case-card:hover,.case-card:focus-visible{transform:rotate(0deg) translateY(-22px) scale(1.2);box-shadow:0 22px 50px #0c32613d;z-index:50}.card-play{position:absolute;inset:auto 13px 13px auto;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#0009;opacity:0;transition:opacity .3s}.case-card:hover .card-play{opacity:1}.case-board.is-viewing .case-stack .case-card{transform:translateY(110%) rotate(10deg);opacity:.25;pointer-events:none}.case-viewer{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:28px;flex-direction:column;background:#ffffffed;opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .55s var(--ease),transform .55s var(--ease)}.case-board.is-viewing .case-viewer{opacity:1;pointer-events:auto;transform:scale(1)}.viewer-close{position:absolute;right:30px;top:20px;background:#151922;border:0;border-radius:50%;color:#fff;width:44px;height:44px;font-size:30px;line-height:1}.viewer-media{position:relative;width:min(69%,900px);aspect-ratio:16/9;border:10px solid #fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 65px #19335752;background:#000}.viewer-media img,.viewer-media video{width:100%;height:100%;object-fit:cover}.viewer-media img{animation:preview-pan 12s ease-in-out infinite alternate}.demo-motion{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 38%,#fff2 49%,transparent 60%);animation:preview-shimmer 5s linear infinite;pointer-events:none}.viewer-caption{text-align:center}.viewer-caption span{font-size:15px;color:#397edc}.viewer-caption h3{font-size:30px;margin:7px 0}.viewer-caption small{font-size:13px;color:#677080}@keyframes preview-pan{from{transform:scale(1)}to{transform:scale(1.12) translateX(-2%)}}@keyframes preview-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.scenarios{scroll-margin-top:80px;min-height:1000px;padding:100px 6.2vw 160px;text-align:center;background:radial-gradient(circle at 50% 25%,#06194a 0,#020716 53%,#02030a 100%)}.scenarios h2{font-size:clamp(36px,4.5vw,64px);line-height:1.17;font-weight:500;margin:0 auto 22px}.scenario-intro{font-size:19px;line-height:1.65;color:#c2c5ce;margin-bottom:48px}.scenario-actions{display:flex;justify-content:center;gap:14px;margin-bottom:80px}.audience-grid{max-width:1264px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}.audience-card{background:#fff;color:#10121b;border-radius:9px;overflow:hidden}.audience-art{height:214px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(110deg,#060911,#173d6b,#05070e)}.audience-art.art-1{background:linear-gradient(110deg,#08070c,#4c1d39,#03040c)}.audience-art.art-2{background:linear-gradient(110deg,#100e0a,#6a510e,#0a0b0f)}.audience-art img{width:75%;height:90%;object-fit:contain}.audience-copy{padding:20px 24px 18px}.audience-copy small{color:#3685f7;font-size:13px}.audience-copy h3{font-size:27px;margin:4px 0 7px}.audience-copy p{font-size:14px;line-height:1.55;color:#535966;min-height:45px;margin:0 0 8px}.audience-copy span{font-size:12px;color:#87909d}
.footer{background:linear-gradient(180deg,#05070a,#060b15 40%,#08080a);padding:70px 0 40px}.footer-inner{max-width:1180px;margin:auto}.footer-statement{text-align:center;height:165px}.footer-statement small{font-size:12px;color:#397dd8;letter-spacing:.08em}.footer-statement h2{font-size:40px;font-weight:600;margin:10px 0}.footer-statement p{font-size:16px;color:#9ea5b1}.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;padding:40px 0 65px}.footer-cols h3{font-size:17px;font-weight:600;margin:0 0 25px}.footer-cols a{display:block;font-size:14px;color:#aab1c0;margin:0 0 16px;transition:color .25s}.footer-cols a:hover,.footer-bottom a:hover{color:#fff}.footer-bottom{border-top:1px solid #202734;padding-top:25px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#808a9c}.footer-bottom .brand{width:154px}.footer-bottom a{color:#909bad}
.inner-page{padding-top:80px;background:#09090b}.page-hero{min-height:500px;max-width:1180px;width:calc(100% - 12vw);margin:auto;padding:92px 0 70px}.page-hero small,.section-head small,.about-belief small,.enterprise small{display:block;color:#4197ff;font-size:16px;letter-spacing:.06em;margin-bottom:25px}.page-hero h1{font-size:clamp(40px,4vw,56px);line-height:1.12;font-weight:600;margin-bottom:28px}.page-hero p{font-size:20px;color:#aaaeb6}.accent-lines{height:4px;width:260px;margin-top:62px;background:linear-gradient(90deg,#388fff 0 66%,transparent 66% 69%,#db285e 69% 100%)}.notice-bar{background:#141417;padding:22px max(calc((100vw - 1180px)/2),6vw);display:flex;justify-content:space-between;color:#aaa;font-size:15px}.notice-bar b{color:#d8d8df;font-weight:500}.page-section{padding:85px max(calc((100vw - 1180px)/2),6vw);background:#09090b}.page-section.alt{background:#111115}.section-head{position:relative;margin-bottom:50px}.section-head small{margin-bottom:14px}.section-head h2{font-size:38px;margin-bottom:15px;font-weight:600}.section-head p{color:#a7aab3;font-size:18px;line-height:1.6}.billing-toggle{position:absolute;right:0;bottom:0;border:1px solid #282b33;border-radius:8px;padding:4px;display:flex}.billing-toggle button{border:0;background:transparent;color:#9ba0ab;padding:8px 14px;border-radius:5px}.billing-toggle button.active{background:#1e2b50;color:#4da0ff}.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.plan{border:1px solid #32323a;background:linear-gradient(150deg,#1c1c20,#0d0d10);padding:26px 24px 28px;min-height:510px;display:flex;flex-direction:column;border-radius:12px}.plan-1{background:linear-gradient(150deg,#0c2039,#0d0d10)}.plan-2{background:linear-gradient(150deg,#3a1123,#0d0d10)}.plan-3{background:linear-gradient(150deg,#2d250d,#0d0d10)}.plan-tag{font-size:14px;color:#eee;padding:7px 14px;background:#ffffff16;width:max-content;border-radius:6px}.plan-price{font-size:38px;margin:24px 0 6px}.plan-price em{font-size:19px;font-style:normal}.plan p{font-size:15px;color:#b2b4bd;min-height:42px}.divider{height:1px;background:#ffffff23;margin:12px 0 20px}.plan ul{list-style:none;padding:0;margin:0}.plan li{font-size:15px;color:#d5d5dc;margin-bottom:17px}.plan .btn{margin-top:auto;width:100%}.rate-table{border:1px solid #303037;border-radius:10px;overflow:hidden}.rate-table div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:25px 28px;border-bottom:1px solid #303037;align-items:center}.rate-table div:last-child{border:0}.rate-table span{color:#a6a9b1}.rate-table strong{text-align:right;font-size:20px}.enterprise{border:1px solid #303037;border-radius:13px;background:linear-gradient(110deg,#14141b,#1e1b20);padding:38px 45px;display:flex;align-items:center;justify-content:space-between;gap:50px}.enterprise small{color:#ffc445}.enterprise h2{font-size:34px;margin-bottom:14px}.enterprise p{color:#a5a7b1;line-height:1.6}.enterprise>div:last-child{display:flex;align-items:center;gap:32px;white-space:nowrap}.enterprise strong{font-size:21px}.faq-section{padding-bottom:120px}.faq{border:1px solid #2c2d33;background:#17171b;border-radius:8px;margin:12px 0}.faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between}.faq summary:after{content:'+'}.faq[open] summary:after{content:'−'}.faq p{padding:0 24px 20px;color:#aeb0bc;margin:0}
.about-belief{background:#0e0e12;min-height:360px;padding:80px max(calc((100vw - 1180px)/2),6vw);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-belief h2{font-size:44px;line-height:1.2}.about-belief p{font-size:18px;line-height:1.8;color:#bbbcc4}.wide-copy{max-width:980px}.info-grid{display:grid;gap:16px}.info-grid.four{grid-template-columns:repeat(4,1fr)}.info-grid article{border:1px solid #2e3038;border-radius:10px;background:#18191e;padding:26px;min-height:155px}.info-grid article h3{font-size:22px;margin-bottom:20px}.info-grid article p{font-size:15px;color:#a5a8b1;line-height:1.5}.info-grid article small{font-size:13px;color:#49a55c}.steps{border:1px solid #303139;border-radius:12px;overflow:hidden}.steps>div{display:grid;grid-template-columns:90px 300px 1fr;gap:20px;align-items:center;padding:34px;border-bottom:1px solid #303139}.steps>div:last-child{border-bottom:0}.steps b{color:#4896ff}.steps h3{font-size:21px;margin:0}.steps p{color:#aeb0b9;margin:0;line-height:1.5}.market-row{display:flex;justify-content:space-between;border:1px solid #303039;background:#08090d;margin-top:24px;padding:16px 32px;color:#abb0ba}
.contact-body{background:#111115;padding:90px max(calc((100vw - 1180px)/2),6vw) 145px;display:grid;grid-template-columns:350px minmax(0,1fr);gap:80px}.contact-body aside h2{font-size:32px}.contact-body aside>p{color:#b7b8bf;line-height:1.6;margin-bottom:35px}.contact-direction,.contact-reply{border:1px solid #303038;border-radius:10px;padding:26px;margin:0 0 18px;background:#1a1b20}.contact-direction h3{font-size:20px;margin-bottom:10px}.contact-direction p{font-size:15px;color:#a2a5ad;line-height:1.5;margin:0}.contact-reply{background:#09090c;display:flex;flex-direction:column;gap:8px}.contact-reply small{color:#a0a2aa}.contact-reply strong{font-size:20px}.contact-form{border:1px solid #35353c;background:#08080b;border-radius:14px;padding:36px 40px;align-self:start}.contact-form h2{font-size:27px;margin-bottom:24px}.contact-form label{display:flex;flex-direction:column;font-size:14px;color:#c0c2ca;margin-bottom:18px;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea,.login-panel input,.project-tools input{width:100%;min-height:42px;border:1px solid #303038;border-radius:6px;background:#1b1b20;color:#fff;padding:10px 13px}.contact-form textarea{min-height:155px;resize:vertical}.contact-form .check{flex-direction:row;align-items:flex-start;font-size:13px;line-height:1.5}.contact-form .check input{margin:3px 0 0}.form-bottom{display:flex;align-items:center;justify-content:space-between}.form-bottom small{font-size:13px;color:#8c8e97}.form-status{min-height:22px;margin:16px 0 0;color:#6ab784;font-size:14px}
.login-page{height:100vh;min-height:650px;background:#000;position:relative;overflow:hidden}.login-page>.brand{position:absolute;z-index:5;top:13px;left:27px}.login-close{position:absolute;z-index:5;top:18px;right:6%;font-size:28px;color:#aaa}.login-art{position:absolute;left:-18%;top:-30%;width:85%;height:150%;overflow:hidden}.login-art img{width:100%;height:100%;object-fit:cover;filter:blur(2px);transform:scale(1.55)}.login-page:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#000 80%);pointer-events:none}.login-panel{position:absolute;z-index:2;right:5.5%;top:50%;transform:translateY(-50%);width:280px}.login-panel h1{font-size:32px;color:#c4c4c7;font-weight:400;text-align:center;margin-bottom:34px}.social-login{width:100%;height:47px;border:1px solid #666;border-radius:9px;background:#020203;color:#c4c4c7;margin-bottom:10px;display:flex;justify-content:center;align-items:center;gap:11px}.social-login img{width:18px;height:18px}.login-divider{height:1px;background:#303033;margin:30px 0}.login-panel input[type=email]{background:#050506;border-color:#67676c;margin-bottom:10px}.gradient-button{width:100%;height:47px;border:1px solid #ffc400;border-radius:8px;background:linear-gradient(105deg,#210000,#932e61,#3578ed);color:white}.login-note{color:#ffcc78;font-size:12px;line-height:1.5;min-height:20px}.user-card,.terms{border:1px solid #65656c;border-radius:9px;min-height:72px;display:flex;align-items:center;gap:16px;padding:13px;margin-bottom:12px}.avatar.big{width:50px;height:50px}.user-card div{display:flex;flex-direction:column;gap:4px}.user-card small{color:#8d8d93;font-size:12px}.user-card strong{font-weight:400;min-width:120px}.terms{font-size:10px;line-height:1.35;color:#c2c2c5;align-items:center;min-height:60px}.terms input{flex:none}.login-panel #enter-workbench{margin-top:54px}
.work-header{background:#000}.work-header .work-nav{margin:auto;gap:80px;height:100%}.work-nav a{height:100%;display:grid;place-items:center;position:relative}.work-nav a.active:after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:3px;background:#308afa}.workbench,.projects-page,.chat-page,.studio-page{min-height:100vh;padding-top:80px;background:#020203}.work-prompt{max-width:780px;margin:84px auto 0;text-align:center}.work-prompt>small{font-size:14px;color:#4196ff}.online-dot{display:inline-block;width:7px;height:7px;background:#2cd58f;border-radius:50%;margin-right:10px;vertical-align:middle}.work-prompt h1{font-size:38px;font-weight:500;margin:18px 0 15px}.work-prompt p{font-size:17px;color:#a4a7b0}.prompt-tabs{display:flex;gap:10px;margin:40px 0 14px}.prompt-tabs button,.project-filters button,.choice-row button,.studio-tabs button{border:1px solid #33353d;border-radius:7px;background:#131418;color:#b5b7bf;padding:11px 15px;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}.prompt-tabs button{flex:1;font-size:14px}.prompt-tabs button.active,.project-filters button.active,.choice-row button.active{border-color:#3692ff;background:#101b2c;color:#fff}.prompt-box{border:1px solid #343842;background:#111216;border-radius:10px;text-align:left;box-shadow:0 10px 30px #2379ff17}.prompt-box textarea,.chat-compose textarea{width:100%;min-height:98px;background:transparent;border:0;outline:0;resize:vertical;color:#fff;padding:20px 22px}.prompt-box>div,.chat-compose>div{display:flex;align-items:center;gap:12px;padding:0 20px 14px}.upload-button,.prompt-box select{min-height:42px;border:1px solid #363a43;border-radius:7px;background:#141519;color:#bfc1c9;padding:10px 14px;font-size:14px;cursor:pointer}.prompt-box select{min-width:185px}.upload-name{font-size:13px;color:#9bbbe5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.round-submit{margin-left:auto;border:0;background:#fff;color:#0e1117;font-size:28px;border-radius:50%;width:46px;height:46px;line-height:1}.prompt-hint{display:block;color:#737780;font-size:13px;margin-top:11px}.continue-work{max-width:1256px;margin:95px auto 0;padding-bottom:80px}.continue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.continue-head h2{font-size:30px;font-weight:500;margin:0}.continue-head span{font-size:13px;color:#aaa;background:#17181d;padding:6px 18px;border-radius:5px;margin-left:15px;vertical-align:middle}.continue-head a{background:#141519;border:1px solid #272a33;border-radius:7px;padding:9px 18px;font-size:14px}.continue-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.continue-card{min-height:172px;background:#111216;border:1px solid #30333b;border-radius:8px;padding:18px;transition:transform .3s var(--ease),border-color .3s}.continue-card:hover{transform:translateY(-5px);border-color:#4a95ed}.meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#a8abb4}.continue-card .meta:first-child small{background:#1a1b20;padding:5px 8px;border-radius:3px}.continue-card h3{font-size:23px;font-weight:500;margin:10px 0}.continue-card p{color:#b3b4bd;font-size:14px;margin:0 0 9px}.continue-card strong{color:#eee;font-weight:500}.progress{height:3px;background:#343842;overflow:hidden;margin-top:13px}.progress i{display:block;height:100%;background:#2f99ff}
.projects-page{padding:130px max(calc((100vw - 1256px)/2),6vw) 100px}.projects-head{display:flex;align-items:center;justify-content:space-between;gap:30px}.projects-head h1{font-size:38px;font-weight:500;margin-bottom:11px}.projects-head p{color:#a7aab1}.project-tools{display:flex;gap:12px}.project-tools input{width:280px;background:#111216;min-height:46px}.project-filters{display:flex;gap:10px;margin:24px 0}.project-filters button{font-size:14px;min-width:110px}.filter-spacer{flex:1}.project-filters .sort-button{min-width:150px}.project-filters .view-button{min-width:42px}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.project-card{border:1px solid #30343c;background:#111216;border-radius:9px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}.project-card:hover{transform:translateY(-5px);border-color:#358aff}.project-image{height:100px;background:linear-gradient(130deg,#0a0b0f,#0d3047)}.project-image img{width:100%;height:100%;object-fit:cover}.project-copy{padding:12px 14px}.project-copy h3{font-size:21px;font-weight:500;margin:8px 0}.project-copy p{font-size:14px;color:#b6b8c0;margin-bottom:8px}.project-grid.list-view{grid-template-columns:1fr}.list-view .project-card{display:grid;grid-template-columns:180px 1fr}.list-view .project-image{height:100%}
.project-top-name{font-size:16px;margin-right:auto}.project-top-name span{font-size:19px;margin-left:6px}.chat-thread{width:min(890px,calc(100% - 40px));margin:36px auto 0;padding-bottom:70px;display:flex;flex-direction:column;gap:32px}.chat-bubble.user{background:#191a1f;border:1px solid #34373f;border-radius:8px;width:70%;align-self:flex-end;padding:18px}.chat-bubble small{color:#9c9ea8}.chat-bubble p{font-size:15px;line-height:1.5;margin:8px 0}.chat-bubble span{display:block;border:1px solid #34373f;padding:10px;color:#8e929d;font-size:12px}.assistant-message{display:flex;align-items:flex-start;gap:20px;width:90%;color:#e2e4e9}.rf-icon{width:30px;height:30px;flex:none;border:1px solid #388fff;border-radius:7px;background:#092443;color:#69b3ff;display:grid;place-items:center;font-size:10px}.assistant-message small{font-size:13px;color:#58a1ff}.assistant-message p{font-size:16px;line-height:1.55;margin:12px 0}.choice-row{display:flex;gap:8px}.choice-row button{font-size:14px;padding:7px 14px}.result-card{border:1px solid #3a3e48;background:#111216;border-radius:9px;padding:20px;flex:1}.result-card small{color:#54cf9f}.result-card h2{font-size:23px;margin:14px 0}.result-card p{color:#aeb1bb;font-size:15px}.result-actions{display:flex;gap:10px;align-items:center}.result-actions span{border:1px solid #373a43;border-radius:5px;padding:8px 13px;color:#b8bbc4;font-size:13px}.result-actions .btn{margin-left:auto;min-height:42px;font-size:14px}.chat-compose{border:1px solid #373a43;background:#121318;border-radius:8px}.chat-compose textarea{min-height:56px}.chat-compose>div span{font-size:13px;color:#7d808b}
.studio-page{display:flex}.studio-aside{width:300px;flex:none;border-right:1px solid #30333a;min-height:calc(100vh - 80px);padding:24px 20px}.studio-aside-label{font-size:16px}.studio-aside-box{border:1px solid #33353b;border-radius:10px;height:142px;margin-top:64vh}.studio-content{padding:0 12px 12px;flex:1;min-width:0}.studio-tabs{height:58px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #353940}.studio-tabs>div{display:flex;height:100%;gap:20px}.studio-tabs button{border:0;background:transparent;border-radius:0;font-size:16px;padding:0 8px}.studio-tabs button.active{border-bottom:3px solid #3b9bff;color:#fff}.studio-tools{display:flex;gap:6px;align-items:center}.studio-tools input{width:130px;background:#15161a;border:1px solid #3a3d44;color:#fff;border-radius:6px;padding:5px}.studio-tools button{background:#1a1b20;color:#fff;border:1px solid #41444d;border-radius:5px;padding:5px 10px}.studio-main{display:flex;border:1px solid #3b3e46;border-radius:9px;height:calc(100vh - 150px);min-height:550px;margin-top:12px;box-shadow:0 0 12px #ffffff20}.studio-tree{width:180px;flex:none;border-right:1px solid #353842;padding:14px}.studio-tree button{width:100%;text-align:left;border:1px solid #3b99ff;border-radius:5px;padding:6px 10px;color:#fff;background:linear-gradient(90deg,#11345d,#050a16)}.studio-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#888}.studio-empty h2{font-size:32px;color:#ddd;margin-bottom:8px}.studio-empty p{font-size:15px}.studio-empty .btn{margin-top:15px}.studio-empty:has(#studio-editor textarea){justify-content:flex-start;padding:40px}.studio-empty:has(#studio-editor textarea)>h2,.studio-empty:has(#studio-editor textarea)>p,.studio-empty:has(#studio-editor textarea)>button{display:none}#studio-editor{width:min(850px,100%)}#studio-editor textarea{width:100%;height:55vh;background:#17181d;border:1px solid #3a3d46;border-radius:7px;color:#fff;padding:16px;resize:vertical}#studio-editor .btn{margin-top:12px}.studio-save-status{color:#64c68e;margin-left:16px}
@media(max-width:1100px){.main-nav{gap:25px;margin-left:15px}.header-actions{gap:13px}.feature-cards{gap:18px}.feature-card{min-height:300px;padding:23px}.feature-card h3{font-size:26px}.feature-card small{font-size:15px}.feature-card p{font-size:14px}.case-category{font-size:19px}.footer-inner{padding:0 4vw}.plan-grid{grid-template-columns:repeat(2,1fr)}.contact-body{gap:40px}.continue-work{padding:0 5vw 80px}.projects-page{padding-left:5vw;padding-right:5vw}}
@media(max-width:760px){.site-header{height:66px}.header-inner{padding:0 18px}.brand,.brand img{width:130px}.header-actions{margin-left:auto}.mobile-menu{display:block}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;margin:0;background:#080a0ff5;padding:15px 20px 25px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #30333b}.site-header.menu-open .main-nav{display:flex}.main-nav a{padding:12px 5px}.intro-shell{height:200vh}.intro-stage{min-height:0}.hero-cube{width:105vw}.hero-content{inset:66px 0 0}.hero-enter{font-size:18px}.capability-content{inset:66px 0 0;padding:10px 16px}.section-heading{margin-bottom:18px}.section-heading h1{font-size:31px;margin-bottom:10px}.section-heading p{font-size:13px}.black-enter{font-size:15px}.feature-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.feature-card{min-height:210px;padding:11px 8px}.feature-accent{height:4px;width:25px;margin-bottom:7px}.feature-card small{font-size:10px}.feature-card h3{font-size:16px;margin:9px 0}.feature-card p{font-size:10px;line-height:1.4}.feature-card span{font-size:9px;margin-top:8px}.cases-outer{padding:0 10px 40px}.case-board{min-height:580px;aspect-ratio:auto}.case-board h2{top:7%;font-size:26px}.case-intro{top:15%;width:90%;white-space:normal;font-size:13px}.case-categories{top:25%;left:5%;width:37%}.case-category{font-size:14px;height:38px;padding-left:6px}.case-category.active{padding-left:2px}.case-stack{transform:translate3d(var(--shift-x,0%),var(--shift-y,0%),0)}.case-card{width:53%;padding:6px}.viewer-media{width:90%;border-width:5px}.viewer-caption h3{font-size:23px}.scenarios{padding:70px 20px}.scenarios h2{font-size:31px}.scenario-intro{font-size:14px}.audience-grid{grid-template-columns:1fr}.footer{padding-top:55px}.footer-statement{height:auto;margin-bottom:35px}.footer-statement h2{font-size:26px}.footer-statement p{font-size:12px}.footer-cols{grid-template-columns:repeat(2,1fr);gap:15px}.footer-bottom{flex-wrap:wrap;gap:20px}.inner-page{padding-top:66px}.page-hero{min-height:420px;width:100%;padding:65px 6vw}.page-hero h1{font-size:38px}.page-hero p{font-size:16px}.notice-bar{flex-direction:column;gap:8px}.page-section{padding:65px 6vw}.section-head h2{font-size:29px}.billing-toggle{position:static;width:max-content;margin-top:25px}.plan-grid{grid-template-columns:1fr}.plan{min-height:430px}.enterprise{flex-direction:column;align-items:flex-start}.enterprise>div:last-child{flex-direction:column;align-items:flex-start;gap:16px}.about-belief{grid-template-columns:1fr;gap:10px}.about-belief h2{font-size:34px}.info-grid.four{grid-template-columns:repeat(2,1fr)}.steps>div{grid-template-columns:40px 1fr}.steps p{grid-column:2}.market-row{font-size:12px}.contact-body{grid-template-columns:1fr;padding:55px 6vw}.form-grid{grid-template-columns:1fr}.contact-form{padding:22px}.login-art{left:-25%;width:110%;opacity:.65}.login-panel{right:50%;transform:translate(50%,-50%);width:min(300px,86vw);background:#0009;padding:18px;border-radius:10px}.work-prompt{margin:45px 15px 0}.work-prompt h1{font-size:28px}.work-prompt p{font-size:13px}.prompt-tabs{overflow:auto;margin-top:25px}.prompt-tabs button{flex:none}.continue-work{margin-top:60px}.continue-row,.project-grid{grid-template-columns:repeat(2,1fr)}.continue-card{min-height:160px}.projects-page{padding-top:105px}.projects-head{align-items:flex-start;flex-direction:column}.project-tools{width:100%}.project-tools input{min-width:0;width:100%}.project-filters{overflow-x:auto}.project-filters button{flex:none}.filter-spacer{display:none}.chat-thread{margin-top:25px}.chat-bubble.user{width:90%}.assistant-message{width:100%}.result-actions{flex-wrap:wrap}.result-actions .btn{margin-left:0}.studio-aside{display:none}.studio-tabs{overflow-x:auto}.studio-tabs>div{gap:5px}.studio-tools{display:none}.studio-main{height:calc(100vh - 145px)}.studio-tree{width:80px}}
@media(max-width:450px){.header-actions{gap:8px;font-size:12px}.avatar{width:22px;height:22px}.case-board{min-height:530px}.case-category{font-size:13px}.case-card{width:56%}.feature-card{min-height:220px}.feature-card h3{font-size:14px}.feature-card p{font-size:9px}.audience-art{height:185px}.rate-table div{grid-template-columns:1fr 1fr}.rate-table strong{grid-column:1/-1;text-align:left}.info-grid.four{grid-template-columns:1fr}.continue-row,.project-grid{grid-template-columns:1fr}.project-filters .sort-button,.project-filters .view-button{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-cube,.capability-content,.case-stack,.case-card,.case-viewer,.btn,.continue-card,.project-card{transition:none!important;animation:none!important}.viewer-media img,.demo-motion{animation:none!important}}
.login-panel input[type=checkbox]{width:16px;height:16px;min-height:16px;flex:0 0 16px;padding:0;accent-color:#3b84ff}.terms span{flex:1;min-width:0}
/* Shared topbar actions, including login and language selection. */
.header-actions,.login-header-actions{display:flex;align-items:center;gap:22px}.login-header-actions{margin-left:auto}.account-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:50%;transition:transform .25s var(--ease),box-shadow .25s}.account-link:hover{transform:scale(1.1);box-shadow:0 0 0 5px #4762c133}.language-picker{position:relative;flex:none}.language-trigger{display:inline-flex;align-items:center;gap:6px;border:0;padding:8px 0;background:transparent;color:#d7d9de;font-size:15px;line-height:1}.language-trigger:hover,.language-trigger[aria-expanded=true]{color:#fff}.language-trigger span{font-size:16px;color:#979ba5}.language-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:110;min-width:174px;padding:6px;border:1px solid #363b47;border-radius:9px;background:#10131a;box-shadow:0 15px 35px #0009}.language-menu button{display:block;width:100%;border:0;border-radius:5px;background:transparent;color:#c8cbd3;text-align:left;padding:11px 12px;font-size:14px}.language-menu button:hover,.language-menu button[aria-checked=true]{background:#1d2f4d;color:#fff}.login-header .login-close{position:static;display:grid;place-items:center;width:28px;height:28px;margin:0;color:#bfc2c9;font-size:27px;line-height:1}.login-header .login-close:hover{color:#fff}.login-page>.brand{display:none}
@media(max-width:1250px) and (min-width:761px){.header-inner{gap:18px}.main-nav{gap:20px;margin-left:10px}.main-nav a{font-size:14px}}
@media(max-width:760px){.header-actions,.login-header-actions{gap:14px}.language-trigger{font-size:13px}.account-link{width:22px;height:22px}.login-header .login-close{width:24px;height:24px}}

/* The large cube colour fades before the feature cards; the page keeps its
   subtle black-to-navy ground underneath. */
.home{background:linear-gradient(180deg,#000 0%,#000a34 41.8%,#020510 91.8%)}
.intro-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--capability-ground,0);background:linear-gradient(180deg,transparent 0%,transparent 32%,#020510 60%,#020510 100%)}
.capability-content{z-index:1}
.cases-outer,.scenarios{background:transparent}

/* Figma hero artwork: 908 × 758 at x=267, y=104 on a 1440 × 900 frame.
   The 24px gap below the 80px header and 38px gap below the image govern
   its size; its natural aspect ratio supplies the width. */
.hero-cube{top:calc(50% + 33px);height:calc(max(100vh,650px) - 142px);width:auto;max-width:none;aspect-ratio:1184 / 988;left:calc(50% + 1px);transform:translate(-50%,-50%)}
@media(max-width:760px){.hero-cube{height:auto;width:105vw;top:calc(90px + 43.8vw)}}

/* Figma's diagonal card row uses a skew and rotation together: the vertical
   edges stay upright while the top and bottom edges rise to the right. */
.case-card{width:25.6%;aspect-ratio:354.58 / 199.31;transform:rotate(12.53deg) skewX(12.53deg) scaleY(.98)}
.case-card:hover,.case-card:focus-visible{transform:translateY(-22px) scale(1.2)}
.case-board.is-viewing .case-stack .case-card{transform:translateY(110%) rotate(12.53deg) skewX(12.53deg) scaleY(.98)}
.feature-card{background:rgba(169,200,255,.17);border-color:#494949;box-shadow:none}
.feature-card-1{background:rgba(235,67,53,.1)}
.feature-card-2{background:rgba(251,188,5,.08)}

/* Let the login artwork fade naturally into black at its original Figma size. */
.login-art{left:calc(50% - 1014px);top:0;width:1386px;height:1157px;overflow:visible}
.login-art img{width:100%;height:100%;object-fit:fill;filter:none;transform:none}
.login-page::after{background:linear-gradient(90deg,transparent 0 56%,#000 82%)}
.login-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html[lang=ko] body{font-family:Inter,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
html[lang=ja] body{font-family:Inter,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
@media(min-width:1260px){
  html[lang=de] .main-nav{gap:28px;margin-left:36px}
  html[lang=de] .main-nav a{font-size:14px}
}

/* Desktop type sizes checked against the named Figma frames. */
@media(min-width:761px){
  .language-trigger{font-size:16px}
  .work-nav a{font-size:15px}
  .project-top-name{font-size:14px}
  .section-heading h1{font-size:clamp(36px,3.61vw,52px)}
  .feature-card small{font-size:clamp(14px,1.11vw,16px)}
  .feature-card h3{font-size:clamp(22px,2.22vw,32px)}
  .feature-card p{font-size:clamp(13px,1.04vw,15px);line-height:1.47}
  .feature-card span{font-size:clamp(13px,1.11vw,16px)}
  .case-board h2{font-size:clamp(32px,3.61vw,52px)}
  .scenarios h2{font-size:clamp(36px,3.61vw,52px)}
  .scenario-intro{font-size:20px}
  .audience-copy h3{font-size:23px}
  .footer-statement small{font-size:13px}
  .footer-statement h2{font-size:34px}
  .footer-statement p{font-size:15px}
  .footer-cols h3{font-size:16px}
  .page-hero h1{font-size:clamp(40px,3.61vw,52px)}
  .section-head h2{font-size:40px}
  .plan-price{font-size:32px}
  .rate-table b{font-size:17px}
  .rate-table span{font-size:15px}
  .rate-table strong{font-size:18px}
  .about-belief h2{font-size:40px}
  .about-belief p{font-size:20px}
  .info-grid article h3{font-size:24px}
  .steps h3{font-size:22px}
  .steps p{font-size:16px}
  .contact-body aside>p{font-size:17px}
  .contact-reply strong{font-size:18px}
  .contact-form h2{font-size:30px}
  .contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{font-size:15px}
  .work-prompt>small{font-size:13px}
  .work-prompt h1{font-size:36px}
  .work-prompt p{font-size:16px}
  .prompt-box textarea{font-size:17px}
  .prompt-hint{font-size:12px}
  .continue-head h2{font-size:27px}
  .continue-card h3{font-size:21px}
  .continue-card p{font-size:13px}
  .projects-head h1{font-size:36px}
  .projects-head p{font-size:15px}
  .project-tools input{font-size:14px}
  .project-copy h3{font-size:20px}
  .project-copy p{font-size:13px}
  .chat-bubble p{font-size:13px}
  .chat-bubble span{font-size:11px}
  .assistant-message small{font-size:11px}
  .assistant-message p{font-size:13px}
  .choice-row button{font-size:12px}
  .result-card h2{font-size:18px}
  .result-card p{font-size:13px}
  .result-actions span{font-size:12px}
  .result-actions .btn{font-size:13px}
  .chat-compose>div span{font-size:11px}
  .chat-compose textarea{font-size:13px}
  .studio-tabs button{font-size:16px}
  .studio-tools{font-size:12px}
}
@media(max-width:760px){
  .login-art{left:-22vw;top:0;width:110vw;height:auto}
  .login-art img{height:auto}
  .login-page::after{background:linear-gradient(90deg,transparent 0 32%,#000 95%)}
}

/* Capability screen: preserve the 187px heading and 419px card positions
   from the 900px-high Figma frame, then scale those offsets with its height. */
.intro-shell{height:300vh}
@media(min-width:761px){
  .capability-content{inset:0;display:block;padding:0}
  .section-heading{position:absolute;top:20.78%;left:50%;transform:translateX(-50%);width:min(940px,calc(100% - 40px));max-width:none;margin:0}
  .section-heading h1{font-size:clamp(34px,min(3.61vw,5.78vh),52px);margin-bottom:21px}
  .section-heading p{font-size:clamp(14px,2.22vh,20px);line-height:1.4;margin-bottom:0}
  .black-enter{font-size:clamp(16px,2.44vh,22px)}
  .feature-cards{position:absolute;top:46.56%;left:calc(50% + 1px);transform:translateX(-50%);width:min(1040px,calc(100% - 40px))}
  .feature-card{height:clamp(260px,38.33vh,345px);min-height:0}
  .feature-card small{font-size:clamp(14px,min(1.11vw,1.78vh),16px)}
  .feature-card h3{font-size:clamp(22px,min(2.22vw,3.56vh),32px)}
  .feature-card p{font-size:clamp(13px,min(1.04vw,1.67vh),15px)}
  .feature-card span{font-size:clamp(13px,min(1.11vw,1.78vh),16px)}
  html[lang=ko] .section-heading h1{font-size:clamp(32px,4vw,36px)}
  html[lang=de] .section-heading h1{font-size:clamp(34px,4vw,40px)}
}
@media(max-width:760px){.intro-shell{height:260vh}}

/* Let the homepage navigation melt into the scene below it. */
.route-home .site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.route-home .site-header::before{content:"";position:absolute;inset:0 0 -64px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.35) 76%,transparent 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%)}
.route-home .header-inner{position:relative;z-index:1}

/* Keep the second screen's action visually separate from its description. */
.section-heading .black-enter{margin-top:18px}

/* Figma's gradient triangle and a vertically centered language chevron. */
.hero-enter,.black-enter{height:36px;padding:0 15px 0 24px;gap:12px;line-height:1}
.hero-enter .enter-arrow,.black-enter .enter-arrow{display:inline-grid;place-items:center;width:36px;height:36px;flex:none}
.enter-arrow img{display:block;transform:rotate(90deg)}
.language-trigger span{display:block;width:7px;height:7px;flex:none;position:relative;top:-2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);font-size:0}

/* Center the homepage navigation independently of the logo and account tools. */
@media(min-width:901px){.route-home .main-nav{position:absolute;left:50%;margin-left:0;transform:translateX(-50%)}}

/* Match the centered 1180px footer navigation block in the design. */
@media(min-width:761px){.footer-inner{width:calc(100% - 18vw);max-width:1180px;padding:0}.footer-cols{gap:clamp(16px,3vw,40px)}}

/* Scroll-linked motion lives on outer slots so card hover can keep its own transform. */
.section-heading,.feature-card,.case-card-slot,.scenarios h2,.scenario-intro,.scenario-actions,.audience-card,.audience-art img{will-change:transform,opacity}
.case-card-slot{position:absolute;width:25.6%;aspect-ratio:354.58 / 199.31;opacity:0;pointer-events:none}
.case-card-slot:hover,.case-card-slot:focus-within{z-index:70!important}
.case-card-slot .case-card{position:relative;left:auto;top:auto;width:100%;height:100%;aspect-ratio:auto}
@media(max-width:760px){.case-card-slot{width:56%}}
@media(hover:none){.case-card:hover{transform:rotate(12.53deg) skewX(12.53deg) scaleY(.98);box-shadow:0 8px 24px #1f2e4b12}}
@media(prefers-reduced-motion:reduce){.section-heading,.feature-card,.case-card-slot,.scenarios h2,.scenario-intro,.scenario-actions,.audience-card,.audience-art img{will-change:auto}}

/* The first frame has a slow, subtle breath until scrolling starts. */
.intro-shell{height:215vh}
@media(max-width:760px){.intro-shell{height:220vh}}
@keyframes cube-breathe{0%,100%{scale:1}36%{scale:1.02}72%{scale:.99}}
.hero-cube{scale:1;transition:scale .45s var(--ease)}
.intro-stage.is-first-screen .hero-cube{animation:cube-breathe 9s ease-in-out infinite}

/* Magnetic action: the label travels a little farther than its button. */
.hero-enter .hero-enter-label{color:#fff;display:inline-block;will-change:transform}
.hero-enter.magnetic-ready{will-change:transform;transition:box-shadow .25s var(--ease)}
.hero-enter.magnetic-ready:hover{transform:none}

/* Keep the category list lighter than the large case cards beside it. */
@media(min-width:761px){.case-category{font-size:clamp(16px,1.5vw,21px);font-weight:400}}

/* Temporary quiet artwork blocks for the three application scenarios. */
.audience-art{background:#142c4e}
.audience-art.art-1{background:#442039}
.audience-art.art-2{background:#514016}
.audience-art img{display:none}

@media(prefers-reduced-motion:reduce){.intro-stage.is-first-screen .hero-cube{animation:none}.hero-enter.magnetic-ready,.hero-enter .hero-enter-label{will-change:auto}}

/* Polished controls across the site. */
.viewer-close{top:22px;right:24px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #dce5f2;border-radius:50%;background:#fff;color:#25344a;box-shadow:0 6px 18px #1f365324;font-size:0;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.viewer-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media(hover:hover) and (pointer:fine){.viewer-close:hover{transform:rotate(90deg);border-color:#9fc6ff;box-shadow:0 9px 23px #3679c836}}
.footer-cols>div{justify-self:center;width:max-content}
@media(max-width:760px){.footer-cols>div{justify-self:start}}
.hero-enter.magnetic-ready:hover{box-shadow:0 0 12px #0009,0 9px 30px #3473bd59;border-color:transparent}
.section-heading h1,.section-heading p{will-change:transform,opacity}
@media(min-width:901px){.site-header:not(.work-header):not(.login-header) .header-inner{position:relative}.site-header:not(.work-header):not(.login-header) .main-nav{position:absolute;left:50%;margin-left:0;transform:translateX(-50%)}}
.site-header:not(.work-header) .main-nav a.active{position:relative;color:#fff;text-shadow:0 0 16px #398dff77}
.site-header:not(.work-header) .main-nav a.active::after{content:"";position:absolute;left:50%;bottom:-11px;width:28px;height:2px;transform:translateX(-50%);border-radius:2px;background:#369aff;box-shadow:0 0 9px #369affaa}
@media(max-width:760px){.site-header:not(.work-header) .main-nav a.active::after{left:5px;bottom:5px;transform:none}}
@media(hover:hover) and (pointer:fine){.plan{transition:transform .32s var(--ease),filter .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}.plan:hover{transform:translateY(-6px);filter:saturate(1.3) brightness(1.12);border-color:#527bac;box-shadow:0 18px 42px #2067c52c,inset 0 0 55px #398dff16}}
.contact-direction{background:transparent;border:0;border-left:2px solid #337cdb;border-radius:0;padding:4px 0 4px 18px;margin:0 0 28px;box-shadow:none}
.contact-direction h3{margin-bottom:7px}

/* Login: quiet artwork and an explicit name-edit action. */
@keyframes login-breathe{0%,100%{scale:1}42%{scale:1.012}75%{scale:.996}}
.login-art img{transform-origin:44% 48%;animation:login-breathe 10s ease-in-out infinite}
.login-header .login-close{width:28px;height:28px;color:#bfc2c9;font-size:0}
.login-close svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round}
.user-card .user-edit{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:6px;background:transparent;color:#aeb4c0}
.user-edit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.user-edit:hover,.user-edit.is-editing{color:#58a2ff;background:#19416a55}
#display-name[contenteditable=false]{cursor:default}
#display-name[contenteditable]{outline:none}
#display-name[contenteditable=plaintext-only]{cursor:text;border-bottom:1px solid #369aff}
@media(prefers-reduced-motion:reduce){.login-art img{animation:none}}

/* Work navigation follows the centered 48px tabs from Figma. */
.work-header .work-nav{gap:8px;height:48px}
.work-nav a{width:128px;height:48px;min-width:128px}
.work-nav a.active:after{left:50%;right:auto;bottom:10px;width:32px;height:2px;transform:translateX(-50%);border-radius:2px}
@media(min-width:901px){.work-header .header-inner{position:relative}.work-header .work-nav{position:absolute;left:50%;margin:0;transform:translateX(-50%)}}
/* Workbench input and a horizontally browsable row of recent projects. */
:is(#prompt-form,#chat-form) .round-submit{width:38px;height:38px;min-width:38px;border:1px solid #353941;background:#24262d;color:#707581;font-size:22px;box-shadow:none;cursor:not-allowed;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s var(--ease)}
:is(#prompt-form,#chat-form) .round-submit svg{display:block;width:18px;height:18px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#prompt-form,#chat-form) .round-submit.is-ready{border-color:#ffc400;background:linear-gradient(105deg,#210000,#932e61,#3578ed);color:#fff;box-shadow:0 4px 16px #3979ec50;cursor:pointer}
@media(hover:hover) and (pointer:fine){:is(#prompt-form,#chat-form) .round-submit.is-ready:hover{transform:translateY(-2px);box-shadow:0 7px 20px #3979ec66}}
.prompt-hint{font-size:11px;color:#737780;opacity:.72;letter-spacing:.01em}
.continue-row{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;padding-bottom:8px;user-select:none}
.continue-row::-webkit-scrollbar{display:none}
.continue-row.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.continue-row .continue-card{flex:0 0 calc((100% - 36px)/3.5);scroll-snap-align:start}
@media(max-width:760px){.continue-row .continue-card{flex-basis:82%}}

/* Compact project tools with drawn icons rather than typographic symbols. */
.project-tools{align-items:center;gap:10px}
.project-tools input{height:40px;min-height:40px;width:240px;padding:9px 12px 9px 38px;background:#0e0e11 url("assets/1cb31.svg") 12px center / 18px 18px no-repeat;border-color:#303038;border-radius:8px;font-size:13px}
.project-tools .project-new{height:40px;min-height:40px;padding:0 16px;gap:8px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap}
.plus-icon{position:relative;display:block;width:14px;height:14px;flex:none}
.plus-icon::before,.plus-icon::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transform:translate(-50%,-50%)}
.plus-icon::before{width:12px;height:1.5px}.plus-icon::after{width:1.5px;height:12px}
.project-filters{align-items:center;gap:8px;margin:22px 0}
.project-filters button{height:36px;min-height:36px;min-width:0;padding:0 13px;border-radius:7px;font-size:13px}
.project-filters .sort-button{min-width:0;gap:10px;padding:0 12px}
.project-filters .view-button{min-width:36px;width:36px;padding:0}
.project-filters .sort-button svg{width:14px;height:14px}.project-filters .view-button svg{width:18px;height:18px}
.project-filters svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:761px){.project-filters .sort-button,.project-filters .view-button{display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:760px){.project-tools input{width:100%}.project-tools .project-new{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.viewer-close:hover,.plan:hover,:is(#prompt-form,#chat-form) .round-submit.is-ready:hover{transform:none}.continue-row{scroll-behavior:auto}}

/* Large displays: expand the composition with both available width and height.
   Values at 1440 × 900 match the design; the shorter dimension limits growth. */
@media (min-width:1440px) {
  :root {
    --rf-page-width:max(1180px,min(81.94vw,131.11vh,2000px));
    --rf-page-gutter:calc((100vw - var(--rf-page-width))/2);
    --rf-work-width:max(1256px,min(87.22vw,139.56vh,2200px));
  }

  /* Home: retain each screen's relative position instead of leaving fixed-size
     artwork floating inside an increasingly large viewport. */
  .hero-cube{height:84.22vh;top:calc(50% + 3.67vh)}
  .section-heading{width:max(940px,min(65.28vw,104.44vh,1450px))}
  .section-heading h1{font-size:clamp(52px,min(3.61vw,5.78vh),76px);margin-bottom:clamp(21px,2.33vh,32px)}
  .section-heading p{font-size:clamp(20px,min(1.39vw,2.22vh),29px)}
  .section-heading .black-enter{font-size:clamp(22px,min(1.53vw,2.44vh),30px);margin-top:clamp(18px,2vh,27px)}
  .feature-cards{width:max(1040px,min(72.22vw,115.56vh,1800px));grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(52px,min(3.61vw,5.78vh),74px)}
  .feature-card{height:clamp(345px,38.33vh,580px);padding:clamp(30px,3.33vh,46px) clamp(31px,3.44vh,48px)}
  .feature-card small{font-size:clamp(16px,min(1.11vw,1.78vh),23px)}
  .feature-card h3{font-size:clamp(32px,min(2.22vw,3.56vh),44px)}
  .feature-card p{font-size:clamp(15px,min(1.04vw,1.67vh),21px)}
  .feature-card span{font-size:clamp(16px,min(1.11vw,1.78vh),22px)}
  .feature-accent{width:clamp(50px,5.56vh,76px);height:clamp(8px,.89vh,11px)}

  .cases-outer{padding-inline:max(27px,1.875vw);padding-bottom:clamp(80px,8.89vh,130px)}
  .case-board{width:max(1385px,min(96.18vw,153.89vh,2500px));max-width:none}
  .case-board h2{font-size:clamp(52px,min(3.61vw,5.78vh),76px)}
  .case-intro{font-size:clamp(20px,min(1.39vw,2.22vh),29px)}
  .case-category{font-size:clamp(21px,min(1.5vw,2.33vh),30px);height:clamp(44px,4.89vh,64px)}

  .scenarios{min-height:111.11vh;padding:11.11vh 6.2vw 17.78vh}
  .scenarios h2{font-size:clamp(52px,min(3.61vw,5.78vh),76px)}
  .scenario-intro{font-size:clamp(20px,2.22vh,29px)}
  .audience-grid{width:max(1264px,min(87.78vw,140.44vh,2150px));max-width:none;gap:clamp(24px,2.67vh,36px)}
  .audience-art{height:clamp(214px,23.78vh,350px)}
  .audience-copy h3{font-size:clamp(23px,2.56vh,33px)}

  .footer{padding-top:clamp(70px,7.78vh,110px);padding-bottom:clamp(40px,4.44vh,65px)}
  .footer-inner{width:var(--rf-page-width);max-width:none}
  .footer-statement{height:clamp(165px,18.33vh,245px)}
  .footer-statement h2{font-size:clamp(34px,3.78vh,48px)}
  .footer-statement p{font-size:clamp(15px,1.67vh,21px)}
  .footer-cols{padding-top:clamp(40px,4.44vh,60px);padding-bottom:clamp(65px,7.22vh,100px)}

  /* Information pages use one common content measure and centered gutters. */
  .page-hero{width:var(--rf-page-width);max-width:none;min-height:clamp(500px,55.56vh,740px);padding-top:clamp(92px,10.22vh,145px);padding-bottom:clamp(70px,7.78vh,110px)}
  .page-hero h1{font-size:clamp(52px,min(3.61vw,5.78vh),76px)}
  .page-section{padding:clamp(85px,9.44vh,135px) var(--rf-page-gutter)}
  .notice-bar{padding-inline:var(--rf-page-gutter)}
  .about-belief{min-height:clamp(360px,40vh,540px);padding:clamp(80px,8.89vh,120px) var(--rf-page-gutter);gap:clamp(80px,8.89vh,130px)}
  .contact-body{padding:clamp(90px,10vh,145px) var(--rf-page-gutter) clamp(145px,16.11vh,230px);grid-template-columns:minmax(350px,.37fr) minmax(0,.63fr);gap:clamp(80px,8.89vh,130px)}
  .plan{min-height:clamp(510px,56.67vh,710px)}

  /* Creation pages widen their working area without inflating compact tools. */
  .login-art{width:max(1386px,min(96.25vw,154vh,2600px));height:auto;aspect-ratio:1386/1157;left:calc(50% - max(1014px,min(70.42vw,112.67vh,1900px)))}
  .login-panel{width:clamp(280px,min(19.44vw,31.11vh),390px)}
  .work-prompt{max-width:max(780px,min(54.17vw,86.67vh,1120px));margin-top:clamp(84px,9.33vh,145px)}
  .continue-work{max-width:var(--rf-work-width);margin-top:clamp(95px,10.56vh,155px)}
  .projects-page{padding:clamp(130px,14.44vh,200px) calc((100vw - var(--rf-work-width))/2) clamp(100px,11.11vh,155px)}
  .project-image{height:clamp(100px,11.11vh,155px)}
  .chat-thread{width:max(890px,min(61.81vw,98.89vh,1220px))}
  .studio-aside{width:clamp(300px,min(20.83vw,33.33vh),430px)}
  .studio-tree{width:clamp(180px,min(12.5vw,20vh),260px)}
}

/* The capability action shares the first screen's magnetic spring and label depth. */
.black-enter .hero-enter-label{color:#fff;display:inline-block;will-change:transform}
.black-enter.magnetic-ready{will-change:transform;transition:box-shadow .25s var(--ease)}
.black-enter.magnetic-ready:hover{transform:none;box-shadow:0 0 12px #0009,0 9px 30px #3473bd59;border-color:transparent}

/* Each plan brings its own accent into focus only while hovered or focused. */
.plan{--plan-accent:#b3bccb;--plan-glow:#aeb8cb32;--plan-button-text:#10131a}
.plan-1{--plan-accent:#439aff;--plan-glow:#348dff3c;--plan-button-text:#fff}
.plan-2{--plan-accent:#ef5792;--plan-glow:#f14b8b3b;--plan-button-text:#fff}
.plan-3{--plan-accent:#f2c342;--plan-glow:#e4b82d3b;--plan-button-text:#19160b}
.plan .btn{transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .plan:hover{filter:saturate(1.32) brightness(1.14);border-color:var(--plan-accent);box-shadow:0 18px 42px var(--plan-glow),inset 0 0 55px var(--plan-glow)}
  .plan:hover .btn{background:var(--plan-accent);border-color:var(--plan-accent);color:var(--plan-button-text);box-shadow:0 7px 22px var(--plan-glow)}
}
.plan:focus-within{border-color:var(--plan-accent);box-shadow:0 18px 42px var(--plan-glow)}
.plan:focus-within .btn{background:var(--plan-accent);border-color:var(--plan-accent);color:var(--plan-button-text)}

/* Keep the rate visible and give every tier a clear purchase route. */
.rate-table>div{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto auto;gap:clamp(12px,2vw,26px)}
.rate-table strong{white-space:nowrap}
.rate-buy{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:78px;min-height:34px;padding:5px 12px;border:1px solid #365578;border-radius:6px;background:#15243b;color:#d9e9ff;font-size:13px;white-space:nowrap;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.rate-buy span{color:inherit;font-size:15px;line-height:1}
.rate-buy:hover,.rate-buy:focus-visible{background:#2360a4;border-color:#5cafff;transform:translateY(-2px)}
@media(max-width:760px){
  .rate-table>div{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:18px}
  .rate-table strong{grid-column:2;grid-row:1;text-align:right}
  .rate-table span{grid-column:1;grid-row:2}
  .rate-table .rate-buy{grid-column:2;grid-row:2}
}

/* Scroll-linked editorial layers keep section layout and clickable controls intact. */
.editorial-parallax-layer{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.editorial-parallax-layer{will-change:auto}.black-enter.magnetic-ready{will-change:auto}}

/* Lift the second-screen copy while leaving the action close to its original line. */
@media(min-width:761px){
  .section-heading{top:calc(20.78% - 28px)}
  .section-heading .black-enter{margin-top:42px}
}

/* A matching action sits in the open lower-right corner of the case board. */
.case-enter{position:absolute;right:5.8%;bottom:6.2%;z-index:40;font-size:20px;white-space:nowrap}
.case-board.is-viewing .case-enter{opacity:0;pointer-events:none}
@media(max-width:760px){.case-enter{right:5%;bottom:5%;font-size:16px}}

/* Closing actions use the same dark surface and gradient cue as the hero. */
.scenario-actions{gap:16px}
.scenario-actions .scenario-enter,.scenario-contact{height:42px;min-width:170px;font-size:20px;border-radius:4px;background:rgba(0,0,0,.7);box-shadow:0 0 12px #0008,0 7px 22px #08152f3d}
.scenario-actions .scenario-enter{border:1px solid #334463}
.scenario-contact{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 17px 0 23px;border:1px solid #48506a;color:#fff;transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .3s var(--ease)}
.scenario-contact-arrow{font-size:27px;line-height:1;background:linear-gradient(45deg,#1450aa,#4eacff);background-clip:text;-webkit-background-clip:text;color:transparent}
.scenario-contact .hero-enter-label{display:inline-block;will-change:transform}
.scenario-contact:hover{border-color:#4d86ce;box-shadow:0 0 12px #0009,0 9px 30px #3473bd59}
.scenario-actions .scenario-enter:hover{transform:translateY(-2px)}
@media(max-width:760px){.scenario-actions{gap:8px;flex-wrap:wrap}.scenario-actions .scenario-enter,.scenario-contact{min-width:0;font-size:15px;height:38px;gap:5px;padding-inline:10px}.scenario-actions .scenario-enter .enter-arrow{width:30px;height:30px}.scenario-contact-arrow{font-size:23px}}

/* Figma's detached RF mark and restrained color at the page's bottom edge. */
.footer{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 56% 69% at 10% 108%,rgba(55,83,158,.45) 0%,rgba(34,45,91,.19) 48%,transparent 88%),radial-gradient(ellipse 55% 73% at 51% 112%,rgba(137,48,78,.4) 0%,rgba(84,31,55,.16) 50%,transparent 89%),radial-gradient(ellipse 50% 69% at 95% 108%,rgba(139,97,35,.32) 0%,rgba(76,52,25,.13) 49%,transparent 89%),linear-gradient(180deg,#05070a 0%,#06080d 42%,#08090d 100%)}
.footer::before,.footer::after{content:"";position:absolute;inset:auto 0 0;pointer-events:none;z-index:0}
.footer::before{height:72%;background:url("assets/1fae7.png") center 62%/cover no-repeat;opacity:.13;filter:blur(64px);transform:scale(1.14);mask-image:linear-gradient(transparent 0%,#000 70%);-webkit-mask-image:linear-gradient(transparent 0%,#000 70%)}
.footer::after{height:68%;background:radial-gradient(ellipse 43% 63% at 14% 107%,#335ba34d,transparent 91%),radial-gradient(ellipse 43% 65% at 52% 107%,#8f3c6044,transparent 92%),radial-gradient(ellipse 42% 64% at 91% 107%,#996a3140,transparent 90%);mask-image:linear-gradient(transparent 0%,#000 76%);-webkit-mask-image:linear-gradient(transparent 0%,#000 76%)}
.footer-inner{position:relative;z-index:1}
.footer-statement{position:relative}
.footer-mark{position:absolute;left:50%;top:-55px;display:block;width:55px;height:45px;overflow:hidden;transform:translateX(-50%)}
.footer-mark img{display:block;width:305px;height:45px;max-width:none}
.footer-cols h3{font-size:15px;margin-bottom:20px}
.footer-cols a{font-size:13px;line-height:1.4;margin-bottom:10px}

/* The chat remains in place and yields room to the Figma content workspace. */
.chat-layout{display:flex;align-items:stretch;width:100%;min-height:calc(100vh - 80px);overflow:hidden}
.chat-conversation{flex:0 0 100%;min-width:0;transition:flex-basis .72s var(--ease),opacity .4s var(--ease)}
.chat-output-panel{flex:0 0 0%;min-width:0;height:calc(100vh - 86px);position:sticky;top:80px;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(68px);pointer-events:none;transition:flex-basis .72s var(--ease),opacity .42s .1s var(--ease),transform .72s var(--ease),visibility 0s .72s}
.chat-output-inner{height:100%;min-width:0;margin:0 6px 6px 0;border:1px solid #494949;border-radius:9px;background:#050506;box-shadow:0 0 20px -8px #cacaca;overflow:hidden}
.chat-layout.is-output-open .chat-conversation{flex-basis:clamp(330px,30%,480px);height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#313946 transparent;border-right:1px solid #30323a}
.chat-layout.is-output-open .chat-output-panel{flex-basis:calc(100% - clamp(330px,30%,480px));opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;transition:flex-basis .72s var(--ease),opacity .42s .12s var(--ease),transform .72s var(--ease),visibility 0s}
.chat-layout.is-output-open .chat-thread{width:calc(100% - 32px);margin:22px auto 0;padding-bottom:30px;gap:20px}
.chat-layout.is-output-open .chat-bubble.user{width:96%;padding:14px}
.chat-layout.is-output-open .assistant-message{width:100%;gap:10px}
.chat-layout.is-output-open .assistant-message>div:last-child{min-width:0}
.chat-layout.is-output-open .choice-row,.chat-layout.is-output-open .result-actions{flex-wrap:wrap}
.chat-layout.is-output-open .result-card{padding:14px;min-width:0}
.chat-layout.is-output-open .result-actions .btn{margin-left:0}
.chat-layout.is-output-open .chat-compose>div{gap:8px;padding-inline:12px}
.chat-layout.is-output-open .chat-upload-hint{display:none}
.chat-output-panel .studio-tabs{height:55px;padding:0 12px}
.chat-output-panel .studio-tabs>div{gap:8px;min-width:0;overflow-x:auto}
.chat-output-panel .studio-tabs button{font-size:14px;flex:none}
.chat-output-panel .studio-main{height:calc(100% - 55px);min-height:0;margin:0;border:0;border-radius:0;box-shadow:none}
.chat-output-panel .studio-tree{width:180px}
.chat-output-panel .studio-empty{align-items:flex-start;justify-content:flex-start;overflow:auto;padding:36px;color:#b6bdc9}
.chat-output-panel .studio-empty h2{font-size:30px;margin:8px 0}
.chat-output-panel .studio-empty>p{font-size:14px}
.output-kicker{color:#4ea2ff;font-size:12px;letter-spacing:.08em}
.output-preview{width:min(100%,760px);margin:30px 0 16px;padding:26px;border:1px solid #343943;border-radius:9px;background:#111318}
.output-preview h3{font-size:21px;color:#f1f3f7;margin:0 0 12px}
.output-preview p{font-size:14px;line-height:1.65;color:#aeb6c4;margin:0 0 22px}
.output-preview>div{display:flex;flex-wrap:wrap;gap:8px}
.output-preview span{padding:6px 10px;border:1px solid #303e54;border-radius:5px;background:#122035;color:#a9c9f2;font-size:12px}
.chat-output-panel #studio-add{min-height:38px;font-size:13px}
.chat-output-panel .studio-empty:has(#studio-editor textarea) .output-preview,.chat-output-panel .studio-empty:has(#studio-editor textarea) .output-kicker{display:none}
.chat-output-panel #studio-editor{width:min(100%,760px)}
@media(min-width:761px) and (max-width:1050px){.chat-output-panel .studio-tree{width:110px}.chat-output-panel .studio-empty{padding:24px}}
@media(max-width:760px){
  .chat-layout.is-output-open .chat-conversation{flex-basis:0;opacity:0;pointer-events:none}
  .chat-layout.is-output-open .chat-output-panel{flex-basis:100%;height:calc(100vh - 66px);top:66px}
  .chat-output-inner{min-width:0;margin-right:0}
  .chat-output-panel .studio-tree{width:85px;padding:8px}
  .chat-output-panel .studio-empty{padding:20px}
}
@media(prefers-reduced-motion:reduce){.chat-conversation,.chat-output-panel{transition:none}}

/* The creation page starts in the same restrained color family as the footer. */
.workbench{position:relative;isolation:isolate}
.workbench::before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:clamp(145px,17vh,190px);pointer-events:none;background:radial-gradient(ellipse 38% 110% at 13% -10%,#31549c77,transparent 83%),radial-gradient(ellipse 42% 110% at 51% -24%,#8e365c66,transparent 86%),radial-gradient(ellipse 40% 100% at 92% -10%,#9b6b3059,transparent 85%);mask-image:linear-gradient(#000 0%,#000 20%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 20%,transparent 100%)}
.workbench>*{position:relative;z-index:1}

/* The chat header is slimmer; the three desks arrive with the content workspace. */
.chat-editor-header{height:64px}
.chat-editor-header .header-inner{position:relative;gap:22px}
.chat-page{padding-top:64px}
.chat-desk-nav{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;gap:32px;opacity:0;visibility:hidden;transform:translate(-50%,-7px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.chat-editor-header.has-output .chat-desk-nav{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
.chat-desk-nav button{height:100%;position:relative;padding:0 3px;border:0;background:transparent;color:#9da6b4;font-size:14px;cursor:pointer}
.chat-desk-nav button.active{color:#eef4ff}
.chat-desk-nav button.active::after{content:"";position:absolute;bottom:10px;left:50%;width:27px;height:2px;border-radius:2px;background:#4e9eff;box-shadow:0 0 8px #4e9eff80;transform:translateX(-50%)}
.chat-desk-nav-mobile{display:none}

/* Left conversation and right output form one resizable workspace. */
.chat-layout{min-height:calc(100vh - 64px);--effective-conversation-width:min(var(--conversation-width,30%),calc(100% - 420px))}
.chat-conversation{min-width:0}
.chat-layout.is-output-open .chat-conversation{flex:0 0 var(--effective-conversation-width);height:calc(100vh - 64px);border-right:0}
.chat-layout.is-output-open .chat-output-panel{flex:1 1 0}
.chat-layout.is-output-maximized .chat-conversation{flex-basis:0;opacity:0;pointer-events:none}
.chat-layout.is-output-maximized .chat-output-panel{flex:1 1 0}
.chat-layout.is-resizing .chat-conversation,.chat-layout.is-resizing .chat-output-panel{transition:none}
.conversation-toolbar{height:0;overflow:hidden;visibility:hidden;opacity:0;display:flex;align-items:center;position:sticky;top:0;z-index:3;background:#020203;padding:0 16px;color:#dfe6f4;font-size:14px;letter-spacing:.06em;transition:height .3s var(--ease),opacity .3s var(--ease),visibility 0s .3s}
.chat-layout.is-output-open .conversation-toolbar{height:48px;min-height:48px;visibility:visible;opacity:1;transition:height .3s var(--ease),opacity .3s var(--ease),visibility 0s}
.conversation-toolbar::after{content:"";position:absolute;inset:auto 16px 0;height:1px;background:linear-gradient(90deg,#2b70c7 0%,#79618d 55%,transparent 100%);opacity:.72}
.conversation-overview{font-weight:500}
.chat-thread{min-height:calc(100vh - 64px - 36px - 16px);padding-bottom:16px}
.chat-compose{margin-top:auto}
.chat-layout.is-output-open .chat-thread{min-height:calc(100vh - 64px - 48px - 16px);margin:0 auto;padding-top:14px;padding-bottom:16px}
.chat-layout.is-output-open .chat-conversation{scrollbar-width:thin}
.chat-output-panel{height:calc(100vh - 70px);top:64px;position:sticky}
.chat-output-inner{border-color:#414856;box-shadow:0 0 0 1px #839fd21c,0 0 20px #a4bde02b,0 0 46px #4d7ab01d}
.chat-resize-handle{position:absolute;z-index:5;left:0;top:0;bottom:0;width:9px;cursor:col-resize;touch-action:none}
.chat-resize-handle::before{content:"";position:absolute;left:2px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,transparent,#8299ba70 20%,#8299ba70 80%,transparent);opacity:0;transition:background .2s,opacity .2s}
.chat-resize-handle:hover::before,.chat-resize-handle:focus-visible::before{background:#55a2ff;opacity:1}
.chat-layout.is-resizing{cursor:col-resize;user-select:none}
.chat-layout.is-output-maximized .chat-resize-handle{display:none}
.chat-output-panel .studio-tabs button{position:relative;border-bottom:0;color:#aeb7c5}
.chat-output-panel .studio-tabs button.active{color:#f3f7ff;text-shadow:0 0 10px #6eaaff55}
.chat-output-panel .studio-tabs button.active::after{content:"";position:absolute;left:50%;bottom:5px;width:29px;height:2px;border-radius:3px;transform:translateX(-50%);background:linear-gradient(90deg,#2f78d5,#58b3ff);box-shadow:0 0 8px #438cff80}
.chat-output-panel .chat-window-toggle{flex:none;width:30px;height:30px;padding:6px;border:1px solid #333b48;border-radius:6px;background:#11151c;color:#aab8ca;cursor:pointer}
.chat-output-panel .chat-window-toggle:hover{border-color:#529bfa;color:#f3f8ff}
.chat-window-toggle svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login-page:has(#email-login) .login-panel{top:46%}
@media(max-width:760px){.chat-editor-header{height:58px}.chat-page{padding-top:58px}.chat-layout{min-height:calc(100vh - 58px)}.chat-layout.is-output-open .chat-conversation{height:calc(100vh - 58px)}.chat-layout.is-output-open .chat-output-panel{height:calc(100vh - 64px);top:58px}.chat-desk-nav{display:none}.chat-desk-nav-mobile{display:flex;height:40px;align-items:center;justify-content:center;gap:24px;border-bottom:1px solid #343b49}.chat-desk-nav-mobile button{height:100%;position:relative;border:0;background:transparent;color:#9da6b4;font-size:12px}.chat-desk-nav-mobile button.active{color:#f2f6ff}.chat-desk-nav-mobile button.active::after{content:"";position:absolute;left:50%;bottom:4px;width:24px;height:2px;background:#4e9eff;transform:translateX(-50%)}.chat-output-panel .studio-main{height:calc(100% - 95px)}.chat-thread{min-height:calc(100vh - 58px - 25px - 16px)}.chat-layout.is-output-open .chat-thread{min-height:calc(100vh - 58px - 48px - 16px)}.chat-resize-handle{display:none}.login-page:has(#email-login) .login-panel{top:45%}}
@media(prefers-reduced-motion:reduce){.chat-desk-nav,.conversation-toolbar{transition:none}}

/* Figma content-page controls: flexible header spacing and an inset blue selection. */
.chat-editor-header .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);width:100%;max-width:none;gap:0;padding-inline:clamp(20px,1.875vw,27px)}
.chat-header-left{display:flex;align-items:center;justify-self:start;gap:clamp(16px,2.3vw,48px);width:100%;min-width:0}
.chat-header-left .project-top-name{display:flex;align-items:center;gap:12px;min-width:0;max-width:180px;margin:0;font-size:14px;white-space:nowrap}
.chat-header-left .project-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.project-menu-icon{display:block;width:17px;height:17px;flex:none}
.chat-editor-header .chat-desk-nav{position:static;left:auto;top:auto;width:244px;min-width:244px;height:38px;display:flex;align-items:center;align-self:center;justify-self:center;gap:0;flex:none;padding:3px;margin:0;border:1px solid #494949;border-radius:9px;background:#0003;box-shadow:0 0 20px -8px #7a7a7a;transform:none}
.chat-editor-header.has-output .chat-desk-nav{transform:none}
.chat-editor-header .chat-desk-nav button{height:30px;min-width:0;flex:1;padding:0 6px;border:1px solid transparent;border-radius:7px;background:transparent;color:#c9cbcc;font-size:16px;font-weight:400;white-space:nowrap}
.chat-editor-header .chat-desk-nav button.active{flex:1.15;border-color:#2994ff;background:#006fff40;color:#fff;box-shadow:inset 0 0 19.5px -7px #138dff}
.chat-editor-header .chat-desk-nav button.active::after{display:none}
.chat-editor-header .header-actions{justify-self:end;margin-left:0;flex:none}

/* Figma's overview separator is a shallow gray radial glow, not a colored rule. */
.conversation-toolbar{box-sizing:border-box;gap:7px;padding-inline:clamp(16px,2vw,36px);background:radial-gradient(ellipse 50% 50% at 50% 100%,#232323 0%,#242424 38.9%,#121212 69.5%,#090909 84.7%,#000 100%);font-size:16px;line-height:1;letter-spacing:0}
.chat-layout.is-output-open .conversation-toolbar{height:47px;min-height:47px}
.conversation-toolbar::after{display:none}
.conversation-cube{display:block;width:20px;height:20px;align-self:center;flex:none}
.conversation-overview{display:flex;align-items:center;min-height:20px;line-height:20px}
.chat-layout.is-output-open .chat-thread{min-height:calc(100vh - 64px - 47px - 16px)}
@media(max-width:900px) and (min-width:761px){.chat-header-left{gap:12px}.chat-header-left .brand,.chat-header-left .brand img{width:135px}.chat-header-left .project-top-name{max-width:110px;gap:7px}.chat-editor-header .header-actions{gap:14px}}
@media(max-width:760px){.chat-editor-header .chat-desk-nav{display:none}.chat-header-left{gap:12px}.chat-header-left .brand,.chat-header-left .brand img{width:130px}.chat-header-left .project-top-name{max-width:115px}.chat-layout.is-output-open .chat-thread{min-height:calc(100vh - 58px - 47px - 16px)}}

/* Every header keeps its edges aligned with the viewport and yields space in a
   predictable order: navigation, project title, then the fixed controls. */
.site-header .header-inner{width:100%;max-width:none;min-width:0;padding-inline:clamp(16px,2vw,36px)}
.site-header .brand,.site-header .header-actions,.login-header-actions{flex:none}
.site-header .header-actions{white-space:nowrap}
@media(min-width:961px){
  .site-header:not(.work-header):not(.login-header) .main-nav{position:absolute;left:50%;transform:translateX(-50%);margin:0;gap:clamp(14px,1.7vw,28px)}
  .site-header:not(.work-header):not(.login-header) .main-nav a{font-size:clamp(14px,1.12vw,16px)}
}
@media(max-width:960px){
  .site-header:not(.work-header):not(.login-header) .mobile-menu{display:block;flex:none}
  .site-header:not(.work-header):not(.login-header) .main-nav{display:none;position:absolute;left:0;right:0;top:100%;width:100%;max-height:calc(100vh - 66px);margin:0;padding:12px clamp(16px,2vw,28px) 20px;transform:none;overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #30333b;background:#080a0ff5;backdrop-filter:blur(18px)}
  .site-header.menu-open:not(.work-header):not(.login-header) .main-nav{display:flex}
  .site-header:not(.work-header):not(.login-header) .main-nav a{padding:11px 6px;font-size:15px}
  .site-header:not(.work-header):not(.login-header) .main-nav a.active::after{left:6px;right:auto;bottom:4px;transform:none}
}
@media(max-width:1120px){html[lang=de] .site-header:not(.work-header):not(.login-header) .mobile-menu{display:block}html[lang=de] .site-header:not(.work-header):not(.login-header) .main-nav{display:none;position:absolute;left:0;right:0;top:100%;width:100%;max-height:calc(100vh - 80px);margin:0;padding:12px 20px 20px;transform:none;overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #30333b;background:#080a0ff5}html[lang=de] .site-header.menu-open:not(.work-header):not(.login-header) .main-nav{display:flex}}
.work-header:not(.chat-editor-header) .project-top-name{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;max-width:min(28vw,420px);margin-right:0;white-space:nowrap}
.work-header:not(.chat-editor-header) .project-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;margin-left:0}
.chat-header-left .project-label{font-size:14px;margin-left:0}
.work-header:not(.chat-editor-header) .header-actions{margin-left:auto}
@media(max-width:900px){.work-header:not(.chat-editor-header) .header-inner{gap:clamp(8px,1.5vw,18px)}.work-header:not(.chat-editor-header) .project-top-name{max-width:clamp(52px,20vw,180px)}.chat-editor-header .header-inner{padding-inline:clamp(14px,2vw,24px)}}
@media(max-width:760px){
  .work-header:not(.chat-editor-header) .work-nav{height:auto;gap:0;margin:0}
  .work-header:not(.chat-editor-header) .work-nav a{display:block;width:100%;min-width:0;height:auto;padding:12px 5px}
  .work-header:not(.chat-editor-header) .work-nav a.active::after{left:5px;right:auto;bottom:7px;width:30px;transform:none}
  .work-header:not(.chat-editor-header) .project-top-name{max-width:calc(100vw - 290px)}
  .login-header .header-inner{gap:12px}
}
html[lang=en] .chat-editor-header .chat-desk-nav,html[lang=de] .chat-editor-header .chat-desk-nav{width:320px;min-width:320px}
html[lang=en] .chat-editor-header .chat-desk-nav button,html[lang=de] .chat-editor-header .chat-desk-nav button{font-size:12px}
@media(max-width:760px){html[lang=en] .chat-editor-header .chat-desk-nav,html[lang=de] .chat-editor-header .chat-desk-nav{display:none}}
@media(max-width:360px){.site-header .header-inner{padding-inline:12px}.site-header .brand,.site-header .brand img{width:112px}.site-header .header-actions,.login-header-actions{gap:8px}.work-header:not(.chat-editor-header) .project-top-name{max-width:40px}.chat-header-left .project-top-name{max-width:52px}}

/* Account controls after sign in. */
.account-menu-wrap{position:relative;flex:none}
.account-trigger{padding:0;border:0;background:transparent;cursor:pointer}
.account-menu{position:absolute;right:0;top:calc(100% + 14px);z-index:120;width:196px;padding:7px;border:1px solid #353c49;border-radius:10px;background:#10141d;box-shadow:0 18px 46px #000b,0 0 20px #388fff18;white-space:normal}
.account-menu[hidden]{display:none}
.account-menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:11px 12px 12px;border-bottom:1px solid #2e3541;color:#f3f5fa;font-size:14px;font-weight:600}
.account-menu a,.account-menu button{display:block;width:100%;padding:11px 12px;border:0;border-radius:6px;background:transparent;color:#c8ced9;text-align:left;text-decoration:none;font:inherit;font-size:14px;cursor:pointer}
.account-menu a:hover,.account-menu button:hover,.account-menu a:focus-visible,.account-menu button:focus-visible{outline:0;background:#172b47;color:#fff}
.account-menu button:last-child{margin-top:4px;border-top:1px solid #2e3541;border-radius:0 0 6px 6px}
.account-menu{width:222px;max-height:calc(100vh - 76px);overflow-y:auto}
.account-menu-profile{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px 13px;border-bottom:1px solid #2e3541}
.account-menu-profile .avatar{width:32px;height:32px}
.account-menu-profile>div{min-width:0}
.account-menu-profile strong,.account-menu-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-profile strong{font-size:14px;color:#f3f5fa}
.account-menu-profile small{margin-top:3px;font-size:11px;color:#929cad}
.account-menu-language{position:relative;padding:9px 12px 11px;border-top:1px solid #2e3541}
.account-menu-language label{display:block;margin-bottom:7px;color:#aeb8c8;font-size:12px}
.account-menu-language select{width:100%;padding:8px 34px 8px 9px;appearance:none;border:1px solid #343d4d;border-radius:6px;background:#161e2c;color:#f4f6fa;font-size:13px}
.account-menu-language::after{content:"";position:absolute;right:27px;bottom:25px;width:6px;height:6px;border-right:1.5px solid #aeb8c8;border-bottom:1.5px solid #aeb8c8;transform:rotate(45deg);pointer-events:none}
.site-header .mobile-menu{width:32px;height:32px;padding:0;display:none;align-items:center;justify-content:center;line-height:0}
.site-header .mobile-menu svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media(max-width:960px){.site-header:not(.work-header):not(.login-header) .mobile-menu{display:flex}}
@media(max-width:1120px){html[lang=de] .site-header:not(.work-header):not(.login-header) .mobile-menu{display:flex}}
@media(max-width:760px){.site-header.work-header .mobile-menu{display:flex}}

/* Keep the chat controls fixed while only the message area scrolls. */
.chat-page{height:100vh;min-height:0;overflow:hidden}
.chat-layout{height:calc(100vh - 64px);min-height:0}
.chat-conversation,.chat-layout.is-output-open .chat-conversation{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;scrollbar-width:auto}
.chat-layout .conversation-toolbar{position:relative;flex:none}
.chat-layout.is-output-open .conversation-toolbar{height:42px;min-height:42px;padding-bottom:0}
.chat-thread,.chat-layout.is-output-open .chat-thread{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#414b5c transparent;padding-top:18px;padding-bottom:18px}
.chat-thread{margin-top:0}
.chat-layout.is-output-open .chat-thread{margin:0 auto;padding-top:14px;padding-bottom:18px}
.chat-compose{flex:none;width:min(890px,calc(100% - 40px));margin:0 auto 16px}
.chat-layout.is-output-open .chat-compose{width:calc(100% - 32px);margin-bottom:16px}
.chat-layout.is-output-open .chat-output-panel{position:relative;top:-6px;height:calc(100vh - 58px)}
.chat-output-panel .studio-tabs button{font-size:16px;color:#c9cbcc}
.chat-output-panel .studio-tabs button.active{color:#fff;text-shadow:none}
.chat-output-panel .studio-tabs button.active::after{bottom:0;width:43px;height:5px;border-radius:0;background:#3b84ff;box-shadow:0 0 7.2px 6px #006fff40}
.chat-output-panel .studio-tree button{min-height:30px;padding:5px 11px;border:1px solid #2994ff;border-radius:7px;background:#006fff40;box-shadow:inset 0 0 19.5px -7px #138dff;color:#fff;font-size:14px;font-weight:400;line-height:1.2}
.continue-row{padding-top:9px;padding-bottom:13px}
.chat-layout.is-output-open .chat-output-panel{z-index:110}
.chat-layout.is-output-open{overflow:visible}
.conversation-toolbar .chat-window-toggle{display:none;margin-left:auto;flex:none;width:30px;height:30px;padding:6px;border:1px solid #333b48;border-radius:6px;background:#11151c;color:#aab8ca;cursor:pointer}
.chat-layout.is-output-open .conversation-toolbar .chat-window-toggle{display:block}
.conversation-toolbar .chat-window-toggle:hover{border-color:#529bfa;color:#f3f8ff}
.chat-layout.is-output-open .chat-thread{padding-right:15px;scrollbar-gutter:stable}
.chat-window-restore{display:none;flex:none;width:30px;height:30px;padding:6px;border:1px solid #333b48;border-radius:6px;background:#11151c;color:#aab8ca}
.chat-window-restore svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chat-layout.is-output-maximized .chat-window-restore{display:block}
.chat-window-restore:hover{border-color:#529bfa;color:#f3f8ff}
@media(max-width:760px){
  .chat-layout{height:calc(100vh - 58px)}
  .chat-layout.is-output-open .chat-conversation{flex:0 0 0;opacity:0;pointer-events:none}
  .chat-layout.is-output-open .chat-output-panel{flex:1 1 100%}
  .chat-layout.is-output-open .chat-output-panel{height:calc(100vh - 52px)}
  .chat-layout.is-output-open .chat-conversation{height:100%}
  .chat-output-panel .studio-tabs button{font-size:13px}
  .chat-output-panel .studio-tree button{font-size:12px;padding-inline:6px}
}

/* Content workspace actions share the tab row and keep the tab list scrollable. */
.chat-output-panel .studio-tabs{position:relative;gap:8px}
.chat-output-panel .studio-tabs>.studio-tab-list{flex:1 1 auto;min-width:0;gap:clamp(2px,.6vw,8px);scrollbar-width:none}
.chat-output-panel .studio-tabs>.studio-tab-list::-webkit-scrollbar{display:none}
.chat-output-panel .studio-tabs>.output-tools{display:flex;align-items:center;flex:0 0 auto;gap:3px;min-width:max-content;height:auto;overflow:visible}
.chat-output-panel .output-tools button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#aeb7c5;font-size:13px;cursor:pointer}
.chat-output-panel .output-tools button:hover,.chat-output-panel .output-tools button:focus-visible{border-color:#364b69;background:#101b2b;color:#f3f7ff}
.chat-output-panel .output-tools .output-mode.active{border-color:#287fd4;background:linear-gradient(90deg,#0c2c50,#071624);color:#fff;box-shadow:inset 0 0 12px #168dff44}
.chat-output-panel .output-tools .output-mode.active::after{display:none}
.output-search-wrap{position:relative}
.output-search-trigger svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.output-editor{width:min(100%,760px)}
.output-editor textarea{display:block;width:100%;min-height:240px;max-height:calc(100vh - 240px);padding:16px;border:1px solid #364252;border-radius:8px;background:#11151d;color:#e9edf5;resize:vertical;font:inherit;line-height:1.6}
.output-editor .btn{margin-top:12px}
.output-saved-copy{width:min(100%,760px);white-space:pre-wrap;line-height:1.7;color:#d6dce7}
@media(max-width:1100px){.chat-output-panel .studio-tabs{padding-inline:7px}.chat-output-panel .output-tools button{padding-inline:6px;font-size:12px}.chat-output-panel .studio-tabs>.studio-tab-list{gap:0}}
@media(max-width:760px){.chat-output-panel .studio-tabs{overflow:visible}.chat-output-panel .studio-tabs>.studio-tab-list{overflow-x:auto}.chat-output-panel .output-search-trigger span{display:none}.chat-output-panel .output-tools button{min-height:27px;padding-inline:5px;font-size:11px}}

/* Laptop viewports use slightly tighter type and spacing; larger displays keep
   their current Figma proportions. */
@media(min-width:761px) and (max-width:1600px) and (max-height:1000px){
  .site-header:not(.chat-editor-header){height:72px}
  .inner-page,.workbench{padding-top:72px}
  .projects-page{padding-top:110px}
  .site-header .brand,.site-header .brand img{width:139px}
  .site-header .header-inner{padding-inline:clamp(16px,1.8vw,28px)}
  .site-header .header-actions{gap:16px}
  .language-trigger{font-size:14px}
  .site-header:not(.work-header):not(.login-header) .main-nav a{font-size:14px}
  .section-heading h1,.case-board h2,.scenarios h2,.page-hero h1{font-size:clamp(34px,3.25vw,47px)}
  .section-heading p,.case-intro,.scenario-intro{font-size:18px}
  .hero-cube{height:76vh}
  .feature-cards{width:min(94vw,950px);gap:clamp(18px,3vw,46px)}
  .feature-card{height:310px;min-height:310px;padding:25px}
  .feature-card h3{font-size:clamp(22px,2vw,29px)}
  .feature-card p{font-size:13px}
  .case-board{width:min(94vw,1246px)}
  .scenarios{min-height:100vh;padding-top:9.5vh;padding-bottom:14vh}
  .footer-statement h2{font-size:31px}
  .section-head h2,.about-belief h2{font-size:36px}
  .page-hero{min-height:450px;padding-top:82px}
  .page-section{padding-top:76px;padding-bottom:76px}
  .work-prompt{max-width:710px;margin-top:68px}
  .work-prompt h1{font-size:32px}
  .work-prompt p{font-size:15px}
  .prompt-tabs{margin-top:32px}
  .prompt-tabs button{font-size:13px;padding:9px 10px}
  .prompt-box textarea{font-size:15px;min-height:88px;padding:17px 19px}
  .continue-work{max-width:min(90vw,1130px);margin-top:76px}
  .continue-head h2{font-size:24px}
  .continue-card{min-height:155px;padding:16px}
  .continue-card h3{font-size:19px}
  .projects-head h1{font-size:32px}
  .project-grid{gap:15px}
  .project-copy h3{font-size:18px}
  .chat-editor-header{height:58px}
  .chat-page{padding-top:58px}
  .chat-layout{height:calc(100vh - 58px);min-height:0;--effective-conversation-width:min(var(--conversation-width,30%),calc(100% - 380px))}
  .chat-thread{width:min(800px,calc(100% - 36px))}
  .chat-compose{width:min(800px,calc(100% - 36px))}
  .chat-layout.is-output-open .chat-output-panel{height:calc(100vh - 52px)}
  .chat-output-panel .studio-tabs{height:49px}
  .chat-output-panel .studio-main{height:calc(100% - 49px)}
  .chat-output-panel .studio-tabs button{font-size:14px}
  .chat-output-panel .output-tools button{font-size:12px}
  .chat-output-panel .studio-tree button{font-size:13px}
  .chat-bubble p,.assistant-message p{font-size:12px}
  .result-card h2{font-size:17px}
}

/* The creation gradient runs through the header and fades at the prompt title. */
.work-header:has(+ .workbench){background:radial-gradient(ellipse 44% 170% at 10% 150%,#315eb37a,transparent 82%),radial-gradient(ellipse 44% 170% at 51% 145%,#873a706d,transparent 84%),radial-gradient(ellipse 42% 170% at 93% 150%,#9c703861,transparent 82%),rgba(0,0,0,.72)}
.workbench::before{inset:-80px 0 auto;height:clamp(270px,34vh,350px);background:radial-gradient(ellipse 42% 95% at 10% 25%,#315eb399,transparent 83%),radial-gradient(ellipse 44% 105% at 51% 12%,#873a7090,transparent 85%),radial-gradient(ellipse 40% 96% at 93% 20%,#9c703880,transparent 85%);mask-image:linear-gradient(#000 0%,#000 32%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 32%,transparent 100%)}

/* Smaller supporting copy across the capability screen. */
@media(min-width:761px){.section-heading p{font-size:clamp(15px,1.18vw,18px);line-height:1.45}}

/* Expanding the conversation makes the output panel yield its width. */
.chat-layout.is-output-maximized .chat-conversation{flex:1 1 100%;opacity:1;pointer-events:auto}
.chat-layout.is-output-maximized .chat-output-panel{flex:0 0 0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(40px)}
.conversation-toolbar .chat-window-toggle{width:25px;height:25px;padding:5px;border-radius:5px}
.conversation-toolbar .chat-window-toggle svg{width:13px;height:13px}
.chat-editor-header:has(.account-menu:not([hidden])){z-index:200}

/* Project actions sit beside the card link and remain available in list view. */
.project-card{position:relative;overflow:visible}
.project-card[hidden],.project-empty[hidden],.project-dialog [hidden],.project-action-menu[hidden]{display:none!important}
.project-card.is-menu-open{z-index:6}
.project-card-link{display:block;height:100%;overflow:hidden;border-radius:inherit;color:inherit}
.project-card-link:hover{color:inherit}
.list-view .project-card{display:block}
.list-view .project-card-link{display:grid;grid-template-columns:180px minmax(0,1fr)}
.project-actions{position:absolute;right:12px;top:12px;z-index:7}
.project-more{display:grid;place-items:center;width:31px;height:31px;padding:0 0 9px;border:1px solid #3d4656;border-radius:6px;background:#111925ed;color:#dbe7f8;font-size:23px;line-height:1;cursor:pointer}
.project-more:hover,.project-more[aria-expanded=true]{border-color:#4b9fff;background:#183050;color:#fff}
.project-action-menu{position:absolute;right:0;top:calc(100% + 6px);width:140px;padding:5px;border:1px solid #374454;border-radius:8px;background:#111822;box-shadow:0 14px 34px #000a}
.project-action-menu button{display:block;width:100%;padding:10px 11px;border:0;border-radius:5px;background:transparent;color:#e3e9f3;text-align:left;font-size:13px;cursor:pointer}
.project-action-menu button:hover,.project-action-menu button:focus-visible{background:#18375c;outline:0}
.project-action-menu button[data-project-action=delete]{color:#f2a7aa}
.project-empty{padding:40px 0;color:#aeb7c5;text-align:center}
.project-dialog{width:min(420px,calc(100vw - 32px));padding:25px;border:1px solid #424d5e;border-radius:11px;background:#111720;color:#f2f5fa;box-shadow:0 24px 70px #000c}
.project-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
.project-dialog h2{margin:0 0 20px;font-size:20px}
.project-dialog .project-delete-message{margin:0 0 8px;color:#c9d0db}
.project-dialog-name{display:block;margin-bottom:22px;color:#fff}
.project-name-field{display:block;color:#aeb9c9;font-size:13px}
.project-name-field input{display:block;width:100%;height:42px;margin-top:9px;padding:0 12px;border:1px solid #435063;border-radius:6px;outline:0;background:#0b111b;color:#fff;font:inherit;font-size:15px}
.project-name-field input:focus{border-color:#469bff}
.project-dialog-error{min-height:19px;margin:9px 0 0;color:#f2a7aa;font-size:12px}
.project-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.project-dialog-actions .btn{min-height:38px;padding-inline:17px;font-size:13px;cursor:pointer}
.project-dialog[data-mode=delete] #project-confirm{background:#ae3c48;border-color:#ae3c48;color:#fff}
@media(max-width:760px){.workbench::before{inset:-66px 0 auto;height:265px}.project-actions{right:9px;top:9px}.list-view .project-card-link{grid-template-columns:110px minmax(0,1fr)}}

/* Keep conversation bubbles clear of the scroll track at every panel width. */
.chat-thread,.chat-layout.is-output-open .chat-thread{box-sizing:border-box;scrollbar-gutter:stable;padding-right:clamp(20px,2.5vw,32px)}

/* Match work navigation to the strong content-tab indicator. */
.work-header:not(.chat-editor-header) .work-nav a.active::after{left:50%;right:auto;bottom:2px;width:43px;height:5px;border-radius:2px 2px 0 0;background:#3c8cff;box-shadow:0 0 9px #398cffaa;transform:translateX(-50%)}

/* Extend the creation-page color from the header through its title. */
.work-header:has(+ .workbench){background:radial-gradient(ellipse 44% 190% at 10% 150%,#315eb393,transparent 82%),radial-gradient(ellipse 44% 190% at 51% 145%,#873a7085,transparent 84%),radial-gradient(ellipse 42% 190% at 93% 150%,#9c70387a,transparent 82%),#05050a}
.workbench::before{inset:-80px 0 auto;height:clamp(390px,52vh,500px);background:radial-gradient(ellipse 46% 95% at 10% 22%,#315eb38c,transparent 84%),radial-gradient(ellipse 44% 100% at 51% 14%,#873a7082,transparent 85%),radial-gradient(ellipse 42% 96% at 93% 19%,#9c703875,transparent 85%);mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%)}

/* A compact heading leaves more room for project controls on laptop screens. */
.projects-head h1{font-size:clamp(27px,2.4vw,32px)}
.projects-head p{font-size:clamp(13px,1.12vw,15px);line-height:1.45}
@media(max-width:760px){.workbench::before{inset:-66px 0 auto;height:380px}.projects-head h1{font-size:27px}}

.account-dialog{width:min(460px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 32px));overflow:auto;padding:26px;border:1px solid #3a475a;border-radius:13px;background:#101721;color:#f2f5fa;box-shadow:0 24px 80px #000d}
.account-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
.account-dialog h2{margin:0 36px 22px 0;font-size:22px}
.account-dialog-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:#aeb8c7;font-size:26px;cursor:pointer}
.account-dialog-avatar{width:54px;height:54px;margin-bottom:20px}
.account-dialog label{display:block;margin:15px 0;color:#acb7c8;font-size:13px}
.account-dialog input{display:block;width:100%;height:42px;margin-top:8px;padding:0 12px;border:1px solid #3d4a5d;border-radius:6px;outline:0;background:#0a1019;color:#f4f7fb;font-size:15px}
.account-dialog input:focus{border-color:#4394ff}
.account-dialog input[readonly]{color:#8793a4}
.account-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.account-dialog-actions .btn{min-height:38px;padding:8px 17px;font-size:13px;cursor:pointer}
.trash-dialog>p{margin:-6px 0 19px;color:#aab5c5;font-size:13px}
.trash-item{display:flex;align-items:center;gap:9px;padding:12px 0;border-top:1px solid #2d3949}
.trash-item>div{min-width:0;flex:1}
.trash-item strong,.trash-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-item strong{font-size:14px}.trash-item small{margin-top:4px;color:#8391a3;font-size:11px}
.trash-item button{padding:7px 9px;border:1px solid #3b536e;border-radius:5px;background:#12243a;color:#d9ebff;font-size:12px;cursor:pointer}
.trash-item button.trash-permanent{border-color:#69434b;background:#29171d;color:#f2a9b4}
.trash-empty{padding:26px 0;text-align:center;color:#93a0b1}

/* Account usage and editable profile photo. */
.profile-avatar-field{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.profile-avatar-field .account-dialog-avatar{width:68px;height:68px;margin:0}
.profile-avatar-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.profile-avatar-button,.profile-avatar-remove{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:34px;margin:0;padding:0 11px!important;border:1px solid #536b8d!important;border-radius:6px!important;background:#162943!important;color:#d9eaff!important;font-size:12px!important;cursor:pointer}
.profile-avatar-actions input[type=file]{display:none}
.profile-avatar-remove{background:transparent!important;border-color:#455163!important;color:#aebdd0!important}
.profile-avatar-button:hover,.profile-avatar-remove:hover{border-color:#5b9fe9!important;color:#fff!important}
.profile-avatar-help{flex-basis:100%;color:#8e9caf;font-size:11px}
.profile-avatar-status{min-height:16px;margin:4px 0 8px;color:#9cb0c9;font-size:11px}
.usage-page{min-height:100vh;padding:112px 24px 72px;background:#050912;color:#edf3ff}
.usage-shell{width:min(920px,100%);margin:auto}
.usage-back{display:inline-block;margin-bottom:28px;color:#a9c5ea;font-size:13px;text-decoration:none}
.usage-back:hover,.usage-pricing:hover{color:#59a3ff}
.usage-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.usage-heading small{color:#6ba6ee;font-size:12px;letter-spacing:.08em}
.usage-heading h1{margin:8px 0 8px;font-size:clamp(28px,3vw,38px);line-height:1.2}
.usage-heading p{margin:0;font-size:14px}
.usage-muted{color:#9aaac0}
.usage-pricing{flex:none;color:#bdd6f4;font-size:13px;text-decoration:none}
.usage-card,.usage-project{border:1px solid #304058;border-radius:12px;background:#101927;box-shadow:0 8px 25px #0002}
.usage-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:112px;padding:17px 22px}
.usage-summary small,.usage-summary strong,.usage-summary span{display:block}
.usage-summary small{color:#9eafc6;font-size:13px}
.usage-summary strong{margin:5px 0;font-size:clamp(27px,3vw,34px);line-height:1.05;font-variant-numeric:tabular-nums}
.usage-summary span{font-size:12px}
.usage-symbol{display:grid;place-items:center;flex:none;width:52px;height:52px;border:1px solid #527db0;border-radius:14px;background:linear-gradient(135deg,#173c72,#365db8);color:white;font-size:25px;font-weight:700}
.usage-list-section{margin-top:34px}
.usage-list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.usage-list-heading h2{margin:0;font-size:20px}
.usage-list-heading span{font-size:12px}
.usage-projects{display:grid;gap:10px}
.usage-project{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px}
.usage-project>div{min-width:0}
.usage-project strong,.usage-project small{display:block}
.usage-project strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.usage-project small{margin-top:5px;color:#93a6bd;font-size:12px}
.usage-project>span{flex:none;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.usage-empty{padding:32px;text-align:center;color:#9cacc0}
.usage-footnote{margin:20px 0 0;font-size:12px;line-height:1.6}
@media(max-width:600px){.profile-avatar-field{align-items:flex-start}.usage-page{padding:88px 16px 48px}.usage-heading{align-items:start;flex-direction:column;gap:14px}.usage-summary{min-height:104px;padding:16px}.usage-symbol{width:46px;height:46px;font-size:23px}.usage-project{padding:16px}.usage-project>span{font-size:16px}}

#profile-dialog{width:min(410px,calc(100vw - 32px));padding:20px 22px}
#profile-dialog h2{margin-bottom:14px;font-size:20px}
#profile-dialog .profile-avatar-field{gap:12px;margin-bottom:0}
#profile-dialog .profile-avatar-field .account-dialog-avatar{width:54px;height:54px}
#profile-dialog .profile-avatar-status{min-height:0;margin:0}
#profile-dialog .profile-avatar-status:empty{display:none}
#profile-dialog label:not(.profile-avatar-button){margin:10px 0}
#profile-dialog input:not([type=file]){height:38px;margin-top:5px}
#profile-dialog .account-dialog-actions{margin-top:16px}

/* Main headings share one responsive supporting-copy scale across marketing pages. */
:root{--rf-heading-description-size:clamp(16px,1.18vw,29px)}
.section-heading p,.case-intro,.scenario-intro,.page-hero>p,.section-head>p{font-size:var(--rf-heading-description-size);line-height:1.5}
.work-prompt>p,.projects-head p,.contact-body aside>p{font-size:clamp(14px,1.04vw,21px);line-height:1.5}
@media(max-width:760px){
  :root{--rf-heading-description-size:clamp(13px,2.8vw,16px)}
  .case-intro{max-width:90%;white-space:normal}
  .scenario-intro br{display:none}
}
@media(min-width:1601px){.section-heading{width:min(1450px,calc(100% - 10vw))}}

/* The message area and composer use the same measure at every viewport width. */
.chat-conversation{--chat-measure:min(890px,calc(100% - 40px));--chat-scroll-gap:calc(clamp(20px,2.5vw,32px) + 8px)}
.chat-thread{width:var(--chat-measure)}
.chat-compose{position:relative;width:calc(var(--chat-measure) - var(--chat-scroll-gap));margin-left:calc((100% - var(--chat-measure))/2);margin-right:0}
.assistant-message{width:100%}
.assistant-message>div:last-child{min-width:0}
.chat-layout.is-output-open .chat-conversation{--chat-measure:calc(100% - 32px)}
.chat-layout.is-output-open .chat-thread{width:var(--chat-measure)}
.chat-layout.is-output-open .chat-compose{width:calc(var(--chat-measure) - var(--chat-scroll-gap));margin-left:calc((100% - var(--chat-measure))/2);margin-right:0}
@media(min-width:1601px){.chat-conversation{--chat-measure:min(1220px,calc(100% - 48px))}}
@media(min-width:761px) and (max-width:1100px){.chat-conversation{--chat-measure:min(800px,calc(100% - 36px))}}
@media(max-width:760px){.chat-conversation{--chat-measure:calc(100% - 32px)}.chat-layout.is-output-open .chat-conversation{--chat-measure:calc(100% - 24px)}}

/* Pulling the top edge grows the composer upward while the bottom stays fixed. */
.chat-compose-resize{position:absolute;left:0;right:0;top:-7px;z-index:5;height:16px;cursor:ns-resize;touch-action:none}
.chat-compose-resize::after{content:"";position:absolute;top:6px;left:50%;width:42px;height:3px;border-radius:3px;background:#566479;transform:translateX(-50%);transition:width .2s,background .2s}
.chat-compose-resize:hover::after,.chat-compose-resize:focus-visible::after{width:60px;background:#4a9bff}
.chat-compose-resize:focus-visible{outline:2px solid #4a9bff;outline-offset:2px}
.chat-compose textarea{display:block;height:var(--chat-compose-input-height,80px);min-height:64px;max-height:calc(100vh - 180px);resize:none;overflow-y:auto}

/* Six creation paths stay in one row on desktop, with horizontal access on small screens. */
@media(min-width:761px){
  .prompt-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .prompt-tabs button{min-width:0;padding-inline:5px;font-size:clamp(12px,.9vw,14px)}
}
html:not([lang="zh-CN"]) .prompt-tabs{display:flex;overflow-x:auto}
html:not([lang="zh-CN"]) .prompt-tabs button{flex:1 0 max-content;min-width:max-content;padding-inline:12px}
@media(max-width:760px){.prompt-tabs{display:flex;overflow-x:auto}.prompt-tabs button{flex:0 0 auto}}

/* Translated copy needs room to wrap inside cards instead of enlarging grid tracks. */
:is(.feature-card,.audience-card,.audience-copy,.plan,.info-grid article,.continue-card,.project-card,.project-copy,.result-card,.contact-direction){min-width:0}
:is(.feature-card,.audience-copy,.plan,.info-grid article,.continue-card,.project-copy,.result-card,.contact-direction) :is(h2,h3,p,small,strong,span,li,a,button){overflow-wrap:anywhere;hyphens:auto}
.audience-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-grid.four,.project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.project-card-link,.project-copy,.continue-card{min-width:0}
.plan-tag{width:fit-content;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.plan .btn{min-width:0;white-space:normal;line-height:1.35}
.result-actions,.choice-row{flex-wrap:wrap}
.result-actions span{max-width:100%;overflow-wrap:anywhere}
.footer-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
.footer-cols>div{width:100%;min-width:0}
.footer-cols :is(h3,a){overflow-wrap:anywhere;hyphens:auto}
.footer-statement{height:auto;min-height:clamp(165px,18.33vh,245px)}
.footer-statement :is(h2,p){overflow-wrap:anywhere;hyphens:auto}
.case-category{height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-height:1.2;padding-top:7px;padding-bottom:7px}
.case-intro{width:min(90%,1200px);white-space:normal;overflow-wrap:anywhere}
.rate-table>div{min-width:0}
.rate-table :is(b,span,strong){min-width:0;overflow-wrap:anywhere}
.rate-table strong,.rate-buy{white-space:normal}
.rate-buy{text-align:center;overflow-wrap:anywhere}
.enterprise{min-width:0;flex-wrap:wrap}
.enterprise>div{min-width:0}
.enterprise>div:last-child{flex-wrap:wrap;white-space:normal}
.enterprise :is(h2,p,strong,.btn){overflow-wrap:anywhere}
@media(max-width:1100px){
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .audience-grid,.plan-grid,.project-grid{grid-template-columns:minmax(0,1fr)}
  .info-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-category{min-height:38px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:450px){.info-grid.four{grid-template-columns:minmax(0,1fr)}}

/* Keep the capability cards readable when translations take more lines. */
html:not([lang="zh-CN"]) .feature-card{height:auto;min-height:clamp(310px,38.33vh,580px)}
html:not([lang="zh-CN"]) .feature-card h3{margin:12px 0 8px;line-height:1.18}
html:not([lang="zh-CN"]) .feature-card p{line-height:1.4}
html:not([lang="zh-CN"]) .feature-card span{margin-top:12px}
@media(min-width:761px) and (max-width:1100px){
  html:not([lang="zh-CN"]) .feature-card{padding:20px 18px}
  html:not([lang="zh-CN"]) .feature-card h3{font-size:clamp(19px,2.1vw,23px)}
  html:not([lang="zh-CN"]) .feature-card p{font-size:12px}
  html:not([lang="zh-CN"]) .feature-card span{font-size:12px}
  html:not([lang="zh-CN"]) .case-board h2{max-width:90%;font-size:clamp(25px,3vw,36px);white-space:normal;text-align:center;line-height:1.15}
  html:not([lang="zh-CN"]) .case-intro{top:20%}
  html:not([lang="zh-CN"]) .case-categories{top:29%}
}
@media(max-width:760px){
  html:not([lang="zh-CN"]) .feature-cards{display:flex;justify-content:flex-start;gap:12px;width:calc(100% + 32px);padding:0 16px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
  html:not([lang="zh-CN"]) .feature-card{flex:0 0 min(78vw,310px);min-height:210px;scroll-snap-align:center}
  html:not([lang="zh-CN"]) .feature-card h3{font-size:17px}
  html:not([lang="zh-CN"]) .feature-card p{font-size:11px}
  html:not([lang="zh-CN"]) .feature-card span{font-size:10px}
  html:not([lang="zh-CN"]) .case-board h2{top:4%;width:90%;white-space:normal;text-align:center;line-height:1.16;font-size:clamp(21px,5vw,26px)}
  html:not([lang="zh-CN"]) .case-intro{top:17%}
  html:not([lang="zh-CN"]) .case-categories{top:30%}
}

/* Use the email continuation treatment for the compact result action. */
#open-chat-output{min-height:38px;padding:0 17px;border:1px solid #ffc400;border-radius:8px;background:linear-gradient(105deg,#210000,#932e61,#3578ed);color:#fff;font-size:16px;line-height:1.25;white-space:normal;max-width:100%;box-shadow:none}
#open-chat-output:hover,#open-chat-output:focus-visible{filter:brightness(1.12);box-shadow:0 5px 18px #3578ed40}

/* An SVG keeps the project menu dots centered independent of font metrics. */
.project-more{padding:0;font-size:0;line-height:0}
.project-more svg{display:block;width:19px;height:19px;fill:currentColor}

/* Center the message composer within the conversation at every width. */
.chat-compose,.chat-layout.is-output-open .chat-compose{width:var(--chat-measure);margin-left:auto;margin-right:auto}

/* Give the conversation control and content search a little more space. */
.conversation-toolbar .chat-window-toggle{margin-right:0}
@media(min-width:761px){.chat-output-panel .output-search-trigger{min-width:72px;padding-inline:10px}}

/* Lift the entire content workspace just above the page black. */
.chat-output-inner{background:#12151c}

/* Keep translated case descriptions above the poster stack. */
.case-intro{z-index:20;pointer-events:none}

/* The conversation cube shares the logo's left edge. */
.chat-layout .conversation-toolbar{padding-left:clamp(16px,2vw,36px)}
@media(max-width:760px){.case-intro{padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.94)}}

/* The content panel may rise above the header, but its language menu must remain usable. */
.chat-editor-header:has(.language-menu:not([hidden])){z-index:200}

/* Give long desk names a full slot without spilling into the language control. */
@media(min-width:761px){
  html[lang=en] .chat-editor-header .chat-desk-nav,
  html[lang=de] .chat-editor-header .chat-desk-nav{width:360px;min-width:360px}
  html[lang=en] .chat-editor-header .chat-desk-nav button,
  html[lang=de] .chat-editor-header .chat-desk-nav button{font-size:12px;letter-spacing:-.01em}
}

/* Search stays in the tab bar and highlights matches in the current workspace. */
.output-search-wrap{display:flex;align-items:center;gap:5px;min-width:0}
.output-search-wrap.is-searching .output-search-trigger span{display:none}
.output-search-field{display:flex;align-items:center;gap:5px;width:clamp(124px,14vw,190px);height:30px;padding:0 7px;border:1px solid #467cb8;border-radius:6px;background:#0a111c}
.output-search-field[hidden]{display:none}
.output-search-field input{min-width:0;width:100%;flex:1;border:0;outline:0;background:transparent;color:#f4f7fc;font:inherit;font-size:12px}
.output-search-field input::placeholder{color:#8794a8}
.output-search-count{flex:none;color:#8dbbff;font-size:11px}
.chat-output-panel .studio-tab-list button.is-search-match{color:#80bbff}
.output-saved-copy mark.output-search-match{padding:0 2px;border-radius:2px;background:#f8d16b;color:#141820}
@media(max-width:760px){.output-search-field{width:min(28vw,150px)}}

/* Center each footer link group within its grid column. */
@media(min-width:761px){.footer-cols>div{width:max-content;max-width:100%;justify-self:center}}

.project-image{position:relative}
.project-image img[hidden]{display:none}
.project-image-empty:not([hidden]){display:grid;place-items:center;width:100%;height:100%;color:#8996ad;font-size:13px;background:linear-gradient(135deg,#101b2c,#14263a)}

/* Slightly stronger breathing motion for the opening cube. */
@keyframes cube-breathe{0%,100%{scale:1}36%{scale:1.035}72%{scale:.985}}


/* Email setup follows the social sign-in choices and keeps a visible way back. */
.social-login .microsoft-mark{width:18px;height:18px;flex:none}
.login-password-panel{min-height:432px}
.login-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 24px;color:#b9c6db;font-size:14px}
.login-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-back:hover{color:#fff}
.login-step-copy{margin:-15px 0 26px;color:#9ba9bb;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#password-setup>label{display:block;margin:0 0 8px;color:#bfc6d2;font-size:13px}
.login-password-field{position:relative;margin-bottom:18px}
.login-password-field input{width:100%;padding-right:46px}
.login-password-field button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:#9ba9a9;cursor:pointer}
.login-password-field button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.login-password-field button:hover{color:#fff}
.login-password-panel .login-password-email{display:block;margin-bottom:18px;background:#111318;color:#d3d9e4;cursor:default}

/* Site-wide viewing scale. */
.font-scale-picker{position:relative;flex:none}
.font-scale-trigger{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 8px;border:1px solid #343d50;border-radius:7px;background:#121927;color:#d7d9de;font-size:14px;line-height:1;cursor:pointer}
.font-scale-trigger:hover,.font-scale-trigger[aria-expanded=true]{border-color:#689cff;color:#fff}
.font-scale-trigger span{font-size:12px}
.font-scale-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:210;min-width:140px;padding:5px;border:1px solid #363b47;border-radius:9px;background:#10131a;box-shadow:0 15px 35px #0009}
.font-scale-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:#c8cbd3;text-align:left;font-size:13px;cursor:pointer}
.font-scale-menu button:hover,.font-scale-menu button[aria-checked=true]{background:#1d2f4d;color:#fff}
.font-scale-menu small{font-size:11px;opacity:.7}
@media(max-width:760px){.font-scale-trigger{height:34px}}
@media(max-width:450px){.font-scale-trigger{padding-inline:6px}.font-scale-menu{right:-18px}}

/* Lift the size menu above the output panel and keep it close to the theme control. */
.chat-editor-header:has(.font-scale-menu:not([hidden])){z-index:200}
.font-scale-picker{margin-right:-13px}
/* Page zoom leaves vw-based layouts in unzoomed CSS pixels. Cap both home
   compositions to the actual visible width at the enlarged settings. */
html[data-page-scale="125"] .case-board{width:min(100%,calc(80vw - max(54px,3.75vw)))}
html[data-page-scale="150"] .case-board{width:min(100%,calc(66.6667vw - max(54px,3.75vw)))}
html[data-page-scale="125"] .audience-grid{width:min(100%,67.6vw)}
html[data-page-scale="150"] .audience-grid{width:min(100%,54.2667vw)}
/* Root zoom enlarges vh as well as content. Keep the chat workspace within
   the physical viewport so its composer and output remain below the header. */
html[data-page-scale="125"]{--rf-visible-height:80vh}
html[data-page-scale="150"]{--rf-visible-height:66.6667vh}
html[data-page-scale="125"] .chat-page,
html[data-page-scale="150"] .chat-page{--rf-chat-header-height:64px;height:var(--rf-visible-height)}
html[data-page-scale="125"] .chat-layout,
html[data-page-scale="150"] .chat-layout{height:calc(var(--rf-visible-height) - var(--rf-chat-header-height));min-height:0}
html[data-page-scale="125"] .chat-layout.is-output-open .chat-output-panel,
html[data-page-scale="150"] .chat-layout.is-output-open .chat-output-panel{top:0;height:100%}
html[data-page-scale="125"] .chat-editor-header .chat-desk-nav,
html[data-page-scale="150"] .chat-editor-header .chat-desk-nav{transform:none}
@media(max-width:760px),(min-width:761px) and (max-width:1600px) and (max-height:1000px){
  html[data-page-scale="125"] .chat-page,
  html[data-page-scale="150"] .chat-page{--rf-chat-header-height:58px}
}
/* The login form must take part in page height when enlarged; absolute
   centering otherwise leaves its submit button below the clipped viewport. */
html[data-page-scale="125"] .login-page,
html[data-page-scale="150"] .login-page{display:flex;align-items:center;justify-content:flex-end;height:auto;min-height:var(--rf-visible-height);padding:calc(72px + 24px) 5.5% 24px;overflow:hidden}
html[data-page-scale="125"] .login-panel,
html[data-page-scale="150"] .login-panel,
html[data-page-scale="125"] .login-page:has(#email-login) .login-panel,
html[data-page-scale="150"] .login-page:has(#email-login) .login-panel{position:relative;top:auto;right:auto;transform:none}
@media(max-width:760px){
  html[data-page-scale="125"] .login-page,
  html[data-page-scale="150"] .login-page{padding-inline:18px}
}
html[data-page-scale="125"] .login-panel{max-width:calc(80vw - 36px)}
html[data-page-scale="150"] .login-panel{max-width:calc(66.6667vw - 36px)}
/* Keep the two animated home screens visible after zoom, and let their
   capability cards fit inside the stage's clipped viewport. */
html[data-page-scale="125"] .intro-shell{height:172vh}
html[data-page-scale="150"] .intro-shell{height:143.3334vh}
html[data-page-scale="125"] .intro-stage,
html[data-page-scale="150"] .intro-stage{height:var(--rf-visible-height);min-height:0}
html[data-page-scale="125"] .feature-cards{width:min(1040px,calc(80vw - 40px))}
html[data-page-scale="150"] .feature-cards{width:min(1040px,calc(66.6667vw - 40px))}
html[data-page-scale="125"] .feature-cards,
html[data-page-scale="150"] .feature-cards{top:calc(46.56% + 35px)}
html[data-page-scale="125"] .feature-card,
html[data-page-scale="150"] .feature-card{height:220px;min-height:0;padding:18px}
@media(max-width:760px){
  html[data-page-scale="125"] .intro-shell{height:176vh}
  html[data-page-scale="150"] .intro-shell{height:146.6667vh}
}

/* Use one logo origin across marketing, account and editor headers. */
.site-header .header-inner,
.chat-editor-header .header-inner{padding-inline:clamp(16px,2vw,36px)}
.chat-editor-header .brand{position:static;top:auto;align-self:center}
@media(min-width:761px) and (max-width:1600px) and (max-height:1000px){
  .chat-editor-header .brand{top:auto}
}
@media(max-width:760px){
  .site-header .header-inner,.chat-editor-header .header-inner{padding-inline:18px}
  .chat-editor-header .header-inner{display:flex}
  .chat-editor-header .brand{top:auto}
}
@media(max-width:400px){
  .site-header .header-inner,.chat-editor-header .header-inner{padding-inline:12px}
}

/* Registration continues through a short, answerable onboarding flow. */
.login-onboarding-page{display:flex;align-items:center;justify-content:flex-end;height:auto;min-height:100vh;padding:80px 5.5% 60px;overflow:hidden}
.login-onboarding-page .login-art{position:fixed}
.login-onboarding-page::after{position:fixed;background:linear-gradient(90deg,transparent 27%,#0008 46%,#000 72%)}
.login-onboarding-page .onboarding-panel{position:relative;z-index:2;top:auto;right:auto;transform:none;width:min(364px,100%);max-width:none;padding:0}
.onboarding-panel .login-back{margin-bottom:16px;font-size:12px}
.onboarding-panel .login-back svg{width:16px;height:16px}
.onboarding-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#9ba9bb;font-size:11px;letter-spacing:.04em}
.onboarding-progress-bar{height:3px;margin:8px 0 18px;border-radius:3px;background:#303b4e;overflow:hidden}
.onboarding-progress-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d63d83,#4689ff)}
.login-onboarding-page .onboarding-panel h1{margin:0 0 8px;color:#f4f6fb;text-align:left;font-size:24px;font-weight:600;line-height:1.25}
.onboarding-hint{margin:0 0 20px;color:#a3adbd;font-size:12px;line-height:1.5}
.onboarding-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.onboarding-choice{position:relative;display:block;min-width:0;cursor:pointer}
.onboarding-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.onboarding-choice-body{display:flex;flex-direction:column;min-height:112px;height:100%;padding:12px 14px;border:1px solid #3b424d;border-radius:13px;background:#202329;color:#f2f5fa;transition:border-color .18s,background .18s,box-shadow .18s}
.onboarding-choice:hover .onboarding-choice-body{border-color:#7698ce;background:#282d36}
.onboarding-choice input:focus-visible+.onboarding-choice-body{outline:2px solid #70a8ff;outline-offset:3px}
.onboarding-choice input:checked+.onboarding-choice-body{border-color:#4b90ef;background:#1b2d49;box-shadow:inset 0 0 0 1px #4b90ef55}
.onboarding-choice-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.onboarding-choice-icon{display:grid;place-items:center;width:22px;height:22px;color:#9dafcb;font-size:16px;line-height:1}
.onboarding-choice-check{display:block;width:16px;height:16px;border:1px solid #596473;border-radius:50%}
.onboarding-choice input:checked+.onboarding-choice-body .onboarding-choice-check{border-color:#6aa7ff;background:#3b84ff;box-shadow:inset 0 0 0 4px #1b2d49}
.onboarding-choice strong{font-size:14px;font-weight:600;line-height:1.3}
.onboarding-choice small{display:block;margin-top:5px;color:#a9b2bf;font-size:11px;line-height:1.45}
.onboarding-choices.is-spacious .onboarding-choice-body{min-height:170px}
.onboarding-continue{height:44px;margin-top:19px;font-size:13px;font-weight:600;cursor:pointer}
.onboarding-continue:disabled{border-color:#4b5260;background:#343943;color:#9ba4b2;cursor:not-allowed}
.onboarding-panel .login-note{margin:8px 0 0}
@media(max-width:760px){
  .login-onboarding-page{padding:78px 18px 36px}
  .login-onboarding-page .onboarding-panel{width:100%;padding:0;background:transparent}
  .onboarding-choice-body{min-height:104px;padding:11px}
  .onboarding-choices.is-spacious .onboarding-choice-body{min-height:148px}
  .onboarding-choice strong{font-size:14px}
  .onboarding-choice small{font-size:11px}
}
@media(max-width:480px){
  .onboarding-choices{grid-template-columns:1fr}
  .onboarding-choice-body,.onboarding-choices.is-spacious .onboarding-choice-body{min-height:84px}
  .onboarding-choice-top{margin-bottom:7px}
}
html[data-page-scale="125"] .login-onboarding-page .onboarding-panel{width:min(329px,calc(80vw - 36px));max-width:none}
html[data-page-scale="150"] .login-onboarding-page .onboarding-panel{width:min(287px,calc(66.6667vw - 36px));max-width:none}

/* One topbar contract across marketing, account, project and editor routes. */
:root{
  --rf-topbar-height:64px;
  --rf-topbar-gutter:clamp(16px,2vw,36px);
  --rf-topbar-brand-width:154px;
  --rf-topbar-actions-gap:22px;
}
.site-header,
.chat-editor-header{height:var(--rf-topbar-height)}
.site-header .header-inner,
.chat-editor-header .header-inner{height:100%;padding-inline:var(--rf-topbar-gutter)}
.site-header .brand,
.site-header .brand img,
.chat-editor-header .brand,
.chat-editor-header .brand img{width:var(--rf-topbar-brand-width)}
.site-header .brand,
.chat-editor-header .brand{height:30px;position:static;top:auto;align-self:center}
.header-actions,
.login-header-actions{height:36px;gap:var(--rf-topbar-actions-gap);align-items:center}
.font-scale-trigger,
.theme-toggle{height:36px;min-height:36px}
.language-trigger{min-height:36px;align-items:center}
.account-link,
.site-header .avatar,
.login-header .login-close{width:28px;height:28px}
.hero-content,
.capability-content{inset:var(--rf-topbar-height) 0 0}
.inner-page,
.workbench,
.chat-page,
.studio-page{padding-top:var(--rf-topbar-height)}
.cases-outer,
.scenarios{scroll-margin-top:var(--rf-topbar-height)}
.studio-aside{min-height:calc(100vh - var(--rf-topbar-height))}
.chat-page{--rf-chat-header-height:var(--rf-topbar-height)}
.chat-layout{height:calc(100vh - var(--rf-topbar-height))}
.chat-layout.is-output-open .conversation-toolbar{padding-right:16px}

@media(max-width:760px){
  :root{
    --rf-topbar-height:58px;
    --rf-topbar-gutter:18px;
    --rf-topbar-brand-width:130px;
    --rf-topbar-actions-gap:9px;
  }
  .site-header .main-nav{top:var(--rf-topbar-height)}
  .chat-layout{height:calc(100vh - var(--rf-topbar-height))}
}
@media(max-width:400px){
  :root{
    --rf-topbar-gutter:12px;
    --rf-topbar-brand-width:108px;
    --rf-topbar-actions-gap:6px;
  }
}