:root{color-scheme:dark;--accent:#5786ff;--muted:#a4aaba;--border:#ffffff24;--app-height:100dvh;font:14px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f6f7fb;background:#101114}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}button,input,select{font:inherit}button,a{touch-action:manipulation}button{border:1px solid var(--border);background:#ffffff08;color:inherit;border-radius:10px;min-height:44px;padding:8px 14px;cursor:pointer;font-weight:600}button:hover{background:#ffffff19}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.selected{background:var(--accent);color:#ffffff;border-color:var(--accent)}svg{width:20px;height:20px;flex-shrink:0}button svg{vertical-align:middle}button{display:inline-flex;align-items:center;justify-content:center;gap:8px}[hidden]{display:none!important}.field-app{position:relative;isolation:isolate;width:100%;height:var(--app-height);min-height:0;background:#101114;overflow:hidden}#playback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}.top-left{position:absolute;left:max(22px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:58%}.brand{font-size:14px;font-weight:800;letter-spacing:1.8px;text-shadow:0 1px 10px #000}.brand b{color:var(--accent);font-size:10px;border-left:1px solid #ffffff50;margin-left:7px;padding-left:9px}.status-pill,.badges{background:#14161cd9;backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.8px;padding:8px 10px}.status-pill i,.live-button i,.camera-preview i{width:6px;height:6px;border-radius:100%;background:#747b8c}.status-pill i.recording,.camera-preview i{background:var(--accent);box-shadow:0 0 8px #5786ff50}.badges{gap:12px}.badges #modeBadge{color:var(--accent)}.top-right{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:flex;gap:7px}.edge-button,.icon-button{background:#14161cde;backdrop-filter:blur(18px);min-width:44px;box-shadow:0 3px 16px #0002}.icon-button{padding:8px 11px}#about{font-size:19px}#toggleWave[aria-pressed=true]{color:var(--accent);border-color:#5786ff66}.camera-preview{position:absolute;top:80px;left:max(22px,env(safe-area-inset-left));width:120px;background:#14161ce6;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0004}.camera-preview span{font-size:8px;letter-spacing:1px;display:flex;gap:6px;align-items:center;padding:7px 9px}.camera-preview video{display:block;width:100%;height:67px;object-fit:contain}.empty{position:absolute;inset:90px 20px 230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.empty button{pointer-events:auto}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px;font-weight:700}.empty h1{font-size:clamp(28px,4.6vw,55px);letter-spacing:-1.8px;font-weight:650;line-height:1.08;margin:15px 0 6px}.empty p{color:#b0b7c8;font-size:14px;margin:10px 0 20px}.empty small{color:#939bae;font-size:10px;margin-top:14px}.field-emblem{width:39px;height:39px;border:1px solid #5786ff60;transform:rotate(45deg);margin-bottom:28px;position:relative}.field-emblem i{position:absolute;width:17px;height:17px;right:-1px;bottom:-1px;border:2px solid var(--accent)}.primary,.play-button{background:var(--accent);border-color:var(--accent);color:#ffffff}.primary{min-height:48px;padding:10px 22px}.primary:hover,.play-button:hover{background:#6b94ff}.countdown{font-size:40px;color:var(--accent);font-variant-numeric:tabular-nums}.review-dock{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));background:linear-gradient(130deg,#20232beF,#14161cf0);border:1px solid #ffffff29;backdrop-filter:blur(22px);border-radius:16px;box-shadow:0 12px 45px #0007;padding:14px 18px 10px;max-width:1100px;margin:auto}.timeline-heading,.timeline-scale,.wave-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#a7afc0;font-variant-numeric:tabular-nums}.timeline-heading{min-height:14px;letter-spacing:.8px}.timeline-heading #frameLabel{color:#f3f5fa}.timeline-heading #timelineHint{font-size:9px;letter-spacing:1.5px}.timeline-heading #timelineBehind{color:var(--accent)}.timeline-track{height:36px;position:relative;display:flex;align-items:center;margin:0 8px}.track-line{position:absolute;left:0;right:0;height:4px;background:#ffffff1c;border-radius:3px}#selectionBand{position:absolute;height:6px;background:#5786ff80;pointer-events:none}#timeline{width:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;height:36px;touch-action:none;position:relative;z-index:2}#timeline::-webkit-slider-runnable-track{height:4px;background:transparent}#timeline::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);border:3px solid #e4edff;margin-top:-6px;box-shadow:0 0 0 5px #5786ff1a}#timeline::-moz-range-track{height:4px;background:transparent}#timeline::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:3px solid #e4edff}.pin{position:absolute;font-size:8px;font-weight:800;top:0;color:#ffffff;background:var(--accent);border-radius:2px;padding:0 3px;transform:translateX(-50%);pointer-events:none;z-index:1}.end-pin{top:23px}.timeline-scale{font-size:9px;margin-bottom:8px}.timeline-scale #rangeLabel{color:#c3cada}.transport{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0 10px;border-bottom:1px solid #ffffff12}.playback-controls,.right-controls,.speeds,.markers,.clip-controls{display:flex;align-items:center;gap:5px}.playback-controls button{padding:8px 10px;border-color:transparent;background:transparent;min-width:44px}.playback-controls .play-button{background:var(--accent);color:#ffffff;border-radius:50%;width:46px;height:46px}.transport-button span{font-size:10px}#back10 svg,#back5 svg{width:17px}.speeds{background:#0003;border-radius:10px;padding:3px;gap:2px}.speeds button{min-width:45px;padding:6px 9px;border-color:transparent;font-size:12px;background:transparent}.speeds button.selected{background:#5786ff24;color:var(--accent)}.audio-button{border:0;background:transparent;padding:8px;min-width:44px}.audio-button span{display:none}.live-button{font-size:12px;text-transform:uppercase;letter-spacing:1px;background:#5786ff12;border-color:#5786ff30;color:var(--accent)}.live-button i{background:var(--accent)}.clip-controls{justify-content:space-between;padding-top:8px}.markers{gap:6px}.markers button{font-size:11px;background:transparent;padding:7px 10px}.markers button.marked{border-color:#5786ff50;color:var(--accent)}.marker-icon{font-size:19px}#startTime,#endTime{color:#b0b8cc;font-size:10px;font-variant-numeric:tabular-nums;min-width:42px}#clearMarks{padding:8px;min-width:36px;font-size:20px;border:0}.save-button{background:var(--accent);border-color:var(--accent);color:#ffffff;font-size:12px;padding:8px 18px}.save-button svg{width:16px}#wavePanel{margin:8px 0;border-top:1px solid #ffffff12;padding-top:8px}.wave-heading{font-size:8px;letter-spacing:1px}#waveform{width:100%;height:48px;display:block;touch-action:none}.message{position:absolute;left:50%;transform:translateX(-50%);top:100px;max-width:550px;width:calc(100% - 44px);padding:13px 18px;background:#1a2236f5;border:1px solid #5786ff60;border-radius:10px;color:#f3f6ff;font-size:12px;line-height:1.5;z-index:6;box-shadow:0 5px 25px #0008}dialog{color:#f3f5fa;background:#191c24;border:1px solid #ffffff30;border-radius:18px;padding:24px;width:min(500px,calc(100% - 32px));max-height:calc(var(--app-height) - 40px);overflow:auto;box-shadow:0 24px 100px #000b}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.clip-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}h2{font-size:23px;letter-spacing:-.5px;margin:7px 0}dialog p{color:#b0b8ca;font-size:12px;line-height:1.7}dialog label{display:block;font-size:13px;margin-bottom:14px}dialog select{padding:10px;background:#101219;color:inherit;border:1px solid var(--border);border-radius:7px;width:100%}dialog input[type=range]{width:100%;accent-color:var(--accent);height:40px}.presets{display:flex;gap:8px;margin:6px 0 24px}.presets button{flex:1}.buffer-title{display:flex;justify-content:space-between;font-size:11px}.buffer-track{height:4px;background:#ffffff15;margin-top:12px;border-radius:2px}.buffer-track i{display:block;height:4px;background:var(--accent)}#end{border-color:#d8886650;color:#ffb095;margin-top:10px}#resumeCamera{color:var(--accent)}#exportCanvas,#clipPreview{width:100%;border-radius:10px}#clipProgress{width:100%;accent-color:var(--accent)}#clipSaveActions{display:flex;gap:12px;align-items:center}#downloadClip{color:var(--accent);font-size:12px}summary{font-size:13px}#clipStatus{font-size:12px;line-height:1.7;margin:12px 0}.guide-dialog details{margin-top:10px}
@media(min-width:1300px){.review-dock{bottom:24px}.empty{bottom:250px}}
@media(max-width:850px){.top-left{max-width:48%;gap:7px}.brand{width:100%}.status-pill{font-size:8px;padding:6px 8px}.badges{font-size:8px;padding:6px 8px}.camera-preview{top:115px;width:94px}.camera-preview video{height:53px}.top-right{gap:5px}.review-dock{left:12px;right:12px;padding:10px 13px}.transport{gap:6px}.playback-controls{gap:0}.playback-controls button{padding:7px}.speeds button{min-width:40px}.timeline-heading #timelineHint{display:none}.empty{top:130px}.field-emblem{margin-bottom:18px}}
@media(max-width:540px){.top-left{left:14px;top:16px;max-width:55%}.top-right{right:12px;gap:4px;max-width:45%;flex-wrap:wrap;justify-content:flex-end}.top-right .edge-button{padding:7px 9px}#delayChip{font-size:10px}#fullscreen{display:none}.brand{font-size:12px}.status-pill{font-size:7px;letter-spacing:.3px}.camera-preview{left:14px;top:117px;width:70px}.camera-preview span{font-size:6px;padding:5px}.camera-preview video{height:40px}.badges{padding:5px;font-size:7px;gap:6px}.review-dock{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:10px;border-radius:13px}.transport{flex-wrap:wrap;gap:6px;padding-bottom:8px}.playback-controls{flex:1}.speeds{order:3;width:100%;justify-content:center}.speeds button{flex:1;min-height:36px}.right-controls{gap:3px}.live-button{min-width:60px;padding:6px}.playback-controls button{min-width:34px;padding:5px}.playback-controls .play-button{width:42px;height:42px;min-width:42px}#back10{display:none}.markers button{font-size:10px;padding:6px;gap:4px}#startTime,#endTime{font-size:9px;min-width:37px}.save-button{padding:7px 10px;gap:5px}.save-button svg{display:none}#clearMarks{min-width:28px;padding:5px}.timeline-scale{font-size:8px}.timeline-scale #rangeLabel{max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.empty{inset:180px 18px 290px}.empty h1{font-size:29px;letter-spacing:-1px}.empty p{font-size:12px;margin-bottom:14px}.empty .eyebrow{font-size:8px}.field-emblem{display:none}.empty small{font-size:8px}.message{top:185px;font-size:11px}}
@media(max-height:570px) and (min-width:541px){.review-dock{bottom:8px;padding:8px 12px;max-width:1000px}.timeline-track{height:28px}.end-pin{top:20px}.timeline-scale{margin-bottom:2px}.transport{padding:2px 0 5px}.clip-controls{padding-top:4px}.top-left{top:10px;left:14px}.top-right{top:8px;right:12px}.brand{width:auto}.camera-preview{top:60px;width:80px}.camera-preview video{height:45px}.empty{inset:75px 20px 210px}.empty h1{font-size:28px;margin:8px 0}.empty p{margin:5px 0 12px;font-size:12px}.empty small,.field-emblem{display:none}.primary{min-height:42px}#waveform{height:32px}.message{top:65px}#wavePanel{margin:3px 0;padding-top:3px}}
.empty{bottom:calc(var(--dock-height,230px) + 32px)}.wave-open .field-emblem{display:none}.wave-open .empty h1{font-size:clamp(26px,3.4vw,38px)}
@media(max-height:700px){.field-emblem{display:none}.empty h1{font-size:clamp(26px,3.5vw,38px)}.empty p{margin:6px 0 12px}.empty small{margin-top:8px}}

/* Keep the video unobstructed behind the replay controls. */
.review-dock{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.timeline-heading,.timeline-scale,.wave-heading,.markers button{color:#f4f6fd;text-shadow:0 1px 3px #000,0 0 8px #000c}
.timeline-scale #rangeLabel,.timeline-heading #frameLabel,#startTime,#endTime{color:#f4f6fd}
.track-line{background:#ffffff60;box-shadow:0 1px 3px #0008}
.transport{border-bottom-color:#ffffff30}
.playback-controls button:not(.play-button),.audio-button{background:#11131a4d;backdrop-filter:blur(3px);border-radius:10px}
.markers button:not(#clearMarks){background:#11131a4d;border-color:#ffffff35}
.speeds{background:#11131a59;backdrop-filter:blur(3px)}
#wavePanel{border-top-color:#ffffff30}
#recordingPlayback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1;background:#101114}
.top-right #end{margin:0;background:#20120fe6;border:1px solid #ffb09560;color:#ffc1a7;backdrop-filter:blur(10px)}
.rep-count{font-size:10px;color:var(--accent);background:#141823d9;border:1px solid #5786ff33;border-radius:7px;padding:8px 10px}
.undo-rep{font-size:10px;min-height:32px;background:#141823d9;padding:6px 9px}
.save-session{font-size:11px;background:#11131a77;border-color:#5786ff66;color:var(--accent);order:3;margin-left:6px}
.clip-controls{flex-wrap:wrap}.clip-controls .markers{margin-right:auto}.export-source{width:96px;height:54px;object-fit:contain;border:1px solid #ffffff30;border-radius:5px;margin:6px 0}
#assemblyCanvas{display:block;width:100%;border-radius:10px}#assemblyProgress{width:100%;accent-color:var(--accent);margin-top:14px}.new-session-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:850px){.top-left{max-width:43%}.top-right{max-width:54%;flex-wrap:wrap;justify-content:flex-end}.top-right #end,.top-right #newSession{font-size:11px;padding:7px 10px}.rep-count{font-size:8px;padding:6px 8px}.undo-rep{font-size:8px;padding:4px 7px}}
@media(max-width:540px){.save-session{flex-basis:100%;margin:6px 0 0;min-height:38px}.markers button{font-size:9px}.marker-icon{display:none}#startTime,#endTime{min-width:35px}.top-left{max-width:45%}.top-right{max-width:51%}.top-right .edge-button{min-height:38px}#delayChip{font-size:9px}.camera-preview{top:155px}.rep-count{font-size:7px}.undo-rep{font-size:7px}.top-left .badges{max-width:100%;flex-wrap:wrap}.top-right #newSession{font-size:10px}}

/* A camera-first launch screen; tools appear once a session starts. */
.field-app.is-idle>.top-left{display:none}
.field-app.is-idle .empty{inset:0;bottom:0;gap:0}
.field-app.is-idle .empty>:not(#startActions){display:none!important}
.field-app.is-idle #startCamera{min-width:220px;min-height:70px;padding:18px 28px;border-radius:6px;background:#285cf4;border-color:#285cf4;color:#fff;font-size:19px;font-weight:650;letter-spacing:-.3px;box-shadow:0 2px 0 #ffffff0d inset}
.field-app.is-idle #startCamera:hover{background:#3d6cfa}
.field-app.is-idle #startCamera:active{background:#1d4dd8;transform:translateY(1px)}
.field-app.is-idle #startCamera svg{width:24px;height:24px;margin-right:3px}
.field-emblem,.empty>.eyebrow{display:none}
button,.edge-button,.icon-button,.status-pill,.badges,.rep-count,.camera-preview,.speeds,.markers button{border-radius:5px}
.brand{font-weight:750;letter-spacing:1.2px}.brand b{color:#c6d7ff}
.primary,.save-button,.playback-controls .play-button{color:#fff;background:#285cf4;border-color:#285cf4}
.primary:hover,.save-button:hover,.playback-controls .play-button:hover{background:#3d6cfa}
#selectionBand{background:#5786ff80}.pin{color:#fff}
.message{border-radius:5px;box-shadow:none;background:#141c2def}
dialog{border-radius:9px;background:#191c24}.rep-count{color:#c7d8ff}
.field-app.is-idle .message{top:auto;bottom:calc(50% - 120px);color:#f3f6ff}
@media(max-width:540px){.field-app.is-idle #startCamera{min-width:210px;min-height:66px;font-size:18px}}

/* Keep the tools available; remove decorative headings and launch copy. */
.brand,#timelineHint{display:none}.wave-heading>span:first-child{display:none}.wave-heading{justify-content:flex-end}

.field-app.is-idle .empty{inset:70px 20px calc(var(--dock-height,230px) + 32px);bottom:calc(var(--dock-height,230px) + 32px)}
.field-app.is-idle #rangeLabel,#emptyText{visibility:hidden}