/* Computer Vision Lab v2: Mach Advisory look (dark glass). Loaded by every lab page AFTER the page's own <style>,
   so it remaps the old colour variables and restyles the shared controls. Demo logic is untouched. */
:root{color-scheme:dark;
 --black:#050506;--blue:#2f6bf5;--link:#6fb0ff;--cyan:#37d2ff;--violet:#a27cff;--amber:#ffb020;--good:#34d27b;
 --text2:#9a9aa3;--stroke:rgba(255,255,255,.12);--hi-line:rgba(255,255,255,.15);--fill:rgba(255,255,255,.055);--fill2:rgba(255,255,255,.105);
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,system-ui,"Segoe UI",Roboto,sans-serif;
 /* legacy variables the pages already use, remapped */
 --bg:#050506;--panel:#0b0b0f;--line:rgba(255,255,255,.12);--text:#f5f5f7;--hi:#ffffff;--accent:#37d2ff;--gold:#ffb020;--mute:#9a9aa3;--dim:#7d7d88;
 --red:#ff6b6b;--bad:#ff6b6b;--warn:#ffb020;--err:#ff6b6b;--mono:var(--font);
 --lab-bg:#050506;--lab-line:rgba(255,255,255,.12);--lab-text:#f5f5f7;--lab-hi:#fff;--lab-mute:#9a9aa3;--lab-gold:#ffb020}
*{text-shadow:none!important}
body::after{display:none!important}
html{background:#050506}
body{background:radial-gradient(1100px 520px at 50% -12%,rgba(255,255,255,.08),transparent 68%),radial-gradient(620px 400px at 6% 2%,rgba(55,210,255,.09),transparent 70%),radial-gradient(680px 460px at 96% 8%,rgba(162,124,255,.10),transparent 70%),#050506!important;
 color:var(--text);font-family:var(--font)!important;-webkit-font-smoothing:antialiased}
.labbar{display:none!important}
/* ---------- shell (built by lab-shell.js) ---------- */
.m-nav{position:sticky;top:8px;z-index:60;margin:8px auto 0;width:calc(100% - 24px);flex:none}
.m-nav-in{display:flex;align-items:center;gap:14px;height:54px;padding:0 10px 0 22px;border-radius:999px;background:rgba(34,34,38,.6);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi-line),0 24px 64px rgba(0,0,0,.45)}
.m-wm{font-weight:700;font-size:21px;letter-spacing:-.03em;color:#fff;text-decoration:none;white-space:nowrap}.m-wm i{font-style:normal;color:var(--blue)}.m-wm small{font-weight:400;font-size:11px;color:var(--text2);margin-left:6px;letter-spacing:.16em}.m-wm sup{font-size:8px;color:var(--text2);margin-left:2px}
.m-links{display:flex;margin-left:8px}.m-links a{padding:8px 11px;border-radius:999px;font-size:13.5px;color:var(--text2);text-decoration:none;white-space:nowrap}.m-links a:hover{color:#fff;background:var(--fill)}.m-links a.on{color:#fff}
.m-links .new{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:rgba(191,90,242,.18);color:#e6a6ff;font-size:10.5px;font-weight:600;margin-left:6px}
.m-cta{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 0 24px rgba(47,107,245,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.m-bar{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;width:calc(100% - 40px);margin:10px auto 0;flex:none}
.m-crumb{font-size:13px;color:var(--text2)}.m-crumb b{color:#fff;font-weight:600}.m-crumb span{opacity:.5;margin:0 6px}
.m-h1{font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-.035em;font-weight:600;color:#fff;margin-top:4px}.m-h1 span{font-weight:300;color:var(--text2)}
.m-priv{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;border-radius:999px;background:rgba(52,210,123,.12);border:1px solid rgba(52,210,123,.4);color:var(--good);font-size:13px;font-weight:600;white-space:nowrap}
.m-priv i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}
.m-priv.bad{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.45);color:var(--red)}.m-priv.bad i{background:var(--red);box-shadow:0 0 10px var(--red)}
.m-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;justify-content:center}
.m-tabs a{padding:7px 14px;border-radius:999px;font-size:13.5px;color:var(--text2);background:var(--fill);text-decoration:none;border:1px solid transparent}
.m-tabs a:hover{color:#fff;border-color:var(--stroke)}.m-tabs a.on{background:#f5f5f7;color:#111114;font-weight:600}
/* old page headers become the toolbar row; their own title is replaced by the shell */
header,#top{border:0!important;background:transparent!important;width:calc(100% - 40px);margin:8px auto 0!important;padding:0!important;flex:none;gap:8px 10px!important}
header h1,#top h1{display:none!important}
header label,#top label{color:var(--text2);font-size:13px;display:inline-flex;align-items:center;gap:8px}
header .sp,#top .sp{flex:1}
/* stage frames */
#wrap,#app,body[data-key="precision"]>main,body>div[style*="flex:1"]{border-radius:28px;overflow:hidden;border:1px solid var(--stroke)!important;background:#0b0b0f}
body[data-key="precision"]>main{width:calc(100% - 24px);margin:8px auto 12px!important}
body[data-key="tracker"]>main{max-width:1600px;width:calc(100% - 40px);margin:8px auto 24px;padding:0!important}
#wrap,body>div[style*="flex:1"]{width:calc(100% - 24px);margin:8px auto 12px!important}
/* ---------- controls ---------- */
button,label.btn{font:500 13.5px/1 var(--font)!important;border-radius:999px!important;border:0!important;background:var(--fill2)!important;color:#fff!important;padding:10px 16px!important;cursor:pointer;box-shadow:inset 0 1px 0 var(--hi-line)}
button:hover:not(:disabled),label.btn:hover{background:rgba(255,255,255,.17)!important;color:#fff!important}
button:disabled{opacity:.4;cursor:not-allowed}
button#cam,button#start{background:var(--blue)!important;box-shadow:0 0 22px rgba(47,107,245,.45),inset 0 1px 0 rgba(255,255,255,.25)}
button#cam:disabled,button#start:disabled{background:var(--fill2)!important;box-shadow:none}
select,input[type=text],input[type=number]{font:13.5px var(--font)!important;background:var(--fill)!important;color:#fff!important;border:1px solid var(--stroke)!important;border-radius:12px!important;padding:8px 12px!important}
select option{background:#1b1b1f;color:#fff}
input[type=range]{accent-color:var(--blue)}
input[type=checkbox]{accent-color:var(--blue)}
/* panels and stage chrome used by the tracker and precision pages */
.panel{border:1px solid var(--stroke)!important;background:#0b0b0f!important;border-radius:22px!important;padding:16px 18px!important}
.panel h2{font:600 11.5px var(--font)!important;letter-spacing:.12em!important;color:var(--link)!important;text-transform:uppercase}
.panel h2::before{content:""!important}
.stage{border:1px solid var(--stroke)!important;box-shadow:none!important;border-radius:28px!important;background:#07070a!important}
.big{color:#fff!important}
.ok{color:var(--good)!important}.bad{color:var(--red)!important}
/* camera picture-in-picture and HUD on the full-screen pages */
#pip{border:1px solid var(--stroke)!important;border-radius:18px!important;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5)!important}
#hud{background:rgba(20,20,26,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--stroke)!important;border-radius:999px!important;color:var(--text2)!important;padding:8px 16px!important}
#hud b,#state{color:var(--good)!important;font-weight:600}
::selection{background:rgba(47,107,245,.5)}
@media(max-width:1100px){.m-tabs{justify-content:flex-start;flex-basis:100%;order:3}}
@media(max-width:900px){.m-links{display:none}}

/* Camera picture hidden by default: the stage shows only the hand skeleton on a dark panel. The video keeps playing so tracking works. */
.stage video,#pip video{opacity:0!important}
body.showcam .stage video,body.showcam #pip video{opacity:.85!important}
.stage{background:radial-gradient(70% 70% at 50% 45%,#16202e,#07090d)!important}
#pip{background:radial-gradient(70% 70% at 50% 45%,#16202e,#07090d)!important}
.m-cam{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--fill);border:1px solid var(--stroke);color:var(--text2);font-size:13px;cursor:pointer;user-select:none;white-space:nowrap}
.m-cam input{accent-color:var(--blue);margin:0}
.m-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* The hand preview lives in a side panel beside the stage (built by lab-shell.js), never over the demo */
.m-layout{display:flex;gap:12px;flex:1;min-height:0;width:calc(100% - 24px);margin:8px auto 12px}
.m-layout>#wrap,.m-layout>main,.m-layout>div[style*="flex:1"]{flex:1;min-width:0;width:auto!important;margin:0!important}
.m-side{width:250px;flex:none;display:flex;flex-direction:column;gap:12px;overflow:auto}
.m-card{border:1px solid var(--stroke);background:#0b0b0f;border-radius:22px;padding:14px 16px}
.m-cap{font:600 11.5px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:10px}
.m-side #pip{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;opacity:1!important;pointer-events:auto!important;border-radius:14px!important;box-shadow:none!important}
.m-ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:14px;color:var(--text2);font-size:13px;border-radius:14px;background:radial-gradient(70% 70% at 50% 45%,#16202e,#07090d);border:1px solid var(--stroke)}
.m-g{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--stroke);font-size:13.5px}.m-g:last-child{border:0}.m-g b{font-weight:500;color:#fff}.m-g span{color:var(--text2);text-align:right}
@media(max-width:900px){.m-layout{flex-direction:column}.m-side{width:auto;flex-direction:row;flex-wrap:wrap}}

/* the shell nav is a <header>, which the pages style as a flex toolbar: keep it a full-width block */
header.m-nav{display:block!important;border:0!important;margin:8px 12px 0!important;width:auto!important;align-self:stretch;padding:0!important}
.m-nav-in{width:100%}

/* ===== layout pass: consistent 20px gutters, 8px rhythm, grouped controls ===== */
header.m-nav{margin:8px 20px 0!important}
.m-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;width:calc(100% - 40px)!important;margin:20px auto 0!important;flex:none}
.m-crumb{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin:0 0 4px}.m-crumb span,.m-crumb b{display:none}
.m-h1{font-size:clamp(26px,2.6vw,36px)!important;line-height:1.1;margin:0!important}
.m-right{display:flex;align-items:center;gap:10px}
.m-sw{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--text2);cursor:pointer;user-select:none}.m-sw input{accent-color:var(--blue);margin:0}
.m-right .m-sw{margin:0;height:34px;padding:0 14px;border-radius:999px;background:var(--fill);border:1px solid var(--stroke)}
nav.m-tabs{display:flex!important;gap:2px!important;padding:4px!important;border-radius:999px!important;background:var(--fill)!important;border:1px solid var(--stroke)!important;flex:none!important;align-self:flex-start;width:auto!important;max-width:calc(100% - 40px);margin:16px 20px 0!important;overflow-x:auto;justify-content:flex-start!important}
nav.m-tabs a{padding:8px 16px!important;border-radius:999px!important;background:transparent!important;color:var(--text2);border:0!important;white-space:nowrap;font-weight:500}
nav.m-tabs a:hover{color:#fff;background:rgba(255,255,255,.08)!important}
nav.m-tabs a.on{background:#f5f5f7!important;color:#111114!important;font-weight:600}
/* the old page headers / #top become one labelled control bar */
header:not(.m-nav),#top{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:12px 16px!important;width:calc(100% - 40px)!important;margin:16px auto 0!important;padding:12px 16px!important;border:1px solid var(--stroke)!important;border-radius:20px;background:rgba(255,255,255,.035)!important}
header:not(.m-nav) label:has(select),#top label:has(select){display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text2)}
header:not(.m-nav) label:has(select) select{text-transform:none;letter-spacing:0;font-weight:400;min-height:38px;max-width:300px}
header:not(.m-nav) button,header:not(.m-nav) label.btn,#top button{min-height:38px;align-self:flex-end}
header:not(.m-nav) .sp,#top .sp{flex:1 1 20px}
header:not(.m-nav) #cam,#top #cam{margin-left:auto}
header:not(.m-nav) label:not(:has(select)),#top>label{align-self:center;font-size:13px}
#top #state,header #state{align-self:center}
.m-layout{width:calc(100% - 40px)!important;margin:16px auto 16px!important}
body[data-key="tracker"]>main{width:calc(100% - 40px)!important;margin:16px auto 24px!important}
body[data-key="precision"]>main{width:calc(100% - 40px)!important}
.m-card .m-sw{margin-top:12px}
.m-side{width:260px}
.m-card{padding:16px 18px}
@media(max-width:900px){nav.m-tabs{margin-left:20px!important}.m-bar{align-items:flex-start}}

.m-camrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.m-camrow button{width:100%;min-height:40px;margin:0!important}
header:not(.m-nav) select{max-width:260px}

.m-camrow{grid-template-columns:1fr!important}
.m-camrow button{white-space:nowrap}
header:not(.m-nav) label:not(:has(select)),#top>label,header:not(.m-nav)>span:not(.sp){align-self:flex-end!important;line-height:38px;font-size:13px;color:var(--text2)}

/* the mail page's own legend duplicates the side panel */
#legend{display:none!important}
/* the tracker's old title header is only a one-line note now */
body[data-key="tracker"]>header:not(.m-nav){border:0!important;background:none!important;padding:0!important;margin:12px 20px 0!important;width:auto!important}
body[data-key="tracker"]>header:not(.m-nav) .sub{color:var(--text2);font-size:13px}
nav.m-tabs{width:fit-content!important;max-width:calc(100% - 40px)}

/* ===== Precision settings panel: sections, spacing and a readable hierarchy ===== */
body[data-key="precision"] #side{width:340px!important;padding:20px!important;gap:20px!important;border-right:1px solid var(--stroke)!important}
body[data-key="precision"] #res{width:320px!important;padding:20px!important;gap:20px!important;border-left:1px solid var(--stroke)!important}
body[data-key="precision"] #side h2,body[data-key="precision"] #res h2{margin:0 0 12px!important;font:600 11.5px var(--font)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--link)!important}
body[data-key="precision"] .sec-h{margin:4px 0 -8px!important;padding-top:16px;border-top:1px solid var(--stroke);width:100%}
.grp{display:block}
.presets{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
.presets button{width:100%;min-height:38px;padding:8px 10px!important;font-size:13px!important;text-transform:capitalize;white-space:nowrap}
.acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.acts button{width:100%;min-height:38px;background:transparent!important;border:1px solid var(--stroke)!important;box-shadow:none!important;color:#e6e6ec!important;font-weight:500}
.acts button:hover{background:var(--fill)!important}
.acts #resetAll{color:var(--text2)!important}
#allState{margin-top:12px;color:var(--text2);line-height:1.5}
details.exact{margin-top:10px;border-top:1px solid var(--stroke);padding-top:10px}
details.exact summary{cursor:pointer;color:var(--text2);font-size:12.5px;list-style:none}details.exact summary::before{content:"\25B8  "}details.exact[open] summary::before{content:"\25BE  "}
details.exact .small{margin-top:8px;line-height:1.7;color:var(--text2);font-size:12px;overflow-wrap:anywhere}
body[data-key="precision"] #knobs .row{display:grid;grid-template-columns:1fr 84px;gap:6px 10px;align-items:center;margin:0 0 20px!important}
body[data-key="precision"] #knobs .row label{grid-column:1/-1;font-size:13px;line-height:1.45;color:#e6e6ec}
body[data-key="precision"] #knobs .row label i{display:block;color:var(--text2);opacity:1;font-size:12px;margin-top:2px}
body[data-key="precision"] #knobs .row input[type=number]{width:84px!important;min-height:36px;font-size:13px!important}
body[data-key="precision"] #knobs .row .rng{grid-column:1/-1;font-size:11px;opacity:.7;margin-top:-2px;display:flex;justify-content:space-between}
body[data-key="precision"] #side select{width:100%;max-width:none}
body[data-key="precision"] #live div{padding:7px 0;border-bottom:1px solid var(--stroke);font-size:13px;gap:12px}
body[data-key="precision"] #live div:last-child{border:0}
body[data-key="precision"] #live .k{color:#fff}
body[data-key="precision"] #side>.small{color:var(--text2);line-height:1.6;font-size:12.5px}

/* ===== gesture tracker: the whole tool fits in one screen (above the fold) ===== */
body[data-key="tracker"]>header:not(.m-nav){display:none!important}
body[data-key="tracker"]{min-height:100vh;min-height:100dvh}
body[data-key="tracker"]>main{align-items:start;grid-template-columns:minmax(0,1fr) 340px!important;gap:16px!important;margin:12px 20px 20px!important;width:auto!important;max-width:none!important}
body[data-key="tracker"] .stage{aspect-ratio:16/9;width:100%;max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);min-height:340px}
body[data-key="tracker"] aside{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);overflow-y:auto}
body[data-key="tracker"] aside .panel{margin:0!important}
body[data-key="tracker"] #camPanel .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
body[data-key="tracker"] #camPanel #start{grid-column:1/-1}
body[data-key="tracker"] #camPanel .note{margin:0;line-height:1.5}
body[data-key="tracker"] #log{max-height:96px}
body[data-key="tracker"] .m-bar{margin-top:14px!important}
body[data-key="tracker"] nav.m-tabs{margin-top:12px!important}
@media(max-width:1000px){body[data-key="tracker"]>main{grid-template-columns:1fr!important}body[data-key="tracker"] aside{max-height:none}body[data-key="tracker"] .stage{max-height:none}}

/* ===== condensed header: nav, title, tabs and badge share two slim rows so the demo gets the height ===== */
.m-nav-in{height:44px!important}
.m-nav .m-cta{height:32px!important;font-size:13px!important}
header.m-nav{margin:6px 20px 0!important}
.m-head{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;width:calc(100% - 40px);margin:8px auto 0;flex:none}
.m-head .m-bar{display:contents}
.m-head .m-ttl{order:0;min-width:0}
.m-head nav.m-tabs{order:1;margin:0!important;padding:3px!important;flex:none!important}
.m-head .m-right{order:2;margin-left:auto}
.m-crumb{display:none!important}
.m-h1{font-size:20px!important;line-height:1.2!important;white-space:nowrap;margin:0!important}
nav.m-tabs a{padding:6px 13px!important;font-size:13px}
.m-priv{height:30px!important;font-size:12.5px!important}
.m-right .m-sw{height:30px!important;font-size:12.5px!important}
/* tighter control bar and stage gaps */
header:not(.m-nav),#top{margin:8px auto 0!important;padding:8px 12px!important;border-radius:16px!important}
#top button,header:not(.m-nav) button,header:not(.m-nav) label.btn{min-height:34px!important;padding:7px 14px!important}
header:not(.m-nav) label:has(select){gap:3px!important}
header:not(.m-nav) label:has(select) select{min-height:34px!important}
.m-layout{margin:8px auto 10px!important}
body[data-key="tracker"]>main{margin:8px 20px 12px!important}
body[data-key="tracker"] .stage{max-height:calc(100vh - 130px)!important;max-height:calc(100dvh - 130px)!important}
body[data-key="tracker"] aside{max-height:calc(100vh - 130px)!important;max-height:calc(100dvh - 130px)!important}
@media(max-width:1100px){.m-head .m-right{margin-left:0}.m-h1{white-space:normal}}

/* holographic stage: a faint grid and a floor glow behind the hand */
.stage,#pip,.m-ph{background-image:linear-gradient(rgba(55,210,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(55,210,255,.045) 1px,transparent 1px),radial-gradient(70% 70% at 50% 45%,#16202e,#07090d)!important;background-size:36px 36px,36px 36px,100% 100%!important}

/* ===== cross-browser and touch ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
canvas{touch-action:none}                       /* a finger on a demo canvas must not scroll or zoom the page (iPad Safari, Chrome, Firefox) */
button,select,input,label.btn,.m-tabs a,.m-sw{-webkit-user-select:none;user-select:none;touch-action:manipulation}
select,input[type=number],input[type=text]{-webkit-appearance:menulist-button}
input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield}
button{-webkit-appearance:none;appearance:none}
.m-nav-in,.m-ph{-webkit-backdrop-filter:blur(40px) saturate(180%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.m-nav-in{background:rgba(24,24,28,.96)!important}}
/* tablets: touch targets of at least 44px, and the page scrolls so the side panel is never cut off */
@media (pointer:coarse){button,label.btn,select,.m-tabs a,.m-sw,.m-priv{min-height:44px}.m-tabs a{display:inline-flex;align-items:center}.m-right .m-sw,.m-priv{min-height:40px}}
@media(max-width:900px){
  body:not([data-key="tracker"]){overflow:auto!important;height:auto!important;min-height:100vh}
  .m-layout{flex-direction:column;flex:none!important}
  .m-layout>#wrap,.m-layout>main,.m-layout>div[style*="flex:1"]{flex:none!important;height:min(70vh,720px)!important;min-height:420px}
  .m-side{width:auto!important;flex-direction:row!important;flex-wrap:wrap;overflow:visible}.m-side .m-card{flex:1 1 280px}
  body[data-key="precision"] .m-layout>main{flex-direction:column;height:auto!important}
  body[data-key="precision"] #side,body[data-key="precision"] #res{width:auto!important;border:0!important}
  body[data-key="precision"] #stage{min-height:420px;flex:none}
  html{height:auto}
}

.m-side,body[data-key="tracker"] aside{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding-right:2px}