:root{--paper:#f7f2e8;--ink:#171713;--green:#20563e;--blue:#e7f0f1;--yellow:#efc24d;--coral:#e96c50;--line:#24231f;--shadow:#34312b;--muted:#635f56}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.shell{width:min(1280px,calc(100% - 48px));margin:auto}.nav{height:76px;border-bottom:1px solid #d9d2c6;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1280px)/2));gap:50px;position:relative;z-index:20;background:rgba(247,242,232,.94)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:22px;font-weight:900;text-decoration:none}.brand i{width:25px;height:25px;background:radial-gradient(circle at 25% 25%,#edbd46 0 4px,transparent 5px),radial-gradient(circle at 75% 25%,#257354 0 4px,transparent 5px),radial-gradient(circle at 25% 75%,#257354 0 4px,transparent 5px),radial-gradient(circle at 75% 75%,#e96c50 0 4px,transparent 5px)}nav{display:flex;gap:32px;margin-right:auto}nav a{font-size:13px;font-weight:700;color:#555249;text-decoration:none}.btn,button{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 20px;border:2px solid var(--line);border-radius:9px;color:var(--ink);font-weight:800;text-decoration:none;background:#fff;box-shadow:4px 5px 0 var(--shadow);transition:.18s}.btn:hover,button:hover{transform:translate(-1px,-2px)}.btn.dark{background:var(--ink);color:white}.btn.compact{padding:12px 18px;font-size:13px}.hero{min-height:850px;display:grid;grid-template-columns:43% 57%;align-items:center}.eyebrow{color:#155c89;font-size:14px;font-weight:900;letter-spacing:1.5px}.hero h1{font-size:82px;letter-spacing:-5px;line-height:.98;margin:22px 0 28px}.hero h1 em{font-style:normal;color:var(--green)}.lead{font-size:18px;line-height:1.65;max-width:580px;color:var(--muted)}.actions{display:flex;gap:14px;margin:30px 0}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}.facts span{border-top:1px solid #bbb3a6;padding-top:12px;font-size:11px;color:var(--muted)}.facts b{display:block;color:var(--ink);font-size:14px;margin-bottom:6px}.hero-art{height:680px;position:relative}.board{margin:0;position:absolute;background:#fff;border:2px solid var(--line);border-radius:10px;box-shadow:9px 10px 0 var(--shadow);padding:14px}.board>b{font-size:12px;letter-spacing:.6px}.board canvas,.board img{display:block;width:100%;height:100%;object-fit:cover}.board.back{width:360px;height:500px;left:20px;top:150px;transform:rotate(-4deg)}.board.compare{width:485px;height:610px;right:8px;top:35px;transform:rotate(2deg);z-index:2}.compare-stage{height:550px;margin-top:12px;position:relative;overflow:hidden;background:#eee}.compare-stage>img{position:absolute;inset:0}.pattern-layer{position:absolute;inset:0;overflow:hidden;width:50%;border-right:3px solid var(--line)}.pattern-layer canvas{width:455px}.compare-stage i{position:absolute;top:48%;left:50%;translate:-50% -50%;font-style:normal;width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:white;z-index:3}.compare-stage input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.size-card{position:absolute;right:-5px;bottom:8px;z-index:4;background:var(--yellow);border:2px solid var(--line);box-shadow:6px 7px 0 var(--shadow);padding:16px 24px;transform:rotate(-3deg);font-size:11px}.size-card strong{display:block;font-size:28px}.spark{position:absolute;font-size:30px;color:var(--coral)}.s1{top:25px;left:125px}.s2{right:-5px;top:235px;color:#3273a3}.section{padding:110px 0}.section-title{margin-bottom:50px}.section-title h2,.final h2{font-size:68px;line-height:1.02;letter-spacing:-3.5px;margin:14px 0 22px;font-weight:500}.section-title>p:last-child{font-size:18px;line-height:1.65;color:var(--muted);max-width:850px}.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.workflow-card{border:2px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;box-shadow:8px 9px 0 var(--shadow)}.workflow-card.blue .card-copy{background:#e2edf4}.visual{height:430px;position:relative;background:white;border-bottom:2px solid var(--line)}.visual canvas{width:100%;height:100%}.corner,.label{position:absolute;top:14px;left:14px;background:white;border:2px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12px;font-weight:900;box-shadow:3px 4px 0 var(--shadow)}.card-copy{padding:30px}.card-copy small{font-weight:800;color:#155c89}.card-copy h3{font-size:36px;margin:10px 0}.card-copy p,.case-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted)}.switches,.stage-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.switches button,.stage-buttons button,.case-tabs button{border:2px solid var(--line);background:#fff;border-radius:8px;padding:10px 14px;font-weight:800;box-shadow:3px 4px 0 var(--shadow);cursor:pointer}.switches button.active,.stage-buttons button.active,.case-tabs button.active{background:var(--yellow)}.quality{background:#f3eee4}.quality-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:28px}.editor{position:relative;height:600px;border:2px solid var(--line);background:white;box-shadow:8px 9px 0 var(--shadow);overflow:hidden}.editor>canvas{width:100%;height:100%}.ref-card{position:absolute;top:18px;left:18px;width:190px;padding:15px;background:white;border:2px solid var(--line);border-radius:9px;box-shadow:5px 6px 0 var(--shadow);font-size:11px}.ref-card b{display:block;margin-top:8px;font-size:16px}.zoom{position:absolute;right:18px;bottom:18px;background:#fff;border:2px solid var(--line);border-radius:25px;padding:10px 18px;word-spacing:12px}.quality-cards{display:grid;grid-template-columns:1fr 1fr;gap:17px}.quality-cards button{border:2px solid var(--line);border-radius:9px;text-align:left;padding:28px;background:#fff;cursor:pointer}.quality-cards button:nth-child(1){background:#dfe9e2}.quality-cards button:nth-child(3){background:#f6eacb}.quality-cards button.active{box-shadow:7px 8px 0 var(--shadow);transform:translate(-3px,-3px)}.quality-cards strong{display:block;font-size:31px;line-height:1.05;margin-bottom:20px}.quality-cards span{font-size:15px;line-height:1.55;color:var(--muted)}.case-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:-25px 0 45px}.case-tabs button{box-shadow:none;border-color:#bcb6ac;padding:8px 13px}.case-stack{display:grid;gap:80px}.case-card{min-height:550px;display:grid;grid-template-columns:1.15fr .85fr;border:2px solid var(--line);border-radius:10px;background:#fff;box-shadow:9px 10px 0 var(--shadow);overflow:hidden}.case-card.reverse{grid-template-columns:.85fr 1.15fr}.case-card.reverse .case-visual{order:2}.case-visual{min-height:520px;position:relative;background:#e6efea;overflow:hidden;border-right:2px solid var(--line)}.reverse .case-visual{border-right:0;border-left:2px solid var(--line)}.case-visual canvas,.case-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.case-visual canvas{z-index:1}.case-visual .ai-img{opacity:0;z-index:1}.case-visual .label{z-index:3}.status{position:absolute;right:22px;bottom:22px;z-index:4;background:var(--yellow);border:2px solid var(--line);box-shadow:5px 6px 0 var(--shadow);padding:12px 18px;font-weight:900;transform:rotate(-3deg)}.case-copy{align-self:center;padding:48px}.case-copy h3{font-size:47px;line-height:1.05;letter-spacing:-2px;margin:12px 0 20px}.case-copy code{display:inline-block;background:#f3eee5;border:1px solid #cfc6b8;border-radius:7px;padding:10px 12px;margin-top:8px;color:#464137}.case-card[data-stage="ai"] .photo>img:first-of-type{opacity:0}.case-card[data-stage="ai"] .photo .ai-img{opacity:1}.case-card[data-stage="pattern"] .photo>img{opacity:0}.case-card[data-stage="pattern"] canvas{z-index:2}.working .status{animation:wobble .38s infinite alternate}.final{margin-top:120px;padding:130px 0;background:#e1ebe5;text-align:center;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}.final h2{font-size:76px}.final p:not(.eyebrow){font-size:18px;color:var(--muted);margin-bottom:30px}footer{height:130px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.reveal{opacity:0;transform:translateY(45px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}@keyframes wobble{to{transform:rotate(3deg) scale(1.04)}}
@media(max-width:1000px){.nav nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.hero h1{font-size:66px}.hero-art{margin-top:20px}.workflow-grid,.quality-layout{grid-template-columns:1fr}.case-card,.case-card.reverse{grid-template-columns:1fr}.case-card.reverse .case-visual{order:0}.case-visual,.reverse .case-visual{border:0;border-bottom:2px solid var(--line)}.section-title h2{font-size:54px}}
@media(max-width:650px){.shell{width:min(100% - 26px,1280px)}.nav{padding:0 14px}.nav .compact{font-size:0}.nav .compact:after{content:'Studio';font-size:12px}.hero{min-height:auto}.hero h1{font-size:48px;letter-spacing:-2.5px}.facts{grid-template-columns:1fr}.hero-art{height:510px}.board.back{display:none}.board.compare{width:92%;height:465px;right:4%;top:20px}.compare-stage{height:405px}.pattern-layer canvas{width:calc(92vw - 50px)}.size-card{right:6px}.section{padding:75px 0}.section-title h2,.final h2{font-size:42px;letter-spacing:-2px}.visual{height:330px}.quality-cards{grid-template-columns:1fr}.editor{height:470px}.case-copy{padding:30px}.case-copy h3{font-size:36px}.case-visual{min-height:430px}.stage-buttons button{font-size:12px;padding:9px}.final{padding:90px 0}footer{flex-direction:column;justify-content:center;gap:12px}}
.hero.reveal{opacity:1;transform:none}
.case-visual .source-img{z-index:1;opacity:1;transition:opacity .28s}.case-visual canvas{z-index:2;opacity:0;transition:opacity .28s}.case-card[data-stage="ai"] .source-img,.case-card[data-stage="pattern"] .source-img{opacity:0}.case-card[data-stage="ai"] canvas,.case-card[data-stage="pattern"] canvas{opacity:1}.case-card[data-case="character"] .source-img{object-position:center 72%}.case-card[data-case="couple"] .source-img{object-position:center 42%}.case-card[data-case="cake"] .source-img{object-position:center 48%}
.editor{cursor:zoom-in}.editor>canvas{transform-origin:center center;transition:transform .12s ease;will-change:transform}.editor .ref-card{display:flex;flex-direction:column;top:16px;left:16px;width:190px;height:220px;padding:10px;z-index:4;background:#fff}.editor .ref-card span{align-self:flex-start;border:1.5px solid var(--line);border-radius:18px;padding:5px 9px;font-size:10px;font-weight:900;margin-bottom:7px}.editor .ref-card img{width:100%;height:145px;object-fit:contain;background:#f5f1e8}.editor .ref-card b{margin-top:7px;font-size:12px}.editor .zoom{z-index:5;display:flex;align-items:center;gap:3px;padding:5px;word-spacing:0;box-shadow:3px 4px 0 var(--shadow)}.editor .zoom button{width:31px;height:31px;padding:0;border:0;background:#fff;border-radius:50%;font-weight:900;cursor:pointer}.editor .zoom button:hover{background:#eeeae1;transform:none}.editor .zoom b{min-width:55px;text-align:center;font-size:12px}.wheel-tip{position:absolute;right:20px;bottom:70px;z-index:4;padding:5px 9px;border-radius:13px;background:rgba(23,23,19,.76);color:#fff;font-size:10px;pointer-events:none;opacity:.75}.editor.zoomed{cursor:grab}.editor.zoomed:active{cursor:grabbing}