.studio{--stage-h:clamp(340px, 62vh, 680px)}.studio-grid{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:20px;display:grid}@media (width<=1060px){.studio-grid{grid-template-columns:minmax(0,1fr) 340px}}@media (width<=900px){.studio-grid{grid-template-columns:1fr}.studio{--stage-h:clamp(300px, 56vh, 520px)}}.stage-col{min-width:0;position:sticky;top:80px}@media (width<=900px){.stage-col{position:static}}.stage{height:var(--stage-h);border-radius:var(--radius-lg);border:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow);outline-offset:4px;position:relative;overflow:hidden}.stage canvas[data-view]{width:100%;height:100%;position:absolute;inset:0}.stage.is-dragover{box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 45%, transparent), var(--shadow)}.stage-overlay{pointer-events:none;position:absolute;inset:0}.frame-box{border:1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent);pointer-events:none;border-radius:2px;position:absolute}.image-box{outline:1.5px solid color-mix(in srgb, var(--brand-2) 85%, white);outline-offset:0;cursor:grab;pointer-events:auto;box-shadow:0 0 0 9999px color-mix(in srgb, var(--bg) 0%, transparent);position:absolute}.image-box:active{cursor:grabbing}.stage.no-image-box .image-box{outline-color:#0000}.handle{background:var(--surface);border:2px solid var(--brand-2);width:18px;height:18px;box-shadow:var(--shadow-sm);pointer-events:auto;touch-action:none;border-radius:50%;position:absolute}.handle:after{content:"";position:absolute;inset:-12px}.h-n,.h-s{cursor:ns-resize;margin-left:-9px;left:50%}.h-e,.h-w{cursor:ew-resize;margin-top:-9px;top:50%}.h-n{top:-9px}.h-s{bottom:-9px}.h-e{right:-9px}.h-w{left:-9px}.dropzone{background:color-mix(in srgb, var(--surface) 72%, transparent);place-items:center;padding:20px;display:grid;position:absolute;inset:0}.dz-inner{text-align:center;max-width:440px}.dz-icon{background:var(--brand-soft);width:64px;height:64px;color:var(--brand-2);border-radius:20px;place-items:center;margin-bottom:14px;display:inline-grid}:root[data-theme=dark] .dz-icon{color:var(--accent)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .dz-icon{color:var(--accent)}}.dz-title{font-family:var(--font-display);color:var(--ink);margin:0 0 4px;font-size:clamp(28px,3.4vw,38px);line-height:1.05}.dz-sub{color:var(--muted);margin:6px 0 10px;font-size:14px}.dz-meta{color:var(--muted);margin:14px 0 0;font-size:13px}.dz-pick{cursor:pointer}.dz-samples{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:18px;display:flex}.sample{border:2px solid var(--line);background:var(--surface);border-radius:10px;width:68px;height:52px;padding:0;transition:border-color .15s,transform .15s;overflow:hidden}.sample:hover{border-color:var(--brand-2);transform:translateY(-1px)}.sample img{object-fit:cover;width:100%;height:100%}.stage-busy{background:color-mix(in srgb, var(--bg) 45%, transparent);backdrop-filter:blur(2px);place-items:center;display:grid;position:absolute;inset:0}.busy-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);align-items:center;gap:14px;min-width:min(360px,90%);padding:14px 16px;display:flex}.busy-card>div{flex:1;gap:3px;display:grid}.progress{background:var(--surface-3);border-radius:999px;height:5px;margin-top:4px;overflow:hidden}.progress span{background:var(--brand-2);border-radius:inherit;width:0%;height:100%;transition:width .25s;display:block}.compare-tag{background:var(--ink);color:var(--bg);letter-spacing:.04em;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;position:absolute;top:12px;left:12px}.stage-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;display:flex}.stage-info{min-height:36px}.panel{gap:14px;min-width:0;display:grid}.panel-sec{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);min-width:0;box-shadow:var(--shadow-sm);margin:0;padding:16px 16px 18px}.panel-sec legend{float:left;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:0;font-size:15.5px;font-weight:750;display:flex}.panel-sec legend+*{clear:both}.step{background:var(--brand);width:24px;height:24px;color:var(--brand-ink);border-radius:50%;place-items:center;font-size:13px;font-weight:800;display:inline-grid}.panel.is-empty .panel-sec[data-sec=export] .btn{cursor:not-allowed}.size-pane{margin-top:12px}.ratio-chips .chip{justify-content:center;min-width:58px}.custom-ratio{margin-top:10px}.custom-ratio input{width:86px}.sides-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.sides-grid .field+.field{margin-top:0}.wh-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin-top:10px;display:grid}.wh-row .field+.field{margin-top:0}.wh-row>span{color:var(--muted);padding-bottom:10px}.field output{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:4px;font-weight:700}.position-row{gap:10px 12px}.align-grid{grid-template-columns:repeat(3,22px);gap:3px;display:grid}.align-grid button{border:1px solid var(--line-2);background:var(--surface-2);border-radius:5px;place-items:center;width:22px;height:22px;padding:0;display:grid}.align-grid button span{background:var(--faint);border-radius:50%;width:6px;height:6px}.align-grid button:hover span,.align-grid button[aria-pressed=true] span{background:var(--brand-2)}.fill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.fill-opt{text-align:left;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:12px;grid-template-rows:auto auto;grid-template-columns:22px 1fr;align-items:center;column-gap:9px;min-height:58px;padding:10px 11px;transition:border-color .15s,background .15s,box-shadow .15s;display:grid;position:relative}.fill-opt svg{color:var(--muted);grid-row:span 2}.fill-opt .fo-name{font-size:14px;font-weight:700;line-height:1.2}.fill-opt .fo-note{color:var(--muted);font-size:12px;line-height:1.25}.fill-opt .badge{padding:1px 7px;font-size:10.5px;position:absolute;top:-8px;right:8px}.fill-opt:hover{border-color:var(--ink-2)}.fill-opt[aria-checked=true]{border-color:var(--brand-2);background:color-mix(in srgb, var(--brand-soft) 60%, var(--surface));box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 20%, transparent)}.fill-opt[aria-checked=true] svg{color:var(--brand-2)}:root[data-theme=dark] .fill-opt[aria-checked=true] svg{color:var(--accent)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fill-opt[aria-checked=true] svg{color:var(--accent)}}.fill-opts{gap:10px;margin-top:14px;display:grid}.fill-opts .hint{margin:0}.advanced{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}.advanced summary{cursor:pointer;color:var(--ink-2);font-size:14px;font-weight:650}.dl-row .btn{flex:1}.vault-slot iframe{background:0 0;border:0;border-radius:12px;width:100%;min-height:200px;display:block}.vault-dialog{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);width:min(560px,100vw - 24px);max-height:calc(100vh - 40px);color:var(--ink);box-shadow:var(--shadow-lg);padding:0}.vault-dialog::backdrop{backdrop-filter:blur(3px);background:#080e0b8c}.vault-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:14px;display:flex}.vault-head strong{align-items:center;gap:8px;display:inline-flex}.vault-frame-wrap iframe{border:0;width:100%;height:70vh;max-height:640px;display:block}.home-hero{padding-top:clamp(16px,2.4vw,28px)}.home-hero-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 40px;margin-bottom:18px;display:grid}@media (width<=860px){.home-hero-head{grid-template-columns:1fr}}.home-hero h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(38px,5.2vw,68px);font-weight:400;line-height:1}.home-hero .lead{margin:10px 0 0;font-size:clamp(16px,1.4vw,18px)}.hero-points{color:var(--ink-2);gap:6px;margin:0;padding:0;font-size:14px;list-style:none;display:grid}@media (width<=860px){.hero-points{flex-wrap:wrap;gap:6px 16px;display:flex}}.hero-points li{white-space:nowrap;align-items:center;gap:8px;margin:0;display:flex}.hero-points svg{color:var(--ok);flex:none}
