.stage{display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(var(--header-height) + 1.25rem)}@media(max-width:900px){.stage{position:static}}.stage__frame{position:relative;aspect-ratio:4 / 5;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--gradient-surface);box-shadow:var(--shadow-md);overflow:hidden}.stage__image{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.stage__area{position:absolute;border-radius:4px;outline:2px dashed color-mix(in oklab,var(--brand-primary) 80%,transparent);outline-offset:0;box-shadow:0 0 0 9999px color-mix(in oklab,var(--brand-ink) 14%,transparent);transition:outline-color var(--speed) var(--ease-out),box-shadow var(--speed) var(--ease-out)}.stage__area[hidden]{display:none}.stage__area:before,.stage__area:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none;border:3px solid var(--brand-primary);border-radius:5px}.stage__area:before{clip-path:polygon(0 0,22% 0,22% 3px,3px 3px,3px 22%,0 22%,0 100%,22% 100%,22% calc(100% - 3px),3px calc(100% - 3px),3px 78%,0 78%)}.stage__area:after{clip-path:polygon(100% 0,78% 0,78% 3px,calc(100% - 3px) 3px,calc(100% - 3px) 22%,100% 22%,100% 100%,78% 100%,78% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 78%,100% 78%)}.stage:hover .stage__area{outline-color:var(--brand-primary)}.stage__area.is-active{outline-style:solid;outline-color:var(--brand-primary);box-shadow:0 0 0 9999px color-mix(in oklab,var(--brand-ink) 42%,transparent)}.stage__area-tag{position:absolute;top:-.15rem;left:-.15rem;transform:translateY(-100%);padding:.2rem .55rem;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:var(--brand-primary);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.stage__canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.stage__area:not(.is-active) .stage__canvas{pointer-events:none}.stage__hint{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);margin-inline:auto;width:max-content;max-width:90%;display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-pill);border:0;background:var(--gradient-brand);box-shadow:0 8px 22px -8px color-mix(in oklab,var(--brand-ink) 70%,transparent);font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap;transition:transform var(--speed) var(--ease-spring),box-shadow var(--speed) var(--ease-out)}.stage__hint:hover{transform:translateY(-50%) scale(1.04)}.stage__area.is-active .stage__hint{display:none}.stage__thumbs{display:flex;gap:.6rem;flex-wrap:wrap}.stage__thumb{width:68px;aspect-ratio:4 / 5;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);overflow:hidden;padding:0;transition:transform var(--speed) var(--ease-spring),border-color var(--speed) var(--ease-out),box-shadow var(--speed) var(--ease-out)}.stage__thumb img{width:100%;height:100%;object-fit:cover}.stage__thumb:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.stage__thumb[aria-current=true]{border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in oklab,var(--brand-primary) 35%,transparent)}.stage__outline{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:6%;opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease-out),visibility var(--speed) var(--ease-out)}.stage__outline-shape{stroke:var(--text);stroke-width:5;stroke-linejoin:round;fill:var(--surface)}.stage__outline-detail{stroke:var(--text-subtle);stroke-width:2.5;stroke-linecap:round}.stage.is-outline .stage__outline{opacity:1;visibility:visible}.stage.is-outline .stage__image{opacity:0}.stage__image{transition:opacity var(--speed) var(--ease-out)}.stage.is-outline .stage__area{box-shadow:none;background:color-mix(in oklab,var(--brand-primary) 7%,transparent)}.stage__view{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;padding:.45rem .9rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:var(--step--1);font-weight:600;color:var(--text-muted);cursor:pointer;transition:background-color var(--speed) var(--ease-out),color var(--speed) var(--ease-out)}.stage__view:hover{color:var(--text);background:var(--surface-strong)}.stage__view[aria-pressed=true]{color:#fff;background:var(--gradient-brand);border-color:transparent}.stage__sides{display:none}.stage.is-designing .stage__sides{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem;padding:.3rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);width:fit-content;max-width:100%}.stage__side{padding:.4rem .9rem;border-radius:var(--radius-pill);font-size:var(--step--1);font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:background-color var(--speed) var(--ease-out),color var(--speed) var(--ease-out)}.stage__side:hover{color:var(--text);background:var(--surface-strong)}.stage__side.is-current{color:#fff;background:var(--gradient-brand)}