@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ZenMaruGothic-Regular.ttf') format('truetype')}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500 900;font-display:swap;src:url('fonts/ZenMaruGothic-Medium.ttf') format('truetype')}
:root{font-family:'Zen Maru Gothic',sans-serif;font-size:16px;color-scheme:light;--ink:#283b52;--muted:#64758a;--accent:#426fa6;--accent-soft:#e6eef9;--page:#f3f6fa;--surface:#fff;--line:#dce4ee;--figure:#f0f5fb;--key:#fcfdff;--plate:#e0e8f2;--key-stroke:#bdcddd;--blue-key:#4778b6;--blue-ink:#fff;--shadow:#314f7410;background:var(--page);color:var(--ink)}
[data-theme=dark]{color-scheme:dark;--ink:#e2eaf5;--muted:#acbdd2;--accent:#a4c6f3;--accent-soft:#2b4262;--page:#171f2b;--surface:#202c3c;--line:#3b4c63;--figure:#1b293c;--key:#33455b;--plate:#26384e;--key-stroke:#5c7290;--blue-key:#a1c4f0;--blue-ink:#182a43;--shadow:#00000020}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button,a{touch-action:manipulation}button{color:inherit}a{color:var(--accent);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}button:disabled{opacity:.4;cursor:default}p{line-height:1.8;margin:0}h1,h2,h3{font-weight:500;margin:0}svg{display:block}button{border:0;background:none}.skip-link{position:fixed;left:16px;top:-100px;padding:16px;background:var(--surface);z-index:20}.skip-link:focus{top:8px}
.guide-header{height:80px;padding:0 clamp(24px,4vw,64px);display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:23px;white-space:nowrap}.brand img{width:104px;height:auto}[data-theme=dark] .brand img{filter:invert(1)}.header-divider{height:24px;width:1px;background:var(--line)}.header-label{color:var(--muted);font-size:14px}.header-actions{display:flex;align-items:center;gap:24px;margin-left:auto}.back-to-studio{text-decoration:none;color:var(--muted);font-size:14px}.back-to-studio span{padding-left:8px}.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;font-size:28px}.icon-button:hover{background:var(--accent-soft)}.icon-button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}.icon-button svg path{fill:currentColor}
.guide-shell{max-width:1440px;padding:40px 48px 24px;margin:0 auto}.guide-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px}.guide-topline h1{font-size:18px;letter-spacing:.04em}.text-button{font-size:14px;color:var(--muted);padding:8px 0}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.text-button span{margin-left:8px}.guide-layout{display:grid;grid-template-columns:208px minmax(0,1fr);gap:40px;align-items:start}.guide-sidebar{padding-top:24px}.flow-label{font-size:14px;color:var(--muted);margin-bottom:24px}.step-list{padding:0;margin:0;list-style:none;display:grid;gap:0}.step-list li{position:relative}.step-list li:not(:last-child)::after{content:'';position:absolute;left:15px;top:42px;height:24px;border-left:1px solid var(--line)}.step-list button{width:100%;text-align:left;display:flex;align-items:center;gap:16px;padding:8px 0 24px;color:var(--muted);font-size:15px;line-height:24px}.step-list .step-number{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:13px;background:var(--page)}.step-list button[aria-current=step]{color:var(--accent);font-weight:500}.step-list button[aria-current=step] .step-number{background:var(--accent);color:var(--surface);border-color:var(--accent)}.step-list .visited .step-number{border-color:var(--accent);color:var(--accent)}.guide-baseline{margin-top:48px;color:var(--muted);font-size:12px;line-height:1.8}.small-rule{display:block;width:24px;height:2px;background:var(--line);margin-bottom:16px}.guide-baseline details{margin-top:8px}.guide-baseline summary{cursor:pointer}.guide-baseline details p{margin-top:8px}.guide-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 32px var(--shadow);overflow:hidden;min-width:0}.step-heading{padding:32px 40px 0}.step-counter{color:var(--accent);font-size:12px;letter-spacing:.12em;font-variant-numeric:tabular-nums;margin-bottom:8px}.step-heading h2{font-size:clamp(24px,2.1vw,32px);line-height:1.5;outline:none}.step-description{font-size:16px;line-height:1.85;max-width:48em;margin-top:12px;color:var(--muted)}.step-options{padding:0 40px}.option-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px}.option-label{font-size:14px;color:var(--muted)}.segmented{display:flex;gap:4px;padding:4px;background:var(--page);border:1px solid var(--line);border-radius:12px}.segmented button{min-height:40px;min-width:64px;border-radius:8px;padding:8px 16px;font-size:14px}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:0 2px 6px var(--shadow);font-weight:500}.segmented button:hover{color:var(--accent)}
.keyboard-figure{margin:24px 24px 0;padding:24px 24px 16px;background:var(--figure);border-radius:16px;position:relative}.illustration{display:flex;align-items:center;justify-content:center;min-height:280px}.illustration svg{width:100%;max-height:400px;overflow:visible}.keyboard-figure figcaption{font-size:13px;text-align:center;color:var(--muted);line-height:24px;min-height:24px;margin-top:8px}.diagram-plate{fill:var(--plate);stroke:var(--key-stroke);stroke-width:1.4}.diagram-key{fill:var(--key);stroke:var(--key-stroke);stroke-width:1.4}.key-shadow{fill:var(--key-stroke);opacity:.6}.key-label{fill:var(--muted);font-size:16px;text-anchor:middle;dominant-baseline:central;font-weight:400}.diagram-key-group.active .diagram-key{fill:var(--blue-key);stroke:var(--blue-key);stroke-width:2}.diagram-key-group.active .key-label{fill:var(--blue-ink);font-weight:500}.diagram-key-group.active .key-shadow{fill:var(--accent)}.key-badge circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.5}.key-badge text{fill:var(--accent);font-size:15px;dominant-baseline:central;text-anchor:middle;font-weight:500}.figure-note{fill:var(--accent);font-size:15px;text-anchor:middle;letter-spacing:2px}.diagram-connection{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 8;stroke-linecap:round}.computer-frame{fill:var(--surface);stroke:var(--key-stroke);stroke-width:2}.computer-title{fill:var(--ink);font-size:19px;font-weight:500}.computer-small{fill:var(--muted);font-size:13px}.computer-device{fill:var(--accent-soft);stroke:var(--line);stroke-width:1}.device-name{fill:var(--ink);font-size:23px;font-weight:500}.device-action{fill:var(--accent);font-size:15px}.diagram-caption{fill:var(--muted);font-size:14px;text-anchor:middle}.diagram-check{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.step-content{padding:24px 40px 32px;font-size:15px;min-height:120px}.instruction-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.instruction-item{display:flex;align-items:flex-start;gap:12px}.number-chip{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:13px;margin-top:2px}.instruction-item strong{font-weight:500}.instruction-item p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.7}.inline-note{color:var(--muted);font-size:13px;line-height:1.8;margin-top:16px}.inline-note:first-child{margin-top:0}.step-note{display:flex;align-items:flex-start;gap:12px}.step-note svg{width:20px;flex:none;color:var(--accent);margin-top:4px}.os-path{display:flex;align-items:center;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 16px;color:var(--muted);font-size:14px}.os-path li{display:flex;align-items:center;gap:8px}.os-path li:not(:last-child)::after{content:'›';color:var(--muted)}.os-path span{padding:4px 8px;background:var(--page);border:1px solid var(--line);border-radius:6px}.os-instruction{font-size:16px;line-height:1.8}.support-link{display:inline-block;font-size:13px;margin-top:16px}.confirmation-note{border-left:2px solid var(--accent);padding-left:16px;line-height:1.8}.confirmation-note strong{color:var(--accent);font-weight:500}.input-label{display:block;margin-bottom:8px;font-weight:500}.typing-test{width:100%;resize:vertical;min-height:80px;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--page);color:var(--ink);line-height:1.7}.typing-test::placeholder{color:var(--muted)}.completion-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.completion-links a{display:inline-flex;gap:12px;align-items:center;text-decoration:none}.completion-note{color:var(--muted);font-size:14px;margin-bottom:24px}.step-footer{padding:24px 40px;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px}.primary-button,.secondary-button{min-height:48px;border-radius:10px;padding:12px 24px;font-size:15px;line-height:24px}.primary-button{background:var(--accent);color:var(--surface);border:1px solid var(--accent);margin-left:auto}.primary-button:hover{filter:brightness(.92)}.secondary-button{border:1px solid var(--line);background:var(--surface);color:var(--muted)}.secondary-button:hover{background:var(--page)}.secondary-button span{margin-right:8px}.step-hint{font-size:12px;color:var(--muted)}.guide-footnote{margin:24px 0 0 248px;display:flex;gap:16px 24px;align-items:flex-start;justify-content:space-between;font-size:12px;color:var(--muted);line-height:1.8}.guide-footnote>p{max-width:48em}.guide-footnote details{flex:none;max-width:280px}.guide-footnote summary{cursor:pointer}.guide-footnote details p{margin-top:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{padding:0;width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 48px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 80px #152b4530}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#172b4660;backdrop-filter:blur(4px)}.help-heading{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid var(--line);flex:none}.help-heading h2{font-size:20px}.help-body{padding:0 24px 24px;overflow:auto}.help-body section{padding:24px 0;border-bottom:1px solid var(--line)}.help-body h3{font-size:16px;margin-bottom:8px}.help-body p{font-size:14px;color:var(--muted);margin-bottom:8px}.help-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0 0;text-align:left;color:var(--accent);font-size:15px;text-decoration:none}.help-note{margin-top:24px}.noscript-note{position:fixed;inset:auto 16px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;z-index:30}
@media(min-width:1600px){.guide-shell{max-width:1584px;padding-top:48px}.guide-layout{grid-template-columns:224px minmax(0,1fr);gap:48px}.guide-footnote{margin-left:272px}.step-heading{padding:40px 48px 0}.step-options{padding-inline:48px}.step-content{padding:32px 48px 40px}.keyboard-figure{margin:32px 32px 0;padding:32px}.illustration{min-height:336px}.illustration svg{max-height:448px}.step-footer{padding:24px 48px}}
@media(max-width:1100px){.guide-shell{padding:32px 24px 24px}.guide-layout{grid-template-columns:176px minmax(0,1fr);gap:24px}.guide-footnote{margin-left:200px}.step-heading{padding:24px 24px 0}.step-options{padding-inline:24px}.step-content{padding:24px}.step-footer{padding:24px}.step-hint{display:none}.keyboard-figure{margin:24px 16px 0;padding:16px}.illustration{min-height:240px}.instruction-pair{gap:16px}.step-list button{font-size:14px;gap:12px}}
@media(max-width:800px){.guide-header{height:72px;padding-inline:24px;gap:16px}.guide-shell{padding-top:24px}.guide-layout{display:block}.guide-topline{margin-bottom:24px}.guide-sidebar{padding:0}.flow-label{font-size:13px;margin-bottom:12px}.step-list{display:flex;gap:8px;margin-bottom:24px}.step-list li{flex:1;min-width:0}.step-list li:not(:last-child)::after{display:none}.step-list button{display:grid;gap:8px;justify-items:start;padding:0;font-size:12px;line-height:1.6}.step-list .step-number{width:28px;height:28px}.guide-baseline{margin:0 0 24px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px}.guide-baseline details{margin:0}.small-rule{display:none}.guide-footnote{margin-left:0}.illustration{min-height:240px}.guide-card{border-radius:20px}.header-label{display:none}.header-divider{display:none}}
@media(max-width:480px){.guide-header{height:64px;padding-inline:16px}.brand{font-size:18px}.brand img{width:88px}.header-actions{gap:8px}.back-to-studio{font-size:12px}.back-to-studio span{padding-left:0}.guide-shell{padding:24px 16px}.guide-topline{gap:8px}.guide-topline h1{font-size:16px}.text-button{font-size:12px}.text-button span{margin-left:0}.step-list{gap:8px;margin-bottom:16px}.step-list button{font-size:11px}.guide-baseline{font-size:11px;margin-bottom:16px}.step-heading{padding:24px 20px 0}.step-heading h2{font-size:24px}.step-description{font-size:14px}.step-options{padding-inline:20px}.option-row{gap:8px;margin-top:16px}.segmented{gap:0;padding:4px}.segmented button{font-size:13px;padding:8px 12px;min-width:56px}.keyboard-figure{margin:20px 8px 0;padding:16px 8px 8px;border-radius:12px}.illustration{min-height:180px}.illustration svg{max-height:280px}.keyboard-figure figcaption{font-size:11px;line-height:20px;margin-top:8px}.step-content{padding:20px;font-size:14px;min-height:0}.instruction-pair{grid-template-columns:1fr;gap:16px}.instruction-item p{margin-top:0}.step-footer{padding:16px;gap:8px}.primary-button,.secondary-button{padding:12px 16px;font-size:14px}.guide-footnote{display:block;font-size:11px}.guide-footnote details{margin-top:12px;max-width:100%}.help-heading{padding:16px}.help-heading h2{font-size:18px}.help-body{padding-inline:20px}.os-path{font-size:12px}.os-instruction{font-size:14px}}
@media(prefers-reduced-motion:no-preference){.diagram-key-group.active .diagram-key{animation:guide-glow 2.8s ease-in-out infinite}.diagram-key-group.active[data-style=tap] .diagram-key{animation-delay:.7s}@keyframes guide-glow{0%,100%{stroke-width:2}50%{stroke-width:4}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.usb-cable{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.illustration svg{height:clamp(216px,32vh,360px);max-height:none}
@media(max-width:480px){.illustration svg{height:224px}.illustration{min-height:0}}
@media(max-width:600px){.illustration[data-stage=split] svg{height:auto;max-height:none}.illustration[data-stage=split] .key-label,.illustration[data-stage=test] .key-label,.illustration[data-stage=profile] .key-label,.illustration[data-stage=clear] .key-label{font-size:21px}.illustration[data-stage=split] .figure-note{font-size:19px;letter-spacing:0}}
.skip-link{top:8px;opacity:0;pointer-events:none}.skip-link:focus-visible{opacity:1;pointer-events:auto}

/* Finite LED examples use firmware timings; they never simulate a connection. */
.firmware-preview{margin-top:16px;color:var(--accent)}
.multiple-keyboards-note summary{cursor:pointer}.multiple-keyboards-note p{margin-top:8px}
.led-demo{border-top:1px solid var(--line);padding-top:16px;margin-top:24px}
.led-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;color:var(--muted);font-size:12px}.led-demo-heading .text-button{font-size:12px;min-height:40px;padding:8px}
.led-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.led-status{display:flex;gap:12px;align-items:flex-start;min-width:0;text-align:left;padding:12px 8px;border:1px solid transparent;border-radius:8px}.led-status:hover{background:var(--figure)}.led-status[aria-pressed=true]{background:var(--figure);border-color:var(--line)}.led-status strong{font-size:13px;font-weight:500}.led-detail{display:block;font-size:12px;color:var(--muted);line-height:1.7;margin-top:4px}
.led-pair{display:flex;flex:none;gap:4px;margin-top:8px}.led-pair>span{display:block;width:10px;height:10px;border-radius:50%;background:var(--line);box-shadow:0 0 0 3px var(--surface)}.led-light{display:block;width:100%;height:100%;border-radius:inherit;background:var(--led-color)}.led-status[aria-pressed=true] .led-light{opacity:0}
.led-blue,#illustration[data-led-color=blue]{--led-color:#347fe0}.led-green,#illustration[data-led-color=green]{--led-color:#29976d}.led-amber,#illustration[data-led-color=amber]{--led-color:#b98228}
.diagram-led{stroke:var(--surface);stroke-width:2;fill:var(--key-stroke)}.diagram-led-light{fill:var(--led-color);opacity:0}#illustration[data-led-static=true] .diagram-led-light,.led-status[data-led-static=true] .led-light{opacity:1}
.pairing-actions{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:16px}.pairing-actions .text-button{color:var(--accent);text-align:left}
@media(max-width:600px){.led-demo{margin-top:16px}.led-legend{grid-template-columns:1fr}.led-status{align-items:center}.led-detail{margin:0}.led-pair{margin-top:0}.illustration[data-stage^=split-] .key-label{font-size:21px}.pairing-actions{display:grid;gap:8px}}