:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#18324f;background:#f7faff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}.shell{max-width:1470px;margin:0 auto;padding:0 26px}.skip{position:absolute;top:-100px;left:12px;background:#fff;padding:12px;z-index:100}.skip:focus{top:10px}:focus-visible{outline:3px solid #0879ed;outline-offset:3px}.header{background:#fffffff0;backdrop-filter:blur(14px);border-bottom:1px solid #e5edf7}.nav{min-height:70px;display:flex;align-items:center;gap:17px}.brand{font-size:19px;font-weight:680;white-space:nowrap}.brand strong{color:#1b80ed}.mark{font-size:28px;font-weight:850;color:#2585eb;letter-spacing:-5px;margin-right:14px}.mark span{color:#83c8f7}.nav nav{display:flex;gap:25px;margin-left:auto}.nav nav a{font-size:12px;font-weight:650;color:#607b96}.nav nav a:hover{color:#1677e7}.private{background:#e9f9f2;color:#1e7458;border-radius:35px;padding:8px 12px;font-size:11px;font-weight:750;white-space:nowrap}.hero{padding-top:52px;padding-bottom:44px}.eyebrow,.overline{color:#227ce0;font-size:11px;font-weight:850;letter-spacing:1.4px}.eyebrow span{color:#97a9bc}.hero h1{margin:13px 0 16px;line-height:1.1;letter-spacing:-2.4px;font-size:clamp(38px,5vw,64px);max-width:940px}.hero h1 em{font-style:normal;color:#217fe5}.hero>p{max-width:790px;font-size:16px;line-height:1.74;color:#637f9a;margin:0}.hero-proof{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:21px;font-size:12px;font-weight:670;color:#42688d}.studio{padding-bottom:70px}.studio-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}.studio-head h2{margin:5px 0 0;font-size:24px;letter-spacing:-.6px}.head-actions{display:flex;flex-wrap:wrap;gap:8px}.studio-grid{display:grid;grid-template-columns:minmax(300px,365px) minmax(0,1fr);gap:20px;align-items:start}.sidebar,.workspace{display:grid;gap:18px;min-width:0}.workspace{position:static;align-self:start}.panel{background:#fff;border:1px solid #dfeaf7;border-radius:21px;padding:21px;min-width:0;box-shadow:0 6px 32px #163f7808}.panel-title{display:flex;gap:12px;align-items:start;margin-bottom:18px}.step{width:33px;height:33px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:#eaf4ff;color:#1e79d8;font-size:12px;font-weight:850}.panel-title h3,.preview-top h3{font-size:16px;letter-spacing:-.3px;margin:0}.panel-title p{font-size:11px;color:#8497ac;line-height:1.6;margin:6px 0 0}.btn{border:1px solid transparent;border-radius:10px;min-height:38px;padding:10px 13px;font-size:12px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-align:center}.btn.primary{background:#1579e9;color:#fff;box-shadow:0 7px 16px #1174e924}.btn.subtle{background:#edf6ff;color:#216bb7}.btn.ghost{border-color:#d9e6f3;background:#fff;color:#526d89}.btn.outline{border-color:#abd0f8;background:#fff;color:#166fc8}.btn.small{padding:6px 9px;font-size:11px;min-height:32px}.btn:hover:not(:disabled),.mode:hover,.tool:hover{filter:brightness(.976)}.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mode{border:1px solid #dbe8f6;border-radius:12px;background:#fcfdff;min-width:0;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;color:#627e9c}.mode span{font-size:23px;color:#3f88d7}.mode strong{font-size:12px;color:#355776}.mode small{font-size:9px}.mode.selected{border-color:#2b8aea;background:#eaf5ff;box-shadow:0 0 0 1px #5eacff4d}.mode.selected strong{color:#115fae}.label{display:block;margin:15px 0 7px;font-size:12px;font-weight:750;color:#47617d}.range-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 7px;font-size:12px;font-weight:700;color:#405d7a}.range-label output{color:#217ad8;font-variant-numeric:tabular-nums;font-size:11px}.range-label:first-of-type{margin-top:4px}input[type=range]{width:100%;accent-color:#2284ea;display:block;margin:0;min-width:0}input[type=checkbox]{accent-color:#177ce8}input[type=number],select{border:1px solid #dce7f3;border-radius:10px;background:#fff;min-height:39px;color:#284b70;padding:7px 10px;min-width:0;width:100%;font-size:12px}.hint,.mini-note{font-size:11px;color:#7c91a6;line-height:1.58;margin:10px 0 0}.vp-controls{display:grid;gap:10px;margin-top:14px}.vp-row{background:#f6faff;border:1px solid #e5effa;padding:10px;border-radius:11px}.vp-row .vp-head{display:flex;justify-content:space-between;gap:7px;align-items:center;margin-bottom:8px;font-size:12px;font-weight:750}.vp-head button{font-size:10px;border:0;border-radius:8px;background:#e6f1ff;color:#1161ae;padding:4px 8px}.vp-coords{display:grid;grid-template-columns:1fr 1fr;gap:9px}.vp-coords label{font-size:10px;color:#7690a9;font-weight:650}.vp-coords input{margin-top:4px}.vp-row .vp-description{font-size:10px;color:#8195aa;margin:7px 0 0}.help-note{font-size:11px;line-height:1.5;background:#ecf5ff;padding:11px 12px;border-radius:11px;color:#286492;margin-top:12px}.colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:17px}.colors label{font-size:10px;line-height:1.5;color:#6a839f;font-weight:700}.colors input{display:block;width:100%;height:37px;border:1px solid #d4e5f6;border-radius:9px;background:#fff;margin-top:5px;padding:4px}.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 7px;margin-top:18px}.check-inline,.checks label{display:flex;align-items:start;gap:6px;font-size:11px;line-height:1.35;color:#4c6988;font-weight:620}.checks input{margin:0;flex-shrink:0}.file-drop{display:block;text-align:center;cursor:pointer;border:1px dashed #9cc9f4;background:#f5faff;border-radius:12px;padding:14px 10px;color:#1c74ca;font-size:11px;font-weight:750;position:relative}.file-drop input{position:absolute;width:1px;height:1px;opacity:0;left:0;bottom:0}.filename{font-size:11px;color:#6d86a2;word-break:break-word}.actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}.export-panel{border-color:#badcff}.export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.file-label{cursor:pointer}.file-label input{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.stage-panel{padding:22px}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.preview-top h3{margin-top:5px}.live-dot{font-size:11px;background:#ebf9f0;color:#258255;border-radius:30px;padding:7px 10px;font-weight:750}.stage-frame{background:linear-gradient(125deg,#ebf2fb,#dce7f2);border:1px solid #d5e2f0;border-radius:17px;min-height:260px;display:grid;place-items:center;padding:16px;min-width:0;overflow:hidden}#canvas{display:block;width:100%;height:auto;max-height:none;object-fit:contain;box-shadow:0 15px 32px #1b406b29;touch-action:none;cursor:crosshair;background-image:linear-gradient(45deg,#dae3ec 25%,transparent 25%),linear-gradient(-45deg,#dae3ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dae3ec 75%),linear-gradient(-45deg,transparent 75%,#dae3ec 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}#canvas.tool-move{cursor:grab}#canvas.dragging{cursor:grabbing}.toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.tool{flex:1;min-width:107px;font-size:11px;font-weight:700;padding:10px 7px;background:#f5f9ff;border:1px solid #dbe8f6;border-radius:11px;color:#527393}.tool.active{color:#1668bf;border-color:#65a8ee;background:#eaf5ff}.tool-options{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:13px}.tool-options>label{font-size:11px;font-weight:750;color:#577392}.tool-options select{width:auto;min-width:130px;max-width:100%}.tool-prompt{font-size:11px;color:#7b90aa;flex:1;min-width:170px}.stage-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;border-top:1px solid #edf2f9;margin-top:14px;padding-top:14px;color:#47709b;font-size:10px;font-weight:750}.guide-list{display:grid;gap:7px;max-height:250px;overflow-y:auto}.empty-guides{font-size:12px;color:#8497ad}.guide-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 10px;background:#f8fbff;border:1px solid #e9f0f8;border-radius:10px;font-size:11px;color:#56728c}.guide-row strong{color:#2869b4}.guide-row button{border:1px solid #e4dfe7;background:#fff;font-size:11px;color:#91556a;border-radius:8px;padding:6px 8px}.callout{padding:18px 20px;border-radius:18px;border:1px solid #cde3fa;background:linear-gradient(120deg,#fff,#eaf5ff)}.callout span{font-size:12px;font-weight:800;color:#257aca}.callout p{font-size:12px;line-height:1.7;color:#5b7897;margin:7px 0 0}.notice{margin:18px 0 0;padding:12px 16px;border-radius:12px;background:#eaf4ff;border:1px solid #c7e1fa;color:#255d91;font-size:12px;line-height:1.5}.notice.error{background:#fff3f4;border-color:#fbc9cd;color:#ab3c53}.guide{padding-bottom:67px}.guide h2{font-size:clamp(25px,3vw,34px);margin:12px 0 17px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.guide article{border:1px solid #e1ebf6;background:#fff;border-radius:17px;padding:22px}.guide article>span{font-size:10px;font-weight:850;letter-spacing:.5px;color:#247de3}.guide h3{font-size:17px;margin:12px 0 8px}.faq p,.guide p{font-size:12px;line-height:1.72;color:#7088a0}.faq{margin-top:31px}.faq h3{font-size:20px}.faq details{background:#fff;border-radius:12px;border:1px solid #dfeafa;padding:15px 18px;margin:8px 0}.faq summary{font-size:12px;font-weight:750;cursor:pointer}.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;color:#7890a8;padding-top:25px;padding-bottom:25px}.foot::before{content:'';display:block;position:absolute}footer{border-top:1px solid #e1eaf7;background:#fff}.busy{position:fixed;inset:0;z-index:110;background:#081a328b;backdrop-filter:blur(5px);display:grid;place-items:center}.busy-card{text-align:center;background:#fff;border-radius:23px;padding:30px;box-shadow:0 28px 70px #102e5f33;width:min(360px,calc(100% - 30px))}.busy-card strong{font-size:20px}.busy-card p{font-size:12px;color:#728ba4;line-height:1.6}.spinner{width:37px;height:37px;border:4px solid #e5effc;border-top-color:#197dea;border-radius:50%;margin:0 auto 17px;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:1050px){.studio-grid{grid-template-columns:minmax(290px,335px) minmax(0,1fr)}.shell{padding:0 18px}.panel{padding:16px}.stage-panel{padding:16px}.stage-frame{padding:8px}}@media(max-width:820px){.studio-grid{display:flex;flex-direction:column}.workspace{order:-1;position:static;width:100%}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.sidebar>.panel:last-child{grid-column:1/-1}.guide-grid{grid-template-columns:1fr 1fr}.stage-frame{min-height:190px}.hero{padding-top:40px}}@media(max-width:620px){.shell{padding:0 13px}.nav{min-height:61px;gap:10px}.nav nav{display:none}.private{margin-left:auto;font-size:10px;padding:6px 8px}.hero{padding-top:35px;padding-bottom:34px}.hero h1{letter-spacing:-1.4px}.hero>p{font-size:13px}.studio-head{align-items:start;flex-direction:column}.studio-head h2{font-size:21px}.sidebar{grid-template-columns:1fr}.stage-frame{padding:5px;min-height:130px}.stage-panel{padding:12px}.toolbar{gap:6px}.tool{min-width:calc(50% - 6px)}.guide-grid{grid-template-columns:1fr}.colors{gap:6px}.panel{border-radius:16px}.hero-proof{font-size:11px}.stage-meta{justify-content:start}.checks{gap:12px 6px}}@media(prefers-reduced-motion:reduce){*{animation-duration:NaNs!important;scroll-behavior:auto!important;transition-duration:NaNs!important}}.empty-guides,.filename,.hint,.label,.mini-note,.mode small,.panel-title p,.range-label,.stage-meta,.tool-prompt,.vp-coords label,.vp-row .vp-description{color:#526c87}.box-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,2fr);column-gap:13px;row-gap:5px;align-items:center;padding:13px;margin-top:10px;background:#f5faff;border:1px solid #dcebf9;border-radius:12px}.box-options[hidden]{display:none!important}.box-options label{font-size:12px;font-weight:700;color:#47647d;display:flex;gap:8px;justify-content:space-between}.box-options input{width:100%;min-width:0}.box-options output{color:#176ac8;font-variant-numeric:tabular-nums}@media(max-width:620px){.box-options{grid-template-columns:1fr}}