:root{color-scheme:dark;--bg:#0a1523;--nav:#0d1c2a;--surface:#122536;--surface2:#192f41;--border:#335268;--ink:#f1f8fc;--muted:#c2d4df;--teal:#76e3c9;--tealdeep:#063a3c;--focus:#ffcc70;--amber:#ffe1a0;font:18px/1.55 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:var(--ink);background:radial-gradient(ellipse 90% 560px at 18% 0%,#173452 0%,var(--bg) 85%);min-height:100vh}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:#aaf1dd;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}[hidden]{display:none!important}
.skip{position:absolute;top:-100px;left:12px;padding:12px 18px;background:#fff;color:#123;z-index:99}.skip:focus{top:10px}
.shell{max-width:1120px;margin:0 auto;padding:0 24px}.masthead{background:#101e2e;border-bottom:1px solid #315066}.mast-inner{max-width:1170px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:15px;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:white;font-size:1rem;font-weight:850;white-space:nowrap}.logo{width:37px;height:37px;display:grid;place-items:center;background:linear-gradient(155deg,#9af9da,#52bdba);border-radius:10px;color:#06262a;font-size:1.18rem}.nav{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.nav-current{font-weight:800;color:#95eacb;font-size:.83rem;padding:9px 10px}.nav-a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;text-decoration:none;color:white;border:1px solid #57798b;border-radius:10px;padding:7px 14px;font-size:.84rem;font-weight:740;background:#172c40}.nav-a:hover{background:#264457}.nav-a.accent{background:#1b4645;border-color:#4faea3;color:#d2ffeb}.preview{background:#30342d;border-bottom:1px solid #a68b47;color:#ffebb9}.preview-inner{max-width:1120px;margin:auto;padding:8px 24px;font-size:.78rem}.preview strong{color:white}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:25px;align-items:center;padding:38px 0 24px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:#8ef4dc;font-size:.71rem;font-weight:850;margin:0 0 11px}h1,h2,h3{letter-spacing:-.025em;line-height:1.2}h1{font-size:clamp(2rem,4.4vw,3.3rem);margin:0 0 14px}h2{font-size:clamp(1.42rem,2.4vw,1.9rem);margin:0 0 13px}h3{font-size:1.2rem;margin:0 0 10px}.hero p{color:var(--muted);margin:0 0 13px}.hero p.lead{font-size:1.13rem;max-width:620px}.hero-actions{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:51px;padding:10px 19px;border-radius:11px;background:var(--teal);color:#0d2b32;text-decoration:none;font-weight:850;font-size:.97rem;box-shadow:0 1px 0 rgba(0,0,0,.35)}.btn:hover:not(:disabled){background:#a0ffdf}.btn.outline{background:#233e52;color:#eefbfa;border:1px solid #7290a2}.btn.outline:hover:not(:disabled){background:#33576b}.tiny{font-size:.83rem;color:#b0c6d0}.hero-illustration{background:#122a3b;border:1px solid #44647a;border-radius:18px;overflow:hidden;box-shadow:0 16px 35px rgba(0,0,0,.2)}.shot-top{padding:10px 14px;background:#244255;color:#e7fcff;font-size:.75rem;font-weight:850;letter-spacing:.04em}.hero-illustration img{display:block;width:100%;height:auto;object-fit:contain}.shot-footer{font-size:.72rem;color:#b0cbd6;padding:9px 14px}
.notice{border-left:5px solid var(--teal);background:#123a40;padding:16px 20px;border-radius:11px;margin:12px 0 26px}.notice p{margin:0;color:#ecf5f5;font-size:.94rem}.layout{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(245px,.78fr);gap:22px;align-items:start}.panel{background:var(--surface);border:1px solid var(--border);border-radius:19px;padding:clamp(18px,3vw,30px)}.panel + .panel{margin-top:20px}.section-kicker{font-size:.73rem;letter-spacing:.1em;font-weight:850;color:#a2ead6;text-transform:uppercase;margin:0 0 9px}.subtle{color:var(--muted);font-size:.94rem}.label{font-weight:850;margin:22px 0 10px;display:block;font-size:1rem}.device-row{display:flex;gap:9px}.toggle{flex:1;min-height:51px;border:1px solid #698ca1;background:#1d394c;color:#f1f7f8;border-radius:11px;font-weight:850}.toggle[aria-pressed="true"]{background:#1b5356;border:2px solid #9bf1d8;color:#fff}.toggle small{font-weight:500;display:block;font-size:.74rem;color:#c9e7e7}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#1d394c;border:1px solid #618293;color:#f7fafc;border-radius:13px;min-height:118px;padding:15px 9px;font-size:.88rem;font-weight:800}.choice .sym{font-size:1.45rem;line-height:1}.choice[aria-pressed="true"]{background:#16494a;border:2px solid #93f3d8}.choice[aria-pressed="true"] .sym{color:#a2ffe2}.choice:hover{background:#29485b}.guide-card{margin-top:21px;background:#0e2130;border:1px solid #466779;border-radius:16px;padding:23px;scroll-margin-top:16px}.guide-meta{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px}.step-number{font-size:.82rem;color:#bce5dd;font-weight:800}.progress{display:flex;gap:6px;align-items:center}.progress>span{display:block;background:#355062;border-radius:999px;width:36px;height:6px}.progress>span.on{background:#70dec4}.guide-card h3{font-size:1.43rem;margin:0 0 11px}.instruction{color:#f1fbfe;font-size:1.08rem;line-height:1.55;margin:0 0 12px;min-height:68px}.extra{margin:0 0 20px;font-size:.9rem;color:#cee0e7}.mini-visual{background:#183345;border:1px solid #3f6778;border-radius:13px;padding:17px;margin:12px 0 20px;min-height:152px}.visual-title{font-size:.73rem;color:#abe9d8;text-transform:uppercase;font-weight:850;letter-spacing:.08em;margin:0 0 11px}.ui-mock{max-width:430px}.mock-window{border:1px solid #7091a2;border-radius:10px;overflow:hidden;background:#102533}.mock-head{background:#25485b;padding:10px;font-size:.76rem;font-weight:800}.mock-body{padding:14px;font-size:.87rem;color:#d8e8ee}.mock-input{border:1px solid #7697a7;background:#e5f1f3;color:#32424a;border-radius:6px;padding:10px 12px;min-height:54px}.mock-button{margin-top:10px;display:inline-flex;background:#7ae1cb;color:#14303b;padding:8px 14px;font-size:.82rem;font-weight:800;border-radius:7px}.mock-illustration{color:#d1e5ed}.mock-illustration p{margin:0 0 8px}.mock-warning{padding:9px 12px;border-radius:7px;color:#ffe6b6;background:#453726;margin-top:9px}.screenshot{width:100%;height:auto;display:block;border-radius:8px;border:1px solid #567689}.shot-caption{font-size:.72rem;color:#c2d4df;margin:9px 0 0}.guide-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.guide-nav .btn{min-width:140px}.step-note{margin:15px 0 0;font-size:.84rem;color:#bfd2dc}.left-side .panel{margin-bottom:20px}.rail{display:grid;gap:18px;position:sticky;top:12px}.rail h3{font-size:1.08rem}.rail p,.rail li{font-size:.88rem;color:#d3e2e6}.rail ul{padding-left:21px}.rail li{margin:8px 0}.access{background:#153743;border-color:#4b7a7c}.access p{margin:0 0 10px}.account-action{display:inline-block;color:#94f5d7;font-weight:800}.rail .big-link{min-height:44px;display:flex;align-items:center;justify-content:center;background:#23485b;border:1px solid #6c95a1;border-radius:10px;text-decoration:none;color:#fff;font-size:.87rem;font-weight:800;margin-top:12px}
.below{margin:24px 0 0}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:17px}.risk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.risk{padding:16px;background:#1a3545;border:1px solid #426278;border-top:5px solid;border-radius:11px}.risk.red{border-top-color:#ff777d}.risk.amber{border-top-color:#ffcb77}.risk.green{border-top-color:#7de2ae}.risk strong{font-size:.98rem}.risk p{font-size:.88rem;color:#dbeaf0;margin:8px 0 0}details{border:1px solid #456575;background:#1b3445;border-radius:11px;padding:12px 16px}details+details{margin-top:9px}summary{font-weight:750;cursor:pointer}details p{color:#d6e5ec;font-size:.92rem;margin:12px 0 3px}.summary-section{margin-top:30px}.summary-section p{font-size:.95rem;color:#d6e5ec}.summary-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:17px}.footer{margin-top:45px;padding:22px 0;background:#101e2c;border-top:1px solid #365267;color:#c2d4de;font-size:.8rem}.footer-inner{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.footer p{margin:0}
@media(max-width:960px){.layout{grid-template-columns:1fr}.rail{position:static;grid-template-columns:1fr 1fr}.hero{grid-template-columns:1.35fr 1fr}}@media(max-width:700px){.shell{padding:0 17px}.mast-inner{padding:12px 17px}.nav{width:100%;justify-content:space-between}.nav-a{flex:1}.nav-current{display:none}.hero{grid-template-columns:1fr;padding:29px 0 18px}.hero-illustration{display:none}.layout{gap:12px}.rail{grid-template-columns:1fr}.choices{grid-template-columns:1fr}.choice{flex-direction:row;text-align:left;min-height:62px;padding:12px 16px;font-size:1rem}.choice .sym{width:35px}.guide-card{padding:17px}.guide-nav .btn{min-width:0;flex:1}.risk-row,.faq-grid{grid-template-columns:1fr}.panel{padding:18px}.preview-inner{padding:10px 17px}.instruction{min-height:0}.device-row .toggle{min-height:57px}.hero-actions .btn{flex:1}.progress>span{width:31px}.mock-body{padding:12px}}
@media(max-width:410px){.brand{font-size:.91rem}.nav-a{padding:8px;font-size:.8rem}.guide-nav .btn{padding:9px 11px}.device-row{gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body{background:white;color:#111}.masthead,.preview,.nav,.hero-actions,.guide-nav,.rail,.footer{display:none!important}.layout{display:block}.panel,.guide-card{background:white;color:#111;border-color:#777}.instruction,.extra,.subtle{color:#222}.below{break-inside:avoid}}

/* Testers14 Issue 4: full-width illustrations and readable example text */
.ui-mock {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.mock-input.mock-illustration {
  color: #263e4c;
  font-weight: 600;
}


@media(max-width:480px){
.nav-a{white-space:nowrap}
.nav-a:nth-of-type(2){flex:.8}
.nav-a:nth-of-type(3){flex:1.2}
}

@media(min-width:701px) and (max-width:960px){.rail>.panel+.panel{margin-top:0}}