:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-synthesis:none;background:#080808;color:#fff}
*{box-sizing:border-box}
html,body{touch-action:none;overscroll-behavior:none;overflow:hidden}
body{margin:0;font-size:16px;width:100%;height:100vh;height:100dvh;background:#050505;overflow:hidden}
.camera-backdrop{position:fixed;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;filter:blur(28px) brightness(.65) saturate(.85);opacity:0;transition:opacity 360ms ease}
.camera-app{position:fixed;z-index:1;left:var(--camera-left,0px);top:var(--camera-top,0px);width:var(--camera-width,min(100vw,56.25dvh));height:var(--camera-height,min(177.77777778vw,100dvh));overflow:hidden;background:#101010;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none}
.camera-feed{position:absolute;inset:0;pointer-events:none}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video{visibility:hidden}
.stage.live video{visibility:visible}
.stage video.mirrored{transform:scaleX(-1)}
.camera-preview{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.stage.live.canvas-preview .camera-preview{visibility:visible}
.stage.live.canvas-preview video{opacity:0}
.character{--figure-height:calc(var(--camera-height,100dvh) * .68);position:absolute;left:50%;top:41%;height:var(--figure-height);width:calc(var(--figure-height) / 2);transform:translate(-50%,-50%) scale(.95);transform-origin:center;cursor:grab;touch-action:none;user-select:none}
.character.dragging{cursor:grabbing}
.character img{position:relative;z-index:1;display:block;height:100%;width:100%;pointer-events:none;max-width:none}
.character-shadow{display:none;position:absolute;z-index:0;left:15.2%;top:111%;width:70%;height:6.6%;pointer-events:none}
.character img[data-rig="xiaotiao"]~.character-shadow{display:block}
.character-motion{display:none;position:absolute;z-index:1;left:-20%;top:-12%;width:140%;height:124%;pointer-events:none}
.motion-ready .character-motion{display:block}
.motion-ready img{opacity:0}
.character:focus-visible{outline:2px solid white;outline-offset:4px}


button,input{font:inherit}
button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.3;cursor:default}
button:focus-visible,input:focus-visible,.character:focus-visible{outline:2px solid white;outline-offset:4px}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:0;flex-shrink:0}
.capture-controls{position:absolute;z-index:2;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:220px;height:76px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.capture-controls button{pointer-events:auto}
.shutter-button{display:grid;place-items:center;width:76px;height:76px;padding:5px;border:3px solid #fff;border-radius:50%;background:transparent}
.shutter-button>span{display:block;width:100%;height:100%;background:#fff;border-radius:50%}
.shutter-button:active>span{background:#ccc}
.flip-button{position:absolute;right:-15px;top:16px}
.flip-button{background:#080808b3;border-radius:50%}
@media(max-width:600px){.capture-controls{bottom:calc(18px + env(safe-area-inset-bottom))}}
@media(max-height:520px){.capture-controls{bottom:12px;width:152px;height:52px}.shutter-button{width:52px;height:52px;padding:4px;border-width:2px}.flip-button{width:32px;height:32px;right:-2px;top:10px}}
:root[data-camera-orientation="landscape"] .camera-backdrop.ready{opacity:1}
:root[data-camera-orientation="landscape"] .character{--figure-height:calc(var(--camera-height,100dvh) * .72)}
:root[data-camera-orientation="landscape"] .capture-controls{left:auto;right:max(16px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);width:76px;height:min(190px,calc(100% - 32px));flex-direction:column}
:root[data-camera-orientation="landscape"] .shutter-button{width:clamp(52px,14vh,76px);height:clamp(52px,14vh,76px)}
:root[data-camera-orientation="landscape"] .flip-button{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);width:44px;height:44px}
@media(prefers-reduced-motion:reduce){.camera-backdrop{transition:none}}