*{box-sizing:border-box}body{margin:0;background:#f3f7fc;color:#102642;font:15px system-ui,-apple-system,Segoe UI,sans-serif}header{display:flex;align-items:center;gap:12px;padding:16px max(18px,calc((100vw - 860px)/2));background:#071b36;color:white}.logo{width:38px;height:38px;background:linear-gradient(135deg,#1685e8,#19c4bb);display:grid;place-items:center;border-radius:10px;font-size:25px;font-weight:900}header small{display:block;color:#b3c7d8;font-size:11px}header b{letter-spacing:.12em}.pill{margin-left:auto;border:1px solid #367eab;border-radius:20px;padding:5px 9px;font-size:10px}main{max-width:860px;margin:auto;padding:20px 14px 40px}h1{font-size:clamp(24px,5vw,34px);margin:0 0 6px}.lead{color:#536780;line-height:1.5;margin:0 0 15px}.steps{background:white;border:1px solid #dce7f2;border-radius:14px;padding:15px;margin-bottom:12px}.steps b{display:block;font-size:18px}.steps p{margin:6px 0 0;color:#486079;line-height:1.45}.viewer{height:min(69svh,620px);min-height:390px;position:relative;overflow:hidden;border-radius:18px;background:#091522;box-shadow:0 12px 35px #18375325}.viewer video,.viewer canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.viewer canvas{touch-action:none}.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#d2e7f5;text-align:center;padding:30px;font-size:42px}.empty strong{font-size:18px}.empty span{font-size:13px;max-width:280px}.topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 3px #000}.topbar span{background:#071b36c7;padding:7px 10px;border-radius:30px}.hint{position:absolute;bottom:14px;left:12px;right:12px;padding:12px;background:#071b36e8;color:white;text-align:center;border-radius:12px;font-weight:650;font-size:14px;pointer-events:none}.controls,.nav{display:flex;gap:10px;margin:12px 0}button{border:0;background:#0878d6;color:white;border-radius:11px;padding:13px 14px;flex:1;font-size:14px;font-weight:700;cursor:pointer}button.outline{background:white;color:#0878d6;border:1px solid #b7d2e8}button:disabled{opacity:.45;cursor:not-allowed}.notice{border-left:3px solid #19aaa9;background:#e7f7f8;padding:12px;border-radius:6px;font-size:13px;color:#25506c;line-height:1.5}.ref{margin-top:18px;background:white;border:1px solid #dce7f2;padding:15px;border-radius:15px}.ref p{color:#536780;font-size:13px}.photo{position:relative;overflow:hidden;border-radius:10px}.photo img{display:block;width:100%}.tag{position:absolute;background:#0b8fe9e8;color:white;padding:4px 7px;font-size:11px;font-weight:800;border-radius:5px;box-shadow:0 1px 4px #0007}.tag.hdmi{left:54%;top:60%}.tag.dp{left:52%;top:53%}.tag.lan{left:19%;top:48%}.tag.usb{left:19%;top:67%}.privacy{text-align:center;color:#71869b;font-size:12px}@media(max-width:450px){.viewer{height:66svh;min-height:360px}main{padding:16px 10px 30px}}
/* v5: the entire camera area is scrollable; controls stay close to the video */
.viewer{touch-action:pan-y;overscroll-behavior:auto}
.viewer video,.viewer canvas,.viewer .empty,.viewer .topbar,.viewer .hint{pointer-events:none;touch-action:pan-y}
.nav{margin:10px 0 4px}.nav button{min-height:51px}.controls{margin:7px 0 12px}
@media(max-width:450px){.viewer{height:min(61svh,540px);min-height:300px}.hint{font-size:12px;line-height:1.3;padding:9px;bottom:9px}.steps{padding:11px}.steps p{font-size:13px}.lead{font-size:13px}}

/* Full-screen camera: fixed viewport instead of Fullscreen API (also works on iOS Safari). */
body.ar-active{overflow:hidden;overscroll-behavior:none}
body.ar-active .viewer{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;max-height:none;border-radius:0;z-index:1000;box-shadow:none;touch-action:none}
body.ar-active .viewer video,body.ar-active .viewer canvas{height:100%;width:100%;object-fit:cover}
body.ar-active .topbar{top:max(14px,env(safe-area-inset-top));z-index:3}
body.ar-active .hint{bottom:calc(250px + env(safe-area-inset-bottom));left:16px;right:16px;font-size:12px;background:#071b36a8;z-index:3}
.ar-guide{display:none}
body.ar-active .ar-guide{display:flex;position:absolute;bottom:0;left:0;right:0;z-index:4;flex-direction:column;align-items:center;gap:5px;padding:14px 18px calc(12px + env(safe-area-inset-bottom));color:#fff;background:linear-gradient(0deg,#061528 78%,#06152800);text-align:center;pointer-events:auto}
.ar-step-number{color:#56dfcb;font-size:11px;letter-spacing:.14em;font-weight:800}
.ar-step-title{font-size:19px;font-weight:800;line-height:1.15}
.ar-step-description{font-size:12px;line-height:1.3;max-width:430px;color:#d4e6f3}
.ar-connector{width:104px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 12px #0009)}
.ar-connector[hidden]{display:none}
.ar-bottom-actions{display:flex;gap:10px;width:100%;max-width:480px;margin-top:3px}
.ar-bottom-actions button{padding:11px 10px;min-height:44px}
.ar-secondary{background:#18354e;border:1px solid #61829a}
.ar-exit{background:transparent;color:#dceaf2;padding:5px;font-size:12px;flex:none}
@media(max-height:680px){body.ar-active .hint{bottom:calc(220px + env(safe-area-inset-bottom))}.ar-connector{height:54px;width:76px}.ar-guide{gap:3px!important;padding-top:8px!important}.ar-step-title{font-size:17px}}

/* v14: cable illustration is a primary instruction, not a tiny icon. */
body.ar-active .ar-guide{gap:7px;padding:15px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#061528 82%,#06152800)}
body.ar-active .ar-connector{width:min(70vw,310px);height:clamp(126px,22dvh,205px);object-fit:contain;filter:drop-shadow(0 7px 18px #000b)}
body.ar-active .ar-step-title{font-size:clamp(20px,5vw,25px)}
body.ar-active .ar-step-description{font-size:clamp(13px,3.3vw,15px)}
body.ar-active .hint{bottom:calc(340px + env(safe-area-inset-bottom));max-width:520px;margin:auto}
@media(max-height:720px){body.ar-active .ar-connector{height:clamp(100px,17dvh,150px);width:min(60vw,260px)}body.ar-active .hint{bottom:calc(285px + env(safe-area-inset-bottom))}}
@media(max-height:580px){body.ar-active .ar-connector{height:80px;width:155px}body.ar-active .hint{display:none}}

/* Larger cable drawings and a compact status to avoid overlap with instructions. */
body.ar-active .ar-connector{width:min(78vw,360px);height:clamp(145px,24dvh,220px)}
body.ar-active .hint{bottom:auto;top:calc(max(14px,env(safe-area-inset-top)) + 48px);left:12px;right:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 10px;font-size:11px}
@media(max-height:720px){body.ar-active .ar-connector{height:clamp(100px,18dvh,160px);width:min(70vw,300px)}}

.docs-link{display:block;text-decoration:none;text-align:center;border-radius:11px;padding:12px 16px;color:#fff;background:#0878d6;font-size:14px;font-weight:700;max-width:480px;width:100%;min-height:44px}.docs-link[hidden]{display:none!important}.docs-regular{margin:8px 0}

.confirm{width:100%;max-width:480px;font-size:13px;line-height:1.35}.confirm[hidden]{display:none!important}.confirm label{display:flex;align-items:center;gap:8px;text-align:left;margin:4px 0}.confirm input{width:20px;height:20px;flex:none;accent-color:#0d85df}.confirm a{color:#90d7ff;display:inline-block;padding:7px}.confirm-regular{color:#102642;margin:10px 0}.confirm-regular a{color:#0878d6}.docs-link[aria-disabled=true]{opacity:.45;cursor:not-allowed}.ar-guide{max-height:80dvh;overflow:auto}.ar-guide .ar-connector{flex:none}@media(max-height:750px){body.ar-active .ar-guide{gap:3px;padding-top:8px}body.ar-active .ar-connector{height:min(15dvh,125px)}}

/* Final steps use an instructional screen instead of the camera preview. */
.finish-visual{display:none} [hidden]{display:none!important}
body.ar-active.finish-step .viewer{background:radial-gradient(ellipse at 50% 25%,#133553,#061528 65%)}
body.ar-active.finish-step .viewer video,body.ar-active.finish-step .viewer canvas,body.ar-active.finish-step .viewer .hint,body.ar-active.finish-step .topbar span:first-child{display:none}
body.ar-active.finish-step .finish-visual{display:flex;position:absolute;left:20px;right:20px;top:calc(max(20px,env(safe-area-inset-top)) + 65px);bottom:48%;align-items:center;justify-content:center;color:#e1f2ff}
.finish-visual svg{width:min(70vw,260px);height:auto;filter:drop-shadow(0 10px 20px #0006)}
#checkVisual{width:min(90%,360px);display:grid;gap:12px;text-align:left}#checkVisual div{padding:15px;border:1px solid #3c6785;border-radius:13px;background:#102c46;color:#5de1c1;font-size:19px}#checkVisual span{color:#e6f4ff;font-size:15px;margin-left:9px}
body.ar-active.finish-step .ar-guide{background:none}body.ar-active.finish-step .ar-bottom-actions button:only-child{flex:1}
@media(max-height:680px){body.ar-active.finish-step .finish-visual{top:70px;bottom:55%}.finish-visual svg{width:160px}#checkVisual{gap:5px}#checkVisual div{padding:7px}}

body.welcome header,body.welcome main{display:none}.welcome-page{display:none}body.welcome .welcome-page{display:block;max-width:540px;margin:auto;padding:36px 20px 50px;color:#fff}.welcome-icon{width:64px;height:64px;margin:auto;color:#37dcd2;font-size:48px;text-align:center}.welcome-page h1{text-align:center;font-size:32px;margin:15px 0 8px}.welcome-page>p{text-align:center;line-height:1.5;color:#c8daeb}.welcome-page article{background:#0b2341;border:1px solid #224669;border-radius:18px;padding:22px;margin:16px 0}.welcome-page h2{font-size:20px;margin:12px 0 6px}.welcome-page article p{color:#afc9e1;line-height:1.5;margin:0 0 18px}.welcome-symbol{width:44px;height:44px;border-radius:50%;background:#173a60;color:#51dcd5;display:grid;place-items:center;font-size:24px}.welcome-page button,.welcome-page article a{display:block;width:100%;min-height:48px;border-radius:10px;padding:13px;text-align:center;font-size:15px;font-weight:700;text-decoration:none}.welcome-page article a{border:1px solid #348be0;color:#8dcaff}body.welcome{background:#061528}.screen-help{width:100%;max-width:480px;text-align:left;color:#bfe4fa;font-size:13px}.screen-help summary{cursor:pointer;color:#65ccff;padding:7px}.screen-help p{margin:0 7px 7px;line-height:1.4}.ar-guide .confirm a{display:none}body.ar-active .ar-guide{background:linear-gradient(0deg,#061528 80%,#06152800)}body.ar-active .ar-connector{height:clamp(80px,15dvh,135px)}body.ar-active .hint{display:none}.ar-bottom-actions button{min-height:50px}.ar-guide .docs-link{order:4}.ar-guide #arConfirm{order:3}.ar-guide .ar-bottom-actions{order:5}.ar-guide #arRestart{order:6}.ar-guide #arExit{order:7}.ar-guide #screenHelp{order:2}.ar-guide .ar-connector{order:1}body.ar-active.finish-step .finish-visual{bottom:55%}body.ar-active.finish-step .ar-guide{max-height:70dvh}body.ar-active.finish-step .viewer{overflow:auto}body.ar-active.finish-step .ar-bottom-actions button{flex:1}.confirm label{line-height:1.4}#checkVisual div{color:#65c9ef}@media(max-height:700px){body.ar-active .ar-connector{height:70px}body.ar-active.finish-step .finish-visual{bottom:58%}}

#screenVisual img{width:min(78vw,330px);height:auto;display:block}

/* Krok 7: jednoduché interaktívne potvrdenia namiesto ilustračných boxov. */
body.ar-active.finish-step .viewer:has(#arConfirm:not([hidden])) .finish-visual{display:none}body.ar-active .ar-guide:has(#arConfirm:not([hidden])){top:max(18px,env(safe-area-inset-top));bottom:0;max-height:none;justify-content:center;overflow:auto;padding:24px 22px calc(16px + env(safe-area-inset-bottom));background:none}body.ar-active .ar-guide:has(#arConfirm:not([hidden])) .ar-step-title{font-size:clamp(25px,7vw,34px);margin:4px 0}.ar-guide:has(#arConfirm:not([hidden])) .ar-step-description{font-size:16px;margin-bottom:8px}.final-check{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 12px;margin:8px 0;border:1px solid #335b79;border-radius:12px;background:#102b46;color:white;text-align:left;font-size:16px;font-weight:600}.confirm .final-check input{width:24px;height:24px;flex:none;accent-color:#08a9d8}.no-picture{text-align:left;font-size:14px;margin:10px 0;color:#c6e2f3}.no-picture summary{color:#70cfff;cursor:pointer;padding:5px 0}.no-picture p{line-height:1.45;margin:5px 0 10px}.ar-guide #arConfirm{margin:2px 0 8px}.ar-guide #arDocs{min-height:52px;font-size:16px}.ar-guide:has(#arConfirm:not([hidden])) #arRestart{display:none}body.ar-active.finish-step .topbar:has(#count){pointer-events:none}@media(max-height:700px){body.ar-active .ar-guide:has(#arConfirm:not([hidden])){justify-content:flex-start;padding-top:50px}.final-check{min-height:48px;margin:5px 0}}

#screenVisual .default-screen{width:min(78vw,330px);border:4px solid #263b50;border-radius:3px;box-shadow:0 5px 20px #0007;background:#102c4c;overflow:hidden}#screenVisual .default-screen img{display:block;width:100%;height:auto}

/* Svetlá farebnosť podľa dokumentácie. */
body.welcome{background:#f4f8fc}body.welcome .welcome-page{color:#112b48}.welcome-page>p{color:#506b82}.welcome-page article{background:#fff;border-color:#dbe8f3;box-shadow:0 6px 24px #173a5010}.welcome-page article p{color:#536d83}.welcome-icon{color:#08aeb5}.welcome-symbol{background:#e4f6f7;color:#098f9d}.welcome-page article a{color:#0878d6;border-color:#0878d6;background:#fff}
body.ar-active .ar-guide{color:#102b47;background:linear-gradient(0deg,#fff 88%,#fffffff0 95%,#fff0);padding-top:32px}.ar-step-number{color:#078a94}.ar-step-description{color:#506a7e}.ar-secondary{background:#edf5fb;color:#1367a8;border:1px solid #b8d1e2}.ar-exit{color:#506a80}.ar-guide .ar-connector{filter:drop-shadow(0 4px 10px #132f512b)}body.ar-active.finish-step .viewer{background:#f4f8fc}body.ar-active.finish-step .ar-guide{background:none}body.ar-active.finish-step .finish-visual{color:#102b47}.screen-help,.no-picture{color:#536d83}.screen-help summary,.no-picture summary{color:#087acb}.final-check{background:white;color:#102b47;border-color:#d4e3ee}.docs-link{background:#0878d6;color:#fff}.topbar span{background:#071b36df;color:white}

.language-picker{display:flex;justify-content:flex-end;align-items:center;gap:8px;color:#426279;font-size:14px}.language-picker select{border:1px solid #b9d0df;border-radius:9px;padding:8px 10px;background:white;color:#163652;font:inherit}.topbar #mode:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#a7bbcd;margin-right:7px}.topbar #mode.found:before{background:#3fe493;box-shadow:0 0 0 3px #42e99d36}body.ar-active.finish-step:has(#screenHelp:not([hidden])) .finish-visual{top:calc(max(20px,env(safe-area-inset-top)) + 35px);bottom:50%}body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-guide{bottom:0;padding-top:12px}.screen-emphasis{display:block;font-weight:700;color:#087a82;margin-top:8px}
/* v31: welcome and documentation hub */
:root{--surface:#f7f9fc;--card:#fff;--ink:#101f3a;--muted:#637189;--line:#e1e8f0;--accent:#1268ca;--button:#183457}
html[data-theme=dark]{--surface:#091629;--card:#12223a;--ink:#eff4fb;--muted:#a9b9cd;--line:#2c405c;--accent:#8cc5ff;--button:#176cc9;color-scheme:dark}
body.welcome,body.router{background:var(--surface);color:var(--ink)}body.welcome .welcome-page,.router-page{max-width:520px;margin:auto;color:var(--ink);padding:clamp(16px,3vh,28px) 20px 24px}.site-tools{display:flex;justify-content:flex-end;align-items:center;gap:8px;height:40px;margin-bottom:clamp(14px,3vh,26px)}.language-picker{display:flex;gap:5px;align-items:center;padding:4px 9px;background:var(--card);border:1px solid var(--line);border-radius:12px}.language-picker select{padding:4px 3px;border:0;background:transparent;color:var(--ink);font:600 13px system-ui}.theme-toggle{flex:none;padding:5px 8px;min-height:34px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:17px;font-weight:400}.theme-toggle span{margin-left:7px}body.welcome .welcome-page h1{font-size:clamp(25px,6vw,31px);text-align:left;line-height:1.1;margin:0 0 7px;letter-spacing:-.025em}body.welcome .welcome-page>p{font-size:14px;text-align:left;line-height:1.4;margin:0 0 clamp(12px,2vh,20px);color:var(--muted)}body.welcome .welcome-page article{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 22px #10264109;margin:0 0 12px;padding:12px;color:var(--ink)}.welcome-ar>img{display:block;width:100%;height:clamp(120px,23dvh,208px);object-fit:cover;border-radius:10px}.welcome-content{padding:3px 3px 0}.welcome-page h2{font-size:17px;font-weight:650;letter-spacing:-.02em;margin:9px 0 5px}.welcome-page article p{color:var(--muted);font-size:13px;line-height:1.35;margin:0 0 10px}.welcome-page button{background:var(--button);min-height:43px;padding:9px;font-weight:600}.welcome-page article a{border:0;text-align:left;color:var(--accent);padding:0;min-height:0;font-weight:600;font-size:14px}.welcome-skip{padding:14px 16px!important}.welcome-skip h2{margin:0 0 4px}.welcome-skip p{margin-bottom:8px!important}
.router-page{max-width:520px}.router-page h1{font-size:30px;letter-spacing:-.03em;margin:7px 0}.router-intro,.route-section p{color:var(--muted);margin:0;line-height:1.35}.router-intro{font-size:14px;margin-bottom:clamp(16px,2vh,24px)}.success{font-size:13px;font-weight:600;color:#168264;display:flex;align-items:center;gap:8px;margin:0 0 12px}.success span:first-child{background:#dcf3e8;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.route-section{margin:0 0 clamp(12px,2vh,18px)}.route-heading{font-size:11px;letter-spacing:.1em;font-weight:750;color:var(--muted)}.route-section p{font-size:12px;margin:4px 0 7px}.route-link{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 13px;background:var(--card);border:1px solid var(--line);border-radius:10px;margin:5px 0;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}.route-link span:last-child{color:var(--accent);font-size:19px}.router-back{display:inline-block;color:var(--accent);text-decoration:none;font-size:13px;margin:2px 0 12px}.router-back:before{content:'← ';}
/* Camera remains full screen. Finishing views are reading-friendly and scroll on small phones. */
body.ar-active.finish-step .viewer{background:var(--surface);overflow:auto}body.ar-active.finish-step .topbar{display:none}body.ar-active.finish-step .finish-visual{position:relative;display:flex;inset:auto;padding:clamp(35px,8dvh,65px) 20px 0;min-height:0}body.ar-active.finish-step #screenVisual .default-screen{width:min(80vw,420px);border:4px solid #27384c;box-shadow:0 8px 24px #142c4633}body.ar-active.finish-step .ar-guide{position:relative;inset:auto;max-height:none;overflow:visible;display:flex;align-items:stretch;text-align:left;color:var(--ink);background:none;padding:clamp(20px,4vh,34px) 24px 24px;gap:10px}.finish-step .ar-step-number{color:#58708b;order:0}.finish-step .ar-step-title{color:var(--ink);font-size:clamp(25px,6vw,31px)!important;font-weight:650;order:1}.finish-step .ar-step-description{color:var(--muted);font-size:15px!important;order:2;max-width:none}.screen-note{order:3;background:#eaf3fc;color:#153457;border-radius:11px;padding:14px 16px;font-size:14px;line-height:1.45}.screen-help{order:4!important;max-width:none;text-align:center;color:var(--ink)}.screen-help summary{list-style:none;color:var(--accent);font-weight:600;padding:12px;cursor:pointer}.screen-help summary:before{content:'ⓘ  '}.screen-help summary:after{content:'  ⌄'}.screen-help p{text-align:left;color:var(--muted)}body.ar-active.finish-step .ar-bottom-actions{order:6;width:100%;max-width:none}.finish-step .ar-bottom-actions button{min-height:46px;font-weight:600;padding:8px}.finish-step .ar-exit{order:8;color:var(--muted)}
body.ar-active.final-check-step .ar-guide:has(#arConfirm:not([hidden])){position:relative;top:auto;bottom:auto;justify-content:flex-start;align-items:stretch;max-height:none;padding:clamp(48px,10vh,85px) 24px 24px;text-align:left}.final-check-step .ar-guide #arConfirm{order:3;max-width:none;margin:8px 0 0}.final-check-step .confirm .final-check{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--ink);font-size:15px;font-weight:500;padding:11px 2px;margin:0;min-height:54px}.final-check-step .ar-guide #arDocs{order:4;max-width:none;min-height:46px;padding:12px;font-size:14px}.final-check-step .ar-guide .ar-bottom-actions{order:5}.final-check-step .ar-guide #arExit{order:6}.docs-link[aria-disabled=true]{background:#aab8c7;opacity:.7;pointer-events:none}.final-check-step .ar-guide #arRestart{display:none}
html[data-theme=dark] .screen-note{background:#19324e;color:#e3effb}html[data-theme=dark] body.ar-active.finish-step .ar-step-description{color:var(--muted)}html[data-theme=dark] .success span:first-child{background:#1d5041}html[data-theme=dark] .ar-secondary{background:#243850;color:#e8f3ff;border-color:#536a85}
@media(max-height:700px){body.welcome .welcome-page{padding-top:10px}.site-tools{margin-bottom:9px}.welcome-ar>img{height:120px}.welcome-page article p{margin-bottom:7px}.router-page{padding-top:12px}.route-section{margin-bottom:9px}.route-link{min-height:40px;padding:8px 12px}.router-intro{margin-bottom:10px}}
/* v32: Keep language and theme controls compact on the welcome page. */
body.welcome .welcome-page .site-tools,body.router .site-tools{display:flex;justify-content:flex-end;gap:8px;min-width:0}
body.welcome .welcome-page .site-tools .language-picker,body.router .site-tools .language-picker{flex:0 0 auto;max-width:none;white-space:nowrap}
body.welcome .welcome-page .site-tools .language-picker select,body.router .site-tools .language-picker select{width:auto;max-width:112px;min-width:47px}
body.welcome .welcome-page .site-tools .theme-toggle,body.router .site-tools .theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:72px;min-height:36px;padding:5px 9px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:17px;font-weight:400;line-height:1;text-align:center;box-shadow:none}
body.welcome .welcome-page .site-tools .theme-toggle span,body.router .site-tools .theme-toggle span{margin-left:9px}
/* v33: the final views use normal flow and allow vertical touch scrolling. */
body.ar-active.finish-step .viewer{overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .finish-visual,body.ar-active.finish-step .finish-visual{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;display:flex;padding:clamp(32px,6vh,55px) 20px 0;align-items:center;justify-content:center}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-guide,body.ar-active.finish-step .ar-guide{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;max-height:none;overflow:visible;touch-action:pan-y}
body.ar-active.final-check-step .viewer:has(#arConfirm:not([hidden])) .finish-visual{display:none}
body.ar-active.final-check-step .ar-guide:has(#arConfirm:not([hidden])){position:relative;inset:auto;max-height:none;overflow:visible;touch-action:pan-y}
.camera-error{color:#a62833!important;background:#fff0f1;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.4}
.router .route-link{min-height:52px;padding:13px 15px;font-size:15px}
@media(max-height:700px){.router .route-link{min-height:46px;padding:10px 14px}}
/* v34: legible dark mode and steady camera-step controls */
html[data-theme=dark] body.welcome .welcome-page .welcome-skip a{background:transparent;color:#9dcfff;border:0}
html[data-theme=dark] body.ar-active:not(.finish-step) .ar-guide{background:linear-gradient(0deg,#091629 88%,#091629ed 95%,#09162900);color:#eef5ff}
html[data-theme=dark] body.ar-active:not(.finish-step) .ar-step-number{color:#75ddd0}
html[data-theme=dark] body.ar-active:not(.finish-step) .ar-step-description{color:#c8d8e8}
html[data-theme=dark] body.ar-active:not(.finish-step) .ar-secondary{background:#203a56;border-color:#66819d;color:#f5f9ff}
html[data-theme=dark] body.ar-active:not(.finish-step) .ar-exit{color:#d1ddea}
body.ar-active:not(.finish-step) .ar-guide{height:min(360px,58dvh);max-height:58dvh;justify-content:flex-end;overflow-y:auto;touch-action:pan-y}
body.ar-active:not(.finish-step) .ar-step-description{min-height:2.6em}
body.ar-active:not(.finish-step) .ar-connector{width:min(70vw,300px);height:clamp(70px,14dvh,115px);flex:none}
body.ar-active:not(.finish-step) .ar-connector[hidden]{display:block!important;visibility:hidden}
body.ar-active:not(.finish-step) .ar-bottom-actions,body.ar-active:not(.finish-step) .ar-exit{flex-shrink:0}
.router .router-intro{margin-bottom:clamp(20px,3vh,30px)}
.router .route-section{margin-bottom:clamp(20px,3vh,28px)}
@media(max-height:700px){.router .router-intro{margin-bottom:14px}.router .route-section{margin-bottom:14px}body.ar-active:not(.finish-step) .ar-guide{height:min(330px,62dvh);max-height:62dvh}}
/* v35: consistent navigation, compact AR panel and clear theme state */
body.welcome .welcome-page .site-tools .theme-toggle,body.router .site-tools .theme-toggle{padding:3px;gap:2px;min-width:75px;min-height:38px}
body.welcome .welcome-page .site-tools .theme-toggle span,body.router .site-tools .theme-toggle span{display:grid;place-items:center;width:30px;height:30px;margin:0;border-radius:9px;color:var(--muted);transition:background-color .18s,color .18s}
html:not([data-theme=dark]) .site-tools .theme-sun{background:#e5f0ff;color:#145db0!important}
html[data-theme=dark] .site-tools .theme-moon{background:#31537a;color:#fff!important}
body.ar-active:not(.finish-step) .ar-guide{height:min(305px,52dvh);max-height:52dvh;padding:20px 16px calc(10px + env(safe-area-inset-bottom));gap:3px}
body.ar-active:not(.finish-step) .ar-connector{height:clamp(52px,10dvh,80px);width:min(64vw,265px)}
body.ar-active:not(.finish-step) .ar-step-description{min-height:2.35em;line-height:1.2}
body.ar-active:not(.finish-step) .ar-bottom-actions button{min-height:46px;padding:8px}
body.ar-active.finish-step .viewer{display:flex;flex-direction:column;align-items:stretch}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .finish-visual{flex:0 0 auto;padding-top:clamp(38px,8dvh,72px)}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-guide{flex:1 0 auto;display:flex;gap:clamp(9px,1.5dvh,15px);padding:clamp(18px,3dvh,28px) 24px calc(14px + env(safe-area-inset-bottom))}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-bottom-actions{margin-top:auto}
.router .router-intro{margin-bottom:clamp(24px,3.8dvh,36px)}
.router .route-section{margin-bottom:clamp(25px,3.8dvh,36px)}
@media(max-height:700px){.router .router-intro{margin-bottom:16px}.router .route-section{margin-bottom:16px}body.ar-active:not(.finish-step) .ar-guide{height:min(285px,58dvh);max-height:58dvh}body.ar-active.finish-step:has(#screenHelp:not([hidden])) .finish-visual{padding-top:20px}}
/* v36: minimise the camera overlay and distribute step-six content. */
body.ar-active:not(.finish-step) .ar-guide{height:min(275px,50dvh);max-height:50dvh;padding:14px 16px calc(8px + env(safe-area-inset-bottom));gap:2px}
body.ar-active:not(.finish-step) .ar-connector{height:clamp(48px,8dvh,65px);width:min(60vw,250px)}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-guide{justify-content:space-between;gap:clamp(9px,1.2dvh,14px)}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-bottom-actions{margin-top:0}
@media(max-height:700px){body.ar-active:not(.finish-step) .ar-guide{height:min(260px,55dvh);max-height:55dvh}}
/* v37: keep step 6 navigation at the same viewport position as camera steps. */
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-guide{padding-bottom:calc(115px + env(safe-area-inset-bottom));}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-bottom-actions{position:fixed;z-index:6;left:16px;right:16px;bottom:calc(34px + env(safe-area-inset-bottom));width:auto;max-width:none;margin:0;}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) .ar-bottom-actions button{min-height:46px;padding:8px;}
body.ar-active.finish-step:has(#screenHelp:not([hidden])) #arExit{position:fixed;z-index:6;bottom:calc(8px + env(safe-area-inset-bottom));left:0;right:0;width:100%;height:24px;padding:5px;font-size:12px;line-height:14px;}

/* A short confirmation sits over the camera and never changes the guide layout. */
.panel-feedback[hidden]{display:none!important}.panel-feedback{position:absolute;z-index:3;top:calc(max(14px,env(safe-area-inset-top)) + 55px);left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 16px;border-radius:24px;background:#092939eF;color:#b9ffdc;font-size:13px;font-weight:600;pointer-events:none;box-shadow:0 5px 20px #0003}.panel-feedback:before{content:'✓';margin-right:8px;color:#66e9ad}.panel-feedback.show{animation:panel-confirm .35s ease-out}@keyframes panel-confirm{from{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%,0)}}body.finish-step .panel-feedback{display:none}@media(prefers-reduced-motion:reduce){.panel-feedback.show{animation:none}}

/* Camera pixels and AR overlay use the same viewport, including on Safari restart. */
body.ar-active .viewer #video{opacity:0;pointer-events:none}body.ar-active .viewer #cameraSurface{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none}body.ar-active .viewer #overlay{z-index:1}body.ar-active.finish-step .viewer #cameraSurface{display:none}

.turn-prompt[hidden]{display:none!important}.turn-prompt{position:absolute;z-index:3;top:23%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:24px;background:#071b36a8;color:#fff;pointer-events:none;white-space:nowrap;font:500 13px system-ui;backdrop-filter:blur(6px)}.turn-hand{display:inline-block;opacity:.78;font-size:28px;transform:rotate(-30deg);animation:turn-device 1.8s ease-in-out infinite}@keyframes turn-device{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(40deg)}}@media(prefers-reduced-motion:reduce){.turn-hand{animation:none}}body.finish-step .turn-prompt{display:none}

.camera-resume[hidden]{display:none!important}.camera-resume{position:absolute;z-index:6;top:38%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);min-height:48px;padding:12px 20px;border:1px solid #8ccacb70;background:#0c263ef0;color:#fff;border-radius:14px;font:500 15px system-ui;box-shadow:0 8px 30px #0003}.panel-feedback.show{animation:panel-confirm .2s ease-out}

/* Initial acquisition deserves a clear, short success moment. */
.panel-feedback.hero{top:26%;padding:16px 22px;border-radius:20px;background:rgba(7,35,44,.94);color:#dcfff0;font-size:16px;font-weight:600;box-shadow:0 10px 36px #0005;max-width:calc(100% - 32px);white-space:normal;text-align:center;backdrop-filter:blur(12px);border:1px solid #89ebc666}.panel-feedback.hero:before{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:#60d7a92b;color:#8df1c5;font-size:19px;vertical-align:middle}.panel-feedback.hero.show{animation:panel-celebrate .32s ease-out}@keyframes panel-celebrate{from{opacity:0;transform:translate(-50%,7px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@media(prefers-reduced-motion:reduce){.panel-feedback.hero.show{animation:none}}

/* Guidance never changes footer geometry or covers connector labels. */
.camera-guidance[hidden]{display:none!important}.camera-guidance{position:absolute;z-index:3;top:calc(max(14px,env(safe-area-inset-top)) + 62px);left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;padding:9px 14px;border:1px solid #b9dce22b;border-radius:18px;background:#0b2339d9;color:#e2f3f4;font:500 13px/1.4 system-ui;text-align:center;pointer-events:none}.turn-prompt{max-width:calc(100% - 40px);width:max-content;white-space:normal;text-align:center}.turn-prompt .turn-hand{flex-shrink:0}.turn-prompt>span:last-child{min-width:0}.turn-prompt>span:last-child{font-size:13px;line-height:1.4}body.finish-step .camera-guidance{display:none!important}

.panel-feedback,.panel-feedback.hero{top:calc(max(14px,env(safe-area-inset-top)) + 55px);font-size:13px;padding:9px 14px;border-radius:20px;max-width:calc(100% - 32px)}