@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Rubik:wght@500;600;700;800;900&display=swap');
:root{--blue:#2daaf4;--deep:#102c53;--ink:#132c4d;--paper:#fffdf5;--yellow:#ffe365;--purple:#7254df;--line:#d7e0eb;--max:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6faff;color:var(--ink);font-family:Nunito,'Trebuchet MS',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}
.topbar{height:70px;padding:0 max(20px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:2px solid var(--deep)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:900 12px Rubik,Arial,sans-serif;letter-spacing:.06em}.brand b{color:#4e8cc9}.brand-cube{display:grid;place-items:center;width:28px;height:28px;background:var(--yellow);border:2px solid var(--deep);border-radius:7px;box-shadow:2px 2px 0 var(--deep);transform:rotate(-4deg);font-size:17px}.back-link{font-weight:900;font-size:12px;text-underline-offset:3px;color:#376ca1}
.page-shell{max-width:var(--max);margin:auto;padding:45px 20px 75px}.intro{max-width:750px}.label{margin:0 0 12px;color:#3974ac;font:900 10px Rubik,Arial,sans-serif;letter-spacing:.13em}.intro h1{margin:0 0 17px;font:900 clamp(42px,6vw,66px)/.99 Rubik,Arial,sans-serif;letter-spacing:-.06em;color:var(--deep)}.intro-copy{max-width:690px;margin:0 0 12px;color:#4e657e;font-size:16px;line-height:1.65;font-weight:700}.diagram-note{max-width:700px;margin:0;color:#75879a;font-size:11px;line-height:1.6}
.before{margin:31px 0 36px;padding:20px 22px;background:#fff4c5;border:2px solid var(--deep);border-radius:15px;box-shadow:4px 4px 0 var(--deep)}.before h2{margin:0 0 8px;font:900 18px Rubik,Arial,sans-serif}.before p{margin:0;color:#53667b;font-size:12px;line-height:1.65}.before p+p{margin-top:8px}.dns-warning{padding-top:9px;border-top:1px solid #dfd29b}.dns-warning strong{color:var(--deep)}
.walkthrough{background:#fff;border:2px solid var(--deep);border-radius:20px;box-shadow:6px 6px 0 var(--deep);overflow:hidden}.progress-row{display:flex;align-items:center;gap:15px;padding:14px 20px;background:#eaf6ff;border-bottom:1px solid var(--line);font:900 11px Rubik,Arial,sans-serif;color:#416d96}.progress-track{height:8px;flex:1;background:#d5e6f2;border:1px solid #acc8df;border-radius:8px;overflow:hidden}.progress-track span{height:100%;width:16.66%;display:block;background:var(--blue);border-radius:8px;transition:width .2s ease}.step-card{display:grid;grid-template-columns:.78fr 1.22fr;gap:25px;align-items:center;padding:25px}.step-copy .label{margin-bottom:9px}.step-copy h2{margin:0 0 11px;font:900 25px/1.1 Rubik,Arial,sans-serif;letter-spacing:-.035em;color:var(--deep)}.step-copy>p:not(.label){font-size:13px;line-height:1.7;color:#4e657e;margin:0}.step-copy strong{color:var(--deep);font-weight:900}.step-tip{margin-top:12px;padding:10px 12px;background:#eaf6ff;border-left:4px solid var(--blue);border-radius:4px;font-size:11px;line-height:1.55;color:#496783}.screen-frame{margin:0;aspect-ratio:16/9;background:#e4edf3;border:2px solid #b9c7d2;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px #1738581c}.screen-frame svg{display:block;width:100%;height:100%}.step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:#fcfdff}.step-button{border:2px solid var(--deep);border-radius:10px;padding:10px 14px;font:900 12px Nunito,sans-serif;cursor:pointer}.step-button:disabled{opacity:.4;cursor:not-allowed}.step-button.secondary{background:#fff;color:var(--deep)}.step-button.primary{background:var(--yellow);box-shadow:2px 2px 0 var(--deep);color:var(--deep)}.step-dots{display:flex;gap:7px}.step-dot{width:10px;height:10px;padding:0;border:1px solid #6684a2;background:white;border-radius:50%;cursor:pointer}.step-dot[aria-current=true]{background:var(--blue);border-color:var(--deep);transform:scale(1.2)}
.numbers{margin:56px 0 0}.numbers h2,.help-note h2{font:900 25px Rubik,Arial,sans-serif;letter-spacing:-.04em;color:var(--deep);margin:0 0 14px}.number-pair{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:15px}.number-pair>div{background:#fff;border:2px solid var(--deep);border-radius:14px;box-shadow:3px 3px 0 var(--deep);padding:15px}.number-pair span,.number-pair small{display:block;color:#647c94;font-size:11px;font-weight:800}.number-pair strong{display:block;margin:5px 0;font:900 clamp(17px,3vw,26px) Rubik,Arial,sans-serif;letter-spacing:.015em;color:var(--deep);overflow-wrap:anywhere}.number-pair> b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);border:2px solid var(--deep);font:900 18px Rubik,Arial,sans-serif;box-shadow:2px 2px 0 var(--deep)}.numbers>p{margin:13px 0 0;color:#5a7088;font-size:12px;line-height:1.65}.numbers>p strong{color:var(--deep)}
.help-note{margin-top:50px;padding:21px 22px;background:#e9e3ff;border:2px solid var(--deep);border-radius:15px;box-shadow:4px 4px 0 var(--deep)}.help-note h2{margin-bottom:8px}.help-note p{font-size:12px;line-height:1.7;color:#526782;margin:0}.help-note .source-links{margin-top:12px;padding-top:10px;border-top:1px solid #c8bfea;font-size:10px}.source-links a{font-weight:900;color:#416ea4;text-underline-offset:2px}
footer{max-width:var(--max);margin:auto;padding:0 20px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}footer p{margin:0;text-align:right;font-size:10px;color:#6d8397}
/* Recreated Switch-style screen diagrams. The choice labels follow the Dutch Switch menus. */
.ui-bg{fill:#e7edf1}.ui-panel{fill:#fff}.ui-side{fill:#f6f7f8}.ui-side-text{font:19px Arial,sans-serif;fill:#41474d}.ui-side-active{fill:#00a8ee}.ui-side-active-text{font:700 19px Arial,sans-serif;fill:#fff}.ui-title{font:700 22px Arial,sans-serif;fill:#424950}.ui-text{font:17px Arial,sans-serif;fill:#50565c}.ui-small{font:13px Arial,sans-serif;fill:#727a81}.ui-row{fill:#fff;stroke:#d4d9dd;stroke-width:1}.ui-button{fill:#00a8ee}.ui-button-text{font:700 17px Arial,sans-serif;fill:#fff}.ui-highlight{fill:none;stroke:#ffca28;stroke-width:5}.ui-callout{fill:#ffdf5d;stroke:#172d4c;stroke-width:2}.ui-callout-text{font:900 15px Arial,sans-serif;fill:#172d4c}.mc-bg{fill:#141e25}.mc-head{fill:#202d38}.mc-tab{font:700 15px Arial,sans-serif;fill:#dbe6eb}.mc-title{font:700 20px Arial,sans-serif;fill:#fff}.mc-text{font:15px Arial,sans-serif;fill:#fff}.mc-muted{font:13px Arial,sans-serif;fill:#b7c4cc}.mc-card{fill:#263640;stroke:#617480;stroke-width:2}.mc-active{stroke:#64c7ff;stroke-width:4}.bc-bg{fill:#192a37}.bc-panel{fill:#233847;stroke:#7790a0;stroke-width:2}.bc-title{font:700 20px Arial,sans-serif;fill:#fff}.bc-text{font:16px Arial,sans-serif;fill:#fff}.bc-input{fill:#f4f7f9;stroke:#55758b;stroke-width:2}.bc-value{font:700 16px Arial,sans-serif;fill:#1a2a35}.bc-button{fill:#31b6ef;stroke:#fff;stroke-width:2}.bc-button-text{font:700 16px Arial,sans-serif;fill:#0e283b}
@media(max-width:760px){.page-shell{padding:32px 14px 55px}.step-card{grid-template-columns:1fr;gap:17px;padding:19px}.step-copy h2{font-size:22px}.screen-frame{grid-row:1}.progress-row{padding:12px 14px}.step-controls{padding:12px 14px}.step-button{padding:9px 11px}.number-pair{grid-template-columns:1fr;gap:10px}.number-pair> b{margin:auto}.number-pair>div{padding:13px}.before{padding:17px;margin:23px 0 28px}.numbers{margin-top:42px}.help-note{margin-top:36px}}
@media(max-width:390px){.back-link{font-size:10px}.brand{font-size:10px}.step-dots{gap:5px}.step-dot{width:8px;height:8px}.step-button{font-size:11px}.step-controls{gap:6px}.intro h1{font-size:42px}.ui-side-text{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}