:root {
  --ink: #071225;
  --muted: #738096;
  --panel: rgba(255,255,255,.86);
  --line: #dce5ef;
  --cyan: #18bfe8;
  --cyan-2: #69e5ff;
  --blue: #1573ff;
  --lime: #34d399;
  --amber: #f6b84a;
  --danger: #f05d6c;
  --shadow: 0 24px 70px rgba(10, 37, 65, .11);
}
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:#f4f8fc; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; min-height:100vh; overflow-x:hidden; }
.page-glow { position:fixed; width:600px; height:600px; border-radius:50%; filter:blur(110px); opacity:.18; pointer-events:none; }
.glow-a { background:#4edcf6; top:-350px; right:-180px; }
.glow-b { background:#2a79ff; bottom:-420px; left:-240px; }
.shell { width:min(1440px, calc(100% - 64px)); margin:0 auto; position:relative; }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(135,155,178,.22); }
.brand { display:flex; align-items:center; gap:12px; }
.brand strong { display:block; font-size:22px; letter-spacing:-.5px; }
.brand small { display:block; margin-top:3px; font-size:9px; letter-spacing:2.2px; color:var(--muted); }
.brand-mark { width:38px; height:32px; border:3px solid var(--blue); border-radius:8px; position:relative; }
.brand-mark::before { content:""; width:12px; height:5px; background:var(--blue); position:absolute; left:10px; top:-7px; border-radius:3px 3px 0 0; }
.brand-mark span { width:11px; height:11px; border:3px solid var(--blue); border-radius:50%; position:absolute; left:10px; top:7px; }
.runtime-badges { display:flex; gap:9px; }
.badge { color:#536075; background:rgba(255,255,255,.68); border:1px solid #dbe5ef; padding:8px 12px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; background:#bbc5d1; }
.dot.live { background:var(--lime); box-shadow:0 0 0 4px rgba(52,211,153,.12); }
.hero-copy { padding:54px 0 34px; display:grid; grid-template-columns:1fr 1fr; column-gap:30px; align-items:end; }
.eyebrow,.kicker { color:var(--blue); font-weight:800; font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.hero-copy .eyebrow { grid-column:1/-1; margin-bottom:14px; }
h1 { margin:0; font-size:clamp(40px,5.2vw,75px); line-height:.97; letter-spacing:-4.5px; font-weight:750; }
h1 span { color:#9aa9ba; }
.hero-copy p { margin:0 0 6px; max-width:590px; color:#5f6d81; line-height:1.7; font-size:15px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:20px; align-items:start; }
.panel { background:var(--panel); backdrop-filter:blur(20px); border:1px solid rgba(205,218,231,.86); border-radius:22px; box-shadow:var(--shadow); }
.camera-card { padding:20px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.panel-heading h2 { font-size:19px; margin:5px 0 0; letter-spacing:-.45px; }
.panel-heading.compact { margin-bottom:22px; }
.status-chip { border-radius:999px; padding:8px 11px; text-transform:uppercase; letter-spacing:1px; font-size:9px; font-weight:800; background:#f0f4f8; color:#7f8a9a; }
.status-chip i { width:6px; height:6px; background:#aeb8c5; display:inline-block; border-radius:50%; margin-right:6px; }
.status-chip.live { color:#0a9a76; background:#e9fbf5; }
.status-chip.live i { background:var(--lime); }
.status-chip.recording { color:#db3f53; background:#fff0f2; }
.status-chip.recording i { background:var(--danger); animation:pulse 1.2s infinite; }
.camera-stage { position:relative; aspect-ratio:16/9; background:#091426; border-radius:16px; overflow:hidden; isolation:isolate; }
#video,#overlay { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; }
#video { transform:scaleX(-1); }
#overlay { z-index:3; }
.camera-empty { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#c8d7e8; gap:8px; background:radial-gradient(circle at center,#172b43,#071221 70%); }
.camera-empty span { font-size:11px; color:#6f839a; }
.camera-icon { width:54px; height:38px; border:2px solid #36536f; border-radius:10px; position:relative; margin-bottom:8px; }
.camera-icon::before { content:""; position:absolute; width:14px; height:14px; border:2px solid #5f819e; border-radius:50%; left:18px; top:10px; }
.camera-icon::after { content:""; position:absolute; width:18px; height:7px; border-radius:4px 4px 0 0; background:#36536f; left:17px; top:-7px; }
.preflight-guide { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; justify-content:center; padding:clamp(18px,4vw,44px); color:white; background:rgba(4,14,27,.91); backdrop-filter:blur(12px); animation:guide-in .35s ease both; }
.preflight-guide.leaving { animation:guide-out .55s ease both; }
.preflight-title { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(14px,2.4vw,28px); }
.preflight-title b { font-size:clamp(17px,2.4vw,27px); letter-spacing:-.6px; }
.preflight-title span { color:#8ba0b7; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.preflight-title strong { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:5px; color:#061526; background:var(--cyan-2); border-radius:50%; font-size:11px; }
.preflight-poses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:clamp(6px,1vw,12px); }
.preflight-pose { min-width:0; text-align:center; padding:clamp(10px,2vw,18px) 7px; border:1px solid rgba(116,190,219,.22); border-radius:13px; background:rgba(16,43,67,.54); }
.preflight-pose > span { display:inline-grid; place-items:center; width:17px; height:17px; margin-top:9px; border-radius:50%; color:#042033; background:#63ddf5; font-size:8px; font-weight:900; }
.preflight-pose b,.preflight-pose small { display:block; }
.preflight-pose b { margin-top:5px; font-size:11px; }
.preflight-pose small { margin-top:2px; color:#7890a9; font-size:8px; }
.preflight-arrow { color:#4a6a86; font-size:22px; }
.head-diagram { width:47px; height:58px; margin:0 auto; border:2px solid #54d6f1; border-radius:50% / 57%; position:relative; transition:.2s; }
.head-diagram i { position:absolute; width:4px; height:4px; top:23px; left:13px; background:#8be8fa; border-radius:50%; box-shadow:14px 0 #8be8fa; }
.head-diagram em { position:absolute; width:13px; height:5px; left:15px; top:37px; border-bottom:2px solid #8be8fa; border-radius:50%; }
.head-diagram.left { transform:perspective(90px) rotateY(-24deg); }
.head-diagram.right { transform:perspective(90px) rotateY(24deg); }
.head-diagram.left.full { transform:perspective(90px) rotateY(-43deg); }
.head-diagram.right.full { transform:perspective(90px) rotateY(43deg); }
.preflight-guide p { margin:clamp(13px,2vw,22px) 0 0; text-align:center; color:#87a0b8; font-size:9px; }
.top-instruction { position:absolute; z-index:5; top:17px; left:50%; transform:translateX(-50%); padding:9px 14px; border-radius:9px; background:rgba(4,15,29,.72); color:white; backdrop-filter:blur(8px); font-size:12px; font-weight:700; white-space:nowrap; opacity:0; transition:.2s; }
.camera-stage.active .top-instruction { opacity:1; }
.pose-readout { position:absolute; z-index:5; bottom:14px; left:14px; display:flex; gap:6px; }
.pose-readout span { background:rgba(5,15,28,.70); color:#7f90a7; font-size:8px; letter-spacing:1px; padding:7px 9px; border-radius:6px; backdrop-filter:blur(7px); }
.pose-readout b { color:#eaf7ff; margin-left:4px; font-size:10px; }
.timer { position:absolute; z-index:5; bottom:14px; right:14px; background:rgba(5,15,28,.70); color:#f3f7fb; padding:8px 10px; border-radius:6px; font:700 10px ui-monospace, monospace; letter-spacing:1px; }
.challenge-steps { display:flex; align-items:center; justify-content:center; padding:18px 8px 14px; }
.challenge-step { display:flex; align-items:center; gap:7px; min-width:92px; }
.challenge-step > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#edf2f7; color:#8995a5; font-size:11px; font-weight:800; border:1px solid #e0e7ee; }
.challenge-step b,.challenge-step small { display:block; }
.challenge-step b { font-size:11px; }
.challenge-step small { margin-top:2px; font-size:9px; color:#98a3b2; }
.challenge-step.current > span { background:#e8faff; color:#058db4; border-color:#73daf2; box-shadow:0 0 0 5px rgba(24,191,232,.10); }
.challenge-step.done > span { background:var(--lime); border-color:var(--lime); color:white; }
.challenge-line { height:1px; background:#dfe7ef; width:24px; margin:0 5px; }
.capture-form { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; padding:4px 0 15px; border-bottom:1px solid #e4eaf1; }
.field span { display:block; color:#8390a1; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.field input { width:100%; height:40px; border:1px solid #dbe4ed; border-radius:9px; padding:0 12px; font:inherit; font-size:12px; outline:none; background:#fbfdff; }
.field input:focus { border-color:#67d8ef; box-shadow:0 0 0 3px rgba(24,191,232,.10); }
.toggle-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-row input { display:none; }
.toggle { width:38px; height:21px; border-radius:20px; background:#c9d3de; padding:3px; transition:.2s; flex:0 0 auto; }
.toggle i { display:block; width:15px; height:15px; border-radius:50%; background:white; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.17); }
.toggle-row input:checked + .toggle { background:var(--cyan); }
.toggle-row input:checked + .toggle i { transform:translateX(17px); }
.toggle-row b,.toggle-row small { display:block; }
.toggle-row b { font-size:11px; }
.toggle-row small { font-size:9px; color:#8a96a7; margin-top:2px; }
.button-row { display:flex; gap:9px; padding-top:15px; }
.camera-controls { padding:0 0 14px; }
.button { height:42px; border-radius:9px; padding:0 16px; border:0; font:700 11px inherit; cursor:pointer; transition:.2s; }
.button:disabled { cursor:not-allowed; opacity:.45; }
.button.primary { background:linear-gradient(135deg,#1573ff,#09b9e5); color:white; box-shadow:0 9px 22px rgba(21,115,255,.24); flex:1; }
.button.primary:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(21,115,255,.30); }
.button.secondary { background:#ecf2f8; color:#344256; }
.button.danger { background:#fff0f2; color:#dc4659; }
.record-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:#ff5368; margin-right:7px; }
.message { min-height:16px; margin-top:10px; color:#69778b; font-size:11px; }
.message.error { color:#d64155; }
.message.success { color:#0a9a76; }
.telemetry { padding:20px; }
.metric-block { padding:15px; border:1px solid #e2e8ef; border-radius:13px; background:#fbfdff; }
.metric-title,.metric-sub { display:flex; justify-content:space-between; align-items:center; }
.metric-title { font-size:11px; font-weight:700; }
.metric-title b { color:var(--blue); font-size:17px; }
.meter { height:6px; margin:12px 0; background:#e8eef4; border-radius:5px; overflow:hidden; }
.meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--amber),var(--cyan),var(--lime)); transition:.25s; }
.metric-sub { color:#909cac; font-size:9px; }
.metric-sub b { color:#5d6b7d; }
.fill-block { margin-top:13px; }
.fill-meter { position:relative; overflow:visible; }
.fill-meter > span { position:absolute; top:-3px; bottom:-3px; left:55%; width:2px; border-radius:2px; background:#0f6fff; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.axis-card { margin-top:13px; padding:15px; border:1px solid #e2e8ef; border-radius:13px; }
.axis-head { display:flex; justify-content:space-between; font-size:10px; font-weight:700; }
.axis-head b { text-transform:uppercase; color:#8e99a9; letter-spacing:1px; }
.axis { position:relative; height:8px; border-radius:8px; margin-top:18px; background:#e7edf3; }
.axis .zone { position:absolute; height:100%; top:0; opacity:.7; }
.left-zone { left:10%; width:15%; background:#b6eafa; border-radius:8px; }
.center-zone { left:40%; width:20%; background:#bdeedc; border-radius:8px; }
.right-zone { right:10%; width:15%; background:#b6eafa; border-radius:8px; }
.axis > span { position:absolute; width:14px; height:14px; border:3px solid white; border-radius:50%; background:var(--blue); top:-3px; left:50%; transform:translateX(-50%); box-shadow:0 2px 8px rgba(21,115,255,.4); transition:.18s; }
.axis-labels { display:flex; justify-content:space-between; font-size:8px; color:#a0abb8; margin-top:7px; }
.signal-list { margin:17px 0; }
.signal-list > div { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #edf1f5; font-size:10px; }
.signal-list i { width:7px; height:7px; border-radius:50%; background:#ccd5df; }
.signal-list i.ok { background:var(--lime); box-shadow:0 0 0 4px rgba(52,211,153,.10); }
.signal-list b { color:#8b96a6; font-size:9px; }
.privacy-note { background:#07172a; color:white; border-radius:13px; padding:14px; display:flex; gap:11px; }
.privacy-note b,.privacy-note span { display:block; }
.privacy-note b { font-size:10px; color:#dcecff; }
.privacy-note span { margin-top:4px; color:#7790aa; font-size:9px; line-height:1.45; }
.lock-icon { width:25px; height:22px; border:2px solid #39c9eb; border-radius:5px; margin-top:6px; position:relative; flex:0 0 auto; }
.lock-icon::before { content:""; width:13px; height:10px; border:2px solid #39c9eb; border-bottom:0; border-radius:8px 8px 0 0; position:absolute; left:4px; top:-10px; }
.results { margin-top:70px; }
.section-heading { margin-bottom:24px; }
.section-heading h2 { font-size:34px; letter-spacing:-1.4px; margin:8px 0; }
.section-heading p { margin:0; color:#748195; font-size:13px; }
.result-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
.result-stat { padding:18px 20px; border:1px solid #dce5ee; border-radius:15px; background:rgba(255,255,255,.75); }
.result-stat span,.result-stat small { display:block; color:#8c98a8; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.result-stat b { display:block; margin:8px 0 4px; font-size:21px; }
.result-panel { padding:20px; margin-bottom:14px; }
.keyframes { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.keyframe { overflow:hidden; border:1px solid #dfe7ef; border-radius:12px; background:#f7fafc; }
.keyframe img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:#091426; }
.keyframe-meta { display:block; padding:10px 11px; }
.keyframe-meta b { font-size:11px; text-transform:capitalize; }
.keyframe-meta span { display:block; margin-top:4px; color:#768397; font:8px ui-monospace, monospace; }
.result-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:14px; align-items:start; }
.vector-card { border:1px solid #e0e7ee; border-radius:12px; padding:13px; margin-bottom:10px; background:#fbfdff; }
.vector-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.vector-head b { font-size:12px; text-transform:uppercase; }
.vector-head span { color:#8995a5; font-size:9px; }
.vector-line { font:9px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; padding:8px 9px; background:#08172a; color:#80dff3; border-radius:7px; overflow-wrap:anywhere; margin-top:6px; }
.vector-label { color:#8996a7; font-size:8px; text-transform:uppercase; letter-spacing:1px; }
.legend { color:#8d99a8; font-size:9px; }
.rank-item { display:grid; grid-template-columns:38px 1fr 64px; gap:10px; align-items:center; padding:9px; border-bottom:1px solid #e9eef3; }
.rank-item:first-child { background:linear-gradient(90deg,#effbff,transparent); border:1px solid #bcebf5; border-radius:11px; margin-bottom:4px; }
.rank-item img { width:38px; height:38px; border-radius:8px; object-fit:cover; background:#dfe7ef; }
.rank-name { display:flex; justify-content:space-between; gap:8px; font-size:10px; margin-bottom:5px; }
.rank-name b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-name span { color:#98a3b1; font:8px ui-monospace, monospace; }
.scorebar { height:5px; background:#e7edf3; border-radius:5px; overflow:hidden; }
.scorebar i { display:block; height:100%; background:linear-gradient(90deg,#22bce2,#2fd296); border-radius:5px; }
.model-scores { color:#8894a4; font:8px/1.5 ui-monospace, monospace; margin-top:5px; }
.rank-score { text-align:right; }
.rank-score b { display:block; font-size:15px; }
.rank-score small { display:block; font-size:7px; color:#99a5b3; margin-top:2px; }
.match { color:#0aa77f; }
.no-match { color:#d95a6a; }
.warnings { margin-top:14px; border:1px solid #f1d5a5; background:#fff8eb; color:#9a6a1f; padding:13px 15px; border-radius:11px; font-size:10px; line-height:1.6; }
footer { padding:48px 0 38px; text-align:center; color:#a0aab7; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; }
.hidden { display:none !important; }
@keyframes pulse { 50% { opacity:.3; transform:scale(.8); } }
@keyframes guide-in { from { opacity:0; transform:scale(1.02); } to { opacity:1; transform:scale(1); } }
@keyframes guide-out { to { opacity:0; transform:scale(.98); } }
@media (max-width:1050px) { .workspace-grid{grid-template-columns:1fr}.telemetry{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.telemetry .panel-heading{grid-column:1/-1}.signal-list{margin:0}.privacy-note{height:fit-content}.result-grid{grid-template-columns:1fr}.keyframes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px) { .shell{width:min(100% - 24px,1440px)}.runtime-badges .badge:not(:first-child){display:none}.hero-copy{grid-template-columns:1fr;padding-top:35px}.hero-copy p{margin-top:22px}.workspace-grid{gap:12px}.camera-card,.telemetry,.result-panel{padding:13px}.telemetry{display:block}.capture-form{grid-template-columns:1fr}.challenge-step{min-width:0}.challenge-step div{display:none}.challenge-line{width:30px}.result-strip,.keyframes{grid-template-columns:1fr}.section-heading h2{font-size:27px}.pose-readout{display:none}h1{letter-spacing:-2.5px}.preflight-guide{padding:13px}.preflight-title{margin-bottom:8px}.preflight-title b{font-size:15px}.preflight-pose{padding:7px 3px}.head-diagram{width:34px;height:42px}.head-diagram i{top:16px;left:9px;box-shadow:10px 0 #8be8fa}.head-diagram em{width:10px;left:10px;top:27px}.preflight-pose small{display:none}.preflight-guide p{margin-top:8px} }