:root{--page-padding:clamp(24px,4.3vw,68px);--layout-gap:clamp(24px,2.4vw,40px);color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#192127;color:#f6f7f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 16% 80%,#232e35 0,transparent 65%);min-height:100svh}.experience{min-height:100svh;display:flex;gap:var(--layout-gap);padding:var(--page-padding);align-items:center}.stage{flex:1;min-width:0;height:calc(100svh - 2 * var(--page-padding));min-height:420px;background:#10161b;border-radius:25px;overflow:hidden;position:relative;box-shadow:0 7px 30px #00000018;display:flex;align-items:center;justify-content:center}#picture{position:absolute;inset:0;width:100%;height:100%;}video{display:block;width:100%;height:100%;object-fit:cover}#overlays{position:absolute;inset:0;overflow:hidden;pointer-events:none}.box{position:absolute;border:3px solid var(--color);border-radius:17px;background:color-mix(in srgb,var(--color) 3%,transparent);transition:left 50ms linear,top 50ms linear,width 50ms linear,height 50ms linear;will-change:left,top,width,height}#notice{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;background:#10161bc9;padding:32px;font-size:18px;color:#d7dee3}#notice[hidden]{display:none}button{font:inherit;cursor:pointer;color:inherit}#retry{border:1px solid #86949d;background:#26333d;border-radius:40px;padding:12px 24px}.ledger{flex:0 0 clamp(270px,25vw,360px);align-self:center;min-width:0}h1{font-size:clamp(27px,2.65vw,44px);line-height:1.13;letter-spacing:-1.2px;margin:0 0 22px;font-weight:720;white-space:nowrap}.status{display:flex;align-items:center;gap:12px;color:#b5bec5;font-size:clamp(16px,1.5vw,23px);margin:0 0 25px}#status-dot{width:13px;height:13px;flex:none;border-radius:100%;background:#8c979d}#status-dot.live{background:#06d56b;box-shadow:0 0 15px #06d56b35}#status-dot.error{background:#f4b04c}.row{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:24px;padding:19px 0;border-bottom:1px solid #ffffff20;font-size:clamp(17px,1.25vw,21px)}.row img{width:58px;height:58px;object-fit:contain;background:#fff;padding:4px;border-radius:13px}.row output{font-size:clamp(29px,2.65vw,42px);font-weight:620;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}.total{display:flex;align-items:center;justify-content:space-between;padding:25px 0 35px;font-size:27px;font-weight:650}.total output{font-size:46px;font-variant-numeric:tabular-nums}.source{border:1px solid #ffffff2b;border-radius:25px;display:flex;margin-top:9px}.source button{background:transparent;border:1px solid transparent;border-radius:25px;flex:1;display:flex;justify-content:center;align-items:center;gap:13px;padding:13px 8px;color:#b6bfc5;font-size:17px}.source button[aria-pressed=true]{border-color:#a4afb7;background:#ffffff04;color:#f7f9fa}.source button:hover{background:#ffffff09}.source svg{width:23px;height:23px}button:focus-visible{outline:3px solid #96c9ff;outline-offset:4px}@media(min-width:1800px){.row{padding:27px 0}.row img{width:68px;height:68px}.row{grid-template-columns:68px 1fr auto}}@media(max-width:1000px){.ledger{flex-basis:270px}h1{font-size:28px}.row{gap:14px;padding:16px 0}.row img{width:48px;height:48px}.row{grid-template-columns:48px 1fr auto}.total{padding-bottom:24px}}@media(max-width:720px){:root{--page-padding:24px;--layout-gap:24px}.experience{flex-direction:column;min-height:100svh}.stage{flex:none;height:auto;min-height:0;width:100%;aspect-ratio:4/3;border-radius:21px}.ledger{flex:none;width:100%}h1{font-size:30px;letter-spacing:-.7px;margin-bottom:13px}.status{margin-bottom:10px;font-size:17px}.row{padding:15px 0;grid-template-columns:48px 1fr auto;gap:18px}.row output{font-size:30px}.total{font-size:23px;padding:20px 0}.total output{font-size:36px}.source{margin-top:3px}}@media(prefers-reduced-motion:reduce){.box{transition:none}}

.flip-camera{position:absolute;z-index:2;right:18px;bottom:18px;display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff55;border-radius:50%;background:#172127b3;backdrop-filter:blur(12px);color:white}.flip-camera svg{width:24px;height:24px}.flip-camera:hover{background:#172127e6}.flip-camera:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.demo-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:13px}.demo-clips button{flex:1;padding:9px 10px;min-height:40px;border:1px solid transparent;border-radius:12px;background:transparent;color:#aebac3;font-size:14px}.demo-clips button[aria-pressed=true]{color:#fff;border-color:#ffffff28;background:#ffffff0a}.demo-clips button:hover{background:#ffffff0a}