body.tryon{background:var(--blue);min-height:100svh}.studio{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;max-width:1400px;margin:0 auto;padding:96px var(--gutter) 28px;align-items:start}.stage-wrap{position:sticky;top:96px}.stage{position:relative;width:100%;aspect-ratio:4 / 3;max-height:calc(100svh - 190px);border:4px solid var(--navy);border-radius:26px;overflow:hidden;box-shadow:var(--pop-lg);background:radial-gradient(circle at 50% 40%,var(--sky),var(--blue) 70%);touch-action:none;margin:0 auto}.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stage video{opacity:0}.stage.cam video{opacity:1}.stage.mirror video,.stage.mirror canvas{transform:scaleX(-1)}.pill{position:absolute;top:14px;left:14px;z-index:3;padding:7px 12px;border-radius:999px;background:var(--navy);color:var(--cream);font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}.pill:empty{display:none}.pill.ok:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#25ca58;margin-right:8px;animation:blink 2s infinite}.hint{position:absolute;bottom:14px;left:50%;translate:-50% 0;z-index:3;padding:8px 14px;border-radius:999px;background:var(--yellow);border:2px solid var(--navy);font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}.hint.on{opacity:1}.gate{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:24px;color:var(--cream);background:radial-gradient(circle at 50% 30%,#2ea8f5e6,#0b1f4df5)}.gate[hidden]{display:none}.gate-logo{width:110px;border-radius:50%;border:3px solid var(--navy);box-shadow:var(--pop);background:#fff;animation:bob 3s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(4deg)}}.gate h1{font-size:clamp(40px,5vw,68px);text-shadow:.05em .05em 0 var(--navy)}.gate h1 em{font-style:normal;color:var(--yellow)}.gate p{max-width:42ch;margin:0;font-weight:600}.gate small{opacity:.8}.gate-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}.stage-bar{display:flex;gap:10px;justify-content:center;margin-top:18px}.chip{border:2.5px solid var(--navy);background:var(--cream);color:var(--navy);border-radius:999px;padding:10px 16px;min-height:44px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:3px 3px 0 var(--navy);transition:transform .18s var(--spring)}.chip:hover{transform:translate(-1px,-2px)}.chip.danger{background:#ffe1e6}.panel{display:grid;gap:16px}.block{background:var(--cream);border:3px solid var(--navy);border-radius:20px;padding:18px;box-shadow:var(--pop)}.block h2{font-size:34px;color:var(--navy);margin:8px 0 12px}.tip{margin:8px 0 12px;font-size:15px}.swatches{display:flex;flex-wrap:wrap;gap:10px}.sw{width:52px;height:52px;border-radius:50%;border:3px solid var(--navy);padding:0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);transition:transform .18s var(--spring)}.sw:hover{transform:scale(1.1)}.sw:before{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--c0, #fff);box-shadow:0 0 0 2px #0b1f4d59}.fronts{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}.fronts button{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:8px 14px;min-height:40px;font:700 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}.fronts button[aria-checked=true]{background:var(--yellow);box-shadow:3px 3px 0 var(--navy)}.fronts i{width:14px;height:14px;border-radius:50%;border:2px solid var(--navy)}.fronts .dot-white{background:#fff}.fronts .dot-black{background:#1c1c1f}.sw.sold{opacity:.45}.sw.sold:after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:var(--navy);rotate:-45deg}.sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--orange)}.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tray button{background:none;border:0;padding:4px;border-radius:12px;transition:transform .18s var(--spring),background .18s}.tray button:hover{transform:scale(1.12) rotate(-6deg);background:#ffc21a59}.tray img{width:100%;filter:drop-shadow(2px 3px 0 rgba(11,31,77,.45))}.upload{display:flex;justify-content:center;margin-top:12px;padding:12px;border:2.5px dashed var(--navy);border-radius:14px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.upload input{position:absolute;opacity:0;width:1px;height:1px}.upload:hover{background:#fff}.placed{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.placed button{width:54px;height:54px;padding:3px;border-radius:12px;border:2.5px solid transparent;background:#fff}.placed button[aria-pressed=true]{border-color:var(--orange)}.placed img{width:100%}.slider{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;margin:8px 0;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.slider input{accent-color:var(--orange);width:100%}.fit summary{cursor:pointer;list-style:none}.fit summary:after{content:"+";float:right;font:400 24px var(--display);line-height:1}.fit[open] summary:after{content:"-"}.total{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--yellow);border:3px solid var(--navy);border-radius:20px;padding:16px 18px;box-shadow:var(--pop)}.total strong{display:block;font:400 38px var(--display);color:var(--navy);line-height:1.05;margin-top:4px}.total small{font-weight:700}.total .label:before{display:none}.sheet{width:min(640px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:0;border:4px solid var(--navy);border-radius:26px;background:var(--cream);box-shadow:var(--pop-lg);color:var(--ink)}.sheet::backdrop{background:#0b1f4db3;backdrop-filter:blur(3px)}.sheet form,.sheet .done{padding:26px;display:grid;gap:12px;position:relative}.sheet h2{font-size:40px;color:var(--navy)}.sheet .x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--navy);background:#fff;font-size:26px;line-height:1}.preview{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;background:#fff;border:2.5px solid var(--navy);border-radius:16px;padding:10px}.preview img{width:100%;border-radius:10px;background:radial-gradient(circle,#eef4ff,#d8e6ff)}.preview div{font-size:15px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sheet label{display:grid;gap:6px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.sheet input:not([type=checkbox]),.sheet textarea,.sheet select{font:16px var(--body);padding:12px;border:2.5px solid var(--navy);border-radius:12px;background:#fff;color:var(--ink)}.sheet .check{display:flex;gap:10px;align-items:flex-start;text-transform:none;font:600 15px var(--body);letter-spacing:0}.sheet .check input{width:22px;height:22px;accent-color:var(--navy);flex:none}.sheet [hidden]{display:none}.form-msg{margin:0;font-weight:700;color:#b0002a;min-height:1.3em}.done{text-align:center;justify-items:center}.done img{width:120px;border-radius:50%;border:3px solid var(--navy)}@media (max-width: 960px){.studio{grid-template-columns:1fr;padding-top:84px;gap:16px}.stage-wrap{position:relative;top:0}.stage{aspect-ratio:3 / 4;max-height:62svh}.stage-bar{margin-top:12px}.total{position:sticky;bottom:10px;z-index:10;padding:10px 12px}.total strong{font-size:28px}.total small{font-size:12px}.total .btn{min-height:46px;padding:10px 16px;font-size:12px}.nav #orderTop{display:none}}@media (max-width: 520px){.grid2{grid-template-columns:1fr}.preview{grid-template-columns:110px 1fr}.tray{grid-template-columns:repeat(4,1fr)}.slider{grid-template-columns:90px 1fr}}