@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#193b32;--muted:#738079;--bg:#f6f7f1;--line:#e0e5da;--green:#254e3d;--lime:#d7ed97}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7da64b;outline-offset:4px}header{max-width:1280px;margin:auto;padding:27px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:2px;font-size:25px;font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-1px}.brand>span:not(.brand-icon){font-weight:400}.brand-icon{display:grid;place-items:center;background:var(--green);color:var(--lime);width:37px;height:37px;border-radius:12px;margin-right:10px;font-size:28px}.brand sup{font-size:8px;letter-spacing:1px;border:1px solid #c9d5bd;border-radius:4px;padding:4px;margin-left:7px}nav{display:flex;align-items:center;gap:12px}.nav,.help{border:0;background:none;padding:10px 17px;color:var(--muted);font-size:13px}.nav.active{background:#e7eddf;border-radius:30px;color:var(--ink);font-weight:700}.help{border:1px solid var(--line);border-radius:25px;color:var(--ink)}main{max-width:1200px;margin:0 auto;padding:42px 0 65px;min-height:80vh}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:flex;gap:8px;align-items:center}.dot{width:6px;height:6px;background:#79a74b;border-radius:50%}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:52px;line-height:1.14;letter-spacing:-2.5px;font-weight:600;margin:22px 0 18px}h1 em{font-style:normal;color:#8b9a68}.intro{display:flex;justify-content:space-between;gap:25px;align-items:center}.intro p{color:var(--muted);max-width:530px;line-height:1.7;margin-bottom:28px}.mini-stats{display:flex;gap:30px;align-self:center}.mini-stats div{padding-right:30px;border-right:1px solid var(--line)}.mini-stats div:last-child{border:0;padding:0}.mini-stats strong{font-size:29px;font-weight:500;display:block}.mini-stats small{color:var(--muted);font-size:11px;display:block;margin-top:6px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:28px 0 20px}.section-heading h2{font-size:19px;letter-spacing:-.5px;margin:0}.section-heading span{font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #1b3e2d0b}.illustration{height:225px;position:relative;background:#e9eedc}.illustration svg{width:100%;height:100%}.card:nth-child(2) .illustration{background:#f2e9de}.card:nth-child(3) .illustration{background:#e4ebed}.tag{position:absolute;top:18px;left:18px;border:1px solid #ffffffaa;background:#ffffff75;padding:6px 9px;font-size:10px;border-radius:7px;letter-spacing:.8px}.card-content{padding:24px}.card-top{display:flex;justify-content:space-between;align-items:center}.number{font-size:11px;color:#8b948c}.card h3{font-size:23px;letter-spacing:-.8px;margin:10px 0}.card p{font-size:13px;line-height:1.7;color:var(--muted);min-height:44px}.chips{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 22px}.chip{font-size:10px;background:#f3f5ee;border-radius:5px;padding:6px 8px;color:#6d7d6b}.primary,.secondary,.danger{border:0;border-radius:11px;padding:13px 20px;font-weight:600}.primary{background:var(--green);color:#fff}.primary:hover{background:#163a2a}.secondary{background:#edf0e6;color:var(--ink)}.danger{background:#f5e5df;color:#904e40}.card .primary{width:100%;display:flex;justify-content:space-between}.bottom-banner{display:flex;align-items:center;gap:18px;margin-top:25px;padding:21px 26px;border:1px solid var(--line);border-radius:15px}.bottom-banner b{font-size:13px}.bottom-banner p{font-size:12px;color:var(--muted);margin:5px 0 0}.bottom-banner button{margin-left:auto;white-space:nowrap}.banner-icon{font-size:23px}.back{background:none;border:0;padding:0;color:var(--muted);font-size:13px;margin-bottom:28px}.setup-head{display:flex;justify-content:space-between;align-items:center}.setup-head h1{font-size:36px;letter-spacing:-1.5px;margin:12px 0}.setup-head p{color:var(--muted);line-height:1.7}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;margin-top:28px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.panel h2{font-size:18px;margin:0 0 20px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.mode{border:1px solid var(--line);border-radius:12px;background:white;text-align:left;padding:17px;color:var(--ink);display:flex;gap:12px}.mode.selected{border-color:var(--green);background:#f0f5e7;box-shadow:inset 0 0 0 1px var(--green)}.mode .symbol{font-size:22px}.mode strong{font-size:13px;display:block;margin-bottom:6px}.mode small{font-size:11px;color:var(--muted);line-height:1.5;display:block}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0}label{display:block;font-size:12px;font-weight:600}input,select{width:100%;padding:11px 12px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:#fafbf7;color:var(--ink)}.hint{font-size:12px;color:var(--muted);line-height:1.65}.note{background:#f3f6ec;border-radius:10px;padding:13px;font-size:12px;line-height:1.65;margin:15px 0}.steps{list-style:none;counter-reset:steps;padding:0}.steps li{counter-increment:steps;position:relative;padding:0 0 18px 34px;font-size:13px;line-height:1.65;color:#536459}.steps li:before{content:counter(steps);position:absolute;left:0;top:0;background:#edf1e6;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:10px;color:var(--ink)}.wide{width:100%}.active-zone{max-width:780px;margin:0 auto;text-align:center}.status-pill{display:inline-block;border-radius:30px;background:#e8eedc;font-size:11px;padding:8px 14px;letter-spacing:1px}.timer{font-family:Manrope,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-7px;font-size:108px;font-weight:600;margin:30px 0 10px}.timer.urgent{color:#b56d44}.timer-label{color:var(--muted);font-size:13px}.progress{height:6px;background:#e6ebdf;border-radius:10px;overflow:hidden;margin:30px 0}.progress>div{height:100%;background:#8faa64;transition:width .1s}.controls{display:flex;gap:12px;justify-content:center;margin:25px 0}.controls button{min-width:150px}.hotkey{font-size:11px;color:var(--muted)}kbd{background:#eff2e9;border:1px solid var(--line);border-radius:4px;padding:3px 6px}.session-info{display:flex;justify-content:center;gap:36px;margin-top:30px}.session-info b{display:block;font-size:22px;margin-bottom:5px}.session-info small{color:var(--muted)}.result-icon{background:#e9f2d3;width:70px;height:70px;display:grid;place-items:center;font-size:30px;margin:auto;border-radius:50%}.history-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);gap:12px;font-size:13px}.history-row small{display:block;color:var(--muted);margin-top:5px}.empty{text-align:center;padding:60px 20px}.empty p{color:var(--muted)}footer{max-width:1200px;margin:auto;border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:15px;color:#879080;font-size:10px;letter-spacing:.8px}#overlay:not([hidden]){position:fixed;inset:0;background:#10281ee0;backdrop-filter:blur(7px);z-index:20;display:grid;place-items:center;padding:24px}.modal{width:min(500px,100%);background:var(--bg);border-radius:24px;padding:30px;box-shadow:0 20px 100px #0003}.modal h2{font-size:25px;letter-spacing:-.6px}.modal p{color:#627465;line-height:1.8;font-size:14px}.modal-visual{height:120px;background:#e8eedc;border-radius:15px;display:grid;place-items:center;font-size:50px;margin:15px 0}.modal .actions{display:flex;justify-content:space-between;align-items:center;margin-top:25px;gap:8px}.tutorial-dots{display:flex;gap:5px}.tutorial-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#d0d8c5}.tutorial-dots i.on{background:var(--green);width:20px;border-radius:5px}.modal-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}.text-button{background:none;border:0;color:var(--muted);padding:8px;font-size:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:13px 20px;border-radius:10px;font-size:13px;z-index:30;display:none}.check{display:flex;align-items:center;gap:9px;font-weight:400;line-height:1.5}.check input{width:auto;margin:0}.saved{color:#688d45;font-size:12px}.guide-title{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:22px 0 10px}@media(max-width:1250px){main,footer{margin-left:32px;margin-right:32px}}@media(max-width:800px){header{padding:20px}main{padding-top:28px;margin:0 20px}.intro{display:block}h1{font-size:42px}.mini-stats{margin:20px 0 35px;gap:25px}.grid{grid-template-columns:1fr}.card{display:grid;grid-template-columns:35% 65%}.illustration{height:100%;min-height:245px}.card-content{padding:20px}.card h3{font-size:21px}.layout{grid-template-columns:1fr}.setup-head{align-items:start}.setup-head h1{font-size:30px}.bottom-banner{padding:18px}.bottom-banner button{font-size:11px}.help span{display:none}.help{padding:8px 12px}.nav{padding:9px;font-size:12px}nav{gap:1px}.brand{font-size:20px}.brand sup{display:none}.brand-icon{width:30px;height:30px;font-size:23px}.timer{font-size:80px;letter-spacing:-5px}footer{margin:30px 20px 0;flex-direction:column}.history-row{grid-template-columns:1.5fr 1fr;font-size:12px}.mode{padding:13px}.mode-grid{gap:8px}.panel{padding:20px}.controls{flex-wrap:wrap}.controls button{min-width:130px}.session-info{gap:20px}.section-heading span{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Animated, scrubbable tutorial diagrams */
.modal{max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;width:min(540px,100%);padding:26px;scrollbar-width:thin}.modal h2{margin:19px 0 9px}.modal p{margin:0 0 18px;line-height:1.65}.modal .actions{margin-top:20px}.motion-player{background:#e9efdc;border:1px solid #dce5cc;border-radius:17px;margin-top:16px;overflow:hidden}.motion-kicker{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1px;padding:13px 15px 0;color:#647858}.motion-kicker>span:last-child{margin-left:auto;letter-spacing:0;font-size:9px;color:#7b8b70}.motion-led{width:5px;height:5px;border-radius:50%;background:#86a75e}.motion-svg{width:100%;aspect-ratio:414/260}.motion-svg svg{display:block;width:100%;height:100%}.motion-caption{padding:0 15px 12px;text-align:center;font-size:13px;font-weight:600;min-height:29px}.motion-controls{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#f7faef;border-top:1px solid #dce5cc}.motion-controls button{border:0;background:none;color:#31503d;min-height:33px;font-size:11px;white-space:nowrap;padding:5px}.motion-play{min-width:87px;text-align:left}.motion-controls .motion-seek{padding:0;margin:0;min-width:40px;height:5px;accent-color:#31553f;cursor:pointer}.motion-replay{font-size:22px!important;min-width:30px}@media(max-width:600px){#overlay:not([hidden]){padding:14px}.modal{padding:21px;max-height:calc(100dvh - 28px)}.modal h2{font-size:22px}.modal p{font-size:13px}.motion-svg{max-height:230px}.motion-kicker{font-size:8px}.modal .actions .primary,.modal .actions .secondary{min-height:44px}}@media(max-height:720px){.motion-svg{max-height:170px}.modal{padding:18px}.modal h2{margin-top:13px}.modal .actions{margin-top:13px}}
/* Read the instruction, then watch the movement. */
.modal{width:min(570px,100%);padding:27px 28px 24px;background:#fbfcf7}.modal-top{padding-bottom:14px;border-bottom:1px solid #e2e9d9;font-size:10px;letter-spacing:.65px}.tutorial-copy{padding-top:19px}.tutorial-step-label{display:block;text-transform:uppercase;letter-spacing:1.45px;font-size:9px;font-weight:700;color:#83946d}.tutorial-copy h2{font-size:25px;margin:8px 0 11px;line-height:1.22;letter-spacing:-.8px}.tutorial-copy p{font-size:13px;line-height:1.65;color:#5d6e61;margin:0}.motion-player{margin:18px 0 17px;background:linear-gradient(135deg,#edf2e2,#e5edd8);border-color:#e0e8d3}.motion-kicker{padding-top:11px}.motion-svg{max-height:250px}.motion-caption{font-size:12px}.tutorial-dots{justify-content:center;margin:15px 0 0}.modal .actions{margin-top:16px;gap:15px}.modal .actions button{padding:12px 20px}.knot-instructions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0 11px}.knot-instructions>div{padding:11px 8px;border:1px solid #dfe6d5;border-radius:10px;background:#f1f5e8}.knot-instructions strong{display:block;font-size:14px;color:#31543f;margin-bottom:5px}.knot-instructions span{display:block;font-size:9px;line-height:1.5;color:#6b7b5f}.tutorial-copy .repeat-definition{font-size:11px;color:#738367}@media(max-width:600px){.modal{padding:19px}.tutorial-copy{padding-top:15px}.tutorial-copy h2{font-size:23px}.tutorial-copy p{font-size:12px}.motion-player{margin-top:15px}.motion-svg{max-height:225px}.knot-instructions>div{padding:9px 6px}.knot-instructions strong{font-size:13px}.knot-instructions span{font-size:9px}.modal .actions{margin-top:13px}}@media(max-height:720px){.modal{padding:16px 19px}.tutorial-copy{padding-top:12px}.tutorial-copy h2{font-size:21px;margin-bottom:8px}.motion-player{margin:12px 0}.motion-svg{max-height:175px}.knot-instructions{margin:8px 0}.motion-kicker{padding-top:8px}.motion-caption{padding-bottom:8px}}
/* Calendar dashboard */
.progress-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.progress-heading h1{font-size:42px;margin:15px 0 12px}.progress-filter{min-width:220px}.progress-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:25px 0 28px}.progress-tabs button{border:0;background:none;color:var(--muted);padding:14px 2px;font-weight:600;border-bottom:3px solid transparent}.progress-tabs button.selected{color:var(--ink);border-bottom-color:var(--ink)}.progress-tabs button span{font-size:10px;background:#e5edd9;border-radius:10px;padding:3px 6px;margin-left:5px}.period-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.period-toggle{padding:4px;background:#e8eddf;border-radius:10px;display:flex;gap:3px}.period-toggle button{border:0;border-radius:7px;padding:9px 18px;background:none;color:#6b7c61;font-size:12px}.period-toggle button.selected{background:white;color:var(--ink);box-shadow:0 2px 5px #2030200a}.period-nav{display:flex;align-items:center;gap:15px}.period-nav b{font-size:14px;font-weight:500;text-align:center}.period-nav button{border:1px solid var(--line);background:#fff;color:var(--ink);width:31px;height:31px;border-radius:9px;font-size:21px}.period-nav .today-button{font-size:10px;width:auto;padding:0 10px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:0 0 22px}.metric{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px}.metric>span{font-size:12px;color:var(--muted)}.metric strong{display:block;font-family:Manrope,sans-serif;font-size:32px;letter-spacing:-1px;margin:12px 0}.metric strong i{font-style:normal;font-size:17px;letter-spacing:0;color:#8e9c82}.metric small{font-size:10px;line-height:1.5;color:#86917c;display:block}.primary-metric{background:var(--green);color:#fff}.primary-metric>span,.primary-metric small{color:#c5d6b8}.training-chart{padding:24px 28px}.training-chart .section-heading{margin-top:0}.chart-wrap{display:flex;height:245px;gap:12px;margin-top:30px}.chart-axis{display:flex;flex-direction:column;justify-content:space-between;height:214px;font-size:10px;color:#8a977e;min-width:23px;text-align:right;margin-top:-5px}.chart-scroll{overflow-x:auto;flex:1;scrollbar-width:thin}.chart-plot{height:240px;position:relative}.month-plot{min-width:760px}.chart-grid{position:absolute;inset:0 0 32px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.chart-grid i{border-top:1px solid #e8eddf;display:block;width:100%}.chart-bars{display:flex;gap:10px;position:relative;height:100%;align-items:stretch}.day-bar{flex:1;min-width:0;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;padding:0;color:#7e8e72;position:relative;outline-offset:-2px!important}.bar-space{height:208px;display:flex;align-items:flex-end;width:100%;justify-content:center}.bar-space i{display:block;width:min(100%,43px);background:#a6bd80;border-radius:5px 5px 0 0;transition:background .15s}.day-bar:hover .bar-space i,.day-bar.picked .bar-space i{background:#264f3d}.bar-label{font-size:10px;padding-top:11px}.day-bar.is-today .bar-label{color:var(--ink);font-weight:800}.day-bar.is-today:after{content:'';width:4px;height:4px;border-radius:50%;background:#365937;position:absolute;bottom:0}.day-bar.future{opacity:.35}.chart-detail{font-size:12px;color:#587046;margin-top:18px;padding:13px 15px;background:#f2f6e9;border-radius:8px}.chart-empty{text-align:center;color:#859276;font-size:12px}.distribution{margin-top:22px}.distribution-row{margin:18px 0}.distribution-row>div:first-child{display:flex;justify-content:space-between;font-size:12px;margin-bottom:10px}.distribution-row b{font-weight:500;color:#7d8e70}.distribution-track{height:7px;border-radius:20px;background:#edf1e5;overflow:hidden}.distribution-track span{display:block;height:100%;background:#9db77c;border-radius:20px}.progress-footnote{margin-top:25px;max-width:790px}.record-intro h2{font-size:23px;margin:0}.record-intro p{max-width:800px}.records-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.record-card{background:#fff;border:1px solid var(--line);padding:24px;border-radius:17px}.record-type{color:#899959;font-size:11px;font-weight:700}.record-card h3{font-size:18px;margin:20px 0 14px}.record-value{font-family:Manrope,sans-serif;font-size:35px;letter-spacing:-1.5px}.record-card p{font-size:12px;color:var(--muted);line-height:1.5}.record-bottom{border-top:1px solid #edf0e6;margin-top:25px;padding-top:14px;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#89967c}@media(max-width:800px){.progress-heading h1{font-size:34px}.progress-filter{min-width:170px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:17px}.metric strong{font-size:28px}.records-grid{grid-template-columns:1fr 1fr}.period-toolbar{align-items:flex-start;flex-direction:column}.period-nav{width:100%;justify-content:space-between;gap:8px}.period-nav b{font-size:13px}.training-chart{padding:20px 15px}.chart-bars{gap:6px}.progress-tabs{gap:22px}.progress-heading{align-items:flex-start}.progress-filter{min-width:0;width:155px}.progress-filter select{font-size:11px;padding:10px 6px}.progress-heading .hint{font-size:11px}}@media(max-width:480px){.records-grid{grid-template-columns:1fr}.metric small{font-size:9px}.progress-heading{display:block}.progress-filter{width:100%;margin-top:17px}.progress-filter select{font-size:13px}.chart-wrap{gap:8px}.chart-bars{gap:9px}.progress-tabs{justify-content:space-between;gap:8px}.progress-tabs button{font-size:13px}}
.tutorial-reference{font-size:10px;color:#788b6a;display:inline-block;margin-top:8px;text-underline-offset:3px}

/* Knot guide reserves its own row for the direction inset and three steps. */
.knot-player .motion-svg{aspect-ratio:414/320;max-height:none}.knot-player .motion-caption[hidden]{display:none}

/* Optional camera workspace */
.camera-panel{margin:24px 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}.camera-heading{display:flex;align-items:center;gap:16px;justify-content:space-between}.camera-heading>div{flex:1}.camera-status{color:var(--muted);font-size:12px;line-height:1.5;margin:8px 0 0}.camera-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:16px 0}.camera-tools label{flex:1;min-width:180px}.camera-tools button{padding:11px;font-size:12px}.camera-stage{position:relative;background:#10201b;border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-top:16px}.camera-stage video{display:block;width:100%;height:100%;object-fit:contain}.camera-live-label{position:absolute;left:12px;top:12px;border-radius:20px;background:#10281dcc;color:#fff;font-size:10px;padding:7px 10px;pointer-events:none}.camera-start{width:100%;margin-top:14px}.camera-help{font-size:11px;color:var(--muted);line-height:1.6;margin-top:14px}.camera-help summary{cursor:pointer}.camera-panel [hidden]{display:none!important}#app.camera-training:not(.camera-minimized){display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;max-width:1500px;padding:24px}#app.camera-training:not(.camera-minimized) .camera-panel{margin:0;align-self:start}#app.camera-training:not(.camera-minimized) .active-zone{width:100%;min-width:0}#app.camera-training:not(.camera-minimized) .active-zone>.panel{padding:16px}#app.camera-training:not(.camera-minimized) .timer{font-size:58px;letter-spacing:-3px;margin:20px 0 10px}#app.camera-training:not(.camera-minimized) .controls{flex-direction:column;gap:9px}#app.camera-training:not(.camera-minimized) .controls button{min-width:0}#app.camera-training:not(.camera-minimized) .session-info{gap:18px}#app.camera-training:not(.camera-minimized) .session-info b{font-size:18px}#app.camera-training:not(.camera-minimized) .hotkey{font-size:10px}#app.camera-training:not(.camera-minimized) h2{font-size:19px}#app.camera-training:not(.camera-minimized) .hint{font-size:11px}#app:fullscreen{background:var(--bg);overflow:auto;width:100%;max-width:none;height:100%;padding:20px}#app.camera-expanded{position:fixed;inset:0;z-index:30;background:var(--bg);overflow:auto;max-width:none;padding:20px;margin:0}#app:fullscreen .camera-stage{max-height:75vh}#app.camera-expanded .camera-stage{max-height:70vh}
@media(max-width:800px){#app.camera-training:not(.camera-minimized){display:block;padding:12px}#app.camera-training:not(.camera-minimized) .camera-panel{padding:12px}#app.camera-training:not(.camera-minimized) .active-zone{margin-top:14px}#app.camera-training:not(.camera-minimized) .controls{flex-direction:row}#app.camera-training:not(.camera-minimized) .controls button{flex:1;padding:14px 8px}#app.camera-training:not(.camera-minimized) .session-info,#app.camera-training:not(.camera-minimized) .hotkey,#app.camera-training:not(.camera-minimized) .active-zone>.hint{display:none}#app.camera-training:not(.camera-minimized) .timer{margin:8px 0;font-size:48px}#app.camera-training:not(.camera-minimized) .progress{margin:12px 0}.camera-heading{flex-wrap:wrap}.camera-heading>div{min-width:160px}.camera-panel{padding:14px}.camera-tools{gap:6px}.camera-tools label{flex-basis:100%}.camera-stage{aspect-ratio:4/3}.camera-help{font-size:10px}}

/* Live training is a camera monitor, with controls over the image. */
.camera-options{display:none}body.camera-immersive{overflow:hidden}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded){position:fixed;inset:0;z-index:40;width:100%;height:100vh;height:100dvh;max-width:none;padding:0;margin:0;display:block;background:#07110e;overflow:hidden;color:white}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded)>.camera-panel{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:transparent}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-stage{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;border-radius:0;background:#07110e}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-stage video{width:100%;height:100%;object-fit:contain}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-live-label{display:none}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options{display:block;position:absolute;z-index:5;left:max(12px,env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));min-height:42px;padding:10px 13px;color:white;background:#132e24e6;border:1px solid #ffffff40;border-radius:12px;font-size:12px}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-heading,#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-tools,#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-help{display:none}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options-open .camera-heading{display:flex;position:absolute;z-index:6;top:calc(64px + env(safe-area-inset-top));left:12px;right:12px;background:#f6f7f1;color:var(--ink);padding:14px;border-radius:14px 14px 0 0;min-height:95px;align-items:start}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options-open .camera-tools{display:flex;position:absolute;z-index:6;top:calc(159px + env(safe-area-inset-top));left:12px;right:12px;background:#f6f7f1;color:var(--ink);margin:0;padding:14px;border-radius:0 0 14px 14px;box-shadow:0 12px 24px #0005;align-items:center}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-tools label{flex-basis:100%}
#app.camera-training:not(.camera-minimized) .camera-full{display:none}
#app.camera-training:not(.camera-minimized)>.active-zone,#app.camera-training:not(.camera-minimized)>.active-zone>.panel{display:contents}
#app.camera-training:not(.camera-minimized) .active-zone>h2,#app.camera-training:not(.camera-minimized) .active-zone>.hint,#app.camera-training:not(.camera-minimized) .active-zone .timer-label,#app.camera-training:not(.camera-minimized) .active-zone .progress,#app.camera-training:not(.camera-minimized) .active-zone .session-info,#app.camera-training:not(.camera-minimized) .active-zone .hotkey,#app.camera-training:not(.camera-minimized) .active-zone .note{display:none}
#app.camera-training:not(.camera-minimized) .active-zone>.status-pill{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));max-width:52%;background:#132e24dd;color:white;font-size:10px;padding:10px 12px}
#app.camera-training:not(.camera-minimized) .timer{position:absolute;z-index:3;top:calc(62px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;padding:8px 18px;border-radius:16px;background:#07110eb3;color:white;font-size:44px;letter-spacing:-2px;line-height:1.15;text-shadow:0 1px 5px #0007}
#app.camera-training:not(.camera-minimized) .timer.urgent{color:#ffc790}
#app.camera-training:not(.camera-minimized) .controls{position:absolute;z-index:4;bottom:calc(45px + env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;flex-direction:row;justify-content:center;gap:12px;margin:0}
#app.camera-training:not(.camera-minimized) .controls button{min-width:0;max-width:290px;min-height:54px;flex:1;padding:14px 12px;box-shadow:0 3px 18px #0004;font-size:15px}
#app.camera-training:not(.camera-minimized) #abort{position:absolute;z-index:4;bottom:calc(7px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 16px;color:#fff;background:#07110ecc;border-radius:20px;font-size:11px}
#app.camera-training:not(.camera-minimized) #cancel{position:absolute;z-index:4;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-width:150px;min-height:50px}
#app.camera-expanded:not(.camera-training:not(.camera-minimized))>:not(.camera-panel){display:none}
#app.camera-expanded .camera-start{position:absolute;z-index:4;bottom:calc(24px + env(safe-area-inset-bottom));left:14px;right:14px;width:calc(100% - 28px);min-height:54px;margin:0}
@media(orientation:landscape) and (max-height:550px){#app.camera-training:not(.camera-minimized) .timer{top:calc(12px + env(safe-area-inset-top));font-size:32px}#app.camera-training:not(.camera-minimized) .controls{left:auto;width:360px;bottom:calc(35px + env(safe-area-inset-bottom))}#app.camera-training:not(.camera-minimized) .controls button{min-height:45px;font-size:13px}#app.camera-training:not(.camera-minimized) #abort{left:auto;right:16px;transform:none}#app.camera-training:not(.camera-minimized) .active-zone>.status-pill{font-size:9px}}

#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-settings{display:none}#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options-open .camera-settings{display:block;position:absolute;z-index:6;top:calc(64px + env(safe-area-inset-top));left:12px;right:12px;max-height:calc(100dvh - 175px - env(safe-area-inset-top));overflow:auto;background:#f6f7f1;border-radius:14px;box-shadow:0 12px 24px #0005}#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options-open .camera-settings .camera-heading,#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-options-open .camera-settings .camera-tools{position:static;min-height:0;box-shadow:none;border-radius:0}

/* Explicit monitor dimensions: do not inherit the old grid item's shrink alignment. */
#app:is(.camera-training:not(.camera-minimized),.camera-expanded)>.camera-panel{width:100%;height:100%;min-height:100%;align-self:stretch;justify-self:stretch}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;min-height:100%;z-index:0}
#app:is(.camera-training:not(.camera-minimized),.camera-expanded) .camera-stage video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.camera-recover{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);max-width:85%;padding:14px 20px;border:1px solid #fff6;border-radius:12px;color:#fff;background:#254e3def;font:inherit;box-shadow:0 3px 24px #0006}.camera-recover[hidden]{display:none!important}

.free-layout{display:block;max-width:720px;margin:0 auto}.free-layout .panel{text-align:center}.free-ready{font-size:clamp(56px,10vw,88px);margin:20px 0}