@import "https://fonts.googleapis.com/css2?family=Anton&display=swap";@import "https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap";:root{--bg:#f3f5f9;--surface:#fff;--surface-2:#e4eaf5;--line:#dce2ec;--text:#002d5f;--muted:#5b6b82;--royal:#0047ba;--royal-dark:#002d5f;--rec:#d92d20;--display:"Anton", "Arial Narrow", sans-serif;--body:"Switzer", system-ui, -apple-system, sans-serif}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:500 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed;opacity:.4}svg{display:block}:focus-visible{outline:2px solid var(--royal);outline-offset:2px}.app{grid-template:"top top"72px"rail stage"minmax(0,1fr)"rail transport"/76px minmax(0,1fr);height:100dvh;display:grid}.topbar{background:var(--royal);color:#fff;grid-area:top;align-items:center;gap:20px;padding:0 20px;display:flex}.brand{color:#fff;flex:none;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-logo{width:auto;height:40px;display:block}.context{color:#ffffffd9;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:15px;font-weight:500;overflow:hidden}.topbar-actions{align-items:center;gap:12px;min-width:0;margin-left:auto;display:flex}.film-name{color:#ffffffb3;text-overflow:ellipsis;white-space:nowrap;max-width:24vw;font-size:13px;overflow:hidden}.btn{height:44px;font:500 16px/1 var(--body);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:5px;justify-content:center;align-items:center;gap:10px;padding:0 20px;text-decoration:none;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn-primary{background:var(--royal);color:#fff}.btn-primary:hover{background:var(--royal-dark)}.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text)}.btn-ghost:hover{border-color:var(--royal);color:var(--royal)}.btn-light{color:var(--royal-dark);background:#fff;height:40px}.btn-light:hover{background:var(--surface-2)}.btn-ghost-light{color:#fff;border:1px solid #ffffff73;height:40px}.btn-ghost-light:hover{background:#ffffff1f}.btn-rec{border:1px solid var(--rec);color:var(--rec);background:#fff}.btn-rec:hover:not(:disabled){background:#fef3f2}.rec-dot{background:var(--rec);border-radius:50%;width:10px;height:10px}.rec-stop,[data-recording=true] .rec-start{display:none}[data-recording=true] .rec-stop{display:inline}[data-recording=true] .btn-rec{background:var(--rec);color:#fff}[data-recording=true] .btn-rec .rec-dot{background:#fff;border-radius:2px}.rail{background:var(--surface);border-right:1px solid var(--line);flex-direction:column;grid-area:rail;align-items:center;gap:6px;padding:16px 0;display:flex}.rail-group{flex-direction:column;align-items:center;gap:4px;display:flex}.rail-sep{background:var(--line);flex:none;width:32px;height:1px;margin:8px 0}.tool{width:48px;height:48px;color:var(--muted);border-radius:6px;flex:none;place-items:center;transition:background .15s,color .15s;display:grid}.tool:hover{background:var(--bg);color:var(--text)}.tool[aria-pressed=true]{background:var(--royal);color:#fff}.swatch{border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:grid}.swatch:before{content:"";background:var(--c);border-radius:50%;width:20px;height:20px;box-shadow:inset 0 0 0 1px #002d5f40}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--royal)}[data-mode=watch] .rail,[data-loaded=false] .rail{opacity:.35;pointer-events:none}[data-tip]{position:relative}[data-tip]:hover:after{content:attr(data-tip);white-space:nowrap;pointer-events:none;z-index:20;background:var(--royal-dark);color:#fff;font:500 13px/1 var(--body);border-radius:5px;padding:8px 10px;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.stage-wrap{flex-direction:column;grid-area:stage;gap:14px;min-width:0;min-height:0;padding:16px 20px 10px;display:flex}.stage{background:#000;border-radius:8px;flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.stage video,.stage canvas{width:100%;height:100%;position:absolute;inset:0}.stage video{object-fit:contain}.stage canvas{touch-action:none;cursor:crosshair}[data-mode=watch] .stage canvas{cursor:pointer}.note-input{z-index:5;resize:none;width:270px;font:600 15px/1.35 var(--body);color:var(--royal-dark);border:2px solid var(--royal);background:#fff;border-radius:6px;outline:none;padding:9px 11px;position:absolute;box-shadow:0 8px 24px #0000004d}.empty{z-index:6;text-align:center;background:var(--surface);border:2px dashed var(--line);border-radius:8px;place-items:center;padding:24px;transition:border-color .15s;display:grid;position:absolute;inset:0}.stage.drag .empty{border-color:var(--royal)}[data-loaded=true] .empty{display:none}.empty-kicker{color:var(--royal);margin:0 0 10px;font-size:15px;font-weight:600}.empty h1{font:400 clamp(40px, 6vw, 72px)/1 var(--display);text-transform:uppercase;color:var(--royal-dark);margin:0 0 14px}.empty p{color:var(--muted);margin:0 0 24px}[data-loaded=true] .stage.drag:after{content:"Drop to load film";z-index:7;color:#fff;font:400 44px/1 var(--display);text-transform:uppercase;background:#0047bacc;place-items:center;display:grid;position:absolute;inset:0}.badge{z-index:3;pointer-events:none;color:var(--royal-dark);font:600 14px/1 var(--body);background:#fffffff2;border-radius:5px;align-items:center;gap:9px;padding:8px 12px;display:none;position:absolute;top:14px;left:14px}.badge .dot{border-radius:50%;width:9px;height:9px}[data-recording=true] .rec-badge{display:flex}.rec-badge .dot{background:var(--rec);animation:1.2s infinite pulse}@keyframes pulse{50%{opacity:.25}}.meter{align-items:flex-end;gap:2px;height:14px;margin-left:2px;display:flex}.meter i{background:#002d5f33;border-radius:1px;width:3px}.meter i:first-child{height:4px}.meter i:nth-child(2){height:6px}.meter i:nth-child(3){height:9px}.meter i:nth-child(4){height:11px}.meter i:nth-child(5){height:14px}.meter i.on{background:var(--royal)}.big-play{z-index:4;background:var(--royal);color:#fff;border-radius:50%;place-items:center;width:88px;height:88px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #00000059}.big-play svg{margin-left:4px}[data-mode=watch][data-playing=false] .big-play{display:grid}.toast{z-index:8;pointer-events:none;opacity:0;background:var(--royal-dark);color:#fff;text-align:center;border-radius:5px;max-width:calc(100% - 32px);padding:10px 16px;font-size:14px;transition:opacity .2s,transform .2s;position:absolute;bottom:18px;left:50%;transform:translate(-50%,10px)}.toast.show{opacity:1;transform:translate(-50%)}.transport{grid-area:transport;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mid mid""left right";align-items:center;gap:8px 22px;padding:4px 20px 16px;display:grid}.t-left{grid-area:left}.t-mid{grid-area:mid}.t-right{flex-wrap:wrap;grid-area:right;justify-content:flex-end}.t-group{align-items:center;gap:10px;display:flex}.t-btn{width:42px;height:42px;color:var(--muted);border-radius:6px;place-items:center;display:grid}.t-btn:hover{color:var(--text);background:var(--surface)}.t-play{background:var(--royal);color:#fff;border-radius:50%;width:52px;height:52px}.t-play:hover{background:var(--royal-dark);color:#fff}.t-play .i-pause,[data-playing=true] .t-play .i-play{display:none}[data-playing=true] .t-play .i-pause{display:block}.t-play .i-play{margin-left:3px}.t-mid{align-items:center;gap:14px;min-width:0;display:flex}.time{font:600 15px/1 var(--body);font-variant-numeric:tabular-nums;min-width:54px}.time.muted{color:var(--muted);text-align:right}.scrub{--p:0%;--fill:var(--royal);appearance:none;cursor:pointer;background:0 0;flex:1;min-width:80px;height:26px;margin:0}[data-recording=true] .scrub{--fill:var(--rec)}.scrub::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--fill) var(--p), var(--line) var(--p));border-radius:3px;height:6px}.scrub::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--fill);background:#fff;border-radius:50%;width:18px;height:18px;margin-top:-6px}.scrub::-moz-range-track{background:var(--line);border-radius:3px;height:6px}.scrub::-moz-range-progress{background:var(--fill);border-radius:3px;height:6px}.scrub::-moz-range-thumb{border:3px solid var(--fill);background:#fff;border-radius:50%;width:14px;height:14px}.seg{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px;display:flex}.seg button{min-width:42px;height:36px;color:var(--muted);border-radius:4px;padding:0 10px;font-size:14px;font-weight:600}.seg button:hover{color:var(--text)}.seg button[aria-pressed=true]{background:var(--surface-2);color:var(--royal)}.toggle{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:9px;max-width:130px;font-size:13px;line-height:1.2;display:flex}.toggle input{appearance:none;background:var(--line);cursor:pointer;border-radius:999px;flex:none;width:34px;height:20px;margin:0;transition:background .15s;position:relative}.toggle input:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:left .15s;position:absolute;top:3px;left:3px}.toggle input:checked{background:var(--royal)}.toggle input:checked:after{left:17px}.watch-only{display:none!important}[data-mode=watch] .watch-only{display:inline-flex!important}[data-mode=watch] .edit-only{display:none!important}.has-breakdown-only{display:none}[data-has-breakdown=true][data-mode=edit][data-recording=false] .has-breakdown-only{display:inline-flex}[data-loaded=false] .transport{opacity:.4;pointer-events:none}[data-variant]:not([data-variant=demo]) .demo-only,[data-variant]:not([data-variant=coach]) .coach-only,[data-variant=viewer] .author-only,[data-variant=viewer] .rail{display:none!important}[data-variant=viewer]{grid-template-columns:minmax(0,1fr);grid-template-areas:"top""stage""transport"}#muteBtn .i-muted,#muteBtn[aria-pressed=true] .i-sound{display:none}#muteBtn[aria-pressed=true] .i-muted{display:block}#muteBtn[aria-pressed=true]{color:var(--rec)}.review{z-index:9;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#001632b8;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.review-card{width:min(460px,100%);color:var(--text);text-align:center;background:#fff;border-radius:10px;padding:28px;box-shadow:0 30px 70px #0006}.review-kicker{color:var(--royal);margin:0 0 6px;font-size:14px;font-weight:600}.review-card h2{font:400 40px/1 var(--display);text-transform:uppercase;color:var(--royal-dark);margin:0 0 10px}.review-card p{color:var(--muted);margin:0 0 20px}.review-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}[data-variant=coach] #reviewDownload{background:var(--surface);color:var(--text);border:1px solid var(--line)}.progress{background:var(--line);border-radius:4px;height:8px;overflow:hidden}.progress i{background:var(--royal);width:0;height:100%;transition:width .2s;display:block}.progress-pct{font-weight:600;color:var(--text)!important;margin:10px 0 18px!important}.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px}.message-card{align-items:flex-start;gap:16px;display:flex}.message-card img{object-fit:cover;border-radius:50%;flex:none;width:56px;height:56px}.message-card .from{font:400 22px/1 var(--display);text-transform:uppercase;color:var(--royal);margin:0 0 6px}.message-card p{white-space:pre-line;color:var(--text);margin:0}dialog.send{width:min(560px,100vw - 32px);color:var(--text);border:0;border-radius:10px;padding:28px;box-shadow:0 30px 80px #00000059}dialog.send::backdrop{background:#0016328c}dialog.send h2{font:400 34px/1 var(--display);text-transform:uppercase;color:var(--royal-dark);margin:0 0 8px}dialog.send p{color:var(--muted);margin:0 0 16px}dialog.send textarea{resize:vertical;width:100%;min-height:150px;font:500 16px/1.5 var(--body);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:12px}dialog.send textarea:focus{outline:2px solid var(--royal);border-color:var(--royal)}dialog.send .actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.state-msg{text-align:center;background:var(--surface);place-items:center;height:100%;padding:24px;display:grid}.state-msg h1{font:400 48px/1 var(--display);text-transform:uppercase;color:var(--royal-dark);margin:0 0 12px}.state-msg p{color:var(--muted);max-width:460px;margin:0 0 20px}.face{--size:clamp(92px, 17%, 168px);--lvl:0;z-index:4;width:var(--size);aspect-ratio:1;pointer-events:none;transition:width .35s,height .35s,left .35s,bottom .35s;position:absolute;bottom:18px;left:18px}.face-disc{background:var(--royal);border:3px solid #fff;border-radius:50%;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden;box-shadow:0 10px 30px #00000059}.face-disc img,.face-disc video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.face-disc video{opacity:0;transition:opacity .2s}.face[data-cam=true] .face-disc video{opacity:1}.face[data-mirror=true] .face-disc video{transform:scaleX(-1)}.face-initial{font:400 calc(var(--size) * .42)/1 var(--display);color:#fff;text-transform:uppercase}.face-ring{box-shadow:0 0 0 calc(3px + var(--lvl) * 12px) rgba(255, 212, 59, calc(.25 + var(--lvl) * .55));border-radius:50%;transition:box-shadow 80ms linear;position:absolute;inset:-3px}.face-meter{background:#fff;border-radius:999px;align-items:center;gap:3px;height:22px;padding:0 9px;display:flex;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000040}.face-meter i{background:var(--royal);border-radius:2px;width:3px;height:4px;transition:height 80ms linear}.face-meter i.on{height:var(--h,12px)}.face[data-size=full]{aspect-ratio:auto;z-index:6;width:100%;height:100%;bottom:0;left:0}.face[data-size=full] .face-disc{background:#0b1b33;border:0;border-radius:0}.face[data-size=full] .face-disc img{object-fit:contain;aspect-ratio:1;border-radius:50%;width:auto;height:70%;inset:15% auto auto 50%;transform:translate(-50%)}.face[data-size=full] .face-ring{display:none}.face[data-size=full] .face-meter{bottom:18px}#camBtn .i-cam{display:none}#camBtn[aria-pressed=true] .i-cam{display:block}#camBtn[aria-pressed=true] .i-cam-off{display:none}#camBtn[aria-pressed=true]{color:var(--royal);background:var(--surface-2)}.cam-only{display:none!important}[data-cam=true][data-mode=edit] .cam-only{display:inline-flex!important}#faceSizeBtn .fs-film,#faceSizeBtn[aria-pressed=true] .fs-full{display:none}#faceSizeBtn[aria-pressed=true] .fs-film{display:inline}@media (width<=960px){.app{grid-template:"top"64px"stage"minmax(0,1fr)"rail""transport"/minmax(0,1fr)}.topbar{gap:12px;padding:0 16px}.context,.film-name{display:none}.rail{border-right:0;border-top:1px solid var(--line);scrollbar-width:none;flex-direction:row;justify-content:flex-start;gap:4px;padding:8px 16px;overflow-x:auto}.rail::-webkit-scrollbar{display:none}.rail-group{flex-direction:row;gap:4px}.rail-sep{width:1px;height:28px;margin:0 8px}.tool{width:44px;height:44px}[data-tip]:hover:after{display:none}.stage-wrap{padding:10px 16px}.transport{gap:8px 12px;padding:4px 16px 16px}}@media (width<=640px){body{overflow:auto}.app{grid-template-rows:64px auto auto auto;align-content:start;height:auto;min-height:100dvh}.stage{aspect-ratio:16/9;flex:none}[data-loaded=false] .stage{aspect-ratio:auto;height:380px}.brand-logo{height:34px}.btn-ghost-light,.toggle,.hide-sm{display:none}.t-group{gap:4px}.t-right{gap:8px}.t-btn{width:36px}.face{--size:84px;bottom:10px;left:10px}.face-meter{height:18px;bottom:-8px}.seg button{min-width:36px;padding:0 6px}.btn{padding:0 14px}}