/* The switch sits in the page footer, in normal flow, so it never covers anything. */
#beacon-toggle{all:initial;position:static;display:flex;width:max-content;max-width:100%;margin:18px auto 0;gap:2px;padding:4px;box-sizing:border-box;background:#111114;border:1px solid rgba(255,255,255,.16);border-radius:999px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
/* In the machine view it is pinned to the bottom so the reader can always get back. */
html.beacon-machine-on #beacon-toggle{visibility:visible!important;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;z-index:2147483647;box-shadow:0 8px 28px rgba(0,0,0,.4)}
#beacon-toggle .beacon-opt{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:36px;padding:0 16px;border-radius:999px;cursor:pointer;color:#a3a3ad;font:inherit;letter-spacing:inherit;text-transform:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#beacon-toggle .beacon-opt:hover{color:#fff}
#beacon-toggle .beacon-opt[aria-checked="true"]{background:#f4f4f5;color:#111114}
#beacon-toggle .beacon-opt:focus-visible{outline:2px solid #5aa9ff;outline-offset:2px}
html.beacon-machine-on body>:not(#beacon-machine):not(#beacon-toggle){visibility:hidden!important}
#beacon-machine{all:initial;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483646;display:block;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#0c0c0f;color:#e7e7ea;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#beacon-machine[hidden]{display:none!important}
#beacon-machine .beacon-head{all:unset;display:block;position:sticky;top:0;box-sizing:border-box;padding:12px 16px;background:#0c0c0f;border-bottom:1px solid rgba(255,255,255,.12);color:#8b8b96;font:inherit;font-size:12px;overflow-wrap:anywhere}
#beacon-machine .beacon-head a{all:unset;color:#8ec5ff;text-decoration:underline;cursor:pointer}
#beacon-machine .beacon-head a:focus-visible{outline:2px solid #5aa9ff;outline-offset:2px}
#beacon-machine .beacon-md{all:unset;display:block;box-sizing:border-box;max-width:100ch;margin:0 auto;padding:16px 16px 104px;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;color:inherit}
@media (max-width:480px){#beacon-machine{font-size:12px}#beacon-toggle .beacon-opt{min-width:76px;min-height:40px;padding:0 12px}}