:root{--bg:#f4f4f4;--surface:#fff;--ink:#161616;--sub:#525252;--muted:#8d8d8d;--line:#e0e0e0;--line-strong:#c6c6c6;--accent:#0f62fe;--accent-dark:#0043ce;--accent-soft:#edf5ff;--good:#198038;--warn:#8a3800;--radius:3px;--button-height:40px;color-scheme:light}
    *{box-sizing:border-box}body{min-width:780px;margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}button,input,select{font:inherit}button{min-height:var(--button-height);padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer}button:hover{border-color:var(--accent);color:var(--accent)}button:disabled{cursor:not-allowed;opacity:.45}.primary{border-color:var(--accent);background:var(--accent);color:#fff}.primary:hover{border-color:var(--accent-dark);background:var(--accent-dark);color:#fff}.secondary{background:var(--surface)}.link{border-color:transparent;background:transparent;color:var(--accent)}.link:hover{background:var(--accent-soft)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}.nav{display:flex;flex-direction:column;padding:28px 12px 16px;border-right:1px solid var(--line);background:var(--surface)}.brand{padding:0 12px 30px;font-size:20px;font-weight:700;letter-spacing:-.4px}.nav-list{display:grid;gap:4px}.nav-item{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 12px;border:0;border-left:3px solid transparent;text-align:left;color:var(--sub);font-weight:500}.nav-item:hover{background:var(--bg);color:var(--ink)}.nav-item.active{border-left-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:650}.nav svg,.copy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.nav-bottom{display:flex;align-items:center;gap:8px;margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line)}.dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.dot.good{background:var(--good)}.nav-state{overflow:hidden;color:var(--sub);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.gear{display:grid;width:36px;min-width:36px;min-height:36px;margin-left:auto;padding:0;place-items:center;border:0;color:var(--sub)}
    main{min-width:0;padding:36px 48px 52px}.page{max-width:1040px;margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}h1{margin:0;font-size:28px;line-height:1.25;letter-spacing:-.5px}h2{margin:0;font-size:18px;line-height:1.35}h3{margin:0;font-size:14px}p{margin:4px 0 0}.sub,.hint{color:var(--sub)}.hint{font-size:12px}.panel{margin:16px 0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.hidden{display:none!important}
    .route{display:grid;grid-template-columns:1fr 1fr 1fr auto;padding:0}.route-cell{min-height:82px;padding:16px 18px;border-right:1px solid var(--line)}.route-cell:last-of-type{border-right:0}.label{color:var(--sub);font-size:12px}.route-value{margin-top:5px;font-size:17px;font-weight:650}.route-action{display:grid;padding:0 18px;place-items:center}.monitor-table{width:100%;border-collapse:collapse}.monitor-table th{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--sub);font-size:12px;font-weight:500;text-align:left}.monitor-table td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.monitor-table tr:last-child td{border-bottom:0}.status{display:inline-flex;align-items:center;gap:6px;color:var(--sub);font-size:12px}.status .dot{width:6px;height:6px}.last{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 24px;border-bottom:1px solid var(--line)}.step{position:relative;padding:0 8px 14px;color:var(--muted);font-size:13px;text-align:center}.step.active{color:var(--ink);font-weight:650}.step.done{color:var(--sub)}.step.active:after{position:absolute;right:0;bottom:-1px;left:0;height:3px;background:var(--accent);content:""}.wizard{min-height:390px;padding:32px}.wizard-head{max-width:640px}.wizard-head .sub{margin-top:8px}.value-list{display:grid;gap:10px;max-width:680px;margin-top:28px}.value-row{position:relative;display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);background:var(--surface)}.source-value{font-size:18px;font-weight:650}.copy{display:grid;width:32px;height:32px;padding:0;place-items:center;border:0;color:var(--sub)}.copy:hover{background:var(--accent-soft);color:var(--accent)}.wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:38px}
    .choice-stack{display:grid;gap:10px;max-width:760px;margin-top:26px}.choice{display:block;padding:18px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer}.choice.selected{padding:17px;border:2px solid var(--accent)}.choice-title{display:flex;align-items:center;gap:10px;font-weight:650}.radio{width:20px;height:20px;border:2px solid var(--muted);border-radius:50%}.choice.selected .radio{border:6px solid var(--accent)}.choice-body{margin:18px 0 0 30px}.source-fields{display:grid;gap:12px}.source-field{display:grid;grid-template-columns:170px minmax(180px,1fr);align-items:center;gap:16px}.source-field label{font-weight:600}input,select{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink)}.inline-link{margin-top:16px;font-size:13px}.compact-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}.compact-steps li{display:grid;grid-template-columns:24px 1fr;gap:8px}.number{display:grid;width:22px;height:22px;place-items:center;border:1px solid var(--line-strong);border-radius:50%;font-size:12px}.local-tip{margin-top:16px;padding:11px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--sub);font-size:13px}.callout{margin-top:26px;padding:16px 18px;border-left:3px solid var(--accent);background:var(--accent-soft)}.test-state{display:grid;gap:14px;max-width:640px;margin-top:30px}.test-status{padding:16px;border:1px solid var(--line);background:var(--surface)}
    .settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}.computer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.computer-row:last-child{border-bottom:0}.computer-name{font-weight:650}.mini{display:inline-block;margin-left:8px;color:var(--sub);font-size:12px}.row-actions{display:flex;align-items:center;gap:6px}.danger-button{border-color:#d84242;color:#b81919}.danger-button:hover{border-color:#a2191f;background:#fff1f1;color:#8c1010}.form-section{padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}.form-section:first-of-type{padding-top:0;margin-top:0;border-top:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px;font-size:13px;font-weight:600}.event-box{max-height:258px;overflow:auto;border-top:1px solid var(--line)}.event{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.time{flex:0 0 auto;color:var(--muted);font-size:12px;white-space:nowrap}
    @media(max-width:850px){body{min-width:0}.shell{grid-template-columns:1fr}.nav{display:block;padding:8px;border-right:0;border-bottom:1px solid var(--line)}.brand,.nav-bottom{display:none}.nav-list{grid-template-columns:repeat(3,1fr)}.nav-item{justify-content:center;padding:8px 4px;border-left:0;border-bottom:3px solid transparent;font-size:12px}.nav-item.active{border-bottom-color:var(--accent);border-left:0}.nav-item svg{display:none}main{padding:24px 18px}.route{grid-template-columns:1fr 1fr}.route-cell:nth-child(2){border-right:0}.route-cell:nth-child(3){border-top:1px solid var(--line)}.route-action{grid-column:1/-1;min-height:70px;border-top:1px solid var(--line)}.wizard{padding:22px}.steps{overflow:hidden}.step{padding:0 4px 12px;font-size:11px}.value-row,.source-field{grid-template-columns:1fr}.value-row{gap:4px}.copy{position:absolute;right:24px}.settings-grid,.form-grid{grid-template-columns:1fr}.last{align-items:flex-start;flex-direction:column}}
    /* V2 refined: softer containers, a data-driven route, and restrained switch feedback. */
    :root{--radius:8px;--motion:520ms cubic-bezier(.22,.61,.36,1)}
    .panel,.choice,.value-row,input,select,button{border-radius:var(--radius)}
    .route{display:none}
    .topology{position:relative;margin:18px 0 20px;padding:26px 28px 22px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#fff 0%,#fbfdff 100%)}
    .topology-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.topology-head h2{font-size:17px}.topology-head p{margin:3px 0 0;color:var(--sub);font-size:12px}.topology-network{display:grid;grid-template-columns:minmax(170px,.75fr) 112px minmax(280px,1.4fr);align-items:center;gap:18px}.device-node{min-height:100px;padding:17px 18px;border:1px solid var(--line);border-radius:10px;background:#fff}.device-node.current{border-color:#b7d2ff;background:#f7fbff}.node-label{color:var(--sub);font-size:12px}.node-name{margin-top:6px;font-size:17px;font-weight:680}.node-meta{margin-top:5px;color:var(--sub);font-size:12px}.switch-node{position:relative;display:grid;width:96px;height:58px;place-items:center;border:2px solid #30343a;border-radius:14px;background:#25282d;color:#fff;font-size:11px;font-weight:600}.switch-node:before,.switch-node:after{position:absolute;top:25px;width:20px;border-top:2px solid var(--accent);content:""}.switch-node:before{right:100%}.switch-node:after{left:100%}.switch-node.pulse{animation:switchPulse var(--motion) both}.device-queue{display:flex;align-items:stretch;gap:7px;min-height:100px;overflow-x:auto;padding:2px}.queue-device{display:grid;flex:1 0 112px;min-height:96px;padding:13px;border:1px solid var(--line);border-radius:9px;background:#fff}.queue-device span{color:var(--sub);font-size:11px}.queue-device strong{margin-top:5px;font-size:14px}.queue-device em{margin-top:4px;color:var(--sub);font-size:11px;font-style:normal}.queue-device.current{border-color:#b7d2ff;background:#f7fbff}.queue-device.target{border-color:var(--accent);background:var(--accent-soft)}.queue-device.target em{color:var(--accent);font-weight:600}.legacy-hidden{display:none}@keyframes switchPulse{50%{box-shadow:0 0 0 8px rgba(15,98,254,.13);transform:scale(1.04)}}@media(prefers-reduced-motion:reduce){.switch-node.pulse{animation:none}}@media(max-width:850px){.topology{padding:20px}.topology-network{grid-template-columns:1fr;gap:20px}.switch-node{margin:auto}.switch-node:before,.switch-node:after{display:none}}
    /* Visual refresh — quiet, compact desktop utility. */
    :root{--bg:#f7f7f8;--surface:#fff;--surface-muted:#f2f2f3;--surface-raised:#ececef;--ink:#1f2023;--sub:#73757a;--muted:#9a9ca3;--line:#e7e7ea;--line-strong:#c7c8ce;--accent:#5e6ad2;--accent-dark:#4f58b8;--accent-soft:#f0f1ff;--good:#2da44e;--warn:#a66a00;--danger:#c43d4b;--radius:6px;--button-height:36px;--shadow:0 1px 2px rgba(19,20,24,.04),0 8px 28px rgba(19,20,24,.035)}
    html{background:var(--bg)}body{background:var(--bg);font-size:14px;line-height:1.43;letter-spacing:-.005em}.shell{grid-template-columns:208px minmax(0,1fr)}.nav{padding:24px 12px 14px;border-color:var(--line)}.brand{position:relative;padding:2px 12px 26px 44px;font-size:18px;letter-spacing:-.35px}.brand:before{position:absolute;left:10px;top:-3px;display:grid;width:27px;height:27px;border-radius:7px;background:var(--accent);box-shadow:0 3px 10px rgba(94,106,210,.2);content:"S";place-items:center;color:#fff;font-size:13px;font-weight:700}.nav-list{gap:2px}.nav-item{min-height:38px;padding:8px 10px;border:0;border-radius:5px;color:var(--sub);font-size:13px}.nav-item:hover{background:var(--surface-muted);color:var(--ink)}.nav-item.active{border:0;background:var(--accent-soft);color:var(--accent);font-weight:600}.nav svg,.copy svg{width:17px;height:17px;stroke-width:1.75}.nav-bottom{padding:12px 10px 0}.gear{border-radius:5px}.gear:hover{background:var(--surface-muted)}main{padding:30px 40px 48px}.page{max-width:980px}.header{margin-bottom:20px}h1{font-size:22px;line-height:28px;letter-spacing:-.4px;font-weight:620}h2{font-size:16px;line-height:24px;font-weight:600}h3{font-size:14px;line-height:20px}.sub{margin-top:4px;font-size:13px}.hint{font-size:12px}.panel{margin:12px 0;padding:20px;border-color:var(--line);border-radius:7px;box-shadow:none}.panel-title{margin-bottom:10px}button{min-height:36px;padding:7px 13px;border-color:var(--line-strong);border-radius:5px;font-size:13px;font-weight:550;transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}button:hover{border-color:#a9abb2;background:var(--surface-muted);color:var(--ink)}button:active{background:var(--surface-raised)}.primary{border-color:var(--accent);background:var(--accent);box-shadow:0 1px 2px rgba(94,106,210,.18)}.primary:hover{border-color:var(--accent-dark);background:var(--accent-dark)}.link{color:var(--accent)}.link:hover{border-color:transparent;background:var(--accent-soft);color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dot{width:7px;height:7px}.topology{margin:0;padding:0;overflow:hidden;border-color:var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow)}.topology-head{min-height:72px;margin:0;padding:17px 20px;border-bottom:1px solid var(--line)}.topology-head h2{font-size:16px}.topology-head p{font-size:12px}.topology-network{display:block;padding:22px 24px 24px}.route-overview{display:grid;grid-template-columns:minmax(170px,1fr) 116px minmax(170px,1fr);align-items:center;gap:22px;max-width:760px;margin:0 auto 24px}.device-node{min-height:104px;padding:18px;border-color:var(--line);border-radius:7px}.device-node.current{border-color:#cfd3f6;background:#fafaff}.device-node.target{background:var(--surface)}.node-label{font-size:12px}.node-name{margin-top:7px;font-size:16px;font-weight:620}.node-meta{margin-top:6px}.switch-node{width:92px;height:48px;margin:auto;border:1px solid #42434a;border-radius:7px;background:#25262a;font-size:11px;letter-spacing:.01em}.switch-node:before,.switch-node:after{top:23px;width:23px;border-color:#aeb3e9;border-width:1px}.queue-section{border-top:1px solid var(--line);padding-top:18px}.queue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.queue-header strong{font-size:13px}.queue-header span{color:var(--sub);font-size:12px}.device-queue{display:block;min-height:0;overflow:visible;padding:0}.queue-device{display:grid;grid-template-columns:58px minmax(140px,1fr) auto;align-items:center;min-height:48px;padding:0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.queue-device:last-child{border-bottom:0}.queue-device span{font-size:12px}.queue-device strong{margin:0;font-size:13px;font-weight:560}.queue-device em{margin:0;font-size:12px}.queue-device.current{border-color:var(--line);background:var(--accent-soft)}.queue-device.target{border-color:var(--line);background:transparent}.queue-device.target em{color:var(--accent);font-weight:550}.steps{margin-bottom:16px}.step{padding-bottom:12px}.wizard{min-height:380px;padding:28px}.wizard-head{max-width:620px}.value-list{margin-top:22px}.value-row{padding:13px 14px;border-radius:6px}.choice-stack{margin-top:22px}.choice{padding:16px;border-radius:6px}.choice.selected{padding:15px}.choice-body{margin-top:16px}.local-tip,.callout{border-radius:0}.settings-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:14px}.computer-row{padding:14px 0}.row-actions button{min-width:58px}.danger-button{border-color:#e1a4ab;color:var(--danger)}.danger-button:hover{border-color:var(--danger);background:#fff7f8;color:#a72d3a}.event-box{max-height:248px}.event{padding:12px 0}
    .brand{position:static;display:flex;align-items:center;gap:10px;padding:0 10px 26px}.brand:before{display:none}.brand-mark{display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border-radius:7px;background:var(--accent);box-shadow:0 3px 10px rgba(94,106,210,.2);color:#fff}.brand-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
    .network-stage{display:grid;grid-template-columns:minmax(190px,.9fr) 150px minmax(230px,1.2fr);align-items:center;gap:28px;max-width:820px;margin:0 auto 24px}.topology-device{position:relative;display:flex;align-items:center;gap:14px;min-height:100px;padding:17px 18px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}.topology-device.current{border-color:#cfd3f6;background:#fafaff}.topology-device.next{border-color:#cfd3f6}.computer-icon{width:42px;height:42px;flex:0 0 42px;color:var(--muted)}.topology-device.current .computer-icon,.topology-device.next .computer-icon{color:var(--accent)}.computer-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.device-copy{min-width:0}.device-copy .node-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-state{display:flex;align-items:center;gap:7px;margin-top:6px;color:var(--sub);font-size:12px}.device-state .dot{background:var(--muted)}.topology-device.current .device-state .dot{background:var(--good)}.topology-device.next .device-state .dot{background:var(--accent)}.network-current:after{position:absolute;left:100%;top:50%;width:29px;border-top:1px solid #aeb3c0;content:""}.switch-hardware{position:relative;display:grid;justify-items:center;gap:7px;z-index:1}.switch-hardware:after{position:absolute;left:calc(50% + 55px);top:36px;width:48px;border-top:1px dashed #aeb3c0;content:""}.switch-device{display:block;width:116px;height:70px;color:#555860}.switch-device .case{fill:var(--surface-muted);stroke:currentColor;stroke-width:1.5}.switch-device .port{fill:none;stroke:currentColor;stroke-width:1.6}.switch-device .light{fill:var(--good);stroke:none}.switch-label{font-size:12px;font-weight:600}.switch-state{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:12px}.switch-state .dot{background:var(--good)}.network-targets{position:relative;display:grid;gap:9px}.network-targets:before{position:absolute;right:100%;top:50%;width:28px;border-top:1px dashed #aeb3c0;content:""}.network-targets:after{position:absolute;left:-13px;top:38px;bottom:38px;border-left:1px solid #aeb3c0;content:""}.network-targets .topology-device{min-height:76px;padding:12px 14px}.network-targets .computer-icon{width:34px;height:34px;flex-basis:34px}.network-targets .topology-device:before{position:absolute;right:100%;top:50%;width:12px;border-top:1px solid #aeb3c0;content:""}.empty-target{padding:22px;border:1px dashed var(--line-strong);border-radius:7px;color:var(--sub);font-size:13px;text-align:center}
    @media(prefers-color-scheme:dark){:root{--bg:#101011;--surface:#171719;--surface-muted:#1f2023;--surface-raised:#27282c;--ink:#f7f8f8;--sub:#c8cad1;--muted:#8a8f98;--line:#2b2c31;--line-strong:#45464e;--accent:#8b93ff;--accent-dark:#a3aaff;--accent-soft:#22243c;--good:#55c878;--warn:#e3a94d;--danger:#ff7b86;--shadow:none;color-scheme:dark}.brand-mark{color:#101011}.primary{color:#101011}.primary:hover{color:#101011}.device-node,.value-row,input,select,.choice,.test-status{background:var(--surface)}.device-node.current,.topology-device.current{border-color:#444a78;background:#1b1c2a}.topology-device.next{border-color:#444a78}.queue-device.current{background:var(--accent-soft)}.danger-button:hover{background:#301d20;color:#ff9ca5}}
    @media(max-width:850px){.shell{grid-template-columns:176px minmax(0,1fr)}.nav{display:flex;padding:22px 10px 14px;border-right:1px solid var(--line);border-bottom:0}.brand{display:flex;padding:0 8px 24px}.nav-list{display:grid;grid-template-columns:1fr}.nav-item{justify-content:flex-start;padding:8px 10px;border:0;font-size:13px}.nav-item.active{border:0}.nav-item svg{display:block}.nav-bottom{display:flex}.nav-state{display:block}main{padding:22px 18px}.topology{padding:0}.topology-network{padding:18px}.network-stage{grid-template-columns:1fr;gap:18px}.network-current:after,.switch-hardware:after,.network-targets:before,.network-targets:after,.network-targets .topology-device:before{display:none}.queue-device{grid-template-columns:52px minmax(120px,1fr) auto}.settings-grid{grid-template-columns:1fr}.last{align-items:center;flex-direction:row}}

    /* V4 — monochrome e-ink system and one-to-one USB Switch port board. */
    :root{
      --bg:#eceae3;--surface:#f8f7f1;--surface-muted:#e4e2da;--surface-raised:#d8d6cd;
      --ink:#171814;--sub:#5f605a;--muted:#888982;--line:#cbc9bf;--line-strong:#777870;
      --accent:#171814;--accent-dark:#000;--accent-soft:#deddd5;--good:#171814;--warn:#777870;
      --danger:#171814;--radius:3px;--shadow:none;color-scheme:light
    }
    html,body{background:var(--bg)}
    body{font-size:14px;letter-spacing:.002em}
    .shell{grid-template-columns:196px minmax(0,1fr)}
    .nav{padding:28px 12px 16px;border-color:var(--line-strong);background:var(--surface)}
    .brand{gap:11px;padding:0 10px 30px;font-size:20px;font-weight:760;letter-spacing:-.45px}
    .brand-mark{width:28px;height:28px;flex-basis:28px;border:1.5px solid var(--ink);border-radius:2px;background:transparent;box-shadow:none;color:var(--ink)}
    .nav-list{gap:3px}
    .nav-item{position:relative;min-height:42px;padding:9px 12px;border:0;border-radius:0;color:var(--sub);font-size:14px}
    .nav-item:hover{background:var(--surface-muted);color:var(--ink)}
    .nav-item.active{background:var(--surface-muted);color:var(--ink);font-weight:700}
    .nav-item.active:before{position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--ink);content:""}
    .nav-bottom{padding:14px 10px 0;border-color:var(--line)}
    .gear{border-radius:0}.gear:hover{background:var(--surface-muted)}
    main{padding:34px 42px 48px}.page{max-width:1080px}
    .header{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line-strong)}
    h1{font-size:26px;line-height:32px;font-weight:760;letter-spacing:-.6px}
    h2{font-weight:700}.sub{color:var(--sub)}
    .panel{border-color:var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:none}
    button{border-color:var(--line-strong);border-radius:2px;background:var(--surface);color:var(--ink);box-shadow:none}
    button:hover{border-color:var(--ink);background:var(--surface-muted);color:var(--ink)}
    .primary{border-color:var(--ink);background:var(--ink);color:var(--surface);box-shadow:none}
    .primary:hover{border-color:#000;background:#000;color:#fff}
    .link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.link:hover{background:var(--surface-muted);color:var(--ink)}
    button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
    input,select{border-color:var(--line-strong);border-radius:2px;background:var(--surface)}
    .dot{width:8px;height:8px;border:1px solid var(--ink);border-radius:50%;background:transparent}
    .dot.good{background:var(--ink)}
    .steps{border-color:var(--line-strong)}.step.active:after{height:2px;background:var(--ink)}
    .choice,.value-row,.test-status{border-color:var(--line-strong);border-radius:2px;background:var(--surface)}
    .choice.selected{border-color:var(--ink)}.choice.selected .radio{border-color:var(--ink)}
    .copy:hover,.local-tip,.callout{background:var(--surface-muted);color:var(--ink)}
    .local-tip,.callout{border-left-color:var(--ink)}
    .danger-button{border-color:var(--line-strong);color:var(--ink)}
    .danger-button:hover{border-color:var(--ink);background:var(--ink);color:var(--surface)}

    .topology{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
    .topology-head{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line-strong);background:var(--surface)}
    .switch-board{border:1px solid var(--line-strong);background:var(--surface)}
    .switch-board-scroll{overflow-x:auto;padding:26px 26px 22px}
    .switch-board-inner{min-width:max(680px,calc(var(--port-count) * 152px + 172px))}
    .switch-chassis{position:relative;display:grid;grid-template-columns:146px minmax(0,1fr);align-items:center;min-height:126px;padding:18px 24px;border:2px solid var(--ink);border-radius:4px;background:var(--surface-muted)}
    .switch-chassis:before,.switch-chassis:after{position:absolute;top:20px;width:10px;height:10px;border:1px solid var(--ink);border-radius:50%;content:""}
    .switch-chassis:before{left:18px}.switch-chassis:after{right:18px}
    .switch-title{align-self:center;padding-left:16px}
    .switch-title strong{display:block;font-size:19px;letter-spacing:-.3px}
    .switch-title span{display:block;margin-top:5px;color:var(--sub);font-size:12px}
    .switch-ports,.port-grid{display:grid;grid-template-columns:repeat(var(--port-count),minmax(126px,1fr));gap:10px}
    .switch-port{display:grid;justify-items:center;gap:9px;color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums}
    .switch-port strong{color:var(--ink);font-size:14px}
    .usb-slot{position:relative;display:block;width:56px;height:26px;border:2px solid var(--ink);border-radius:2px;background:var(--surface)}
    .usb-slot:after{position:absolute;left:7px;right:7px;top:7px;height:7px;border:1px solid currentColor;background:transparent;content:""}
    .switch-port.current .usb-slot{background:var(--ink);color:var(--surface)}
    .switch-port.next .usb-slot{border-style:dashed}
    .port-grid{padding:34px 0 2px 146px}
    .port-card{position:relative;display:flex;min-width:0;min-height:190px;flex-direction:column;align-items:center;padding:20px 12px 14px;border:1px solid var(--line-strong);background:var(--surface);text-align:center}
    .port-card:before{position:absolute;left:50%;bottom:100%;height:35px;border-left:1px dashed var(--line-strong);content:""}
    .port-card.current{border:3px solid var(--ink);padding:18px 10px 12px}
    .port-card.next{border:2px dashed var(--ink);padding:19px 11px 13px}
    .port-card.waiting{color:var(--sub)}
    .port-card.empty{border-style:dashed;color:var(--muted)}
    .port-card.empty .computer-icon{opacity:.35}
    .port-index{font-size:12px;font-variant-numeric:tabular-nums}
    .port-card .computer-icon{width:38px;height:38px;margin:14px 0 10px;color:currentColor}
    .port-card .node-name{width:100%;margin:0;overflow:hidden;color:var(--ink);font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
    .port-state{display:grid;width:100%;min-height:34px;margin-top:auto;padding:7px 8px;place-items:center;border:1px solid var(--line-strong);font-size:12px;font-style:normal}
    .port-card.current .port-state{border-color:var(--ink);background:var(--ink);color:var(--surface);font-weight:700}
    .port-card.next .port-state{border-color:var(--ink);border-style:dashed;color:var(--ink);font-weight:700}
    .switch-summary{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line-strong);color:var(--sub);font-size:12px}
    .summary-mark{display:grid;width:20px;height:20px;flex:0 0 20px;place-items:center;border:1px solid var(--ink);border-radius:50%;color:var(--ink);font-size:12px;font-weight:700}
    .empty-target{border-radius:0}
    .response-panel{padding:0;overflow:hidden}
    .response-panel .panel-title{align-items:center;margin:0;padding:18px 20px;border-bottom:1px solid var(--line-strong)}
    .response-panel .panel-title p{margin-top:2px}
    .response-list{display:grid}
    .response-row{display:grid;grid-template-columns:minmax(220px,1fr) 168px;align-items:center;gap:28px;min-height:76px;padding:14px 20px;border-bottom:1px solid var(--line)}
    .response-row:last-child{border-bottom:0}
    .response-copy{display:grid;gap:3px;min-width:0}
    .response-copy label,.response-copy strong{font-size:13px;font-weight:700}
    .response-copy span{color:var(--sub);font-size:12px;font-weight:400}
    .response-select{width:168px;min-height:38px;padding:7px 34px 7px 11px;border-color:var(--line-strong);background-color:var(--surface);font-weight:650;text-align:left}
    .toggle-control{display:flex;align-items:center;justify-content:flex-end;gap:10px;cursor:pointer;user-select:none}
    .toggle-control input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
    .toggle-track{position:relative;width:44px;height:24px;flex:0 0 44px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-muted);transition:background-color .14s ease,border-color .14s ease}
    .toggle-track:after{position:absolute;left:3px;top:3px;width:16px;height:16px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);content:"";transition:transform .14s ease,border-color .14s ease}
    .toggle-control input:checked + .toggle-track{border-color:var(--ink);background:var(--ink)}
    .toggle-control input:checked + .toggle-track:after{border-color:var(--surface);transform:translateX(20px)}
    .toggle-control input:focus-visible + .toggle-track{outline:2px solid var(--ink);outline-offset:3px}
    .toggle-label{min-width:28px;color:var(--sub);font-size:12px;font-weight:650}
    .toggle-control input:checked ~ .toggle-label{color:var(--ink)}
    .toggle-control:has(input:disabled){cursor:not-allowed;opacity:.5}
    @media(max-width:850px){
      .shell{grid-template-columns:168px minmax(0,1fr)}.nav{display:flex}.brand{display:flex}.nav-bottom{display:flex}
      main{padding:24px 18px}.switch-board-scroll{padding:18px}.switch-board-inner{min-width:max(620px,calc(var(--port-count) * 140px + 150px))}
      .switch-chassis{grid-template-columns:126px minmax(0,1fr);padding:16px}.port-grid{padding-left:126px}
      .response-row{grid-template-columns:minmax(0,1fr) 144px;gap:16px}.response-select{width:144px}
    }
    @media(min-width:851px){.shell{align-items:start}.nav{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden}}
    html{scrollbar-width:none}
    html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
    .shell{height:100vh;min-height:0;overflow:hidden}
    main{height:100vh;padding-top:0;overflow-y:auto;scrollbar-width:none}
    main::-webkit-scrollbar{display:none;width:0;height:0}
    .page>section>.header{position:sticky;z-index:40;top:0;padding-top:34px;background:var(--bg)}
    @media(max-width:850px){.page>section>.header{padding-top:24px}}
    /* Native macOS traffic lights sit inside the page instead of a separate title bar. */
    html,body{height:100%;min-height:100%;overflow:hidden}
    .shell{height:100%;min-height:100%}
    @supports(height:100dvh){.shell,.nav,main{height:100dvh}}
    .platform-darwin body:before{position:fixed;z-index:1000;top:0;right:0;left:0;height:38px;-webkit-app-region:drag;content:"";pointer-events:none}
    .platform-darwin .nav{padding-top:66px}
    /* Use the same product artwork as the native app icon in the brand area. */
    .brand-mark{display:block;width:30px;height:30px;flex:0 0 30px;border:0;border-radius:0;background:transparent var(--brand-logo-image) center/contain no-repeat;box-shadow:none;color:transparent}
    .brand-mark svg{display:none}