:root{font-family:Inter,"PingFang SC",system-ui,sans-serif;color:#18251e;background:#f8faf8;--green:#398e25;--border:#dfe8df}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,.button{cursor:pointer;padding:12px 20px;border:1px solid var(--border);border-radius:12px;background:white;color:inherit}button:hover,.button:hover{border-color:var(--green)}button:disabled{cursor:wait;opacity:.6}.primary{background:var(--green);color:white;border-color:var(--green)}header{display:flex;align-items:center;gap:40px;padding:22px 5%;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;font-weight:800;font-size:25px;letter-spacing:-1px}.brand img{width:34px;height:37px;margin-right:8px}.brand span{color:var(--green)}nav{display:flex;gap:28px;margin-left:auto;font-size:14px}nav a:hover{color:var(--green)}#menu{display:none}main{max-width:1400px;margin:auto;padding:32px 5%}.hero{text-align:center;background:radial-gradient(ellipse at bottom,#e1f6d9,transparent 70%);padding:64px 10px 48px;border-radius:24px}.hero h1{font-size:clamp(36px,5vw,64px);letter-spacing:-2px;margin:12px}.hero h1 span{color:var(--green)}.hero p{font-size:21px;color:#617365}.hero .primary{display:inline-block;margin:16px}.eyebrow{font-size:13px;color:var(--green);letter-spacing:2px}.quick,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.card{border:1px solid var(--border);border-radius:16px;padding:23px;background:white;transition:transform .15s}.card:hover{transform:translateY(-3px);border-color:#8ebc7f}.card h3{margin:10px 0;font-size:18px}.card p{font-size:13px;line-height:1.6;color:#627168}.card small,.muted{color:#758277}.icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eaf6e5;color:var(--green);font-size:23px}.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:30px 0 18px}input,textarea,select{padding:12px;border:1px solid var(--border);border-radius:10px;background:white;width:100%}textarea{min-height:130px;resize:vertical}.bar input{flex:1;min-width:200px}.chip{font-size:13px;padding:9px 14px}.chip.active{background:#e7f4e0;border-color:var(--green)}.notice{padding:15px 18px;border-radius:12px;background:#fff4dc;color:#71541c;font-size:14px;line-height:1.6}.studio{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px}.panel{background:white;border:1px solid var(--border);border-radius:18px;padding:24px}label{display:block;margin:18px 0 8px;font-size:14px;font-weight:600}.preview{min-height:350px;display:grid;place-items:center;background:repeating-conic-gradient(#f0f3ee 0% 25%,#fff 0% 50%) 50% /24px 24px;border-radius:14px;overflow:hidden}.preview img,.preview video{max-width:100%;max-height:500px}.preview audio{width:90%}.preview p{background:#fff;padding:16px;border-radius:12px;color:#768174}h1{font-size:32px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.error{color:#a03127;white-space:pre-wrap}.success{color:#267019}.status{font-size:13px;padding:5px 9px;border-radius:8px;background:#edf4e9;display:inline-block}footer{text-align:center;padding:32px;font-size:12px;color:#7f8b80}.empty{padding:40px;text-align:center}.breadcrumbs{font-size:13px;color:#738070;margin-bottom:22px}.job{display:flex;justify-content:space-between;gap:15px;margin:12px 0}.count{font-size:13px;color:#738070}@media(max-width:800px){header{padding:16px 5%;gap:16px;flex-wrap:wrap}.brand{font-size:22px}#menu{display:block;margin-left:auto}nav{display:none;flex-basis:100%;margin:0;flex-direction:column;gap:0}nav.open{display:flex}nav a{padding:14px;border-top:1px solid var(--border)}main{padding:22px 5%}.hero{padding:30px 0}.hero p{font-size:17px}.quick,.grid{grid-template-columns:repeat(2,1fr);gap:12px}.card{padding:17px}.studio{grid-template-columns:1fr}.preview{min-height:260px}.hero h1{letter-spacing:-1px}.bar{gap:8px}}@media(max-width:420px){.grid{grid-template-columns:1fr}.quick{grid-template-columns:1fr}.panel{padding:18px}}
#mask{display:block;width:100%;background-size:100% 100%;background-repeat:no-repeat;border:2px solid #8cb77e;border-radius:10px;touch-action:none;cursor:crosshair;max-height:600px}#previews h3{font-size:14px;margin-top:24px}.result-media{max-width:100%;max-height:500px}.result-card{border-top:1px solid var(--border);padding-top:15px}#previews .preview+*{margin-top:22px}body:has(#mask-area:not([hidden])) .studio{align-items:start}
.source-note{margin:12px 0 20px;color:#68756a;font-size:13px;line-height:1.6}.source-note summary{cursor:pointer}.source-note a{color:var(--green)}
@media(max-width:800px){.hero h1 span{display:block}.hero h1{line-height:1.25}}
nav{gap:16px;flex-wrap:wrap;justify-content:flex-end}nav [hidden]{display:none!important}.page-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.page-title h1{margin-bottom:8px}.workflow-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:24px;align-items:start}.workflow-layout aside .panel{margin-bottom:20px}.flow-node{border:1px solid var(--border);border-radius:12px;margin:12px 0;padding:12px}.flow-node.selected{border-color:var(--green);background:#f4faef}.node-select{width:100%;text-align:left;border:none;background:transparent;padding:8px}.node-select span,.node-select small{display:block;margin-top:8px}.node-select span{font-size:14px}.node-select small{color:#738070}.flow-node .actions{margin:8px 0}.flow-diagram{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.flow-diagram div{border:1px solid #b5d5a5;background:#eef7e8;border-radius:10px;padding:8px;font-size:13px}.flow-diagram b{display:inline-grid;place-items:center;background:var(--green);color:white;border-radius:50%;width:24px;height:24px;margin-right:5px}.check-label{display:flex;gap:10px;align-items:center;font-weight:400;line-height:1.5}.check-label input{width:18px;flex-shrink:0}.run-panel{margin-top:24px}.run-steps,.ops-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}.run-steps article{border:1px solid var(--border);border-radius:12px;padding:18px}.run-steps h3{font-size:16px}.saved-flow{border-top:1px solid var(--border);padding:18px 0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.metrics article{background:white;border:1px solid var(--border);border-radius:16px;padding:24px}.metrics strong{display:block;font-size:32px;color:var(--green);margin:8px 0}.metrics small{color:#738070}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:anywhere}th{background:#f3f7ef}fieldset{border:1px solid var(--border);border-radius:10px;margin:20px 0;padding:12px}legend{font-size:14px;padding:0 8px}.ops-grid button{margin-top:20px}.identifier{overflow-wrap:anywhere;font-size:12px;color:#738070}.run-panel small{overflow-wrap:anywhere}.panel+.panel{margin-top:20px}.ops-grid .panel{margin:0}input[type=checkbox]{accent-color:var(--green)}
@media(max-width:1000px){.ops-grid{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-layout{grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}}@media(max-width:800px){.workflow-layout,.ops-grid{grid-template-columns:1fr}.run-steps{grid-template-columns:1fr}.page-title{align-items:flex-start;flex-direction:column}.flow-node .actions button{padding:8px 12px}.metrics article{padding:16px}.metrics strong{font-size:28px}.job{flex-wrap:wrap}.job p{overflow-wrap:anywhere}.actions button{max-width:100%}.panel{min-width:0}h1{font-size:28px}}
.more-settings{border:1px solid var(--border);border-radius:10px;padding:14px;margin:18px 0}.more-settings summary{cursor:pointer;font-size:14px;font-weight:600}.more-settings label{margin-top:14px}
.button{display:inline-block}.notice{margin:20px 0}#workflow-feedback:empty,#admin-feedback:empty{display:none}
@media(max-width:800px){.table-scroll table,.table-scroll tbody,.table-scroll tr{display:block}.table-scroll thead{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.table-scroll tr{border:1px solid var(--border);border-radius:12px;padding:10px;margin:12px 0}.table-scroll td{display:grid;grid-template-columns:85px minmax(0,1fr);gap:10px;padding:8px;border:0}.table-scroll td:before{content:attr(data-label);font-weight:600;color:#637263}.table-scroll td{overflow-wrap:anywhere}.table-scroll{overflow:visible}}
/* Approved references 01–03: mint collage, four quick actions, image cards and drawer. */
:root{color:#15242b;background:#fcfefd;--green:#389d1f;--border:#e5ece8}.primary{background:linear-gradient(110deg,#50bf18,#389d22);border-color:transparent;box-shadow:0 6px 20px #53bd1620}.button,button{transition:background .15s,transform .15s}.button:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #74c752;outline-offset:3px}header{padding:14px 4.4%;gap:24px}nav{font-size:13px;gap:24px;flex-wrap:nowrap}.brand{white-space:nowrap;font-size:25px}.nav-account,.header-start{border-radius:32px;white-space:nowrap;padding:11px 22px}.drawer-top,.drawer-start,.nav-group,.drawer-chevron{display:none}.workspace-nav{position:relative}.workspace-nav summary{cursor:pointer;list-style:none;white-space:nowrap}.workspace-nav[open]{z-index:12}.workspace-nav a{display:block;background:#fff;padding:12px;min-width:180px}.workspace-nav[open] a{position:relative}.workspace-nav[open]{position:absolute;right:190px;top:28px;background:white;padding:10px;border-radius:12px;box-shadow:0 8px 25px #15242b18}.workspace-nav[open] summary{margin-bottom:10px}main{max-width:1586px;padding:30px 4.4%}.design-hero{position:relative;min-height:380px;padding:40px 0 95px;overflow:visible;background:radial-gradient(ellipse at bottom,#def6da80,transparent 68%)}.hero-copy{position:relative;z-index:2;width:65%;margin:auto}.hero h1{font-size:clamp(36px,4.2vw,64px);letter-spacing:-2px;white-space:nowrap}.hero p{font-size:20px;color:#26373e}.hero .primary{padding:18px 45px;border-radius:40px;font-weight:700;font-size:19px}.hero .hero-note{font-size:13px;color:#627179}.eyebrow{color:#7a858b;font-size:12px;letter-spacing:4px}.hero-collage>div{position:absolute;overflow:hidden;border:4px solid white;box-shadow:0 14px 35px #59844815;border-radius:18px}.hero-collage .sample-media{height:100%;width:100%}.hero-collage b{position:absolute;bottom:18px;left:18px;color:white;font-size:19px;text-shadow:0 2px 8px #000;max-width:120px;line-height:1.4}.collage-product{width:205px;height:230px;left:-3%;top:28px;transform:rotate(-6deg)}.collage-portrait{width:155px;height:180px;left:10%;top:160px;transform:rotate(7deg)}.collage-landscape{width:280px;height:165px;right:-2%;top:45px;transform:rotate(-5deg)}.collage-audio{width:265px;height:86px;right:6%;top:230px;transform:rotate(4deg)}.play-mark{position:absolute;left:45%;top:38%;border-radius:50%;padding:16px;background:#11251cd0;color:white}.sample-media{background-repeat:no-repeat;position:relative;overflow:hidden;border-radius:12px}.sample-tag{position:absolute;right:8px;top:8px;font-size:10px;background:#ffffffd9;color:#4a6453;padding:3px 6px;border-radius:5px}.quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:5px 0 28px}.quick-card{display:flex;align-items:center;gap:14px;background:white;padding:22px 20px;border-radius:14px;box-shadow:0 8px 26px #50785b09;border:1px solid #f0f5f0}.quick-card>span:last-child{margin-left:auto}.quick-card h3{font-size:16px;margin:0 0 5px}.quick-card p{font-size:12px;color:#819097;margin:0}.icon{width:48px;height:48px;flex-shrink:0;background:#eaf7e7}.home-tools{background:linear-gradient(135deg,#eff9f5,#f6fcf8);border-radius:24px;padding:20px 24px 28px;text-align:center}.home-tools h2{font-size:32px;margin:8px 0 12px}.category-tabs{display:flex;justify-content:center;gap:24px}.category-tabs button{background:transparent;border:0;border-radius:0;color:#74828a;padding:12px 18px;border-bottom:2px solid transparent}.category-tabs [aria-selected=true]{color:var(--green);border-bottom-color:var(--green)}.home-tools .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;text-align:left;margin-top:18px}.card{padding:0;overflow:hidden;box-shadow:0 7px 20px #47745808;border-color:#edf2ef;border-radius:13px}.card h3,.card p,.card small,.card>.status{margin-left:14px;margin-right:12px}.card h3{font-size:15px}.card>small{display:block;margin-top:12px;font-size:10px}.card>.status{margin-bottom:15px;font-size:11px}.tool-thumbnail{border-radius:0}.waveform{display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(115deg,#163222,#17292b);color:#dff9c6;min-height:85px;padding:16px;height:100%}.waveform>span{background:#53a437;border-radius:50%;padding:10px}.waveform>div{display:flex;align-items:center;gap:3px}.waveform i{display:block;width:2px;background:#a4e46e}.waveform i:nth-child(3n){background:#dfe8e1}.waveform small{font-size:10px}.card .waveform{aspect-ratio:1.75;height:auto}.creation-steps{padding:32px;text-align:center}.creation-steps>div{display:flex;justify-content:center;gap:50px}.creation-steps b{display:inline-grid;place-items:center;border-radius:50%;background:#e7f5e1;color:var(--green);width:32px;height:32px;margin-right:12px}.studio{grid-template-columns:minmax(340px,.85fr) minmax(0,1.4fr);align-items:start}.panel{box-shadow:0 5px 24px #64877306;border-color:#edf2ef}.studio>section:first-child>h2{font-size:20px}.studio .preview{background:#f4f8f5;border:1px dashed #d4e2d5}.studio #generate{flex:1;background:linear-gradient(115deg,#4dbe17,#359c22);color:white}.studio .actions{position:relative}.studio #results{min-height:80px}.studio h2{font-size:21px}.notice{font-size:12px}.sample-inspiration{margin-top:24px}.sample-inspiration .sample-media{max-width:100%}.sample-inspiration h3{font-size:14px}.sample-inspiration .count{font-size:11px}
@media(max-width:1150px) and (min-width:801px){nav{gap:12px;font-size:12px}header{gap:16px}.brand{font-size:22px}.header-start{padding:10px 14px}.nav-account{padding:10px}.hero-copy{width:68%}.collage-product{width:150px;height:180px}.collage-portrait{left:6%;width:125px;height:155px}.collage-landscape{width:190px;height:140px}.collage-audio{width:210px;right:0}.quick-card{padding:16px 12px;gap:8px}.quick-card h3{font-size:14px}.home-tools .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){header{padding:14px 4%;gap:10px;flex-wrap:nowrap}.brand{font-size:20px;order:2;letter-spacing:-1px}.brand img{width:26px;height:30px;margin-right:5px}#menu{display:block;order:1;margin:0;padding:7px;border:0;font-size:23px;background:transparent}.header-start{order:3;margin-left:auto;font-size:12px;padding:11px 15px}.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:8px 0 22px}.drawer-top .brand{order:0}.drawer-top button{font-size:30px;border:0;padding:0 10px}.drawer-start{display:block;margin-bottom:22px;text-align:center;padding:18px;font-size:18px}nav{display:none;position:fixed;left:0;top:0;bottom:0;width:min(88vw,380px);overflow-y:auto;background:white;margin:0;padding:22px 18px;z-index:30;box-shadow:10px 0 30px #0002;flex-basis:auto;font-size:16px}nav.open{display:block}nav>a{display:block;padding:21px 12px;border-top:1px solid #eef2ef}nav .desktop-media{display:none}.drawer-chevron{display:inline;float:right}.nav-group{display:block;margin:8px 0 16px}.nav-group summary{padding:18px 12px;background:#eef8ee;border-radius:14px;color:#277a25;font-weight:600;cursor:pointer}.nav-group>a{display:block;padding:18px}.drawer-tool{display:flex;align-items:center;gap:12px;padding:12px 8px;font-size:14px}.drawer-tool .sample-media{width:60px;height:52px;flex-shrink:0;aspect-ratio:auto!important}.drawer-tool .sample-tag{display:none}.workspace-nav{display:block;position:static!important;box-shadow:none!important;padding:18px 12px!important}.workspace-nav summary{font-size:16px}.workspace-nav a{font-size:14px;padding:16px 8px}.nav-account{display:block;margin:12px 0;text-align:center}#nav-shade:not([hidden]){display:block;position:fixed;inset:0;z-index:20;background:#14201c88;border:0;border-radius:0;padding:0;width:100%;height:100%}.menu-open{overflow:hidden}main{padding:20px 4%}.design-hero{min-height:640px;padding:12px 0 370px}.hero-copy{width:100%}.hero h1{white-space:normal;font-size:42px;margin:12px 0;line-height:1.15;letter-spacing:-1.5px}.hero h1 span{display:block}.hero p{font-size:16px;line-height:1.6;margin:15px auto;max-width:300px}.eyebrow{font-size:10px;letter-spacing:3px}.hero .primary{padding:15px 34px;font-size:18px;margin:4px 0 12px}.hero-note{display:none}.hero-collage{position:absolute;top:295px;left:0;right:0;height:315px}.hero-collage>div{border-width:3px;border-radius:14px}.collage-product{width:125px;height:190px;left:0;top:0;transform:rotate(-5deg)}.collage-portrait{width:110px;height:160px;left:25%;top:65px}.collage-landscape{width:170px;height:110px;right:0;top:30px}.collage-audio{width:175px;height:65px;right:0;top:182px}.hero-collage b{font-size:13px;bottom:12px;left:10px;max-width:90px}.play-mark{padding:10px;font-size:12px}.waveform{gap:5px;padding:8px;min-height:65px}.waveform>span{padding:6px}.waveform>div{gap:2px}.waveform i{width:1px}.quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 22px}.quick-card{padding:17px 10px;gap:8px;border-radius:12px}.quick-card h3{font-size:14px}.quick-card p{font-size:10px;line-height:1.5}.quick-card .icon{width:35px;height:38px;font-size:20px}.quick-card>span:last-child{font-size:12px}.home-tools{padding:20px 12px}.home-tools h2{font-size:25px;margin-bottom:18px}.category-tabs{gap:0;justify-content:space-around;background:#fff;border-radius:24px}.category-tabs button{padding:13px 16px;font-size:13px}.home-tools .grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card h3{font-size:14px;margin-left:10px}.card p,.card small,.card>.status{margin-left:10px;margin-right:8px}.card p{font-size:11px}.card>.status{font-size:10px}.card>small{font-size:9px}.creation-steps{padding:24px 10px;text-align:left}.creation-steps>div{display:block}.creation-steps h2{font-size:25px}.studio{grid-template-columns:1fr}.studio .preview{min-height:230px}.studio .panel{padding:18px}.hero-copy .hero h1{font-size:40px}}
.sample-media{container-type:size;background:none}.sample-media:before{content:'';position:absolute;inset:0;background-image:var(--sample-image);background-size:var(--sample-size) auto;background-position:var(--sample-x) var(--sample-y);background-repeat:no-repeat}.sample-tag{z-index:1}.hero-collage .waveform>div{overflow:hidden}.hero-collage .waveform small{position:absolute;right:8px;top:6px;background:#ffffffcf;color:#314c36;padding:2px 5px;border-radius:4px}
.studio-intro{padding:10px 0 18px;background:radial-gradient(ellipse at right,#e4f9df80,transparent 65%)}.studio-intro h1{font-size:38px;margin:12px 0;color:#21372a}.studio-intro p{color:#7c8990;font-size:16px;line-height:1.7}.studio-tabs{display:flex;gap:12px;background:#f2f6f3;border-radius:14px;padding:7px;width:max-content;max-width:100%;flex-wrap:wrap}.studio-tabs a{padding:12px 20px;border-bottom:2px solid transparent;font-size:14px;color:#6a7780}.studio-tabs .active{background:#fff;color:var(--green);border-bottom-color:var(--green);border-radius:10px 10px 0 0}.inspiration-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.studio input[type=file]{border-style:dashed;padding:20px;background:#f8fbf8;min-height:76px;cursor:pointer}.studio input[type=file]::file-selector-button{border:0;border-radius:8px;background:#e8f5e4;color:#378928;padding:10px;margin-right:10px;font:inherit}.sample-inspiration{border-top:1px solid var(--border);padding-top:18px}.studio .preview p{font-size:13px;background:#f8fbf8}#results>.muted{padding:28px;background:#f8fbf8;border-radius:12px;text-align:center}
@media(max-width:800px){.studio-intro h1{font-size:29px;line-height:1.35}.studio-intro p{font-size:14px}.studio-tabs{gap:2px;width:100%}.studio-tabs a{padding:10px;font-size:12px}.inspiration-grid{gap:8px}}
[hidden]{display:none!important}
.input-ref-row{border-top:1px solid var(--border);padding:10px 0;margin:10px 0}.input-ref-row label{margin-top:10px}.input-ref-row button{margin-top:10px;padding:8px 12px;font-size:12px}.run-steps .count{overflow-wrap:anywhere}
@media(max-width:800px){.design-hero{min-height:575px;padding-bottom:300px}.hero-collage{top:265px;height:280px}.hero h1{font-size:40px}.hero-collage b{max-width:100px;font-size:12px}.collage-portrait b{font-size:12px}.collage-product{height:175px}.collage-portrait{height:150px;top:64px}.collage-audio{top:169px}.quick-card p{font-size:10px}}
.drawer-top .brand{padding:0;border:0}.check-label:has(input:disabled){color:#89958f}.sample-media:before{border-radius:inherit}
.draft-settings{margin:18px 0;padding:12px;border:1px solid var(--border);border-radius:10px}.draft-settings summary{font-size:13px;color:#6d7d71;cursor:pointer}.studio .notice{padding:12px 14px;line-height:1.6}.studio>section:first-child>p.count{display:none}
#nav a[aria-current=page]{color:var(--green);font-weight:600}#nav .desktop-media[aria-current=page]{border-bottom:2px solid var(--green);padding-bottom:5px}