.mode-nav{position:fixed;top:24px;left:28px;display:flex;align-items:center;padding:4px;gap:3px;background:#0a1424c9;border:1px solid #ffffff14;border-radius:25px;z-index:5;backdrop-filter:blur(18px);font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.4}
.mode-nav a{padding:9px 15px;color:#97a7be;text-decoration:none;border-radius:20px;white-space:nowrap;transition:background .2s,color .2s}
.mode-nav a[aria-current=page]{background:#e9e8de;color:#192335}
.mode-nav a:hover{color:white}.mode-nav a[aria-current=page]:hover{color:#192335}
.mode-nav a:focus-visible{outline:2px solid #aabddd;outline-offset:3px}
/* The pill's padding and border count as part of each link (about 45 px tall), so a finger that lands a little high
   or low still reaches it. The current page's link does nothing on a tap: a near miss beside it must not reload the page. */
.mode-nav a{position:relative}.mode-nav a:before{content:'';position:absolute;inset:-5px 0}
.mode-nav a[aria-current=page]{pointer-events:none}
@media(max-width:1000px){body:not(.live-body) .book-note{top:90px}}
@media(max-width:600px){.mode-nav{top:16px;left:16px}.mode-nav a{padding:9px 12px}}

/* View controls, shared by the book and Sign together. */
.view-controls{position:fixed;left:28px;bottom:var(--view-bottom,max(28px,env(safe-area-inset-bottom)));z-index:5;display:flex;align-items:center;gap:1px;padding:4px;background:#0a1424c9;border:1px solid #ffffff14;border-radius:22px;backdrop-filter:blur(18px);font-family:'DM Sans',sans-serif;color:#b7c3d4}
/* Each button's hit area reaches over the pill's padding, above and below (not sideways, where buttons touch). */
.view-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:background .15s,color .15s}
.view-controls button:before{content:'';position:absolute;inset:-5px 0}
.view-button{width:36px;border-radius:50%}
.view-button svg{width:15px;height:15px}
.view-controls .view-level{min-width:50px;border-radius:18px;font-size:11px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.view-controls button:hover:enabled{background:#ffffff10;color:#fff}
.view-controls button:disabled{opacity:.3;cursor:default}
.view-controls button:focus-visible{outline:2px solid #aabddd;outline-offset:2px}
.view-sep{width:1px;height:16px;margin:0 3px;background:#ffffff18}
.view-hint{position:fixed;left:28px;bottom:calc(var(--view-bottom,max(28px,env(safe-area-inset-bottom))) + 52px);z-index:5;max-width:calc(100vw - 40px);margin:0;padding:8px 12px;border:1px solid #ffffff14;border-radius:10px;background:#0a1424e6;backdrop-filter:blur(16px);font:12px/1.4 'DM Sans',sans-serif;color:#d2dae6;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;pointer-events:none}
.view-hint.visible{opacity:1;transform:none}
@media(max-width:600px){.view-controls{left:12px}.view-hint{left:12px}}
.view-compass svg{width:18px;height:18px;transition:transform .12s linear}
.view-compass[hidden]{display:none}
@media(pointer:coarse){.view-button{width:40px}}