.config-view{min-height:calc(100dvh - var(--header-size) - var(--rail-size));background:radial-gradient(at 50% 60%,#f5f0e7,#eee8de);flex-direction:column;padding:18px clamp(24px,4vw,66px) 32px;display:flex}.page-top{justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.page-top>span{color:var(--muted);font-size:10px}.config-title{padding-top:32px}.config-title h1{letter-spacing:-.06em;margin:20px 0;font-size:clamp(36px,3.4vw,52px);line-height:1.08}.config-title>p:last-of-type{color:var(--muted);font-size:14px}.config-title .outline-button{margin-top:20px}.config-stage{flex:1;justify-content:center;align-items:center;min-height:270px;padding:40px 0 50px;display:flex}.switch-board{background:linear-gradient(145deg, var(--switch-light), var(--switch-edge));border:1px solid #8e82705c;border-radius:25px;gap:9px;padding:16px;display:flex;box-shadow:inset 0 3px 1px #fff5,inset 0 -3px 2px #302c2614,1px 3px 2px #65554135,12px 30px 30px #65554130}.finish-sand{--switch-main:#c0b39e;--switch-edge:#a59987;--switch-light:#d9cfbd}.finish-warm{--switch-main:#e6e1d7;--switch-edge:#cbc5b9;--switch-light:#f3f0e8}.finish-graphite{--switch-main:#514d47;--switch-edge:#38352f;--switch-light:#6b665e}.switch-slot{aspect-ratio:.94;background:linear-gradient(135deg, var(--switch-light), var(--switch-main));border:1px solid #4b443847;border-radius:15px;width:clamp(60px,10.5vw,158px);position:relative;box-shadow:1px 2px 3px #302c2638,inset 1px 1px 1px #fff5}.switch-slot[aria-pressed=true]{outline:2px solid var(--seam);outline-offset:3px}.switch-slot:focus-visible{outline:3px solid var(--frame-right);outline-offset:4px}.slot-number{background:var(--paper);opacity:0;border-radius:50%;place-items:center;width:18px;height:18px;font-size:10px;display:grid;position:absolute;top:6px;left:6px}.switch-slot:hover .slot-number,.switch-slot:focus-visible .slot-number{opacity:1}.insert-face{background:linear-gradient(130deg, var(--switch-light), var(--switch-main));border:1px solid #786a5540;border-radius:9px;position:absolute;inset:10%;box-shadow:1px 2px 5px #302c2626}.insert-dimmer .insert-face{border-radius:50%;inset:15%;box-shadow:2px 4px 7px #302c2630}.insert-socket .insert-face{background:radial-gradient(ellipse at 50% 75%, var(--switch-main), var(--switch-edge));border-radius:50%;inset:15%;box-shadow:inset 2px 4px 7px #302c2640}.insert-socket .insert-face:before,.insert-socket .insert-face:after{content:"";background:#302c26;border-radius:50%;width:10%;height:13%;position:absolute;top:48%;box-shadow:inset 1px 2px 2px #0005}.insert-socket .insert-face:before{left:24%}.insert-socket .insert-face:after{right:24%}.insert-usb .insert-face:before,.insert-usb .insert-face:after{content:"";background:#302c26;border-radius:4px;width:46%;height:14%;position:absolute;left:27%}.insert-usb .insert-face:before{top:28%}.insert-usb .insert-face:after{bottom:28%}.insert-empty .insert-face{box-shadow:none;background:0 0;border:1px dashed #65554166}.empty-label{flex-direction:column;justify-content:center;align-items:center;font-size:28px;display:flex;position:absolute;inset:0}.empty-label small{font-size:9px}.indicator{background:#fff6ca;border-radius:3px;width:8px;height:3px;position:absolute;bottom:12%;left:calc(50% - 4px);box-shadow:0 0 9px 2px #fff1b2}.combination-caption{color:var(--muted);text-align:center;margin-bottom:25px;font-size:12px;line-height:1.6}.config-footer{border-top:1px solid #65554122;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;display:flex}.config-footer strong{font-size:13px}.config-footer p{color:var(--muted);margin-top:6px;font-size:11px}.config-footer .primary{padding:16px 23px;font-size:12px}.segments{background:var(--surface);border-radius:10px;gap:4px;padding:4px;display:flex}.segments button{border-radius:7px;flex:1;min-height:40px;padding:8px;font-size:12px;position:relative}.segments button[aria-pressed=true]{background:#fdfbf7;box-shadow:0 1px 4px #302c2614}.control-section h3{align-items:center;gap:10px;margin:28px 0 14px;font-size:14px;display:flex}.control-section h3>span{border:1px solid #cfc3b2;border-radius:50%;place-items:center;width:20px;height:20px;font-size:10px;display:grid}.finish-picker{gap:22px;display:flex}.finish-picker button{flex-direction:column;align-items:center;gap:10px;min-width:48px;font-size:10px;display:flex}.swatch{background:var(--switch-main);border:3px solid var(--paper);border-radius:50%;outline:1px solid #d2c7b8;width:34px;height:34px;display:block}.finish-picker button[aria-pressed=true] .swatch{outline:2px solid var(--frame-right)}.continue-link{color:var(--frame-right);margin-top:24px;font-size:12px}.mock-note{color:var(--muted);margin-top:24px;font-size:10px;line-height:1.6}.insert-options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.insert-options button{background:#fbf9f5;border:1px solid #dcd3c5;border-radius:12px;min-height:80px;padding:14px 6px;font-size:12px}.insert-options button[aria-pressed=true]{border-color:var(--frame-right);background:var(--surface)}.insert-options small{color:var(--muted);margin-top:8px;font-size:10px;display:block}.toggle-row{border-block:1px solid #dcd3c5;justify-content:space-between;align-items:center;gap:8px;margin-top:15px;padding:20px 0;font-size:13px;display:flex}.toggle-row small{color:var(--muted);margin-top:6px;font-size:10px;display:block}.toggle-row input{appearance:none;cursor:pointer;background:#cdc4b6;border-radius:20px;flex:none;width:38px;height:23px;position:relative}.toggle-row input:before{content:"";background:#fffaf3;border-radius:50%;width:17px;height:17px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle-row input:checked{background:var(--frame-right)}.toggle-row input:checked:before{transform:translate(15px)}.remove-insert{margin-top:12px;font-size:11px;text-decoration:underline}.slot-dot{border:1px solid var(--frame-right);border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:calc(50% - 2px)}.slot-dot.filled{background:var(--frame-right)}@media (max-width:700px){.config-title{padding-top:22px}.config-stage{min-height:280px}.switch-slot{width:clamp(38px,15vw,100px)}.switch-board{border-radius:18px;gap:7px;padding:10px}.switch-slot{border-radius:9px}.config-footer{flex-direction:column;align-items:start}.config-footer .primary{gap:12px;width:100%}.page-top>span{display:none}.config-view{padding-bottom:48px}}
