/* ASCII 05: the word stays fixed; independent whole-word red/blue shadows move behind it. */
html.nav-intro-active,html.nav-intro-active body{overflow:hidden;overscroll-behavior:none}
#nav-loader{--intro-progress:0;--title-progress:0;--logo-body:#eeeae0;--edge-red:#ff334b;--edge-blue:#338cff;--edge-offset:clamp(.65px,.17vw,2.6px);position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#101210;color:var(--logo-body);overflow:hidden;font-family:"DejaVu Sans Mono","Liberation Mono",monospace;opacity:1;transition:opacity 650ms ease;isolation:isolate}
#nav-loader *,#nav-preview-tools *{box-sizing:border-box}
#nav-loader[hidden],#nav-loader [hidden],#nav-preview-tools [hidden]{display:none!important}
#nav-loader .ascii-logo-frame{margin:0;padding:0;transform:translateY(-4vh);opacity:1}
#nav-loader .ascii-logo-stack{position:relative;isolation:isolate;transform:skewX(-8deg);transform-origin:center;font-size:clamp(3px,1.33vw,24px);line-height:.9}
#ascii-logo{position:relative;z-index:2;margin:0;padding:0;border:0;white-space:pre;overflow:visible;font-family:"DejaVu Sans Mono","Liberation Mono",monospace;font-size:inherit;font-weight:700;font-variant-ligatures:none;line-height:inherit;letter-spacing:0;color:var(--logo-body);background:none;text-align:left;tab-size:2;text-rendering:geometricPrecision;text-shadow:none}
.ascii-logo-stack>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:center}
.logo-shadow-layer{z-index:0;will-change:transform,filter,opacity}
.logo-shadow-red{fill:var(--edge-red);transform:translate(-.68em,.2em);filter:blur(.09em);opacity:.7}
.logo-shadow-blue{fill:var(--edge-blue);transform:translate(.58em,-.16em);filter:blur(.07em);opacity:.65}
.logo-shadow-knockout{z-index:1;fill:#101210}
#nav-loader[data-motion="reduce"] .logo-shadow-layer{display:none}
#nav-loader[data-phase="exiting"]{opacity:0;pointer-events:none}
#nav-loader[data-motion="reduce"]{transition:opacity 120ms ease!important}
#nav-loader[data-motion="reduce"] .ascii-logo-frame{opacity:1}
.nav-loader-bottomline{position:absolute;left:5vw;right:5vw;bottom:max(92px,calc(86px + env(safe-area-inset-bottom)));display:flex;align-items:center;justify-content:space-between;gap:20px}
#nav-loader-status{margin:0;color:#7e827b;font:10px/1.8 "DejaVu Sans Mono",monospace;letter-spacing:.16em;max-width:65%}
.nav-loader-actions{display:flex;gap:20px;align-items:center}
#nav-loader button,#nav-preview-tools button{appearance:none;border:0;border-radius:0;background:none;color:#999e94;padding:10px 0;font:11px/1.4 "DejaVu Sans Mono",monospace;letter-spacing:.04em;cursor:pointer;touch-action:manipulation}
#nav-loader button:hover,#nav-preview-tools button:hover{color:#eeeae0}
#nav-loader button:focus-visible,#nav-preview-tools button:focus-visible{outline:1px solid #eeeae0;outline-offset:5px}
#nav-preview-tools{position:fixed;z-index:1010;left:5vw;right:5vw;bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 12px;background:#101210e8;color:#686e64;font:9px "DejaVu Sans Mono",monospace;letter-spacing:.12em;border:1px solid #242922}
.nav-preview-buttons{display:flex;gap:24px}
#nav-preview-tools button{font-size:10px}
#nav-preview-tools button[aria-pressed="true"]{color:#eeeae0;text-decoration:underline;text-underline-offset:5px}
#nav-preview-tools button:disabled{opacity:.35;cursor:default}
.nav-static-fallback{position:relative;z-index:9;display:flex;justify-content:center;gap:24px;padding:40px 20px;background:#f2eee3}
.nav-static-fallback a{text-decoration:underline;text-underline-offset:6px}
@media(max-width:600px){#nav-loader .ascii-logo-frame{transform:translateY(-3vh)}.nav-loader-bottomline{left:6vw;right:6vw;bottom:88px}#nav-loader-status{font-size:9px;letter-spacing:.08em}.nav-loader-actions{gap:12px}#nav-loader button{font-size:10px}#nav-preview-tools{left:4vw;right:4vw;padding:0 9px;letter-spacing:.04em}.nav-preview-label{font-size:7px}.nav-preview-buttons{gap:13px}#nav-preview-tools button{font-size:9px}}
@media(prefers-reduced-motion:reduce){#nav-loader .logo-shadow-layer{display:none!important}#nav-loader{transition:opacity 120ms ease!important}}

/* ASCII 06: fixed viewport; only 3D character projection changes, never the canvas box. */
#ascii-field{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0}
#nav-loader .ascii-logo-frame{position:relative;z-index:2;transition:opacity 140ms linear}
#nav-loader[data-field-phase]:not([data-field-phase="logo"]) #ascii-field{opacity:1}
#nav-loader[data-field-phase]:not([data-field-phase="logo"]) .ascii-logo-frame{opacity:0;pointer-events:none}
#nav-loader[data-field-phase="interactive"],#nav-loader[data-field-phase="scatter"],#nav-loader[data-field-phase="dive"]{cursor:crosshair}
#nav-loader .nav-loader-bottomline{z-index:3;pointer-events:none}
#nav-loader .nav-loader-actions{pointer-events:auto}
#nav-loader[data-motion="reduce"] #ascii-field{display:none}
#nav-loader[data-motion="reduce"] .ascii-logo-frame{opacity:1!important;transition:none}

/* ASCII 08: one particle set reforms Lain; only actual glyph hits count. */
#nav-loader{touch-action:none}
#nav-loader #lain-entry{position:absolute;z-index:2;padding:0;margin:0;border:0;background:transparent;color:transparent;cursor:pointer;touch-action:none;font-size:0}
#lain-entry span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#nav-loader #lain-entry:focus-visible{outline:1px dashed #686e64;outline-offset:14px}
#nav-loader[data-field-phase="assembling"]{cursor:crosshair}

/* Clean opening: visuals first; retain only essential failure messages. */
#nav-loader:not([data-phase="error"]) #nav-loader-status{display:none}
#nav-loader .nav-loader-actions{margin-left:auto}
#nav-loader #nav-skip{width:36px;height:36px;font-size:18px;line-height:1;padding:0}

/* White-hole departure: the field owns the full screen, without UI on its core. */
#nav-loader[data-navigation-active="true"] .nav-loader-bottomline{opacity:0;pointer-events:none}
#nav-loader[data-navigation-active="true"] .nav-loader-actions{pointer-events:none}
#nav-loader[data-navigation-active="true"]{cursor:default}

/* The white-hole fade remains reversible until the navigation actually opens. */
#nav-loader[data-phase="exiting"][data-navigation-active="true"]{pointer-events:auto}
#nav-loader[data-phase="playing"][data-navigation-returning="true"]{transition:opacity 100ms linear}