:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#e9f7f8;background:#07151d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -15%,#17463875,transparent 55%),#07151d}.app{max-width:1500px;margin:auto;padding:15px 18px}header,.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{justify-content:flex-start}.mark{display:grid;place-items:center;background:#54e0b6;color:#04231c;width:43px;height:43px;border-radius:12px;font-size:25px;font-weight:900}.brand b{font-size:20px}.brand small{display:block;color:#9cbdc9;font-size:10px;letter-spacing:1.2px;margin-top:2px}button,a{font:inherit}.help,.secondary{border:1px solid #365c67;background:#16303b;color:#d9f4f4;border-radius:11px;padding:11px 14px;font-weight:700;cursor:pointer}.heading{margin:14px 0 16px}.heading h1{font-size:clamp(24px,3vw,36px);letter-spacing:-.7px;margin:0}.heading p{margin:4px 0;color:#a5bdc7}.workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(275px,.72fr);gap:15px}.videoWrap{position:relative;background:#0b2430;border:1px solid #31505c;border-radius:19px;overflow:hidden;min-height:530px;height:min(70vh,740px)}video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}video{transform:scaleX(-1)}canvas{pointer-events:none}.empty{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px;color:#91b5c1;text-align:center;padding:20px}.empty strong{color:#d0e8e8}.figure{font-size:110px;line-height:1;color:#428c87}.topLeft,.timer,.cue{position:absolute;background:#061a22d9;border:1px solid #37616a;border-radius:12px}.topLeft{top:14px;left:14px;padding:8px 12px;color:#c2dcdf;font-size:12px}.timer{top:13px;right:13px;padding:10px 18px;text-align:center}.timer span{font-size:clamp(36px,5vw,65px);font-weight:850;letter-spacing:-2px;font-variant-numeric:tabular-nums;display:block;line-height:1}.timer small{font-size:10px;color:#b1d4d0;letter-spacing:1.1px}.cue{bottom:26px;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;padding:12px 17px;text-align:center;font-size:15px;font-weight:700}.progress{position:absolute;bottom:0;left:0;width:100%;height:7px;background:#143b48}.progress span{display:block;width:0;height:100%;background:#55e2b5;transition:width .1s linear}.controls{background:#0f2732;border:1px solid #2c4c57;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}.step{display:flex;align-items:center;gap:10px;font-weight:900;color:#60e5be;font-size:13px;margin-top:4px}.step:first-letter{color:#07151d}.step span{color:#f1fcfa;font-size:17px}.seg,.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seg button{padding:13px;border-radius:11px;border:1px solid #365867;background:#183641;color:#cee4e9;font-weight:800;cursor:pointer}.seg button.active{background:#54ddb2;color:#06251f;border-color:#54ddb2}.instruction{line-height:1.6;color:#bfd4dc;font-size:14px;margin:0}.primary{background:#51dfae;color:#06271e;border:1px solid #51dfae;border-radius:11px;padding:14px 12px;font-weight:850;cursor:pointer;text-align:center}.secondary:disabled,.primary:disabled{opacity:.4;cursor:not-allowed}.hint{font-size:12px;line-height:1.6;color:#91aebc;margin-top:5px}.results{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-top:12px}.results>div{background:#102c37;border:1px solid #30545e;border-radius:15px;padding:15px;min-width:0}.results small,.results span{display:block;color:#9fbfc5;font-size:11px}.results strong{display:block;margin:5px 0;color:#f8c47e;font-size:28px}.results .actions{display:flex;align-items:center;gap:8px}.hidden{display:none!important}footer{text-align:center;padding:15px 0;color:#8ba8b4;font-size:11px}.footerLink{background:none;color:#73e4c7;border:0;text-decoration:underline;cursor:pointer}.modal{position:fixed;z-index:20;inset:0;background:#010b10dc;display:grid;place-items:center;padding:14px;backdrop-filter:blur(5px)}.dialog{background:#102a35;border:1px solid #40646c;border-radius:20px;padding:23px;width:min(100%,600px);max-height:90dvh;overflow:auto;position:relative}.dialog h2{margin:0 0 14px}.dialog h3{margin:18px 0 5px;font-size:15px;color:#79e3c0}.dialog p{font-size:13px;line-height:1.65;color:#c0d5db}.dialog a:not(.linkBtn){color:#8becc9;overflow-wrap:anywhere}.dialog>.primary{width:100%;margin-top:15px}.close{position:absolute;right:15px;top:12px;background:#183f4a;color:white;border:0;border-radius:8px;padding:5px 11px;font-size:25px;cursor:pointer}.setting{display:block;font-size:13px;margin:10px 0;color:#d3e8e8}.support{text-align:center;max-width:410px}.support .mark{margin:auto}.support .two{margin:16px 0}.linkBtn{text-decoration:none;display:flex;align-items:center;justify-content:center}.support small{font-size:11px;color:#96b8c1}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:830px){.app{padding:10px}.workspace{grid-template-columns:1fr}.videoWrap{height:56dvh;min-height:340px}.controls{padding:14px}.results{grid-template-columns:1fr 1fr}.results .actions{grid-column:1/-1}.heading{margin:10px 0}.heading h1{font-size:25px}}@media(max-width:460px){.videoWrap{height:51dvh;min-height:320px}.timer span{font-size:43px}.cue{font-size:12px}.results{grid-template-columns:1fr}.results .actions{grid-column:auto}.help{font-size:11px;padding:9px}.brand small{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* v3: concise result interpretation, reference and fixed-scale visual ruler */
.results{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(220px,.9fr);align-items:stretch}
.results .reference{background:#102c37;border:1px solid #30545e;border-radius:15px;padding:15px}
.reference label{display:block;font-size:12px;color:#dcf8ef;font-weight:700;line-height:1.5;margin-bottom:9px}
.reference select{display:block;width:100%;border-radius:9px;border:1px solid #4b737a;background:#0b212b;color:#edf8f5;padding:9px;margin-bottom:8px}
.reference p{font-size:12px;line-height:1.55;color:#d1e6e6}.reference small{font-size:10px;line-height:1.5;color:#93b0b7}
.results .actions{grid-column:1/-1;justify-content:flex-start}
#swayPlain{font-size:12px;color:#c6e1df;line-height:1.55}#swayCompare{font-size:11px;color:#9ee5c8;line-height:1.5;margin-top:9px}
.swayScale{padding:12px 0 8px}.swayTrack{height:10px;background:linear-gradient(90deg,#20545b,#387988);border-radius:10px;position:relative;margin:5px 5px 10px}.swayTrack>span{position:absolute;top:-5px;width:4px;height:20px;border-radius:3px;background:#f6ca7a;transform:translateX(-50%);box-shadow:0 0 0 2px #102c37}.scaleLabels{display:flex;justify-content:space-between;gap:8px}.scaleLabels span{font-size:10px;color:#b9d4d9}.swayScale small{margin-top:7px;line-height:1.4;font-size:10px;color:#92b0b6}
@media(max-width:1050px){.results{grid-template-columns:1fr 1fr}.results .reference{grid-column:1/-1}}
@media(max-width:600px){.results{grid-template-columns:1fr}.results .reference{grid-column:auto}}

/* FINAL UI: presentation-only skin. Retains all existing app.js measurement logic. */
:root{color-scheme:dark;--mint:#53e2b2;--bg:#06111b;--panel:#0b1e2b;--hair:#284254;--text:#f3f8fe;--muted:#b3c5d3}
body{background:var(--bg);color:var(--text)}
.app{max-width:none;margin:0;padding:0 0 18px}
header{position:absolute;left:0;right:0;top:0;height:98px;padding:18px clamp(17px,2.4vw,42px);z-index:10;background:linear-gradient(180deg,#031019e8,#03101930);pointer-events:none}
header>*{pointer-events:auto}.brand{gap:12px}.mark{width:54px;height:54px;border-radius:14px;font-size:31px;box-shadow:0 6px 28px #0005}.brand b{font-size:25px;letter-spacing:-.9px}.brand small{font-size:11px;letter-spacing:.25px;color:#91b8d0;text-transform:none}.headerActions{display:flex;gap:10px;align-items:center}.resultsShortcut,.help{background:#0d2230db;border:1px solid #395263;color:#edf7ff;border-radius:16px;min-height:53px;padding:12px 20px;font-size:15px;font-weight:800;cursor:pointer}.resultsShortcut:hover,.help:hover{border-color:var(--mint);background:#153443}.help{font-size:19px;min-width:55px}.help span{font-size:12px;margin-left:6px}
.heading{display:none}.workspace{display:block;position:relative}.videoWrap{min-height:660px;height:100dvh;max-height:none;border:0;border-radius:0;background-color:#06121d;background-image:linear-gradient(#24435442 1px,transparent 1px),linear-gradient(90deg,#24435442 1px,transparent 1px);background-size:clamp(120px,15vw,250px) clamp(120px,15vw,250px)}
.videoWrap:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -100px 90px -95px #06111b}
video,canvas{object-fit:contain}.topLeft{top:clamp(112px,14vh,150px);left:clamp(18px,2vw,36px);border:1px solid #3c5267;background:#0a1c2bd9;padding:12px 17px;font-size:14px;border-radius:16px;z-index:2}.timer{top:clamp(112px,14vh,150px);right:clamp(22px,2.2vw,45px);border:1px solid #41566a;background:#0b2030e8;padding:18px 22px;z-index:3;border-radius:19px;min-width:150px}.timer span{font-size:clamp(46px,5vw,73px);font-weight:900;letter-spacing:-3px}.timer small{color:#a5b7c8;font-weight:800}.cue{bottom:clamp(75px,10vh,120px);padding:14px 23px;background:#102337ed;border:1px solid #415469;font-size:clamp(14px,1.2vw,19px);border-radius:15px;max-width:min(700px,58%);z-index:3;box-shadow:0 12px 30px #0005}.progress{height:6px;z-index:4;background:#152c3e}.progress span{background:var(--mint)}.empty{font-size:16px;gap:12px}.empty .figure{font-size:130px;opacity:.24}.empty strong{font-size:22px}.empty span{color:#9cb4c3}
.controls{position:absolute;z-index:5;top:50%;right:clamp(16px,2vw,40px);transform:translateY(-38%);width:clamp(295px,24vw,385px);padding:21px;background:#0b1c2ce8;backdrop-filter:blur(18px);box-shadow:0 18px 65px #0008;border:1px solid #354c60;border-radius:24px;gap:11px;max-height:calc(100dvh - 205px);overflow-y:auto}.step{font-size:12px;margin:7px 0 2px;color:var(--mint)}.step span{font-size:15px}.seg{gap:8px}.seg button{min-height:46px;border-radius:12px;background:#132b3a;border-color:#40586a;font-size:14px}.seg button.active{background:var(--mint);border-color:var(--mint);color:#072a22}.instruction{font-size:12px;color:#aabfcd;line-height:1.5}.setupNote{margin:3px 0 6px}.inlineHelp{border:0;padding:0;background:none;color:#67eac6;font-size:inherit;font-weight:750;cursor:pointer}.primary{background:var(--mint);border-color:var(--mint);font-size:15px;min-height:51px;border-radius:13px}.secondary{background:#102635;border-color:#405769;font-size:13px;border-radius:12px;min-height:42px}.controls>.hint{font-size:11px;line-height:1.5;color:#8fa9b9;border-top:1px solid #263c4c;padding-top:12px}.controls #startBtn{font-size:17px;min-height:56px;box-shadow:0 7px 28px #47e3b126}
.results{max-width:1450px;margin:22px auto 0;padding:0 20px;scroll-margin-top:15px;grid-template-columns:1fr 1.35fr 1fr;gap:14px}.results>div,.results .reference{background:#0e2332;border:1px solid #2f4b5c;border-radius:20px;padding:22px}.results>div>small{color:#adc4d2;font-weight:750;letter-spacing:.5px}.results strong{color:#f5be75;font-size:clamp(30px,3vw,43px)}.results .actions{padding:14px;flex-wrap:wrap}.results .actions button{min-width:138px}footer{padding:18px 12px;color:#87a1b3}
.dialog{background:#0e2635;border-radius:24px;border:1px solid #496170;box-shadow:0 22px 100px #0009}.dialog h3{color:#6ee7c1}.modal{z-index:30}
@media (max-width:1100px){.controls{right:16px;width:300px;padding:16px;transform:translateY(-32%)}.timer{right:340px}.cue{left:28%;max-width:53%}.results{grid-template-columns:1fr 1fr}.results .reference{grid-column:1/-1}}
@media (max-width:760px){header{height:74px;padding:10px 12px}.brand b{font-size:19px}.brand small{font-size:9px}.mark{height:43px;width:43px;font-size:24px}.resultsShortcut,.help{min-height:41px;padding:8px 11px;border-radius:11px;font-size:12px}.help span{display:none}.workspace{display:flex;flex-direction:column}.videoWrap{height:57dvh;min-height:370px;max-height:630px;flex:none}.topLeft{top:82px;left:9px;font-size:10px;padding:8px}.timer{top:80px;right:10px;min-width:92px;padding:9px}.timer span{font-size:37px}.timer small{font-size:8px}.cue{bottom:20px;left:50%;max-width:94%;padding:10px 13px;font-size:13px}.controls{position:relative;top:auto;right:auto;transform:none;max-height:none;overflow:visible;width:auto;margin:-1px 8px 0;border-radius:0 0 18px 18px;padding:16px 15px;gap:9px}.controls .step{margin-top:4px}.controls .setupNote{font-size:12px}.results{margin-top:12px;padding:0 9px;grid-template-columns:1fr 1fr;gap:8px}.results>div,.results .reference{padding:14px}.results .actions{padding:12px}.results .reference{grid-column:1/-1}.results strong{font-size:27px}}
@media(max-width:480px){.videoWrap{height:50dvh;min-height:330px}.results{grid-template-columns:1fr}.results .reference{grid-column:auto}.controls{padding:13px}.controls .hint{font-size:10px}}

/* FINAL responsive layout refinement: presentation only; app.js is unchanged. */
html{min-width:320px}
body{overflow-x:hidden}
header{height:82px;padding:12px clamp(12px,2vw,30px)}
.headerActions{gap:8px}
.resultsShortcut,.help{min-height:46px;padding:9px 15px;border-radius:12px}
/* Video always has enough usable viewing area and no timer/control collision. */
.videoWrap{height:100svh;min-height:490px}
.topLeft{top:98px;left:18px;max-width:42%;line-height:1.3}
.timer{top:98px;right:auto;left:50%;transform:translateX(-50%);padding:10px 20px;min-width:148px;z-index:3;pointer-events:none;background:#071b2bcf}
.timer span{font-size:clamp(39px,4.6vw,63px)}
.controls{top:auto;bottom:clamp(16px,3vh,32px);right:clamp(12px,1.7vw,30px);transform:none;width:clamp(290px,24vw,355px);padding:15px 17px;gap:7px;max-height:calc(100svh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#476775 transparent}
.controls .step{margin:4px 0 1px;font-size:11px}
.controls .step span{font-size:14px}
.controls .seg button{min-height:40px;padding:9px}
.controls .instruction{font-size:11.5px;line-height:1.38}
.controls .setupNote{margin:0}
.controls .secondary{min-height:37px;padding:8px 10px;font-size:12px}
.controls #startBtn{min-height:48px;font-size:15px;padding:10px}
.controls .hint{font-size:10px;line-height:1.3;padding-top:7px;margin-top:1px}
.cue{bottom:clamp(45px,7vh,83px);left:calc((100% - clamp(290px,24vw,355px) - 34px)/2);max-width:min(580px,calc(100% - 410px));font-size:clamp(12px,1.05vw,16px);padding:10px 14px}
@media(max-width:1100px){
 header{height:76px}
 .workspace{display:flex;flex-direction:column}
 .videoWrap{height:61svh;min-height:330px;max-height:680px;flex:none}
 .topLeft{top:83px;left:12px;max-width:39%;font-size:11px;padding:8px 10px}
 .timer{top:81px;left:50%;right:auto;min-width:110px;padding:8px 13px}
 .timer span{font-size:clamp(35px,5vw,52px)}
 .cue{left:50%;bottom:23px;max-width:92%;font-size:13px;padding:9px 12px}
 .controls{position:relative;top:auto;bottom:auto;right:auto;width:auto;transform:none;margin:0 10px 8px;padding:14px 16px;max-height:none;overflow:visible;border-radius:0 0 17px 17px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;align-items:center}
 .controls>.step:nth-of-type(1){grid-column:1;grid-row:1}
 .controls>.seg:nth-of-type(2){grid-column:1;grid-row:2}
 .controls>.step:nth-of-type(3){grid-column:2;grid-row:1}
 .controls>.seg:nth-of-type(4){grid-column:2;grid-row:2}
 .controls #eyesSafety{grid-column:2;grid-row:3}
 .controls .setupNote{grid-column:1;grid-row:3;align-self:start}
 .controls #cameraBtn{grid-column:1;grid-row:4}
 .controls #modeBtn{grid-column:2;grid-row:4}
 .controls>.step:nth-of-type(5){grid-column:1/-1;grid-row:5}
 .controls #startBtn{grid-column:1;grid-row:6}
 .controls #stopBtn{grid-column:2;grid-row:6;min-height:48px}
 .controls .hint{grid-column:1/-1;grid-row:7}
 .results{grid-template-columns:repeat(2,minmax(0,1fr))}
 .results .reference{grid-column:1/-1}
}
@media(max-width:600px){
 header{height:65px;padding:8px 10px}
 .mark{width:38px;height:38px;font-size:21px;border-radius:10px}
 .brand{gap:7px}.brand b{font-size:18px}.brand small{font-size:8px;letter-spacing:0}
 .headerActions{gap:5px}.resultsShortcut,.help{min-height:37px;padding:7px 9px;font-size:11px;border-radius:9px}.help span{display:none}
 .videoWrap{height:49svh;min-height:310px;max-height:520px}
 .topLeft{top:72px;left:8px;font-size:10px;padding:7px 9px;max-width:49%}
 .timer{top:72px;left:auto;right:8px;transform:none;min-width:82px;padding:7px 9px}
 .timer span{font-size:34px;letter-spacing:-1px}.timer small{font-size:8px}
 .cue{bottom:18px;left:50%;font-size:12px;max-width:95%;line-height:1.35;padding:8px 10px}
 .controls{margin:0 6px 8px;padding:11px 12px;gap:7px 9px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .controls .step span{font-size:12px}
 .controls .seg button{min-height:39px;font-size:12px;padding:7px 3px}
 .controls .setupNote{grid-column:1/-1;grid-row:4;font-size:11px}
 .controls #eyesSafety{grid-column:1/-1;grid-row:3;font-size:11px}
 .controls #cameraBtn{grid-column:1;grid-row:5}
 .controls #modeBtn{grid-column:2;grid-row:5}
 .controls>.step:nth-of-type(5){grid-row:6}
 .controls #startBtn{grid-column:1/-1;grid-row:7;min-height:49px}
 .controls #stopBtn{grid-column:1/-1;grid-row:8;min-height:40px}
 .controls .hint{grid-column:1/-1;grid-row:9}
 .results{grid-template-columns:1fr;padding:0 7px;margin-top:9px}
 .results .reference{grid-column:auto}
}
@media(max-width:380px){.brand small{font-size:7px}.resultsShortcut{padding:7px}.topLeft{max-width:48%;font-size:9px}.controls .step span{font-size:11px}}
@media(max-height:720px) and (min-width:1101px){
 .controls{padding:10px 13px;gap:5px;bottom:10px;max-height:calc(100svh - 95px)}
 .controls .seg button{min-height:35px;padding:6px}
 .controls .setupNote{font-size:10px}
 .controls .hint{font-size:9px}
 .controls #startBtn{min-height:41px}
 .topLeft,.timer{top:87px}
 .cue{bottom:24px}
}