:root {
  --yz-camera-black: #050508;
  --yz-camera-paper: rgb(var(--brand-white));
  --yz-camera-ink: rgb(var(--brand-black));
  --yz-cinnabar: rgb(var(--brand-red));
  --yz-cinnabar-soft: rgb(var(--brand-red) / .28);
  --yz-glass-fill: rgb(12 13 16 / .28);
  --yz-glass-strong: rgb(12 13 16 / .58);
  --yz-glass-line: rgb(255 255 255 / .22);
  --yz-copy: rgb(255 255 255 / .92);
  --yz-muted: rgb(255 255 255 / .7);
  --yz-safe-top: max(1rem, env(safe-area-inset-top));
  --yz-safe-right: max(1rem, env(safe-area-inset-right));
  --yz-safe-bottom: max(1rem, env(safe-area-inset-bottom));
  --yz-safe-left: max(1rem, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html, body.motion-v2 { min-width: 0; min-height: 100%; margin: 0; background: var(--yz-camera-black); }
body.motion-v2 { overflow: hidden; color: var(--yz-copy); font-family: var(--font-ui); -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid rgb(var(--light-direct)); outline-offset: 3px; }
[hidden] { display: none !important; }

.motion-camera { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: var(--yz-camera-black); isolation: isolate; }
.motion-camera-stage { position: absolute; inset: 0; overflow: hidden; background: var(--yz-camera-black); }
.motion-camera-stage video, .motion-camera-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion-camera-stage video { z-index: 0; object-fit: cover; background: var(--yz-camera-black); }
.motion-camera-stage #motionPrivacy { z-index: 1; pointer-events: none; }
.motion-camera-stage #motionPreview { z-index: 2; pointer-events: none; }
.motion-camera[data-mirrored="true"] .motion-camera-stage video { transform: scaleX(-1); }
.motion-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.motion-topbar { position: absolute; z-index: 5; top: 0; right: 0; left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .8rem; padding: var(--yz-safe-top) var(--yz-safe-right) .7rem var(--yz-safe-left); pointer-events: none; }
.motion-topbar > * { pointer-events: auto; }
.motion-back, .motion-mode-switch, .motion-icon-button, .motion-live-hud, .motion-joint-picker, .motion-secondary-action { border: 1px solid var(--yz-glass-line); background: var(--yz-glass-fill); box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .14); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); }
.motion-back, .motion-icon-button { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; border-radius: 50%; color: var(--yz-copy); text-decoration: none; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.motion-nav-actions { display: flex; gap: .42rem; }
.motion-icon-button { border: 1px solid var(--yz-glass-line); }
.motion-icon-button:active, .motion-back:active { transform: scale(.94); }
.motion-icon { display: block; width: 1.15rem; height: 1.15rem; background: currentColor; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.motion-icon-back { mask-image: url("../../assets/icons/arrow-left.svg"); -webkit-mask-image: url("../../assets/icons/arrow-left.svg"); }
.motion-icon-tools { mask-image: url("../../assets/icons/sliders-horizontal.svg"); -webkit-mask-image: url("../../assets/icons/sliders-horizontal.svg"); }
.motion-icon-privacy { mask-image: url("../../assets/icons/eye-off.svg"); -webkit-mask-image: url("../../assets/icons/eye-off.svg"); }
.motion-icon-camera-switch { mask-image: url("../../assets/icons/refresh-cw.svg"); -webkit-mask-image: url("../../assets/icons/refresh-cw.svg"); }
.motion-icon-download { mask-image: url("../../assets/icons/download.svg"); -webkit-mask-image: url("../../assets/icons/download.svg"); }
.motion-mode-switch { display: inline-flex; justify-self: center; padding: .2rem; border-radius: 999px; }
.motion-mode-switch button { min-width: clamp(3.45rem, 18vw, 4.7rem); min-height: 2.35rem; border: 0; border-radius: 999px; color: rgb(255 255 255 / .76); background: transparent; font-size: .88rem; font-weight: 700; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.motion-mode-switch button.is-active { color: var(--yz-camera-ink); background: var(--yz-camera-paper); transform: translateY(-1px); }
.motion-mode-switch button[data-mode="gait"] { color: rgb(var(--light-direct) / .9); }
.motion-top-actions { display: flex; justify-content: end; gap: .42rem; }
.motion-privacy-toggle[aria-pressed="true"] { border-color: rgb(var(--brand-red) / .72); color: #fff; background: rgb(var(--brand-red) / .52); }
@media (max-width: 26rem) { .motion-privacy-toggle { display: none; } }
.motion-live-dot { display: block; width: .43rem; height: .43rem; border-radius: 50%; background: var(--yz-cinnabar); box-shadow: 0 0 0 4px rgb(var(--brand-red) / .16); }
.motion-tools-drawer { position: absolute; z-index: 9; top: calc(var(--yz-safe-top) + 3.05rem); right: var(--yz-safe-right); width: min(17rem, calc(100vw - var(--yz-safe-left) - var(--yz-safe-right))); padding: .82rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 1rem; color: var(--yz-copy); background: rgb(10 11 14 / .58); box-shadow: 0 1rem 2.8rem rgb(0 0 0 / .28); backdrop-filter: blur(20px) saturate(1.18); -webkit-backdrop-filter: blur(20px) saturate(1.18); animation: motion-pop-in var(--dur-med) var(--ease-emphasized) both; }
.motion-tools-drawer[data-closing="true"] { pointer-events: none; animation: motion-pop-out var(--dur-fast) var(--ease-standard) both; }
.motion-tools-drawer header { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 750; }
.motion-tools-drawer header button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: var(--yz-copy); background: transparent; font-size: 1.1rem; }
.motion-tools-drawer p { margin: .9rem 0 .42rem; color: var(--yz-muted); font-size: .72rem; font-weight: 700; }
.motion-tools-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .28rem; }
.motion-tools-options button { min-height: 2.35rem; border: 1px solid rgb(255 255 255 / .14); border-radius: .68rem; color: var(--yz-muted); background: rgb(255 255 255 / .06); font-size: .71rem; font-weight: 700; }
.motion-tools-options button.is-active { border-color: rgb(var(--brand-red) / .72); color: #fff; background: rgb(var(--brand-red) / .42); }
.motion-brand-watermark { position: absolute; z-index: 1; top: calc(var(--yz-safe-top) + 10rem); right: calc(var(--yz-safe-right) + .8rem); width: min(24vw, 18rem); min-width: 8rem; max-width: calc(100vw - var(--yz-safe-left) - var(--yz-safe-right) - 3rem); max-height: 28dvh; opacity: .15; filter: blur(1.2px); object-fit: contain; object-position: top right; pointer-events: none; }
.motion-live-hud { position: absolute; z-index: 5; top: calc(var(--yz-safe-top) + 4.6rem); left: var(--yz-safe-left); display: flex; align-items: flex-start; gap: .62rem; width: min(29rem, calc(100vw - var(--yz-safe-left) - var(--yz-safe-right))); padding: .78rem .9rem; border-radius: 1rem; pointer-events: none; }
.motion-live-dot { flex: 0 0 auto; margin-top: .45rem; }
.motion-live-hud p { margin: 0; }
.motion-live-hud strong, .motion-live-hud span { display: block; }
.motion-live-hud strong { color: var(--yz-copy); font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.motion-live-hud span { margin-top: .18rem; color: var(--yz-muted); font-size: .84rem; line-height: 1.45; }
@media (max-width: 42rem) {
  .motion-topbar { grid-template-columns: auto minmax(0, 1fr); gap: .55rem .6rem; }
  .motion-mode-switch { min-width: 0; justify-self: stretch; }
  .motion-mode-switch button { min-width: 0; flex: 1 1 0; }
  .motion-top-actions { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .motion-live-hud { top: calc(var(--yz-safe-top) + 8rem); }
  .motion-tools-drawer { top: calc(var(--yz-safe-top) + 6.6rem); }
}

.motion-authorization { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; pointer-events: none; }
.motion-authorize-content { display: grid; justify-items: center; gap: .52rem; pointer-events: auto; }
.motion-launch { width: min(100% - 2rem, 24rem); padding: 1rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 1.25rem; background: rgb(10 11 14 / .28); box-shadow: 0 1rem 2.8rem rgb(0 0 0 / .22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.motion-launch-kicker { margin: 0; color: rgb(255 255 255 / .62); font-size: .68rem; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.motion-launch-model { width: 100%; margin: -.08rem 0 .2rem; color: rgb(255 255 255 / .7); font-size: .72rem; font-weight: 650; line-height: 1.5; text-align: center; }
.motion-authorize-button { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border: 1px solid rgb(255 255 255 / .72); border-radius: 50%; color: var(--yz-camera-ink); background: var(--yz-camera-paper); box-shadow: 0 .85rem 2.4rem rgb(0 0 0 / .28), inset 0 0 0 .22rem rgb(0 0 0 / .035); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease); }
.motion-authorize-button:hover { transform: scale(1.06); box-shadow: 0 1.15rem 2.8rem rgb(0 0 0 / .36), inset 0 0 0 .22rem rgb(0 0 0 / .035); }
.motion-authorize-button:disabled { opacity: 1; transform: none; }
.motion-authorize-mark { display: block; width: 1.55rem; height: 1.55rem; background: currentColor; mask: url("../../assets/icons/camera.svg") center / contain no-repeat; -webkit-mask: url("../../assets/icons/camera.svg") center / contain no-repeat; transform-origin: center; }
.motion-authorize-content b { color: var(--yz-copy); font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; }
.motion-authorize-content small { color: var(--yz-muted); font-size: .68rem; font-weight: 650; }
.motion-image-upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.motion-upload-button { width: min(100%, 17rem); min-height: 2.65rem; margin-top: .32rem; border: 1px solid rgb(255 255 255 / .56); border-radius: .82rem; color: var(--yz-copy); background: rgb(255 255 255 / .1); font-size: .78rem; font-weight: 760; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.motion-upload-button:hover { border-color: rgb(var(--light-direct) / .85); background: rgb(var(--light-direct) / .16); transform: translateY(-1px); }
.motion-upload-hint { max-width: 18rem; margin-top: -.18rem; line-height: 1.4; text-align: center; }
.motion-authorize-game { margin-top: .38rem; padding: .48rem .78rem; border: 1px solid rgb(255 255 255 / .5); border-radius: 999px; color: var(--yz-copy); background: rgb(255 255 255 / .1); font: 700 .72rem/1 var(--font-ui); cursor: pointer; }
.motion-authorize-game:hover { border-color: var(--yz-cinnabar); color: var(--yz-cinnabar); background: rgb(255 255 255 / .18); }
.motion-camera[data-camera-starting="true"] .motion-authorize-mark { animation: motion-authorize-spin .92s infinite; }
.motion-camera[data-camera-starting="true"] .motion-authorize-button { color: var(--yz-cinnabar); box-shadow: 0 .7rem 2.1rem rgb(0 0 0 / .24), inset 0 0 0 .22rem rgb(var(--brand-red) / .12); }

.motion-loading { position: absolute; z-index: 14; inset: 0; display: grid; place-items: center; padding: var(--yz-safe-top) var(--yz-safe-right) var(--yz-safe-bottom) var(--yz-safe-left); overflow: hidden; color: #121316; background: radial-gradient(circle at 50% 21%, rgb(255 255 255 / .98), rgb(247 245 239 / .9) 38%, rgb(225 223 216 / .82) 100%); animation: motion-surface-in var(--dur-med) var(--ease-standard) both; }
.motion-loading::before, .motion-loading::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.motion-loading::before { width: min(72vw, 35rem); aspect-ratio: 1; border: 1px solid rgb(19 20 23 / .08); box-shadow: 0 0 0 2.4rem rgb(255 255 255 / .18), 0 0 0 5.5rem rgb(19 20 23 / .025); }
.motion-loading::after { width: min(108vw, 56rem); aspect-ratio: 1; border: 1px solid rgb(19 20 23 / .045); }
.motion-loading-card { position: relative; z-index: 1; display: grid; justify-items: center; width: min(100%, 20rem); padding: 1.2rem 1.1rem 1rem; border: 1px solid rgb(255 255 255 / .84); border-radius: 1.45rem; color: #17181b; background: rgb(255 255 255 / .56); box-shadow: 0 1.1rem 3rem rgb(29 29 31 / .14), inset 0 1px rgb(255 255 255 / .8); text-align: center; backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); }
.motion-loading-brand { display: grid; width: 2.7rem; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid rgb(16 17 19 / .12); border-radius: 50%; background: #fff; box-shadow: 0 .45rem 1.4rem rgb(17 18 21 / .13); }
.motion-loading-brand img { width: 100%; height: 100%; padding: .2rem; object-fit: contain; }
.motion-loading-ring { --motion-load-progress: 0%; position: relative; display: grid; width: 6.5rem; aspect-ratio: 1; place-items: center; margin: 1rem 0 .78rem; border-radius: 50%; background: conic-gradient(#16171a var(--motion-load-progress), rgb(22 23 26 / .12) 0); box-shadow: 0 .6rem 1.6rem rgb(17 18 21 / .1); transition: background var(--dur-fast) var(--ease); }
.motion-loading-ring::before { position: absolute; inset: .36rem; border-radius: inherit; background: rgb(255 255 255 / .9); content: ""; }
.motion-loading-ring b { position: relative; z-index: 1; color: #151619; font-family: var(--font-data); font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.motion-loading-copy { display: grid; gap: .28rem; min-height: 4.25rem; }
.motion-loading-copy p { margin: 0; color: rgb(20 21 24 / .55); font-size: .66rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
.motion-loading-copy strong { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -.035em; }
.motion-loading-copy span { color: rgb(20 21 24 / .64); font-size: .73rem; font-weight: 620; line-height: 1.48; }
.motion-loading-game { width: 100%; min-height: 2.8rem; margin-top: .8rem; border: 1px solid rgb(14 15 17 / .82); border-radius: .88rem; color: #fff; background: linear-gradient(135deg, rgb(19 20 23 / .94), rgb(47 48 52 / .88)); box-shadow: 0 .55rem 1.2rem rgb(15 15 17 / .15); font-size: .78rem; font-weight: 760; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.motion-loading-game:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 .75rem 1.35rem rgb(15 15 17 / .2); }
.motion-loading-game:disabled { color: rgb(255 255 255 / .56); background: rgb(19 20 23 / .56); }

.motion-game-preload { position: fixed; width: 1px; height: 1px; overflow: hidden; visibility: hidden; pointer-events: none; }
.motion-game-preload iframe { width: 1px; height: 1px; border: 0; }
.motion-game { position: fixed; z-index: 18; inset: 0; overflow: hidden; color: #17181b; background: #121317; animation: motion-surface-in var(--dur-med) var(--ease-standard) both; }
.motion-game-topbar { position: absolute; z-index: 2; top: calc(var(--yz-safe-top) + .55rem); left: calc(var(--yz-safe-left) + .55rem); display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; width: min(22rem, calc(100vw - var(--yz-safe-left) - var(--yz-safe-right) - 1.1rem)); padding: .52rem .58rem .52rem .72rem; border: 1px solid rgb(255 255 255 / .68); border-radius: .82rem; background: rgb(18 19 23 / .56); box-shadow: 0 .6rem 1.5rem rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .2); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.motion-game-topbar div { display: grid; gap: .12rem; min-width: 0; }
.motion-game-topbar p { margin: 0; color: rgb(255 255 255 / .6); font-size: .62rem; font-weight: 780; letter-spacing: .12em; }
.motion-game-topbar strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; }
.motion-game-topbar span { color: rgb(255 255 255 / .7); font-size: .68rem; line-height: 1.35; }
.motion-game-topbar button { flex: 0 0 auto; min-height: 2.1rem; padding: 0 .62rem; border: 1px solid rgb(255 255 255 / .66); border-radius: .66rem; color: #17181b; background: #fff; font-size: .72rem; font-weight: 750; }
.motion-game-mount { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #121317; }
.motion-game-mount iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

.motion-countdown { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.motion-countdown span { display: grid; width: min(26vw, 8rem); aspect-ratio: 1; place-items: center; border: 1px solid rgb(255 255 255 / .62); border-radius: 50%; background: rgb(7 8 10 / .3); box-shadow: 0 1rem 3rem rgb(0 0 0 / .22); font-family: var(--font-display); font-size: clamp(3.5rem, 13vw, 6.5rem); font-weight: 600; line-height: 1; text-shadow: 0 2px 1rem rgb(0 0 0 / .48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.motion-countdown.is-ticking span { animation: motion-countdown-tick .66s var(--ease); }

.motion-rom-readouts { position: absolute; z-index: 5; top: 45%; right: var(--yz-safe-right); left: var(--yz-safe-left); display: flex; justify-content: space-between; pointer-events: none; }
.motion-rom-readout { display: grid; gap: .3rem; min-width: 6.8rem; padding: .6rem .72rem; border: 1px solid var(--yz-glass-line); border-radius: 1rem; background: var(--yz-glass-fill); box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .14); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); }
.motion-rom-readout.is-left { border-color: rgb(var(--brand-red) / .72); }
.motion-rom-readout > span { color: var(--yz-muted); font-size: .72rem; font-weight: 700; }
.motion-rom-measures { display: grid; gap: .24rem; }
.motion-rom-measure { display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-content: end; gap: .12rem; min-width: 5.2rem; }
.motion-rom-measure b { margin-right: auto; color: var(--yz-muted); font-size: .62rem; font-weight: 700; }
.motion-rom-measure strong { font-family: var(--font-data); color: #fff; font-size: 1.25rem; letter-spacing: -.06em; text-shadow: 0 0 .7rem rgb(255 255 255 / .26); }
.motion-rom-measure small { color: var(--yz-muted); font-size: .68rem; }

.motion-bottom-hud { position: absolute; z-index: 6; right: var(--yz-safe-right); bottom: var(--yz-safe-bottom); left: var(--yz-safe-left); display: grid; justify-items: center; gap: .72rem; pointer-events: none; }
.motion-bottom-hud > *, .motion-bottom-hud button { pointer-events: auto; }
.motion-controls { display: grid; justify-items: center; gap: .58rem; width: min(100%, 24rem); }
.motion-joint-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem; width: 100%; }
.motion-joint-picker { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .22rem; padding: .22rem; border-radius: 1rem; overflow-x: auto; scrollbar-width: none; }
.motion-joint-picker button { min-width: 4.4rem; min-height: 2.65rem; border: 0; border-radius: .78rem; color: var(--yz-muted); background: transparent; font-size: .88rem; font-weight: 700; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.motion-joint-picker button.is-active { color: #fff; background: rgb(var(--brand-red) / .58); }
.motion-joint-picker button { display: grid; place-content: center; gap: .05rem; }
.motion-joint-picker button b { font-size: .86rem; line-height: 1; }
.motion-joint-picker button small { color: inherit; font-size: .64rem; font-weight: 650; line-height: 1.1; }
.motion-rom-sequence { width: min(100%, 22rem); margin: 0; padding: .46rem .68rem; border: 1px solid rgb(255 255 255 / .16); border-radius: .78rem; color: rgb(255 255 255 / .76); background: rgb(8 9 11 / .2); box-shadow: inset 0 1px rgb(255 255 255 / .05); font-size: .67rem; font-weight: 680; line-height: 1.42; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.motion-photo-shutter, .motion-record-shutter { display: grid; width: 5rem; height: 5rem; place-items: center; border: .24rem solid #fff; border-radius: 50%; color: #fff; background: rgb(6 7 9 / .16); box-shadow: 0 .8rem 2rem rgb(0 0 0 / .24), inset 0 0 0 .18rem rgb(0 0 0 / .14); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.motion-photo-shutter:hover, .motion-record-shutter:hover { transform: scale(1.045); }
.motion-photo-core { width: 3.9rem; height: 3.9rem; border: 1px solid rgb(255 255 255 / .54); border-radius: 50%; }
.motion-record-shutter { width: 4.55rem; height: 4.55rem; }
.motion-record-core { width: 2.15rem; height: 2.15rem; border-radius: 50%; background: var(--yz-cinnabar); box-shadow: 0 0 0 .18rem rgb(var(--brand-red) / .18); transition: border-radius var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.motion-record-shutter.is-recording { border-color: rgb(var(--brand-red)); background: rgb(var(--brand-red) / .12); box-shadow: 0 .8rem 2rem rgb(0 0 0 / .24), 0 0 1.4rem rgb(var(--brand-red) / .22), inset 0 0 0 .18rem rgb(0 0 0 / .14); }
.motion-record-shutter.is-recording .motion-record-core { border-radius: .48rem; transform: scale(.78); }

.motion-rom-actions { display: grid; justify-items: center; width: min(17rem, 100%); }
.motion-record-action { display: grid; justify-items: center; gap: .32rem; }
.motion-record-copy { display: grid; justify-items: center; gap: .1rem; min-height: 2rem; text-align: center; text-shadow: 0 1px .5rem rgb(0 0 0 / .45); }
.motion-record-copy strong { color: var(--yz-copy); font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
.motion-record-copy span { max-width: 16rem; color: var(--yz-muted); font-size: .68rem; font-weight: 650; line-height: 1.25; }
.motion-rom-reset { border: 0; padding: .48rem .36rem; color: var(--yz-muted); background: transparent; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.motion-rom-reset:hover { color: var(--yz-copy); }

.motion-gait-teaser { position: fixed; z-index: 30; inset: 0; display: grid; align-content: center; justify-items: center; min-height: 100dvh; padding: var(--yz-safe-top) var(--yz-safe-right) var(--yz-safe-bottom) var(--yz-safe-left); overflow: hidden; border: 0; border-radius: 0; color: var(--yz-copy); background: radial-gradient(circle at 50% 37%, rgb(var(--light-sky) / .12), transparent 30rem), rgb(5 5 8 / .72); backdrop-filter: blur(5px) saturate(.82); -webkit-backdrop-filter: blur(5px) saturate(.82); text-align: center; animation: motion-surface-in var(--dur-surface) var(--ease-emphasized) both; }
.motion-gait-teaser::before { position: absolute; inset: 20% -24% auto; height: 11rem; background: linear-gradient(90deg, transparent, rgb(var(--light-direct) / .16), rgb(var(--light-sky) / .15), transparent); content: ""; filter: blur(1.8rem); pointer-events: none; }
.motion-gait-teaser > * { position: relative; z-index: 1; animation: motion-teaser-content-in var(--dur-surface) var(--ease-emphasized) both; }
.motion-gait-teaser[data-closing="true"] { pointer-events: none; animation: motion-surface-out var(--dur-med) var(--ease-standard) both; }
.motion-gait-teaser[data-closing="true"] > * { animation: motion-teaser-content-out var(--dur-med) var(--ease-standard) both; }
.motion-gait-teaser > p:first-of-type { margin: 0; color: rgb(var(--light-direct)); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.motion-gait-teaser h2 { margin: .75rem 0 0; font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.8rem); font-weight: 600; letter-spacing: -.06em; }
.motion-teaser-line { width: min(16rem, 68vw); height: 1px; margin: 1.1rem 0; background: linear-gradient(90deg, transparent, rgb(var(--brand-red)), transparent); }
.motion-teaser-points { display: flex; justify-content: center; gap: .48rem; flex-wrap: wrap; }
.motion-teaser-points span { padding: .4rem .65rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; color: rgb(255 255 255 / .76); background: rgb(255 255 255 / .06); font-size: .75rem; font-weight: 700; }
.motion-teaser-copy { margin: 1.1rem 0 1.3rem; color: var(--yz-muted); font-size: .9rem; line-height: 1.65; }
.motion-teaser-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: var(--yz-copy); background: rgb(255 255 255 / .06); font-size: 1.35rem; }
.motion-teaser-confirm { min-width: 9.5rem; min-height: 2.9rem; border: 1px solid rgb(var(--brand-red) / .7); border-radius: .9rem; color: #fff; background: rgb(var(--brand-red) / .76); font-weight: 750; }

.motion-flash { position: fixed; z-index: 40; inset: 0; pointer-events: none; background: #fff; }
.motion-flash.is-active { animation: motion-capture-flash .58s var(--ease-standard) both; }

.motion-review { position: fixed; z-index: 20; inset: 0; overflow: hidden; color: var(--yz-camera-ink); background: radial-gradient(circle at 50% 0%, #fff 0, #f7f6f1 48%, #e7e5de 100%); isolation: isolate; animation: motion-review-in var(--dur-med) var(--ease); }
.motion-review[data-closing="true"] { pointer-events: none; animation: motion-review-out var(--dur-fast) var(--ease-standard) both; }
.motion-review-photo { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--yz-safe-top) + 3.5rem) var(--yz-safe-right) calc(var(--yz-safe-bottom) + clamp(15rem, 35dvh, 22rem)) var(--yz-safe-left); overflow: hidden; }
.motion-review[data-sheet-state="collapsed"] .motion-review-photo { padding-bottom: calc(var(--yz-safe-bottom) + 4.25rem); }
.motion-review-photo canvas { display: block; width: auto; height: auto; max-width: none; max-height: none; border: 1px solid rgb(20 22 26 / .11); background: var(--yz-camera-paper); box-shadow: 0 1.2rem 3.6rem rgb(24 25 28 / .18); cursor: grab; touch-action: none; will-change: transform; }
.motion-review-photo canvas.is-dragging { cursor: grabbing; }
.motion-review-topbar { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--yz-safe-top) var(--yz-safe-right) .7rem var(--yz-safe-left); }
.motion-review-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--yz-camera-ink); }
.motion-review-brand img { width: 2.25rem; height: 2.25rem; padding: .2rem; border: 1px solid rgb(20 22 26 / .1); border-radius: 50%; background: #fff; box-shadow: 0 .3rem 1rem rgb(0 0 0 / .1); }
.motion-review-brand b { font-family: var(--font-display); font-size: .96rem; font-weight: 600; letter-spacing: .06em; }
.motion-review-close { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgb(20 22 26 / .15); border-radius: 50%; color: var(--yz-camera-ink); background: rgb(255 255 255 / .7); font-size: 1.35rem; box-shadow: 0 .35rem 1rem rgb(0 0 0 / .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.motion-review-sheet { position: absolute; z-index: 2; right: var(--yz-safe-right); bottom: var(--yz-safe-bottom); left: var(--yz-safe-left); display: grid; gap: .72rem; margin: 0; padding: .68rem 1rem 0; border: 1px solid rgb(255 255 255 / .94); border-radius: 1.35rem; color: var(--yz-camera-ink); background: rgb(255 255 255 / .78); box-shadow: 0 1rem 2.8rem rgb(24 25 28 / .17), inset 0 1px rgb(255 255 255 / .98); backdrop-filter: blur(22px) saturate(1.06); -webkit-backdrop-filter: blur(22px) saturate(1.06); transform: translateY(var(--yz-sheet-offset)); transition: transform var(--dur-med) var(--ease-standard); }
.motion-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.motion-review-heading p { margin: 0 0 .2rem; color: var(--yz-cinnabar); font-size: .69rem; font-weight: 780; letter-spacing: .08em; }
.motion-review-heading h1 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.04em; }
.motion-review-record { flex: 0 0 auto; margin-top: .15rem; padding: .35rem .5rem; border: 1px solid rgb(20 22 26 / .12); border-radius: 999px; color: rgb(20 22 26 / .58); background: rgb(255 255 255 / .5); font-size: .64rem; font-weight: 700; }
.motion-review-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: .48rem; }
.motion-layout-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; padding: .22rem; border: 1px solid rgb(20 22 26 / .1); border-radius: .86rem; background: rgb(20 22 26 / .045); }
.motion-layout-picker button { display: grid; gap: .12rem; min-width: 0; min-height: 3.05rem; padding: .45rem .48rem; border: 1px solid transparent; border-radius: .65rem; color: rgb(20 22 26 / .6); background: transparent; text-align: left; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.motion-layout-picker button b { color: inherit; font-size: .72rem; line-height: 1.1; }
.motion-layout-picker button small { overflow: hidden; color: inherit; font-size: .57rem; font-weight: 620; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.motion-layout-picker button[aria-pressed="true"] { border-color: rgb(20 22 26 / .14); color: #fff; background: rgb(20 22 26 / .9); box-shadow: 0 .28rem .65rem rgb(20 22 26 / .16); }
.motion-privacy-picker { display: flex; align-items: center; justify-content: space-between; gap: .48rem; min-width: 0; padding: .55rem .62rem; border: 1px solid rgb(20 22 26 / .1); border-radius: .86rem; background: rgb(255 255 255 / .52); }
.motion-privacy-picker span { display: grid; min-width: 0; gap: .1rem; }
.motion-privacy-picker b { font-size: .72rem; }
.motion-privacy-picker small { overflow: hidden; color: rgb(20 22 26 / .52); font-size: .58rem; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; }
.motion-privacy-picker select { max-width: 6.7rem; min-height: 2.2rem; border: 1px solid rgb(20 22 26 / .13); border-radius: .62rem; color: var(--yz-camera-ink); background: rgb(245 244 240 / .92); padding: .34rem; font-size: .67rem; }
.motion-review-footer { padding: .02rem 0 max(.85rem, env(safe-area-inset-bottom)); }
.motion-review-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .55rem; }
.motion-primary-action, .motion-review-actions .motion-secondary-action { min-height: 2.85rem; border: 0; border-radius: .88rem; padding: .65rem .85rem; font-size: .84rem; font-weight: 760; }
.motion-primary-action { color: #fff; background: var(--yz-cinnabar); box-shadow: 0 .45rem 1.05rem rgb(var(--brand-red) / .2); }
.motion-review-actions .motion-secondary-action { border: 1px solid rgb(20 22 26 / .12); color: var(--yz-camera-ink); background: rgb(20 22 26 / .06); box-shadow: none; }
.motion-review-actions .motion-save-action { display: inline-flex; align-items: center; justify-content: center; gap: .34rem; padding-inline: .72rem; }
.motion-save-action .motion-icon { width: .92rem; height: .92rem; }
.motion-review-note { margin: .55rem 0 0; color: rgb(20 22 26 / .5); font-size: .62rem; text-align: center; }

@keyframes motion-review-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes motion-review-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(.7rem); } }
@keyframes motion-capture-flash { 0% { opacity: 0; } 14% { opacity: .98; } 100% { opacity: 0; } }
@keyframes motion-pop-in { from { opacity: 0; transform: translateY(-.45rem) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes motion-pop-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-.3rem) scale(.985); } }
@keyframes motion-countdown-tick { 0% { opacity: 0; transform: scale(1.24); } 72% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes motion-authorize-spin { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.66, 0, 1, .42); } 42% { transform: rotate(-102deg); animation-timing-function: cubic-bezier(.08, .84, .16, 1); } 100% { transform: rotate(-360deg); } }
@keyframes motion-surface-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-surface-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes motion-teaser-content-in { from { opacity: 0; transform: translateY(1.1rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes motion-teaser-content-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(.65rem) scale(.99); } }
@media (min-width: 48rem) {
  .motion-live-hud { left: max(1.5rem, env(safe-area-inset-left)); }
  .motion-bottom-hud { left: 50%; width: min(42rem, calc(100vw - 3rem)); transform: translateX(-50%); }
  .motion-review-sheet { right: auto; left: 50%; width: min(31rem, calc(100vw - 3rem)); transform: translateX(-50%) translateY(var(--yz-sheet-offset)); }
}
@media (max-height: 35rem) and (orientation: landscape) {
  .motion-game-topbar { top: calc(var(--yz-safe-top) + .35rem); left: calc(var(--yz-safe-left) + .35rem); width: min(18rem, calc(100vw - var(--yz-safe-left) - var(--yz-safe-right) - .7rem)); padding: .38rem .44rem .38rem .58rem; }
  .motion-game-topbar p, .motion-game-topbar span { display: none; }
  .motion-game-topbar strong { font-size: .86rem; }
  .motion-game-topbar button { min-height: 1.8rem; }
  .motion-live-hud { top: calc(var(--yz-safe-top) + 3.8rem); width: min(24rem, 43vw); }
  .motion-bottom-hud { right: var(--yz-safe-right); bottom: var(--yz-safe-bottom); left: auto; width: min(22rem, 40vw); transform: none; }
  .motion-brand-watermark { top: calc(var(--yz-safe-top) + 8rem); width: min(16vw, 11rem); }
  .motion-gait-teaser h2 { font-size: 2rem; }
  .motion-teaser-copy { margin: .65rem 0 .8rem; }
  .motion-review-photo { right: min(20rem, 38vw); padding-bottom: var(--yz-safe-bottom); }
  .motion-review-topbar { position: fixed; }
  .motion-review-sheet { top: var(--yz-safe-top); right: var(--yz-safe-right); bottom: var(--yz-safe-bottom); left: auto; align-content: center; width: min(18rem, 34vw); padding: .6rem .75rem; transform: none; }
  .yz-sheet__handle { display: none; }
  .motion-review-options { grid-template-columns: 1fr; }
  .motion-review-footer { padding-bottom: 0; }
  .motion-review-actions { grid-template-columns: 1fr; }
  .motion-review-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }