/* The original neutral lamp palette, shared by every page and both zones. */
.tubelight,#menu,#mqDock,#burger {
  --nav-bg:rgba(18,20,23,.92); --nav-border:rgba(233,231,225,.16);
  --nav-fg:#e9e7e1; --nav-fg-muted:#c4c3bd;
  --nav-active-fg:#fff; --nav-indicator:#f4f1ea;
  --nav-lamp-fill:rgba(250,248,242,.13); --nav-accent-rgb:250,248,242;
}
html.light :is(.tubelight,#menu,#mqDock,#burger) {
  --nav-bg:rgba(255,255,255,.93); --nav-border:rgba(28,26,22,.16);
  --nav-fg:#1b1a17; --nav-fg-muted:#5f5c55;
  --nav-active-fg:#000; --nav-indicator:#14130f;
  --nav-lamp-fill:rgba(20,18,14,.09); --nav-accent-rgb:20,18,14;
}
html.light.night-zone :is(.tubelight,#menu,#mqDock,#burger),html:not(.light).night-zone :is(.tubelight,#menu,#mqDock,#burger) {
  --nav-bg:rgba(18,20,23,.92); --nav-border:rgba(233,231,225,.16);
  --nav-fg:#e9e7e1; --nav-fg-muted:#c4c3bd;
  --nav-active-fg:#fff; --nav-indicator:#f4f1ea;
  --nav-lamp-fill:rgba(250,248,242,.13); --nav-accent-rgb:250,248,242;
}
.tubelight { --sans:"Satoshi","Satoshi-fallback",system-ui,sans-serif; --mono:"Geist Mono","Geist-fallback",ui-monospace,"SFMono-Regular",monospace; --ease:cubic-bezier(.22,1,.36,1); font-family:var(--sans); font-size:16px; font-weight:400; letter-spacing:.005em; color:var(--nav-fg); line-height:1.7; position:fixed; left:50%; transform:translateX(-50%); top:16px; z-index:90; }
.tubelight-list {
  position:relative; display:flex; align-items:center; gap:2px; padding:5px;
  border:1px solid var(--nav-border); background:var(--nav-bg); border-radius:999px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 44px -18px #0005,inset 0 1px 0 rgba(var(--nav-accent-rgb),.04);
}
.tubelight .tn-link {
  border:0; text-decoration:none; cursor:pointer; min-width:0; align-self:stretch;
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 20px; border-radius:999px; font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.01em; color:color-mix(in srgb,var(--nav-fg-muted),var(--nav-active-fg) calc(var(--nav-lit,0) * 100%)); background:transparent;
  transition:transform .18s var(--ease); white-space:nowrap;
}
.tubelight .tn-link:hover { color:var(--nav-fg); }
.tubelight .tn-link:focus-visible { outline:1px solid var(--nav-indicator); outline-offset:2px; color:var(--nav-fg); }
.tubelight .tn-link:active { transform:scale(.96); }
.tn-ico { display:none; }
.tn-ico svg { width:18px; height:18px; display:block; }
.tn-txt,.tn-ico,.tn-ico svg { color:inherit; opacity:1; }
.tubelight-lamp {
  position:absolute; top:5px; left:0; bottom:5px; width:100px; z-index:0;
  transform-origin:left center; pointer-events:none; will-change:transform;
}
.tubelight-lamp::before {
  content:""; position:absolute; inset:0; background:var(--nav-lamp-fill);
  border-radius:calc(24px * var(--lamp-inverse,1)) / 24px;
}
.lamp-bar {
  position:absolute; top:-5px; left:0; width:34px; height:3px; border-radius:0 0 6px 6px;
  background:var(--nav-indicator); pointer-events:none; z-index:2; will-change:transform;
  box-shadow:0 0 16px 3px rgba(var(--nav-accent-rgb),.35);
}
.lamp-bar::before {
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:52px; height:24px;
  background:radial-gradient(closest-side,rgba(var(--nav-accent-rgb),.5),transparent 80%);
  filter:blur(8px); opacity:calc(.70 * var(--lamp-arrival,1));
}
html.shero-js #tubelight { opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
html.shero-js.hero-done #tubelight { opacity:1; pointer-events:auto; }
html[data-navigation] #burger span { background:var(--nav-fg); transition:width .3s var(--ease),opacity .16s linear,transform .4s cubic-bezier(.2,.9,.25,1); }
html[data-navigation] #burger:focus-visible { outline:2px solid var(--nav-indicator); outline-offset:4px; }
html[data-navigation] #menu .menu-panel { background:var(--nav-bg); border-color:var(--nav-border); color:var(--nav-fg); }
html[data-navigation] #menu .menu-link,html[data-navigation] #menu .menu-brand,html[data-navigation] #menu .menu-brand .dot { color:var(--nav-fg); border-color:var(--nav-border); transition:padding-left .45s var(--ease); }
html[data-navigation] #menu .menu-link .mk-n,html[data-navigation] #menu .menu-note,html[data-navigation] #menu .menu-note a,html[data-navigation] #menu .menu-lead { color:var(--nav-fg-muted); transition:none; }
html[data-navigation] #menu .menu-lead::after { background:var(--nav-border); }
html[data-navigation] #menu .menu-link:focus-visible { box-shadow:inset 3px 0 var(--nav-indicator); }
html[data-navigation] #menu .menu-link:hover,html[data-navigation] #menu .menu-link:focus-visible,html[data-navigation] #menu .menu-note a:hover { color:var(--nav-active-fg); }
html[data-navigation] #mqDock { background:var(--nav-bg); border-color:var(--nav-border); }
html[data-navigation] #mqDock .mqd-title { color:var(--nav-fg); }
html[data-navigation] #mqDock .mqd-ref { color:var(--nav-fg-muted); }
html[data-navigation] #mqDock .mqd-dot { background:var(--nav-border); }
@media (max-width:640px) {
  .tubelight { top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); width:min(430px,calc(100vw - 24px)); }
  .tubelight-list { width:100%; justify-content:space-between; gap:2px; padding:7px 8px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
  .tubelight .tn-link { flex:1; flex-direction:column; gap:4px; padding:8px 4px; touch-action:manipulation; }
  .tubelight .tn-link:active { transform:scale(.92); }
  .tn-ico { display:inline-flex; }
  .tn-ico svg { width:20px; height:20px; }
  .tn-txt { display:block; font-family:var(--mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
  .tubelight-lamp { top:7px; bottom:7px; }
  @supports (height:100dvh) {
    .tubelight { bottom:auto; top:calc(100dvh - 12px - env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(-100%); }
  }
}
@media (prefers-reduced-motion:reduce) {
  .tn-link,html.shero-js #tubelight { transition:none; }
  .lamp-bar,.lamp-bar::before { box-shadow:none; filter:none; }
}

/* Story content occupies the same component; it does not redecorate the pill. */
.tubelight.shared-story-bar { opacity:1; max-width:calc(100vw - 24px); }
.shared-story-bar .tubelight-list { max-width:100%; }
.shared-story-bar .st-title { flex:1; overflow:hidden; }
.shared-story-bar .st-title .tn-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shared-story-bar .st-title b { font:inherit; letter-spacing:inherit; color:inherit; margin:0; }
.shared-story-bar .sequence-meta { margin-left:12px; font:9px var(--mono); letter-spacing:.08em; }
.shared-story-bar .st-play .i-pause { display:none; }
.shared-story-bar .st-play[aria-pressed=true] .i-play { display:none; }
.shared-story-bar .st-play[aria-pressed=true] .i-pause { display:block; }
.shared-story-bar .st-prog { position:absolute; left:24px; right:24px; bottom:0; height:2px; border-radius:2px; overflow:hidden; pointer-events:none; background:var(--nav-border); }
.shared-story-bar .st-prog i { display:block; height:100%; background:var(--nav-indicator); transform:scaleX(0); transform-origin:left; }
/* Story handover changes visibility only. Keep the shared pill/cursor design. */
html body :is(#header,#tubelight,#mqDock,#workMarquee){transition:opacity .42s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1),visibility 0s 0s!important;}
/* Hiding keeps visibility until the fade/slide has finished; showing makes it visible at once, then fades/slides in. */
html body.story-chrome-hidden :is(#header,#tubelight,#mqDock,#workMarquee){opacity:0!important;translate:0 -28px;visibility:hidden;pointer-events:none!important;transition:opacity .42s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s!important;}
:is(.story,.sequence-story) .story-bar.shared-story-bar{transition:opacity .42s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s;}
:is(.story,.sequence-story):not(.is-ready) .story-bar.shared-story-bar{opacity:0;translate:0 -28px;visibility:hidden;pointer-events:none;}
:is(.story,.sequence-story).is-ready .story-bar.shared-story-bar{opacity:1;translate:0 0;visibility:visible;transition-delay:0s;}
@media(prefers-reduced-motion:reduce){html body :is(#header,#tubelight,#mqDock,#workMarquee),html body.story-chrome-hidden :is(#header,#tubelight,#mqDock,#workMarquee){transition:none!important;}:is(.story,.sequence-story) .story-bar.shared-story-bar{transition:none;}}
@media(max-width:640px){
  .shared-story-bar .sequence-meta { display:none; }
  .shared-story-bar .st-title .tn-txt { max-width:100%; }
}

/* Shared cursor state also applies on profile, project, FYP and Outside. */
/* A keyboard ring / touch press must remain visible even on older text links.
   Tubelight controls keep their own exactly shared states above. */
:where(a[href],button,input,[role="button"],[role="tab"]):not(.tn-link):focus-visible{outline:2px solid var(--ember,#b46b35)!important;outline-offset:4px}
:where(a[href],button,[role="button"],[role="tab"]):not(.tn-link):not(:disabled):active{opacity:.78}
body.cursor-on,body.cursor-on *{cursor:none!important}
.cursor.is-visible{opacity:1}
/* The opening's ink dot replaces the pointer only on the page. Above an open
   menu it sits behind the scrim, so restore the existing foreground cursor. */
html.depth.depth-dot.menu-open #cursor.is-visible{opacity:1!important}
.cursor.is-nav{ background:transparent!important;box-shadow:inset 0 0 0 4px #fff!important;mix-blend-mode:difference!important;-webkit-mask-image:none!important;mask-image:none!important; }
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.cursor,.cursor-hint{display:none!important}html.cursor-none,body.cursor-on,body.cursor-on *{cursor:auto!important}}