@import url('/entry-controls.css');
/* Motion enhances native document navigation. The renderer never owns text. */
#world-layer { opacity:1; isolation:isolate; }
body:not([data-scene=home]) #world-layer { opacity:1; }
#world-layer canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.graphics-ready .network-fallback,
.graphics-ready .woven-field,
.graphics-ready .interior-node { visibility:hidden; }
.graphics-ready .home-paths .route-link:after { display:none; }
.graphics-ready #world-layer:after { display:none; }
#readability-veil { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:linear-gradient(90deg,rgba(31,23,21,.96) 0%,rgba(39,28,24,.91) 30%,rgba(47,33,27,.62) 52%,rgba(47,33,27,.04) 85%); }
/* Keep small footer links readable where the enlarged web is brightest. */
#readability-veil::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(24,15,16,.94),rgba(24,15,16,.78) 75px,transparent 180px); }
#connections { position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:hidden; pointer-events:none; }
#connections path { fill:none; stroke-width:1.8; opacity:.82; }
#shell { transition:none; }
#motion-controls { position:fixed; right:14px; top:10px; z-index:8; display:flex; gap:8px; align-items:center; font-size:14px; }
#motion-controls button, #motion-controls a { font:inherit; color:#f7ece9; background:#241c1a; border:1px solid #b99b80; border-radius:4px; padding:8px 12px; min-height:44px; cursor:pointer; }
#motion-recovery { display:none; }
#motion-controls.recover #motion-recovery, body:has(#dust) #motion-recovery { display:inline-flex; align-items:center; }
#motion-controls button:focus-visible, #motion-controls a:focus-visible { outline:2px solid #f7ece9; outline-offset:3px; }
#motion-status { max-width:230px; font-size:13px; color:#f7ece9; }
#motion-status:not(:empty) { background:#241c1a; padding:7px 10px; border-radius:3px; }
#dust { position:fixed; inset:0; z-index:6; pointer-events:none; width:100%; height:100%; }
body.dust-active { background:#241c1a; }
/* Dashboard quietness is owned by interpolated view opacity, NOT !important route CSS. */
.home-paths .route-link strong { max-width:190px; text-wrap:balance; }
@media(min-width:851px) {
 .home-paths .route-link strong { max-width:200px; }

}
@media(max-width:850px) {
 #motion-controls { top:auto; bottom:8px; right:8px; left:8px; justify-content:flex-end; }
 #motion-controls button, #motion-controls a { font-size:13px; padding:7px 10px; }
 #motion-status { font-size:12px; max-width:160px; }
 footer { padding-bottom:70px; }
 .home-paths .route-link strong { max-width:none; }
 #readability-veil { background:linear-gradient(90deg,rgba(31,23,21,.92),rgba(39,28,24,.81) 60%,rgba(47,33,27,.54)); }
}
@media(prefers-reduced-motion:reduce) { #shell { scroll-behavior:auto; } }

/* All connections live in the 3D weave. Only interactive node halos use the DOM. */
#connections { display:none; }
#network-hotspots { position:fixed; inset:0; z-index:2; pointer-events:none; }
#network-hotspots a { position:absolute; left:0; top:0; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; pointer-events:auto; color:#fff0e5; text-decoration:none; }
#network-hotspots a[hidden] { display:none; }
#network-hotspots a span { width:18px; height:18px; border:1px solid #ffe3cf55; border-radius:50%; box-shadow:0 0 14px #ffd7b225; transition:transform .3s,opacity .3s; opacity:.55; }
#network-hotspots a:hover span,#network-hotspots a:focus-visible span { transform:scale(1.5); opacity:1; border-color:#ffe8dc; box-shadow:0 0 22px #ff9bdc88; }
#network-hotspots small { position:absolute; top:48px; width:max-content; max-width:180px; text-align:center; border:1px solid #bc8b7770; background:#251917f2; border-radius:8px; padding:7px 11px; font:13px/1.4 'Segoe UI',sans-serif; opacity:0; pointer-events:none; transition:opacity .2s; }
#network-hotspots a:hover small,#network-hotspots a:focus-visible small { opacity:1; }
#network-hotspots a:focus-visible { outline:2px solid #ffe3cf; outline-offset:3px; }
#world-layer { background:radial-gradient(ellipse at 51% 84%,#6b31431a,transparent 55%); }
@media(prefers-reduced-motion:reduce) { #network-hotspots a span,#network-hotspots small { transition:none; } }