.studio-page{padding-top:calc(var(--header-h) + clamp(40px, 5vw, 72px));min-height:100svh}.studio{grid-template:"stage.intro""stage.controls"1fr/minmax(0,7fr) minmax(0,1fr) minmax(0,4fr);align-items:start;row-gap:32px;display:grid}.studio__intro{grid-area:intro;justify-items:start;gap:20px;min-width:0;display:grid}.studio__stage{top:calc(var(--header-h) + 24px);grid-area:stage;min-width:0;position:sticky}.studio__controls{grid-area:controls;align-content:start;justify-items:start;gap:24px;min-width:0;display:grid}.studio__title{overflow-wrap:anywhere;font-size:clamp(44px,4.6vw,84px)}.studio__drop{background:radial-gradient(ellipse at 50% 30%, #d4ab5214, transparent 70%), var(--velvet);text-align:center;border:1px dashed #d4ab5273;justify-items:center;gap:14px;padding:clamp(32px,5vw,64px) 24px;transition:border-color .3s,background-color .3s;display:grid}.studio__drop.is-drag{border-color:var(--gold);background-color:var(--velvet-2);border-style:solid}.studio__drop-art{width:min(420px,80%);margin-bottom:8px}.studio__pick{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;display:flex}.cam{aspect-ratio:4/5;max-height:calc(100svh - var(--header-h) - 64px);background:radial-gradient(ellipse at 50% 40%, var(--velvet-2), var(--black) 75%);isolation:isolate;margin-inline:auto;position:relative;overflow:clip}.cam__video{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .6s var(--ease-out);position:absolute;inset:0}.cam.is-ready .cam__video{opacity:1}.cam.is-mirrored .cam__video{transform:scaleX(-1)}.cam__guide{pointer-events:none;align-content:start;justify-items:center;padding-top:7%;display:grid;position:absolute;inset:0}.cam__oval{aspect-ratio:3/4;width:58%;animation:cam-breathe 2.6s var(--ease-inout) infinite alternate;border:2px dashed #f2d68ed9;border-radius:50%;margin-top:6%;box-shadow:0 0 0 100vmax #09080761}@keyframes cam-breathe{to{border-color:#d4ab5273;scale:1.015}}.cam__tip{color:var(--gold-hi);background:#090807a8;order:-1;padding:7px 12px}.cam__count{font:italic 400 clamp(120px, 22vw, 260px)/1 var(--serif);color:var(--gold-hi);text-shadow:0 8px 40px #000000b3;pointer-events:none;animation:cam-count .85s var(--ease-out) both;place-items:center;display:grid;position:absolute;inset:0}@keyframes cam-count{0%{opacity:0;scale:1.6}30%{opacity:1;scale:1}to{opacity:.2;scale:.92}}.cam__flash{pointer-events:none;background:#fff;animation:.5s ease-out both cam-flash;position:absolute;inset:0}@keyframes cam-flash{0%{opacity:.95}to{opacity:0}}.cam__bar{background:linear-gradient(#0000,#090807cc);grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:48px 24px 22px;display:grid;position:absolute;inset:auto 0 0}.cam__text{min-height:44px;font:600 15px/1 var(--sans);color:var(--on-dark);justify-self:start;padding-inline:4px}.cam__text:hover{color:var(--gold-hi)}.cam__shutter{border:3px solid var(--gold-hi);width:78px;height:78px;transition:transform .3s var(--ease-out), opacity .3s;border-radius:50%;place-items:center;display:grid}.cam__shutter span{background:var(--gold);width:60px;height:60px;transition:transform .25s var(--ease-out), background-color .3s;border-radius:50%}.cam__shutter:not(:disabled):hover span{background:var(--gold-hi)}.cam__shutter:not(:disabled):active span{transform:scale(.86)}.cam__shutter:disabled{opacity:.5;cursor:default}.cam__flip{width:48px;height:48px;color:var(--on-dark);background:#0908078c;border:1px solid #f3ecdd4d;border-radius:50%;justify-self:end;place-items:center;display:grid}.cam__flip svg{width:24px;height:24px}.cam__flip:hover{color:var(--gold-hi);border-color:var(--gold)}.cam__spacer{width:48px}@media (prefers-reduced-motion:reduce){.cam__oval,.cam__count{animation:none}}.studio__view{max-height:calc(100svh - var(--header-h) - 64px);background:var(--velvet);margin-inline:auto;position:relative;overflow:clip}.studio__view img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.studio__view.is-working .studio__before{filter:brightness(.35)saturate(.6);transition:filter .8s var(--ease-out)}.studio__handle{background:var(--gold);pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.studio__handle:after{content:"↔";background:var(--gold);width:48px;height:48px;color:var(--black);border-radius:50%;place-items:center;font-weight:700;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.studio__range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.studio__range:focus-visible+.studio__tag{outline:2px solid var(--gold-hi)}.studio__tag{pointer-events:none;background:#090807b3;padding:6px 10px;position:absolute;top:16px}.studio__tag--l{left:16px}.studio__tag--r{right:16px}.studio__working{text-align:center;place-content:center;justify-items:center;gap:18px;display:grid;position:absolute;inset:0}.studio__working-art{width:min(320px,60vw)}.studio__working .drawn-mask__lines path{animation:studio-draw 2.4s var(--ease-inout) infinite alternate}.studio__working .drawn-mask__eyes path{animation:1.2s ease-in-out infinite alternate glow}@keyframes studio-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.studio__styles{border:0;gap:10px;width:100%;margin:0;padding:0;display:grid}.studio__styles legend{margin-bottom:10px}.studio__styles label{border:1px solid var(--rule-dark);cursor:pointer;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:16px 18px;transition:border-color .3s,background-color .3s;display:grid}.studio__styles label.is-on{border-color:var(--gold);background:#d4ab5214}.studio__styles input{width:20px;height:20px;accent-color:var(--gold)}.studio__styles label>span{gap:2px;display:grid}.studio__styles b{font-weight:700}.studio__styles .mute{font-size:15px}.studio__consent{color:var(--on-dark-mute);cursor:pointer;grid-template-columns:auto 1fr;align-items:start;gap:12px;font-size:15px;line-height:1.5;display:grid}.studio__consent input{width:20px;height:20px;accent-color:var(--gold);margin-top:2px}.studio__consent a{color:var(--gold-hi);text-underline-offset:3px;text-decoration:underline}.studio__error{color:#f3c3b6;background:#e8907a1a;border-left:3px solid #e8907a;padding:14px 16px}.studio__actions{flex-wrap:wrap;align-items:center;gap:12px 24px;display:flex}.studio__hint{font-size:15px}.studio__next{border-top:1px solid var(--rule-dark);gap:8px;width:100%;padding-top:24px;display:grid}.studio__panel h2:focus{outline:none}@media (max-width:1024px){.studio{grid-template:"intro""stage""controls"/minmax(0,1fr)}.studio__stage{position:static}.studio__title{font-size:clamp(44px,12vw,84px)}}
