/* The PRO / ART mode switch — the same motherboard chip the artistic pages carry (KNOB-10),
   here on the professional side with PRO lit. Desktop: ceramic die with pin rows, right corner.
   Mobile: the quiet small pill, also right. Clicking throws the rocker, then walks to the gate. */
.mode-knob { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 450; width: 108px; height: 34px; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 9px; border: 1px solid rgba(201, 164, 93, .5); background: radial-gradient(130% 100% at 50% 0%, rgba(66, 58, 35, .55), transparent 58%), linear-gradient(180deg, rgba(28, 26, 17, .97), rgba(9, 8, 5, .98)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(244, 222, 156, .16), inset 0 -5px 10px rgba(0, 0, 0, .5), 0 12px 24px -16px rgba(0, 0, 0, .9); transition: opacity .6s ease, border-color .25s ease, box-shadow .25s ease; }
.mode-knob::before, .mode-knob::after { content: ""; position: absolute; top: 24%; bottom: 24%; width: 5px; background: repeating-linear-gradient(180deg, rgba(212, 182, 106, .5) 0 3px, transparent 3px 9px); }
.mode-knob::before { left: -6px; }
.mode-knob::after { right: -6px; }
.mode-knob:hover, .mode-knob:focus-visible { border-color: rgba(201, 164, 93, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(244, 222, 156, .2), inset 0 -5px 10px rgba(0, 0, 0, .45), 0 0 18px rgba(206, 172, 92, .18), 0 12px 24px -16px rgba(0, 0, 0, .9); outline: none; }
.mk-lab { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--mono, ui-monospace, monospace); font-size: .5rem; letter-spacing: .18em; color: rgba(224, 190, 120, .5); pointer-events: none; z-index: 2; }
.mk-pro { left: 13px; }
.mk-art { right: 10px; }
.mk-thumb { position: absolute; top: 3px; bottom: 3px; width: 52px; left: 3px; border-radius: 7px; background: rgba(201, 164, 93, .16); border: 1px solid rgba(201, 164, 93, .4); box-shadow: inset 0 1px 0 rgba(244, 222, 156, .12); transition: left .32s cubic-bezier(.34, 1.2, .4, 1); pointer-events: none; z-index: 1; }
.mk-thumb i { display: none; }
.mode-knob[data-side="art"] .mk-thumb { left: 53px; }
.mode-knob[data-side="art"] .mk-art, .mode-knob[data-side="pro"] .mk-pro { color: rgba(240, 218, 140, .95); }
.mode-knob:active .mk-thumb { background: rgba(201, 164, 93, .24); }
body.modal-open .mode-knob { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .mode-knob { right: 12px; left: auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 92px; height: 29px; border-radius: 14px; border-color: rgba(201, 164, 93, .3); background: rgba(12, 11, 7, .6); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .7); } .mode-knob::before, .mode-knob::after { content: none; } .mk-lab { font-size: .46rem; } .mk-pro { left: 12px; } .mk-art { right: 9px; } .mk-thumb { top: 3px; bottom: 3px; width: 40px; left: 3px; border-radius: 11px; border-color: rgba(201, 164, 93, .35); box-shadow: none; } .mode-knob[data-side="art"] .mk-thumb { left: 49px; } }
@media (prefers-reduced-motion: reduce) { .mk-thumb { transition: none; } }