/* Camera-first studio, inspired by the user's video reference. */
:root{color-scheme:dark;--ink:#edeeeb;--teal:#d5e6b9;--mint:#252c24;--cream:#080909;--paper:#111313;--coral:#d5e6b9;--muted:#969e98;--line:#303531;--shadow:none}
body{background:#080909;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a,button,input,select,textarea{outline-offset:5px}
:focus-visible{outline:2px solid #d5e6b9}
button:disabled{cursor:not-allowed;opacity:.4}
.site-header{max-width:1260px;height:78px;border-bottom:1px solid #202421;padding:0 30px}
.brand{font:600 20px Manrope;letter-spacing:-1px;gap:10px}.brand-version{font:400 11px monospace;color:#858d86;letter-spacing:0}
.brand-mark{background:transparent;color:#d5e6b9;font-size:30px;transform:none;width:28px}
nav{gap:23px}nav a{font-size:11px;font-weight:400;color:#959d97}.icon-button{width:32px;height:32px;background:#131614}
.hero{margin:43px auto 28px;max-width:900px}.hero .eyebrow{font:10px monospace;letter-spacing:.17em;color:#b9c3b7}.hero .eyebrow>span{width:5px;height:5px;border-radius:50%;background:#cceba8}
.hero h1{font:500 clamp(42px,5vw,68px)/1.04 Manrope;letter-spacing:-.06em;margin:15px 0}.hero h1 br{display:none}.hero h1 em{color:#99a38f;font-weight:400;margin-left:.2em}
.hero>p{font-size:13px;color:#adb4ad}.privacy-note{font:10px monospace;margin-top:12px;color:#79837c}.privacy-note span{color:#cceba8}
.workspace{display:flex;flex-direction:column;max-width:1120px;padding:0 24px;gap:0;margin-bottom:90px}
.camera-card{padding:0;border:1px solid #414742;border-radius:9px;overflow:hidden;background:#101311;display:grid;grid-template-columns:1fr auto}
.camera-card>.card-heading{grid-column:1;margin:0;padding:14px 18px;gap:16px}.card-heading h2{font:500 12px Manrope;letter-spacing:.015em}.card-heading h2 small{font:10px monospace;color:#808b82;margin-left:8px}.step{display:none}
.status-pill{font:9px monospace;border:0;padding:0;background:none}.status-pill.live{background:none;color:#d5e6b9}.status-pill.live i{background:#d5e6b9;box-shadow:0 0 8px #a4d16b66}
.mode-picker{grid-column:2;padding:8px 16px;gap:10px;font:9px monospace;color:#8e988e}.mode-picker select{padding:7px 24px 7px 9px;border:1px solid #343a34;border-radius:4px;font:10px monospace;background:#161b17;color:#d9dfd6}
.camera-stage{grid-column:1/-1;aspect-ratio:16/9;border-radius:0;background:radial-gradient(ellipse at 50% 60%,#27322944,transparent 60%),repeating-linear-gradient(0deg,transparent 0 39px,#b9cfb005 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#b9cfb005 39px 40px),#0c100e;border-top:1px solid #303630;border-bottom:1px solid #303630}
.camera-stage video,.camera-stage canvas{object-fit:contain}.camera-placeholder{gap:9px;transform:translateY(8px)}.camera-placeholder strong{font:500 20px Manrope;color:#d7ddd5;letter-spacing:-.04em}.camera-placeholder>span{font:10px monospace;color:#8b968d}
.hand-symbol{background:none;border:1px solid #3a473a;border-radius:50%;height:105px;width:105px;margin-bottom:10px;color:#aec09e;box-shadow:0 0 50px #a8d08b09}.hand-symbol svg{width:47px;height:63px}
.frame-guide{inset:66px 34px 40px}.frame-guide i{width:20px;height:20px;border-color:#bfd4b54a}.frame-guide i:nth-child(1){border-width:1px 0 0 1px}.frame-guide i:nth-child(2){border-width:1px 1px 0 0}.frame-guide i:nth-child(3){border-width:0 1px 1px 0}.frame-guide i:nth-child(4){border-width:0 0 1px 1px}
.capture-topline,.capture-bottomline{position:absolute;left:16px;right:16px;z-index:4;display:flex;justify-content:space-between;font:8px monospace;letter-spacing:.1em;color:#a8b4a8;pointer-events:none;text-shadow:0 1px 3px #000}
.capture-topline{top:14px}.capture-topline i{display:inline-block;width:4px;height:4px;background:#c5dcb1;border-radius:50%;margin-right:6px}.capture-bottomline{bottom:10px;font-size:7px;color:#96a193}.capture-bottomline i{font-style:normal;color:#aebda2;margin:0 8px}
.capture-transcript{position:absolute;top:42px;left:34px;right:34px;color:#edf3e9;font:500 16px Manrope;z-index:4;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px #000}
.capture-telemetry{position:absolute;right:18px;bottom:46px;z-index:4;display:grid;gap:8px;font:7px monospace;color:#9ba693;pointer-events:none}.capture-telemetry span{display:flex;align-items:center;gap:12px;justify-content:space-between}.capture-telemetry b{font:8px monospace;color:#d3ddc8;background:#161d17c9;padding:4px 7px;border:1px solid #5b6a504d;border-radius:3px;min-width:54px;text-align:center}
.live-result{left:50%;bottom:35px;transform:translateX(-50%);background:#0a0e0bdd;border:1px solid #79836c66;border-radius:4px;padding:8px 20px;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:55%;min-width:100px}.live-result>span{font:7px monospace;color:#b9c4ac;letter-spacing:.15em}.live-result strong{font:600 25px Manrope;line-height:1.1}.live-result small{font:8px monospace;color:#a2b193;text-align:center}
.camera-card>.camera-actions{grid-column:1;margin:0;padding:12px 16px;gap:8px}.camera-card>.camera-actions button{flex:initial;padding:9px 16px;font-size:10px}.camera-card>.camera-tip{grid-column:2;margin:0;align-self:center;padding:10px 16px;max-width:330px;text-align:right;font:9px/1.5 monospace}
.primary-button,.speak-button,.primary-link{background:#d5e6b9;color:#162010;border-radius:5px;font-size:12px}.primary-button:hover,.speak-button:hover,.primary-link:hover{background:#ebf6d7}
.secondary-button,.copy-button{background:#141915;color:#d1d9cf;border:1px solid #394137;border-radius:5px;font-size:12px}.secondary-button:hover,.copy-button:hover{background:#252d24}.text-button{color:#b9c8a7;font-size:11px}.text-button:hover{text-decoration:underline}
.workflow-strip{display:grid;grid-template-columns:repeat(4,1fr);width:min(640px,100%);margin:24px auto 30px;gap:8px}
.workflow-strip>a,.workflow-strip>button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:center;text-align:left;gap:12px 8px;min-height:105px;padding:13px 17px;border:1px solid #252c25;border-radius:8px;color:#9ca595;background:transparent;text-decoration:none;font:11px/1.35 Manrope;transition:border-color .2s,color .2s}
.workflow-strip>a:hover,.workflow-strip>button:hover{border-color:#79836e;color:white}.workflow-number{grid-column:1/-1;color:#7c8877;font:8px monospace}.workflow-strip .active{border-color:#b5c49f;background:#bcd0a409;color:#e5eedb}.workflow-strip i{font-style:normal}.workflow-orb{width:15px;height:15px;border-radius:50%;background:#c1d4a9;box-shadow:0 0 13px #c4e99460}.workflow-grid,.workflow-lines{font-size:26px;color:#c1d4a9}.workflow-wave{font-size:11px;letter-spacing:1px;color:#c1d4a9}
.output-card{border:1px solid #2f352d;border-radius:8px;padding:20px 24px;background:#111410;display:grid;grid-template-columns:1fr auto;gap:12px 20px;box-shadow:none}.output-card>.card-heading{grid-column:1/-1;margin:0}.message-box{min-height:70px;padding:0;border:0;border-radius:0;background:transparent;gap:14px}.message-box p{font:400 24px/1.5 Manrope;color:#e3ebda;letter-spacing:-.025em}.message-box p span{color:#889180;font-size:14px}.message-controls{justify-content:flex-start}.message-controls button{background:#1e251b;border-color:#35412e;color:#b4c2a2;font-size:9px;border-radius:3px}.output-actions{margin:0;align-items:center;flex-wrap:wrap}.output-actions button{min-width:auto;padding:11px 15px;flex:initial}.recognition-info{display:none}
.learn-section,.data-section{max-width:1120px;margin:70px auto;padding:0 24px}.section-title h2{font:500 28px/1.2 Manrope;letter-spacing:-.04em}.section-title>p{font-size:12px}.eyebrow,.eyebrow.light{color:#abb99e;font:9px monospace;letter-spacing:.14em}.eyebrow>span{background:#9cac89}
.sign-card{background:#121610;border-color:#2e3529;border-radius:8px}.sign-visual{background:#1d2519;border-radius:5px;height:85px;font-size:36px}.sign-visual span{color:#9db88566}.sign-card h3{color:#d5dfca}.sign-card p{color:#9da991}.sign-card:hover{box-shadow:none;border-color:#7a8c69}
.ai-section,.evaluation-section,.about-section{background:#10130f;border-top:1px solid #2b3226;border-bottom:1px solid #2b3226;color:#dde5d5;gap:50px;padding-top:55px;padding-bottom:55px}
.ai-copy h2,.evaluation-copy h2,.about-section h2{font:500 34px/1.2 Manrope;letter-spacing:-.035em}.ai-copy p,.evaluation-copy>p,.about-section>p{color:#a0ad95;font-size:13px}.ai-badges span{border-color:#3b4931;color:#b5c2a9;border-radius:4px;font:9px monospace}.trainer-card,.evaluation-form{background:#171d13;color:#dbe5cf;border:1px solid #36442b;border-radius:8px;padding:24px}.trainer-heading b{font-size:14px}.trainer-heading small{font-size:10px;line-height:1.5;color:#a7b19d}.trainer-card>p{color:#a9b79b;font-size:11px;line-height:1.6}
.trainer-label select,.evaluation-form select,.evaluation-form textarea,#motionLabel{background:#0e130b;border:1px solid #405131;color:#dce8d0;border-radius:4px;font-size:12px}.sample-counts span{background:#242e1d;color:#b9caa8;border-radius:3px}.sample-counts b{color:#e2eed7}.training-progress{background:#2d3b21;border-radius:2px}.training-progress i{background:#c2df9d}.rating-summary{border-color:#46513b;color:#b9c6ad}.rating-row output{color:#c2df9d}
.motion-section{background:#10150d;border:1px solid #33432a;border-radius:8px;max-width:1072px;padding:30px;color:#e0ebd6;margin:65px auto}.motion-section>p{font-size:13px;color:#a9b89b}.motion-grid .trainer-card{background:#181f12;color:#dbe9ce}.motion-section .camera-tip{font-size:11px}.speech-option{font-size:11px;color:#b7cba4}.speech-option input{accent-color:#bedc97}.motion-grid{gap:20px}#motionReady{font-size:13px}#motionLabel{width:100%}
.history-item{border-radius:6px;background:#11150e;border-color:#303b27}.empty-state{border-radius:6px;font-size:12px}.dashboard{border-radius:6px;border-color:#303b27;background:#303b27}.dashboard div{background:#12180d}.dashboard b{color:#c3d5ad}.dashboard span{color:#94a283}.metrics{border-color:#39492d}.metrics b{color:#c3d5ad}.metrics span{color:#a2b48e}.about-section .metrics{padding-top:25px}.about-section h2{max-width:460px}
footer{background:#080b06;color:#7b8c6a;border-top:1px solid #26311d;font:9px monospace}.toast{background:#d5e6b9;color:#192310;border-radius:5px;border:1px solid #e2efce;max-width:calc(100vw - 40px)}.skip-link{background:#d5e6b9;color:#17210f}
body.high-contrast{--ink:#fff;--teal:#fff;--cream:#000;--paper:#000;--muted:#ddd;--line:#aaa;background:#000;color:#fff}.high-contrast .camera-card,.high-contrast .output-card,.high-contrast .trainer-card,.high-contrast .motion-section{border-color:#ccc}.high-contrast .camera-stage{outline:none}.high-contrast p,.high-contrast small,.high-contrast nav a{color:#e5e5e5}
@media(min-width:1500px){.hero{margin-top:55px}}
@media(max-width:900px){nav{gap:13px}.brand-version{display:none}.camera-card>.camera-tip{max-width:230px}.output-card{grid-template-columns:1fr}.output-actions{justify-content:flex-start}.motion-section{margin:50px 24px}.ai-section,.evaluation-section{gap:30px}}
@media(max-width:800px){.ai-section,.evaluation-section{grid-template-columns:1fr}.hero{margin-top:32px}.site-header{height:65px}.camera-card>.camera-tip{grid-column:1/-1;max-width:none;text-align:left;padding:0 16px 12px}.camera-card>.camera-actions{grid-column:1/-1}.mode-picker{font-size:0;gap:0}.mode-picker select{max-width:215px}.capture-transcript{font-size:12px;left:20px;right:20px}.capture-telemetry{display:none}.frame-guide{inset:62px 18px 35px}.workflow-strip{margin:18px auto 24px}.section-title{gap:20px}.motion-grid{grid-template-columns:1fr}}
@media(max-width:480px){.site-header{padding:0 18px}.hero h1{font-size:43px}.hero h1 br{display:block}.hero h1 em{margin:0}.hero>p{font-size:12px}.privacy-note{font-size:8px}.workspace{padding:0 12px;margin-bottom:50px}.camera-card{display:block}.camera-card>.card-heading{padding:12px}.mode-picker{padding:0 12px 12px;display:block}.mode-picker select{width:100%;max-width:none;font-size:10px}.camera-stage{aspect-ratio:4/3}.hand-symbol{width:70px;height:70px;margin-bottom:0}.hand-symbol svg{width:34px;height:45px}.camera-placeholder strong{font-size:16px}.camera-placeholder>span{font-size:8px}.capture-topline{font-size:6px;left:10px;right:10px}.capture-bottomline{font-size:6px;left:10px;right:10px}.capture-bottomline>span:last-child{display:none}.capture-transcript{font-size:10px;top:35px;left:16px}.live-result{bottom:28px;max-width:75%;padding:6px 13px}.live-result strong{font-size:22px}.live-result small{font-size:7px}.workflow-strip{gap:5px}.workflow-strip>a,.workflow-strip>button{padding:10px 8px;min-height:100px;font-size:9px;grid-template-columns:1fr;gap:6px}.workflow-strip i{display:none}.workflow-number{font-size:7px}.output-card{padding:16px;gap:16px}.output-card .card-heading h2 small{display:none}.output-actions{gap:6px}.output-actions button{font-size:10px;padding:10px 12px}.message-box{min-height:65px}.message-box p{font-size:20px}.motion-section{margin:40px 12px;padding:20px 16px}.trainer-card{padding:18px}.section-title h2{font-size:25px}.ai-copy h2,.evaluation-copy h2,.about-section h2{font-size:29px}.ai-section,.evaluation-section,.about-section{padding:38px 18px}.section-actions{flex-wrap:wrap}.camera-actions{flex-wrap:wrap}}
.brand-mark svg{width:25px;height:25px}.workflow-grid{width:18px;height:18px;border:1px solid #c1d4a9;background:linear-gradient(90deg,transparent 45%,#c1d4a9 45%,#c1d4a9 51%,transparent 51%),linear-gradient(transparent 45%,#c1d4a9 45%,#c1d4a9 51%,transparent 51%)}.workflow-wave svg{width:24px;height:24px}#cameraButton>span{display:inline-block;font-size:0;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;margin-right:5px}

.face-controls{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid #303630;color:#b8c9a7;font:10px monospace}.face-controls label{display:flex;align-items:center;gap:7px}.face-controls input{accent-color:#d5e6b9}.face-controls>span{color:#dbe8ce;border:1px solid #39472e;padding:4px 7px;border-radius:3px}.face-controls small{margin-left:auto;color:#9cae8c;font-size:9px}.camera-card>.camera-tip{grid-column:1/-1;max-width:none;text-align:left;padding:0 16px 12px}@media(max-width:480px){.face-controls{gap:9px;padding:10px 12px}.face-controls small{margin:0;flex-basis:100%;font-size:8px}}

.motion-section .motion-grid{grid-template-columns:1fr}.optional-training{margin-top:16px}.optional-training summary{cursor:pointer;font-size:13px}.optional-training[open] summary{margin-bottom:18px}