/* MIREA AI Lab Reactor; source commit 5d18ba67255ae7d838117d55d61b4c65420e69fb.
   Palette follows src/ds-tokens.jsx Reactor (the generic tokens.css defaults to Pulse).
   Source: https://github.com/mirea-lab-ai/design-system */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("./space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("./jetbrains-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("./jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  color-scheme: dark;
  --ds-bg: #030b07;
  --ds-surface: rgba(170,255,120,.05);
  --ds-surface-2: rgba(255,255,255,.012);
  --ds-surface-hover: rgba(170,255,120,.08);
  --ds-elevated: rgba(170,255,120,.07);
  --ds-border: rgba(158,240,26,.16);
  --ds-border-hover: rgba(158,240,26,.30);
  --ds-accent-a: #9ef01a;
  --ds-accent-mid: #bef264;
  --ds-accent-b: #22c55e;
  --ds-accent-ink: #0a1f00;
  --ds-glow: rgba(158,240,26,.34);
  --ds-text: rgba(247,255,237,.95);
  --ds-text-2: #9baa91;
  --ds-text-3: #768d68;
  --ds-radius-card: 24px;
  --ds-radius-input: 14px;
  --ds-radius-pill: 999px;
  --ds-blur: 12px;
  --ds-shadow: 0 1px 0 rgba(158,240,26,.07) inset, 0 0 36px rgba(158,240,26,.05), 0 18px 50px rgba(0,0,0,.5);
  --ds-font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --ds-font-ui: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --ds-font-mono: "JetBrains Mono", monospace;
  --mint: var(--ds-accent-a); --emerald: var(--ds-accent-b);
  --muted: var(--ds-text-2); --border: var(--ds-border);
  font-family: var(--ds-font-ui); background: var(--ds-bg); color: var(--ds-text);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(ellipse at 80% 12%,rgba(16,185,129,.055),transparent 47%),var(--ds-bg)}
button,input,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible+.toggle-track{outline:2px solid var(--mint);outline-offset:5px}
[hidden]{display:none!important}
.page-shell{max-width:1440px;margin:auto;padding:0 64px}
.site-header{height:104px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;font-size:20px;letter-spacing:1.3px;font-weight:650}
.brand-mark{font-size:39px;line-height:1;letter-spacing:-7px;font-weight:800;margin-right:7px;color:var(--mint);transform:translateY(-3px)}
.brand-mark>span{font-weight:300}
.brand-caption{display:block;font-size:8px;letter-spacing:1.55px;font-weight:500;color:var(--muted);margin-top:5px}
.project-tag{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.7px}
.project-tag>span:first-child{height:5px;width:5px;background:var(--mint);border-radius:50%}
.pilot-tag{border:1px solid var(--border);border-radius:6px;padding:7px 9px;margin-left:10px;color:var(--muted);font-size:9px}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:48px 0 34px}
.eyebrow{font-size:9px;letter-spacing:1.9px;color:var(--mint);margin:0 0 18px}
h1{font-size:clamp(30px,3.6vw,49px);font-weight:450;letter-spacing:-1.8px;line-height:1.16;margin:0}
h1>span{color:var(--mint)}
.intro-description{color:var(--muted);font-size:12px;line-height:1.9;flex-shrink:0;margin:0 0 2px}
.camera-stage{position:relative;border:1px solid var(--ds-border);border-radius:18px;overflow:hidden;isolation:isolate;background:#071008;height:min(54vw,580px);min-height:350px}
.camera-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(60,105,78,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(60,105,78,.06) 1px,transparent 1px);background-size:52px 52px;z-index:-1}
#output{width:100%;height:100%;object-fit:contain;display:block;background:var(--ds-bg)}
.empty-preview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.empty-preview p{margin:23px 0 8px;font-size:15px;font-weight:400;color:var(--ds-text)}
.empty-preview>span{font-size:11px;color:var(--ds-text-2)}
.viewfinder{width:106px;height:132px;position:relative;border:1px solid rgba(158,240,26,.22);border-radius:44% 44% 46% 46%;background:radial-gradient(ellipse,rgba(158,240,26,.04),transparent)}
.viewfinder::before,.viewfinder::after{content:"";position:absolute;background:rgba(158,240,26,.22)}
.viewfinder::before{top:51%;left:-24px;right:-24px;height:1px}
.viewfinder::after{left:50%;top:-18px;bottom:-18px;width:1px}
.viewfinder>span{width:6px;height:6px;position:absolute;background:var(--mint);border-radius:50%;left:calc(50% - 3px);top:calc(51% - 2px);box-shadow:0 0 18px rgba(158,240,26,.4);z-index:1}
.stage-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,10,5,.35),transparent 22%,transparent 75%,rgba(2,10,5,.65))}
.stage-top,.stage-bottom{position:absolute;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:9px;letter-spacing:1.5px}
.stage-top{top:23px}
.stage-bottom{bottom:23px;color:var(--ds-text-2)}
.camera-label{display:flex;align-items:center;gap:9px}
.camera-label select{pointer-events:auto;max-width:220px;background:#171c19;color:inherit;border:1px solid #68796d;border-radius:4px;padding:6px;font:inherit;letter-spacing:inherit}
.camera-label>span{width:9px;height:7px;border:1px solid #8aa896;border-radius:2px}
.live-label{display:flex;align-items:center;gap:7px;color:var(--mint);font-size:9px;background:rgba(4,19,11,.6);padding:7px 9px;border:1px solid rgba(158,240,26,.25);border-radius:5px}
.live-label>span{height:5px;width:5px;background:var(--mint);border-radius:50%}
.countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 3px 30px #04110a}
.countdown>span{font-size:clamp(100px,14vw,170px);font-weight:500;letter-spacing:-8px;line-height:1;color:var(--mint);font-variant-numeric:tabular-nums}
.countdown p{font-size:10px;letter-spacing:3px;margin:18px 0 0}
.score-card{position:absolute;right:24px;top:72px;min-width:205px;padding:20px 22px;background:rgba(3,11,7,.82);border:1px solid rgba(158,240,26,.3);border-radius:14px;backdrop-filter:blur(12px)}
.score-card>p{font-size:9px;letter-spacing:1.7px;color:#abc8b6;margin:0 0 8px}
.score-card>div{white-space:nowrap}
#score{font-size:62px;line-height:1.1;font-weight:500;letter-spacing:-2.5px;color:var(--mint);font-variant-numeric:tabular-nums}
.score-scale{font-size:20px;color:#799d89;font-weight:400}
.score-note{font-size:9px;display:block;color:var(--ds-text-2);margin-top:11px;max-width:195px;line-height:1.5}
.camera-stage.is-final .score-card{right:50%;top:50%;transform:translate(50%,-50%);padding:30px 36px;text-align:center;background:rgba(3,11,7,.9)}
.camera-stage.is-final #score{font-size:88px}
.camera-stage.is-final .score-note{max-width:230px}
.round-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(158,240,26,.06)}
#progress{height:100%;width:0;background:var(--mint);box-shadow:0 0 14px var(--emerald)}
#timer{font-variant-numeric:tabular-nums;color:#d1e7d9}
.control-bar{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:20px}
.display-controls,.action-controls{display:flex;align-items:center;gap:22px}
.action-controls{gap:10px}
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:var(--ds-text-2);cursor:pointer;position:relative;white-space:nowrap}
.toggle input{position:absolute;opacity:0;width:29px;height:16px;margin:0}
.toggle-track{width:29px;height:16px;border-radius:20px;background:#182c20;border:1px solid #32573f;position:relative;transition:background .15s}
.toggle-track::after{content:"";position:absolute;left:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#7b9786;transition:transform .15s}
.toggle input:checked+.toggle-track{background:#164637;border-color:#27715b}
.toggle input:checked+.toggle-track::after{background:var(--mint);transform:translateX(13px)}
.button{border-radius:9px;padding:15px 20px;font-size:12px;font-weight:550;cursor:pointer;border:1px solid transparent;min-height:46px;transition:background .15s,opacity .15s}
.button-primary{background:var(--mint);color:var(--ds-accent-ink);display:flex;align-items:center;justify-content:center;gap:32px}
.button-primary:hover{background:#bef264}
.button-primary>span:last-child{font-size:19px;line-height:12px}
.button-secondary{background:transparent;border-color:var(--ds-border-hover);color:var(--ds-text)}
.button-secondary:hover{background:var(--ds-surface-hover)}
.button:disabled{opacity:.5;cursor:wait}
.privacy-note{font-size:10px;line-height:1.7;color:var(--ds-text-2);margin:0 0 35px;max-width:680px}
.error{color:#ffd3b5;border-left:2px solid #d9976d;padding:9px 13px;background:rgba(155,75,39,.09);font-size:12px;line-height:1.7;margin:0 0 14px}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding:23px 0 27px;color:var(--ds-text-3);font-size:8px;letter-spacing:1.2px}
footer>span:first-child{font-size:10px;color:#a5bbad;font-weight:550}
.footer-slash{color:var(--mint);padding:0 8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(min-width:1001px){.site-header{height:76px}
.intro{padding:27px 0 26px}
h1{font-size:36px;line-height:1.12;letter-spacing:-1.1px}
.eyebrow{margin-bottom:13px}
.camera-stage{height:clamp(280px,48vh,520px);min-height:280px}
.control-bar{padding:17px 0}
.privacy-note{margin-bottom:23px}
footer{padding:19px 0}
}

@media(max-width:1000px){.page-shell{padding:0 32px}
.intro{align-items:flex-start;flex-direction:column;gap:18px;padding-top:32px}
.intro-description{font-size:11px}
.intro-description br{display:none}
.intro-description br::after{content:" "}
.camera-stage{height:54vw;min-height:330px}
h1{font-size:40px}
footer>span:nth-child(2){display:none}
}

@media(max-width:600px){.page-shell{padding:0 18px}
.site-header{height:80px}
.brand{font-size:17px;gap:9px}
.brand-mark{font-size:33px}
.brand-caption{font-size:6px}
.project-tag{font-size:8px;letter-spacing:1px;gap:6px}
.pilot-tag{display:none}
.intro{padding:28px 0 25px;gap:16px}
.eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:14px}
h1{font-size:30px;letter-spacing:-1px;line-height:1.22}
.intro-description{font-size:11px;line-height:1.7}
.camera-stage{height:112vw;min-height:360px;max-height:580px;border-radius:14px}
.stage-top,.stage-bottom{left:17px;right:17px;font-size:8px}
.stage-top{top:18px}
.stage-bottom{bottom:19px}
.score-card{right:16px;top:57px;min-width:154px;padding:14px 15px}
.score-card>p{font-size:8px;letter-spacing:1px}
#score{font-size:46px}
.score-scale{font-size:17px}
.score-note{font-size:8px;max-width:150px}
.camera-stage.is-final .score-card{min-width:220px;padding:26px}
.camera-stage.is-final #score{font-size:72px}
.control-bar{align-items:stretch;flex-direction:column;gap:19px;padding:20px 0 16px}
.display-controls{justify-content:space-between;gap:12px}
.action-controls{width:100%}
.button-primary{flex:1}
.button-secondary{padding-left:14px;padding-right:14px}
.privacy-note{font-size:9px;margin-bottom:27px}
footer{align-items:flex-start;font-size:6px;line-height:1.7;padding:19px 0}
footer>span:last-child{max-width:145px;text-align:right}
.empty-preview p{font-size:13px}
}

.score-tier{display:table;margin-top:10px;padding:4px 9px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.35px;line-height:1.35;background:var(--ds-bg);white-space:nowrap}

.camera-stage.is-final .score-tier{margin-left:auto;margin-right:auto;font-size:15px}

.tier-sub-1{color:#a9b4c0}
.tier-sub-2{color:#be9cbe}
.tier-sub-3{color:#de939d}
.tier-sub-4{color:#eda38e}
.tier-sub-5{color:#e6b765}

.tier-ltn{color:#d5cc75}
.tier-mtn{color:#9acf94}
.tier-htn{color:#51d2b0}
.tier-chadlite{color:#70ccf1}
.tier-chad{color:#8aaaff}
.tier-adamlite{color:#c5a0ff}
.tier-true-adam{color:#ffe082}

.mode-bar{display:flex;align-items:center;gap:22px;margin-bottom:16px}

.mode-bar p{margin:0;color:var(--ds-text-2);font-size:11px;line-height:1.65;max-width:720px}

.mode-switch,.gender-choice{display:inline-flex;flex-shrink:0;gap:4px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--ds-surface)}

.mode-switch button,.gender-choice button{border:1px solid transparent;border-radius:7px;color:var(--ds-text-2);background:transparent;cursor:pointer;padding:10px 20px;font-size:12px;min-height:38px;transition:background .15s,color .15s}

.mode-switch button[aria-pressed="true"]{background:var(--mint);color:var(--ds-accent-ink);font-weight:600}

.gender-choice button{padding:7px 14px;min-height:34px;font-size:11px}

.gender-choice button[aria-pressed="true"]{background:var(--ds-elevated);border-color:var(--ds-border-hover);color:var(--ds-text)}

.mode-switch button:hover,.gender-choice button:hover{border-color:var(--ds-border-hover)}

.gender-choice button:disabled{cursor:default;opacity:.55}

.gender-controls{display:flex;align-items:center;gap:15px;margin:0 0 18px;color:var(--ds-text-2);font-size:11px}

#gender-duel{display:grid;grid-template-columns:1fr 1fr;gap:20px}

#gender-duel>div{display:flex;align-items:center;gap:14px}

#gender-duel>div:last-child{justify-content:flex-end}

.duel-cards{position:absolute;inset:58px 22px auto;display:flex;justify-content:space-between;gap:32px;z-index:2;pointer-events:none}

.duel-card{width:calc(50% - 24px);max-width:245px;padding:17px 20px;border:1px solid rgba(158,240,26,.4);border-radius:13px;background:rgba(3,11,7,.86);backdrop-filter:blur(10px)}

.duel-right{border-color:rgba(112,204,241,.45)}

.duel-card>p{font-size:9px;letter-spacing:1.6px;color:var(--mint);margin:0 0 8px}

.duel-right>p,.duel-right .duel-score{color:#70ccf1}

.duel-score{font-size:52px;line-height:1.1;letter-spacing:-2px;color:var(--mint);font-variant-numeric:tabular-nums}

.duel-card>div{white-space:nowrap}

.duel-card .score-tier{font-size:11px;white-space:normal}

.duel-card .score-note{max-width:none;min-height:27px}

.duel-result{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:3;padding:12px 20px;width:max-content;max-width:85%;text-align:center;border:1px solid rgba(158,240,26,.4);border-radius:10px;background:rgba(3,11,7,.94);color:var(--ds-text);font-size:14px;line-height:1.5}

.is-duel::after{content:"";position:absolute;left:50%;top:62px;bottom:62px;border-left:1px dashed rgba(173,218,191,.2);pointer-events:none;z-index:1}

.is-duel .countdown{z-index:4}
.is-duel.is-final .duel-card{text-align:center}
.is-duel.is-final .duel-score{font-size:64px}

.toggle input:disabled~.toggle-track{opacity:.45;cursor:default}

@media(max-width:1000px){#gender-duel>div{flex-direction:column;align-items:flex-start;gap:9px}
#gender-duel>div:last-child{align-items:flex-end}
.mode-bar{align-items:flex-start}
.duel-card{padding:14px}
.duel-score{font-size:44px}
}

@media(max-width:600px){.mode-bar{flex-direction:column;gap:10px;margin-bottom:14px}
.mode-switch{width:100%}
.mode-switch button{flex:1}
.gender-controls{margin-bottom:14px}
.gender-choice button{padding:7px 9px;font-size:10px}
.duel-cards{inset:54px 10px auto;gap:12px}
.duel-card{width:calc(50% - 6px);padding:11px 10px;border-radius:9px}
.duel-card>p{font-size:8px;letter-spacing:1px}
.duel-score{font-size:33px;letter-spacing:-1px}
.duel-card .score-scale{font-size:13px}
.duel-card .score-tier{font-size:9px;padding:3px 6px}
.duel-card .score-note{font-size:8px;margin-top:8px}
.is-duel.is-final .duel-score{font-size:40px}
.duel-result{font-size:12px;padding:10px 13px;bottom:54px}
#gender-duel{gap:10px;font-size:10px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important}
}

.pose-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.pose-tools label{display:flex;align-items:center;gap:8px}
.pose-tools button{background:var(--ds-surface-hover);color:var(--ds-text);border:1px solid var(--ds-border-hover);border-radius:6px;padding:7px 10px;cursor:pointer}
.pose-tools button:disabled{opacity:.45;cursor:default}

.diagnostics{margin:0 0 20px;border:1px solid var(--border);border-radius:9px;padding:12px 16px;color:var(--ds-text-2);font-size:11px;line-height:1.6}
.diagnostics summary{cursor:pointer;color:var(--ds-text)}
.diagnostics dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;margin:14px 0}
.diagnostics dt{color:var(--ds-text-2)}
.diagnostics dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.diagnostics p{margin:12px 0 0;max-width:720px;color:var(--ds-text-2)}
@media(max-width:600px){.diagnostics dl{grid-template-columns:1fr;gap:3px}
.diagnostics dd{margin-bottom:9px}
}

.temporal-diagnostics { max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; font: 12px/1.5 monospace; color: var(--ds-text-2); background: var(--ds-bg); }


/* Reactor components adapted to the camera workspace. */
body {
  background: radial-gradient(820px 520px at 50% -10%, rgba(158,240,26,.16), transparent 58%),
    radial-gradient(720px 520px at 88% 16%, rgba(16,185,129,.12), transparent 56%),
    radial-gradient(700px 540px at 6% 90%, rgba(34,197,94,.09), transparent 62%), var(--ds-bg);
}
.page-shell { position: relative; max-width: 1376px; padding-inline: 48px; }
.site-header { height: 88px; border-color: var(--ds-border); }
.brand { gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: -.6px; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; margin: 0;
  transform: none; background: var(--ds-elevated); border: 1px solid var(--ds-border);
  border-radius: 16px; box-shadow: 0 0 26px rgba(158,240,26,.08); }
.brand-mark svg { width: 30px; height: 30px; }
.brand-caption { font-family: var(--ds-font-mono); font-size: 9px; letter-spacing: 1.6px; }
.project-tag, .pilot-tag, .eyebrow, .stage-top, .stage-bottom,
.score-card>p, .duel-card>p, footer { font-family: var(--ds-font-mono); }
.project-tag { color: var(--ds-text-2); font-size: 10px; }
.project-tag>span:first-child { background: var(--ds-accent-a); box-shadow: 0 0 12px var(--ds-glow); }
.pilot-tag { border-radius: var(--ds-radius-pill); color: var(--ds-accent-mid); }
.intro { padding: 32px 0 28px; }
.eyebrow { color: var(--ds-accent-mid); font-size: 10px; letter-spacing: 1.5px; }
h1 { font-family: var(--ds-font-display); font-size: clamp(30px,3.5vw,44px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
h1>span { background: linear-gradient(135deg,var(--ds-accent-mid),var(--ds-accent-b));
  background-clip: text; -webkit-background-clip: text; color: transparent; }
.intro-description { font-size: 13px; line-height: 1.8; }
.camera-section { padding: 22px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card); background: linear-gradient(145deg,var(--ds-surface),var(--ds-surface-2));
  box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-blur)); }
.mode-bar { gap: 20px; margin-bottom: 16px; }
.mode-bar p { font-size: 12px; }
.mode-switch, .gender-choice { border-radius: var(--ds-radius-pill); padding: 4px; }
.mode-switch button, .gender-choice button { border-radius: var(--ds-radius-pill); }
.mode-switch button { min-width: 84px; }
.mode-switch button[aria-pressed="true"] { background: linear-gradient(135deg,var(--ds-accent-a),var(--ds-accent-b));
  box-shadow: 0 3px 14px rgba(158,240,26,.18); font-weight: 700; }
.gender-choice button[aria-pressed="true"] { background: var(--ds-surface-hover); color: var(--ds-accent-mid); }
.gender-controls { font-size: 12px; }
.camera-stage { border-radius: 20px; box-shadow: 0 1px 0 rgba(158,240,26,.05) inset; }
.camera-stage::before { background-image: linear-gradient(rgba(158,240,26,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(158,240,26,.045) 1px,transparent 1px); background-size: 44px 44px; }
.empty-preview { background: radial-gradient(ellipse at 50% 50%,rgba(158,240,26,.065),transparent 60%); }
.viewfinder { border-color: var(--ds-border-hover); box-shadow: 0 0 45px rgba(158,240,26,.06); }
.empty-preview p { color: var(--ds-text); font-size: 16px; font-weight: 500; }
.empty-preview>span { font-size: 12px; }
.live-label { border-radius: var(--ds-radius-pill); }
.score-card, .duel-card { border-radius: 20px; border-color: var(--ds-border-hover);
  background: rgba(3,11,7,.86); box-shadow: var(--ds-shadow); }
.score-card>p, .duel-card>p { letter-spacing: 1px; }
#score,.duel-score,#timer { font-family: var(--ds-font-mono); font-weight: 500; }
.score-note { color: #b0bda5; }
.score-scale { color: var(--ds-text-2); }
.duel-right { border-color: rgba(34,197,94,.4); }
.duel-right>p,.duel-right .duel-score { color: #86efac; }
.duel-result { border-radius: var(--ds-radius-pill); border-color: var(--ds-border-hover); }
.round-progress { height: 4px; }
#progress { background: linear-gradient(90deg,var(--ds-accent-a),var(--ds-accent-b)); }
.control-bar { padding-block: 20px; }
.toggle { color: var(--ds-text-2); font-size: 12px; }
.toggle-track { background: var(--ds-surface); border-color: var(--ds-border-hover); }
.toggle input:checked+.toggle-track { background: linear-gradient(135deg,var(--ds-accent-a),var(--ds-accent-b)); border-color: transparent; }
.toggle input:checked+.toggle-track::after { background: var(--ds-accent-ink); }
.button { border-radius: var(--ds-radius-pill); min-height: 46px; padding: 13px 23px;
  font-size: 14px; font-weight: 600; transition: transform .18s,filter .18s,box-shadow .18s; }
.button-primary { background: linear-gradient(135deg,var(--ds-accent-a),var(--ds-accent-b));
  font-weight: 700; box-shadow: 0 6px 22px var(--ds-glow),inset 0 1px 0 rgba(255,255,255,.28); }
.button-primary:hover { background: linear-gradient(135deg,var(--ds-accent-a),var(--ds-accent-b));
  filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 30px var(--ds-glow); }
.button-primary:disabled { transform: none; filter: none; }
.button-secondary { background: var(--ds-surface-hover); color: var(--ds-text); }
.diagnostics { background: var(--ds-surface-2); border-radius: var(--ds-radius-input); font-size: 12px; padding: 14px 18px; }
.diagnostics summary { color: var(--ds-text); }
.diagnostics dd,.temporal-diagnostics { font-family: var(--ds-font-mono); }
.pose-tools button { border-radius: var(--ds-radius-pill); }
.privacy-note { color: var(--ds-text-2); font-size: 11px; line-height: 1.7; max-width: 880px; margin-bottom: 14px; }
.camera-section>.privacy-note:last-of-type { margin-bottom: 0; }
footer { border: 0; padding-block: 24px; color: var(--ds-text-3); font-size: 9px; }
footer>span:first-child { color: var(--ds-accent-mid); }
@media(min-width:1001px) { .camera-stage { height: clamp(280px,43vh,510px); } }
@media(max-width:1000px) { .page-shell { padding-inline: 28px; } .intro { gap: 16px; } }
@media(max-width:600px) {
  .page-shell { padding-inline: 16px; } .site-header { height: 76px; gap: 8px; }
  .brand { font-size: 16px; gap: 9px; } .brand-mark { width: 39px; height: 39px; border-radius: 14px; }
  .brand-caption { font-size: 8px; letter-spacing: 1px; } .project-tag { font-size: 8px; letter-spacing: 1px; }
  .intro { padding: 26px 0 22px; } .eyebrow { font-size: 8px; line-height: 1.6; letter-spacing: 1px; }
  h1 { font-size: clamp(27px,7vw,36px); line-height: 1.15; } .intro-description { font-size: 12px; }
  .camera-section { padding: 12px; border-radius: 20px; }
  .mode-bar p { font-size: 11px; } .mode-switch { width: 100%; }
  .gender-controls { font-size: 11px; } .camera-stage { height: 112vw; border-radius: 16px; }
  #gender-duel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #gender-duel>div, #gender-duel .gender-choice { min-width: 0; width: 100%; }
  #gender-duel .gender-choice button { flex: 1; min-width: 0; padding-inline: 6px; }
  .duel-score,.is-duel.is-final .duel-score { font-size: clamp(20px,6.4vw,38px); }
  .duel-card .score-scale { font-size: clamp(10px,2.7vw,13px); }
  .score-card,.duel-card { border-radius: 14px; } .empty-preview p { font-size: 14px; }
  .control-bar { padding-block: 18px; } .button { font-size: 13px; }
  .privacy-note { font-size: 10px; } .diagnostics { padding: 12px; }
  footer { font-size: 7px; gap: 12px; } footer>span:last-child { max-width: 135px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none!important; } .button-primary:hover { transform: none; } }