:root{
  --bg:#020704;
  --screen:#05200d;
  --green:#00f36a;
  --green-soft:#46ff8c;
  --ink:#e9fff0;
  --dim:#69c884;
  --white:#f4fff7;
  --red:#ff5b78;
  --cyan:#76f7ff;
  --line:#16d85e;
  --jitter-x:0px;
  --jitter-y:0px;
  --signal-scale:1;
  --mx:50vw;
  --my:50vh;
  --blur:.32px;
  --flicker:1;
  color-scheme:dark;
  font-family:"Courier New","Lucida Console","Microsoft YaHei UI","PingFang SC",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000}
body{
  min-height:100svh;
  overflow:hidden;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% 48%,#111 0,#050505 58%,#000 100%);
}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-underline-offset:3px}
.svg-defs{position:absolute;left:-2px;top:-2px;width:1px;height:1px;overflow:hidden;pointer-events:none}

.bevel,
button,
.content-panel,
.sub-menu,
.menu-node{border-radius:0}

.bezel{
  position:fixed;
  inset:0;
  padding:clamp(12px,2.2vw,34px);
  background:
    radial-gradient(ellipse at 50% 48%,transparent 0 66%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.86) 100%),
    linear-gradient(180deg,#0b0b0b,#010101);
}
.screen{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:9.5% / 6.8%;
  background:#03160a;
  box-shadow:
    0 0 0 2px #050505,
    0 0 0 4px #151515,
    0 0 80px #000,
    inset 0 0 28px rgba(0,0,0,.92),
    inset 0 0 10px rgba(16,255,103,.08);
}
.screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 0 54%,rgba(0,0,0,.13) 68%,rgba(0,0,0,.5) 92%,rgba(0,0,0,.86) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42),transparent 7% 93%,rgba(0,0,0,.44));
  box-shadow:inset 0 0 55px rgba(0,0,0,.78);
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:61;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 7% 92%,rgba(0,0,0,.22));
  mix-blend-mode:screen;
}
.signal{
  position:absolute;
  inset:-1.4%;
  transform:
    translate3d(var(--jitter-x),var(--jitter-y),0)
    scale(var(--signal-scale));
  transform-origin:center;
  filter:url(#crt-warp) brightness(var(--flicker)) contrast(1.08) saturate(.9);
  background:
    linear-gradient(180deg,rgba(4,35,14,.98),rgba(1,18,7,.99)),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,255,90,.012) 8px);
  overflow:hidden;
  will-change:transform,filter;
}
.signal[data-burst="true"]{filter:url(#crt-warp) brightness(1.035) contrast(1.1) saturate(.92)}
.signal[data-drop="true"]{opacity:.72;filter:url(#crt-warp) brightness(.78) contrast(1.3) saturate(.82) blur(.16px)}

.noise,.scanlines,.phosphor-grid,.rolling-band,.mouse-glow,.tear-band{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.noise{
  z-index:45;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  opacity:.2;
  mix-blend-mode:screen;
}
.scanlines{
  z-index:48;
  opacity:.96;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.6) 0 1px,
      rgba(0,0,0,.19) 1px 2px,
      rgba(75,255,123,.03) 2px 3px
    );
  mix-blend-mode:multiply;
}
.phosphor-grid{
  z-index:47;
  opacity:.2;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,40,70,.17) 0 1px,
      rgba(20,255,80,.11) 1px 2px,
      rgba(60,170,255,.16) 2px 3px,
      transparent 3px 4px);
  mix-blend-mode:screen;
}
.rolling-band{
  z-index:49;
  top:var(--roll-y,-28%);
  height:18%;
  bottom:auto;
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(0,255,90,.025) 28%,
      rgba(180,255,201,.18) 48%,
      rgba(255,255,255,.06) 50%,
      rgba(0,0,0,.32) 53%,
      transparent 100%);
  filter:blur(1px);
  opacity:.55;
  transition:top .06s linear;
}
.mouse-glow{
  z-index:46;
  background:radial-gradient(circle 150px at var(--mx) var(--my),rgba(130,255,164,.16),rgba(0,255,94,.035) 38%,transparent 74%);
  mix-blend-mode:screen;
  opacity:.7;
}
.tear-band{
  z-index:55;
  left:-4%;
  right:-4%;
  top:var(--tear-y,-20px);
  height:var(--tear-h,3px);
  opacity:var(--tear-o,0);
  transform:translateX(var(--tear-x,0));
  background:
    linear-gradient(90deg,transparent 0 4%,rgba(255,255,255,.78) 7% 28%,transparent 33% 51%,rgba(50,255,120,.3) 57% 79%,transparent 88%),
    repeating-linear-gradient(90deg,rgba(255,65,95,.22) 0 2px,rgba(80,255,255,.22) 2px 4px,transparent 4px 12px);
  box-shadow:0 0 6px rgba(255,255,255,.38);
  mix-blend-mode:screen;
}

.masthead{
  height:118px;
  position:relative;
  z-index:5;
  padding:18px 40px 0;
}
.masthead__bar{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  color:#001807;
  background:rgba(0,243,106,.72);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    -1px 0 0 rgba(255,77,115,.65),
    1px 0 0 rgba(103,245,255,.75),
    0 0 9px rgba(0,255,104,.18);
}
.masthead__bar span{display:block;width:92%;height:3px;background:rgba(0,0,0,.05)}
.masthead__bar b{font-size:17px}
.masthead__row{
  height:64px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(0,237,98,.16);
}
.masthead__row h1{
  margin:0;
  font-size:clamp(24px,3vw,48px);
  line-height:1;
  letter-spacing:.09em;
  color:var(--white);
  font-weight:900;
  text-shadow:
    -1.4px 0 .2px rgba(255,78,112,.68),
    1.5px 0 .2px rgba(83,242,255,.66),
    0 0 7px rgba(255,255,255,.16);
}
.masthead__node,.masthead__clock{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--dim);
}
.masthead__clock{text-align:right}

.terminal-ui{
  height:calc(100% - 160px);
  min-height:0;
  display:grid;
  grid-template-columns:minmax(250px,27%) minmax(0,1fr);
  gap:0;
  position:relative;
  z-index:5;
  padding:0 40px 10px;
}
.section-label{
  height:35px;
  display:flex;
  align-items:end;
  padding:0 0 8px;
  color:var(--dim);
  font-size:14px;
  font-weight:700;
  letter-spacing:.09em;
  text-shadow:0 0 7px rgba(0,255,95,.18);
}
.folders{
  position:relative;
  min-height:0;
  padding-right:38px;
}
.program-menu{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.menu-node{
  --px:50%;
  --py:50%;
  position:relative;
  min-height:86px;
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center;
  gap:7px;
  padding:10px 11px;
  color:#b5f3c6;
  text-align:left;
  border:2px solid rgba(0,245,98,.33);
  background:rgba(0,8,2,.36);
  cursor:pointer;
  overflow:hidden;
  transition:color .07s linear,border-color .07s linear,background .07s linear,box-shadow .07s linear;
}
.menu-node::before,
.sub-node::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle 96px at var(--px) var(--py),rgba(255,255,255,.35),rgba(82,255,132,.1) 38%,transparent 72%);
  mix-blend-mode:screen;
  transition:opacity .06s linear;
}
.menu-node:hover::before,.menu-node:focus-visible::before,
.sub-node:hover::before,.sub-node:focus-visible::before{opacity:1}
.menu-node:hover,.menu-node:focus-visible{
  color:var(--white);
  border-color:rgba(77,255,128,.78);
  box-shadow:
    -1px 0 0 rgba(255,78,112,.45),
    1px 0 0 rgba(95,242,255,.45),
    0 0 10px rgba(0,255,98,.11);
  outline:none;
}
.menu-node.is-selected{
  color:#111;
  background:rgba(250,255,250,.92);
  border-color:#fff;
  box-shadow:
    -2px 0 0 rgba(255,77,110,.9),
    2px 0 0 rgba(92,241,255,.85),
    0 0 9px rgba(255,255,255,.28);
}
.menu-node.is-selected::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 3px);
}
.menu-node__index{font-size:11px;opacity:.7;position:relative;z-index:2}
.menu-node__copy{position:relative;z-index:2;min-width:0}
.menu-node__copy b{
  display:block;
  font-size:clamp(14px,1.35vw,20px);
  letter-spacing:.025em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu-node__copy small{
  display:block;
  margin-top:8px;
  font-size:11px;
  opacity:.82;
  letter-spacing:.04em;
}
.menu-node__glyph{font-size:11px;text-align:right;position:relative;z-index:2}

.stage{
  position:relative;
  min-width:0;
  min-height:0;
  border-left:1px solid rgba(0,235,96,.12);
  padding-left:70px;
  overflow:hidden;
}
.brand-watermark{
  position:absolute;
  inset:13% 4% 8% 11%;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:var(--green);
  opacity:.12;
  filter:blur(.55px);
}
.brand-watermark img{
  width:min(34vw,430px);
  height:auto;
  color:var(--green);
  filter:
    drop-shadow(-2px 0 0 rgba(255,66,99,.7))
    drop-shadow(2px 0 0 rgba(75,233,255,.65))
    drop-shadow(0 0 9px rgba(0,255,96,.4));
}
.brand-watermark strong{
  margin-top:12px;
  font-size:clamp(40px,5vw,82px);
  letter-spacing:.04em;
  color:var(--green);
  white-space:nowrap;
}
.connectors{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.connector-path{
  fill:none;
  stroke:rgba(0,244,98,.43);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges;
}
.connector-path.is-hot{
  stroke:#fff;
  stroke-width:3;
  filter:
    drop-shadow(-1.3px 0 0 rgba(255,70,106,.95))
    drop-shadow(1.4px 0 0 rgba(81,238,255,.9))
    drop-shadow(0 0 4px rgba(255,255,255,.45));
}
.connector-dot{
  fill:var(--green);
  opacity:.5;
}
.connector-dot.is-hot{
  fill:#fff;
  opacity:1;
  filter:drop-shadow(-1px 0 rgba(255,60,90,.9)) drop-shadow(1px 0 rgba(70,245,255,.9));
}

.subsystem{
  position:relative;
  z-index:3;
  width:min(720px,92%);
}
.sub-menu{
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:36vh;
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,255,100,.6) rgba(0,0,0,.2);
}
.sub-node{
  --px:50%;
  --py:50%;
  min-height:54px;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:8px 16px;
  color:#e5ffed;
  border:2px solid rgba(0,245,97,.22);
  background:rgba(0,12,4,.52);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:.07s linear;
}
.sub-node b{
  position:relative;
  z-index:2;
  font-size:clamp(14px,1.4vw,21px);
  font-weight:700;
  letter-spacing:.015em;
}
.sub-node small{
  position:relative;
  z-index:2;
  color:#8bd6a1;
  font-size:10px;
  letter-spacing:.08em;
}
.sub-node:hover,.sub-node:focus-visible{
  border-color:rgba(86,255,135,.72);
  background:rgba(0,78,25,.38);
  outline:none;
}
.sub-node.is-selected{
  background:rgba(0,152,52,.55);
  border-color:#fff;
  color:#fff;
  box-shadow:
    -2px 0 0 rgba(255,73,108,.92),
    2px 0 0 rgba(72,236,255,.88),
    0 0 8px rgba(255,255,255,.24);
}
.content-panel{
  position:absolute;
  z-index:2;
  left:70px;
  right:2%;
  top:calc(36vh + 70px);
  bottom:10px;
  overflow:auto;
  padding:22px 25px 26px;
  border:2px solid rgba(0,235,92,.48);
  background:rgba(0,38,13,.34);
  box-shadow:inset 0 0 45px rgba(0,0,0,.38);
  scrollbar-width:thin;
  scrollbar-color:rgba(0,255,100,.72) rgba(0,0,0,.22);
}
.content-panel:focus{outline:none}
.content-panel::before{
  content:"";
  position:sticky;
  display:block;
  top:-22px;
  height:7px;
  margin:-22px -25px 18px;
  background:var(--green);
  z-index:5;
  box-shadow:
    -1px 0 0 rgba(255,70,106,.7),
    1px 0 0 rgba(80,240,255,.75);
}
.content-inner{
  position:relative;
  z-index:2;
  color:#f1fff5;
  text-shadow:
    -.65px 0 rgba(255,80,112,.34),
    .7px 0 rgba(73,231,255,.32),
    0 0 3px rgba(255,255,255,.08);
}
.content-inner.is-redrawing{animation:redraw .16s steps(5,end)}
@keyframes redraw{
  0%{opacity:.1;transform:translateX(7px);filter:blur(1.1px)}
  32%{opacity:1;transform:translateX(-3px)}
  61%{transform:translateX(2px);filter:blur(.3px)}
  100%{transform:none;filter:none}
}
.content-kicker{
  margin:0 0 8px;
  color:#73d894;
  font-size:11px;
  letter-spacing:.12em;
}
.content-inner h2{
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(24px,3vw,45px);
  line-height:1.08;
  font-weight:800;
}
.content-inner h3{
  margin:24px 0 10px;
  color:#fff;
  font-size:17px;
}
.content-inner p,.content-inner li{
  font-size:13px;
  line-height:1.7;
}
.content-inner p{margin:0 0 15px}
.content-inner ul,.content-inner ol{padding-left:23px;margin:9px 0 17px}
.content-inner li{margin:5px 0}
.content-inner strong{color:#fff}
.content-inner code{
  color:#fff;
  background:rgba(0,0,0,.36);
  padding:2px 5px;
  border:1px solid rgba(0,255,98,.14);
}
.content-inner pre{
  overflow:auto;
  padding:12px 14px;
  margin:12px 0 18px;
  border:1px solid rgba(0,255,96,.35);
  background:rgba(0,0,0,.5);
  color:#fff;
  line-height:1.5;
}
.content-inner pre code{padding:0;border:0;background:transparent}
.content-inner blockquote{
  margin:15px 0;
  padding:8px 14px;
  border-left:4px solid var(--green);
  background:rgba(0,80,28,.16);
}
.content-inner a{color:#aaffc2}
.content-inner hr{border:0;border-top:1px solid rgba(0,255,95,.28);margin:20px 0}
.hero-copy{
  display:grid;
  grid-template-columns:1fr minmax(180px,260px);
  gap:28px;
  align-items:start;
}
.hero-copy .lead{
  font-size:15px;
  line-height:1.8;
  max-width:780px;
}
.tool-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:19px;
}
.tool-list div{
  padding:12px;
  border:1px solid rgba(0,255,95,.35);
  background:rgba(0,0,0,.24);
}
.tool-list b{display:block;margin-bottom:5px}
.tool-list small{color:#68b57f}
.download-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:17px;
}
.download-card{
  border:1px solid rgba(0,255,94,.42);
  background:rgba(0,0,0,.34);
  padding:14px 15px;
}
.download-card h3{margin:0 0 6px;font-size:18px}
.download-card p{font-size:11px;color:#8bd8a2;margin-bottom:12px}
.download-button{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  justify-content:center;
  padding:7px 13px;
  text-decoration:none;
  color:#07160b!important;
  background:#fff;
  border:2px solid #fff;
  font-weight:800;
  box-shadow:
    -2px 0 0 rgba(255,76,108,.84),
    2px 0 0 rgba(75,235,255,.82);
}
.download-button:hover,.download-button:focus-visible{
  background:var(--green);
  color:#001506!important;
  outline:none;
}
.meta-line{
  margin-top:13px!important;
  color:#8ad39f;
  font-size:10px!important;
  overflow-wrap:anywhere;
}
.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:13px;
}
.quick-links a{
  padding:6px 9px;
  border:1px solid rgba(0,255,95,.35);
  text-decoration:none;
  font-size:11px;
}
.quick-links a:hover{background:rgba(0,255,96,.12)}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.contact-grid a{
  padding:16px;
  border:1px solid rgba(0,255,96,.42);
  text-decoration:none;
  text-align:center;
}
.contact-grid a:hover{background:rgba(0,255,96,.1)}

.statusbar{
  position:absolute;
  z-index:8;
  left:40px;
  right:40px;
  bottom:12px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#55b672;
  font-size:11px;
  letter-spacing:.08em;
  pointer-events:none;
}
.controls{color:#aaf2bf}

.boot{
  /* Inside the signal: share its optical lens and the physical screen mask. */
  position:absolute;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%,#12362c 0,#09231d 48%,#03100d 100%);
  transition:opacity .18s steps(3,end),visibility .18s;
}
.boot.is-hidden{opacity:0;visibility:hidden}
.boot::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(80,255,220,.018) 0 1px,transparent 1px 4px);
  pointer-events:none;
}
.boot__signal{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  color:#c7fff1;
  filter:blur(.2px);
  text-shadow:
    -1px 0 rgba(255,82,112,.43),
    1px 0 rgba(80,238,255,.48),
    0 0 10px rgba(154,255,228,.22);
}
.boot__mark{
  width:clamp(110px,14vw,210px);
  opacity:.8;
  color:#c7fff1;
  filter:drop-shadow(0 0 8px rgba(182,255,236,.22));
}
.boot__name{
  margin-top:8px;
  font-size:clamp(48px,8vw,110px);
  line-height:.74;
  font-weight:900;
  letter-spacing:-.035em;
  text-align:center;
}
.boot__name span{display:block}
.boot__loading{
  margin-top:30px;
  font-size:clamp(14px,1.45vw,22px);
  letter-spacing:.1em;
}
.boot__loading i{
  display:inline-block;
  width:.8em;
  height:1.2em;
  margin:0 .55em;
  vertical-align:-.17em;
  background:#d9fff5;
  animation:cursorblink .55s steps(1,end) infinite;
}
@keyframes cursorblink{50%{opacity:.12}}
body[data-wake="true"] .signal{animation:wake .28s steps(7,end) both}
@keyframes wake{
  0%{clip-path:inset(49.6% 0 49.6%);filter:brightness(3.2) blur(1.5px)}
  30%{clip-path:inset(37% 0 37%);filter:brightness(1.8) blur(.8px)}
  66%{clip-path:inset(5% 0);filter:brightness(1.18) blur(.42px)}
  100%{clip-path:inset(0);filter:url(#crt-warp) brightness(var(--flicker)) contrast(1.08) saturate(.9)}
}

@media(max-width:1050px){
  .masthead{padding-left:24px;padding-right:24px}
  .terminal-ui{grid-template-columns:235px minmax(0,1fr);padding-left:24px;padding-right:24px}
  .folders{padding-right:22px}
  .stage{padding-left:48px}
  .content-panel{left:48px}
  .statusbar{left:24px;right:24px}
  .tool-list,.download-stack{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{overflow:auto}
  .bezel{position:relative;min-height:100svh;padding:7px}
  .screen{height:auto;min-height:calc(100svh - 14px);border-radius:10.5% / 4.6%}
  .signal{position:relative;inset:auto;min-height:calc(100svh - 14px)}
  .masthead{height:96px;padding:10px 12px 0}
  .masthead__bar{height:22px}
  .masthead__row{height:58px;grid-template-columns:1fr auto}
  .masthead__row h1{grid-column:1/3;grid-row:1;text-align:center;font-size:22px}
  .masthead__node{grid-row:2}
  .masthead__clock{grid-row:2}
  .terminal-ui{
    height:auto;
    min-height:calc(100svh - 138px);
    display:block;
    padding:0 12px 48px;
  }
  .folders{padding:0}
  .program-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .menu-node{min-height:63px;grid-template-columns:26px minmax(0,1fr);padding:6px}
  .menu-node__glyph{display:none}
  .menu-node__copy b{font-size:12px}
  .menu-node__copy small{font-size:9px;margin-top:4px}
  .stage{border-left:0;padding:18px 0 0;overflow:visible}
  .connectors{display:none}
  .subsystem{width:100%}
  .sub-menu{max-height:none}
  .sub-node{min-height:44px}
  .content-panel{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    min-height:48vh;
    margin-top:14px;
    padding:18px;
  }
  .content-panel::before{margin:-18px -18px 14px;top:-18px}
  .brand-watermark{
    inset:auto 7% auto 7%;
    top:88px;
    height:360px;
    opacity:.15;
  }
  .brand-watermark img{width:min(58vw,340px)}
  .brand-watermark strong{font-size:min(11vw,58px)}
  .statusbar{left:12px;right:12px;bottom:8px}
  .controls{display:none}
  .hero-copy,.contact-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rolling-band,.boot__loading i{animation:none!important}
  .content-inner.is-redrawing,body[data-wake="true"] .signal{animation:none!important}
}

.edge-curve{
  position:absolute;
  z-index:63;
  pointer-events:none;
  opacity:.5;
  filter:drop-shadow(0 0 3px rgba(0,255,98,.12));
}
.edge-curve--top{
  left:7%;
  right:7%;
  top:9px;
  height:25px;
  border-top:1px solid rgba(103,255,149,.24);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.edge-curve--bottom{
  left:7%;
  right:7%;
  bottom:9px;
  height:25px;
  border-bottom:1px solid rgba(103,255,149,.22);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}
.edge-curve--left{
  top:7%;
  bottom:7%;
  left:9px;
  width:25px;
  border-left:1px solid rgba(103,255,149,.18);
  border-radius:100% 0 0 100% / 50% 0 0 50%;
}
.edge-curve--right{
  top:7%;
  bottom:7%;
  right:9px;
  width:25px;
  border-right:1px solid rgba(103,255,149,.18);
  border-radius:0 100% 100% 0 / 0 50% 50% 0;
}
.menu-node__copy b,.sub-node b,.content-inner h2,.content-inner h3,.download-button{
  text-shadow:
    -.32px 0 rgba(255,70,105,.28),
    .38px 0 rgba(70,235,255,.26),
    0 0 1px rgba(255,255,255,.1);
}

@media(max-width:760px){
  .noise{opacity:.06}
  .scanlines{opacity:.36}
  .phosphor-grid{opacity:.065}
  .masthead__node,.masthead__clock{color:#92dba8;font-size:10px}
  .section-label{color:#8bd5a1}
  .menu-node{color:#d0f7da;border-color:rgba(38,232,101,.48)}
  .menu-node__copy small{color:#9ad9ab;opacity:.9}
  .sub-node{color:#f0fff4;border-color:rgba(39,232,102,.42)}
  .sub-node small{color:#9edfb0}
  .content-inner{color:#f6fff8}
  .content-inner p,.content-inner li{font-size:15px;line-height:1.82;font-weight:600}
  .content-inner h2{font-size:clamp(28px,8.5vw,40px)}
  .content-inner h3{font-size:18px}
  .content-panel{background:rgba(0,31,11,.27);border-color:rgba(24,231,94,.52)}
  .edge-curve--top{top:5px;left:8%;right:8%;height:18px}
  .edge-curve--bottom{bottom:5px;left:8%;right:8%;height:18px}
  .edge-curve--left{left:5px;top:5%;bottom:5%;width:18px}
  .edge-curve--right{right:5px;top:5%;bottom:5%;width:18px}
}


/* === 2026-09-19 optical correction pass ===
   Keep physical CRT curvature static. Interaction may glitch signal content,
   but must never change screen geometry. */
.screen{
  border-radius:9.5% / 5.2%;
  clip-path:inset(0 round 9.5% 5.2%);
}
.signal{
  inset:0;
  transform:translate3d(var(--jitter-x),var(--jitter-y),0);
  filter:brightness(var(--flicker)) contrast(1.035) saturate(.94);
  will-change:transform,opacity;
}
.signal[data-burst="true"]{
  filter:brightness(1.025) contrast(1.055) saturate(.95);
}
.signal[data-drop="true"]{
  opacity:.76;
  filter:brightness(.8) contrast(1.18) saturate(.86) blur(.08px);
}

/* Static glass geometry: these curves never respond to clicks or pointer motion. */
.edge-curve{opacity:.72}
.edge-curve--top{
  left:5.5%;right:5.5%;top:7px;height:24px;
  border-top:2px solid rgba(106,255,151,.18);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.edge-curve--bottom{
  left:5.5%;right:5.5%;bottom:7px;height:24px;
  border-bottom:2px solid rgba(106,255,151,.16);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}
.edge-curve--left{
  top:5%;bottom:5%;left:7px;width:24px;
  border-left:2px solid rgba(106,255,151,.13);
  border-radius:100% 0 0 100% / 50% 0 0 50%;
}
.edge-curve--right{
  top:5%;bottom:5%;right:7px;width:24px;
  border-right:2px solid rgba(106,255,151,.13);
  border-radius:0 100% 100% 0 / 0 50% 50% 0;
}

/* The reference is noisy, but its text remains readable. Effects live around
   glyphs instead of cutting every glyph into horizontal slices. */
.noise{opacity:.055}
.scanlines{
  opacity:.28;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.34) 0 1px,
    rgba(0,0,0,.035) 1px 2px,
    rgba(75,255,123,.012) 2px 3px
  );
}
.phosphor-grid{
  opacity:.045;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,40,70,.08) 0 1px,
    rgba(20,255,80,.05) 1px 2px,
    rgba(60,170,255,.07) 2px 3px,
    transparent 3px 4px
  );
}
.rolling-band{opacity:.27;filter:blur(.45px)}
.mouse-glow{opacity:.38}

.masthead__node,.masthead__clock,.section-label{color:#8bd9a2}
.menu-node{color:#c9f7d4;border-color:rgba(33,228,94,.48)}
.menu-node__copy small{color:#9edab0;opacity:.92}
.sub-node{color:#f0fff4;border-color:rgba(37,232,99,.43)}
.sub-node small{color:#a5dfb5}
.content-panel{
  background:rgba(0,25,9,.24);
  border-color:rgba(31,226,94,.52);
}
.content-panel::before{
  height:5px;
  background:rgba(0,243,106,.58);
}
.content-inner{
  color:#f5fff7;
  text-shadow:none;
}
.content-inner p,.content-inner li{
  font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.78;
  font-weight:500;
  letter-spacing:.01em;
}
.content-inner h2,.content-inner h3,
.menu-node__copy b,.sub-node b,.download-button{
  text-shadow:
    -.28px 0 rgba(255,70,105,.25),
    .32px 0 rgba(70,235,255,.23),
    0 0 1px rgba(255,255,255,.08);
}
.content-kicker,.meta-line{color:#8bd5a1}

/* Watermark stays behind the menu system rather than occupying a panel. */
.brand-watermark{
  opacity:.13;
  filter:blur(.22px);
}
.brand-watermark img{
  filter:
    drop-shadow(-1px 0 0 rgba(255,66,99,.42))
    drop-shadow(1px 0 0 rgba(75,233,255,.4))
    drop-shadow(0 0 7px rgba(0,255,96,.26));
}

@media(max-width:760px){
  .screen{
    border-radius:10.5% / 3.2%;
    clip-path:inset(0 round 10.5% 3.2%);
  }
  .signal{
    position:relative;
    inset:auto;
    min-height:calc(100svh - 14px);
    transform:translate3d(var(--jitter-x),var(--jitter-y),0);
  }
  .noise{opacity:.038}
  .scanlines{opacity:.2}
  .phosphor-grid{opacity:.03}
  .rolling-band{opacity:.18}
  .mouse-glow{opacity:.25}

  .masthead__node,.masthead__clock{color:#9ee4b1;font-size:10px}
  .section-label{color:#96dfaa}
  .menu-node{color:#e0fbe7;border-color:rgba(38,232,101,.55)}
  .menu-node__copy b{font-size:13px}
  .menu-node__copy small{font-size:10px;color:#b0e5be;opacity:.96}
  .sub-node{color:#f7fff9;border-color:rgba(39,232,102,.5)}
  .sub-node b{font-size:14px}
  .sub-node small{color:#b5e8c2}
  .content-inner{color:#fbfffc}
  .content-inner p,.content-inner li{
    font-size:15px;
    line-height:1.8;
    font-weight:500;
  }
  .content-inner h2{font-size:clamp(29px,8.2vw,40px)}
  .content-inner h3{font-size:18px}
  .content-panel{background:rgba(0,22,8,.17)}

  /* Persistent background mark on mobile. It remains behind subsystem/content
     panels while the page scrolls. */
  .brand-watermark{
    position:fixed;
    left:50%;
    top:57%;
    right:auto;
    bottom:auto;
    width:min(76vw,390px);
    height:auto;
    min-height:330px;
    transform:translate(-50%,-50%);
    opacity:.12;
    z-index:0;
  }
  .brand-watermark img{width:min(62vw,310px)}
  .brand-watermark strong{
    margin-top:5px;
    font-size:min(10vw,48px);
    opacity:.76;
  }
  .subsystem,.content-panel{position:relative;z-index:3}
  .edge-curve--top{top:4px;left:8%;right:8%;height:18px}
  .edge-curve--bottom{bottom:4px;left:8%;right:8%;height:18px}
  .edge-curve--left{left:4px;top:3.5%;bottom:3.5%;width:18px}
  .edge-curve--right{right:4px;top:3.5%;bottom:3.5%;width:18px}
}


/* === Reader-equivalent tube lens pass ===
   The lens distorts one bounded viewport, exactly like magi-reader. */
.signal{
  inset:0;
  transform:translate3d(var(--jitter-x),var(--jitter-y),0);
  -webkit-transform:translate3d(var(--jitter-x),var(--jitter-y),0);
  filter:url("#crt-warp") brightness(var(--flicker));
  -webkit-filter:url("#crt-warp") brightness(var(--flicker));
  transform-origin:center center;
  -webkit-transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,filter;
}
.signal[data-burst="true"]{
  filter:url("#crt-warp") brightness(1.025);
  -webkit-filter:url("#crt-warp") brightness(1.025);
}
.signal[data-drop="true"]{
  opacity:.78;
  filter:url("#crt-warp") brightness(.82) contrast(1.12);
  -webkit-filter:url("#crt-warp") brightness(.82) contrast(1.12);
}

/* The physical glass shape is fixed and never changes during interaction. */
.screen{
  border-radius:clamp(24px,3.2vw,54px) / clamp(20px,2.7vh,40px);
  clip-path:inset(0 round clamp(24px,3.2vw,54px) / clamp(20px,2.7vh,40px));
}
.screen::before{
  background:
    radial-gradient(ellipse at 50% 47%,transparent 37%,rgba(0,0,0,.025) 64%,rgba(0,0,0,.16) 92%,rgba(0,0,0,.34) 100%),
    linear-gradient(90deg,rgba(0,0,0,.2),transparent 8% 92%,rgba(0,0,0,.22));
  box-shadow:
    inset 0 0 3px rgba(218,233,213,.22),
    inset 0 0 17px rgba(0,0,0,.6),
    inset 0 0 42px rgba(0,0,0,.28);
}

/* Reader-style phosphor raster and grain: visible, but below glyph contrast. */
.scanlines{
  opacity:.28;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(
    0deg,
    rgba(5,0,2,.52) 0 .6px,
    transparent .6px 2px
  );
}
.phosphor-grid{
  opacity:.08;
  mix-blend-mode:soft-light;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,55,76,.13) 0 1px,
      rgba(45,255,105,.08) 1px 2px,
      rgba(85,170,255,.11) 2px 3px,
      transparent 3px 4px);
}
.noise{
  opacity:.075;
  mix-blend-mode:screen;
}
.rolling-band{
  opacity:.24;
  filter:blur(.5px);
}
.mouse-glow{
  opacity:.32;
}

/* Let the real phosphor filter provide the halo; local shadows only register
   colour channels and keep thin strokes readable. */
.menu-node__copy b,
.sub-node b,
.content-inner h2,
.content-inner h3,
.download-button,
.masthead__row h1{
  text-shadow:
    -.032em 0 .012em rgba(255,232,82,.50),
    .042em 0 .016em rgba(52,249,22,.48),
    0 0 .10em rgba(166,247,82,.17);
}
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  box-shadow:
    -1.15px 0 0 rgba(255,232,82,.50),
    1.35px 0 .35px rgba(52,249,22,.48),
    0 0 7px rgba(166,247,82,.52),
    0 0 16px rgba(105,235,76,.22);
}

/* Keep the watermark as a passive phosphor image underneath all controls. */
.brand-watermark{
  opacity:.115;
  filter:none;
}
.brand-watermark img{
  filter:
    drop-shadow(0 0 3px rgba(220,255,230,.24))
    drop-shadow(0 0 12px rgba(89,255,131,.18));
}

/* iOS/WebKit: keep one fixed CRT viewport and scroll the UI inside it.
   This prevents the displacement map from stretching over a tall document. */
@media(max-width:760px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    min-height:100vh;
    min-height:100dvh;
  }
  .bezel{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:0;
    padding:7px;
    overflow:hidden;
  }
  .screen{
    width:100%;
    height:100%;
    min-height:0;
    border-radius:clamp(25px,8vw,44px) / clamp(18px,3.6vh,34px);
    clip-path:inset(0 round clamp(25px,8vw,44px) / clamp(18px,3.6vh,34px));
  }
  .signal{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .masthead{
    position:absolute;
    top:0;left:0;right:0;
    height:96px;
    z-index:8;
  }
  .terminal-ui{
    position:absolute;
    left:0;right:0;
    top:96px;
    bottom:40px;
    height:auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding:0 12px 72px;
    scrollbar-width:none;
  }
  .terminal-ui::-webkit-scrollbar{display:none}
  .statusbar{
    position:absolute;
    left:12px;right:12px;bottom:7px;
    z-index:12;
    background:linear-gradient(180deg,transparent,rgba(0,10,3,.72) 38%,rgba(0,8,2,.9));
  }
  .brand-watermark{
    position:fixed;
    left:50%;
    top:54%;
    right:auto;
    bottom:auto;
    width:min(78vw,400px);
    min-height:330px;
    transform:translate(-50%,-50%);
    z-index:0;
    opacity:.105;
    pointer-events:none;
  }
  .brand-watermark img{width:min(64vw,320px)}
  .brand-watermark strong{font-size:min(10vw,50px)}
  .folders,.stage,.subsystem,.content-panel{position:relative}
  .folders,.stage,.subsystem,.content-panel{z-index:3}
  .content-panel{margin-bottom:18px}

  .scanlines{opacity:.25}
  .phosphor-grid{opacity:.06}
  .noise{opacity:.06}
  .rolling-band{opacity:.2}

  .menu-node__copy b,.sub-node b{
    font-size:14px;
  }
  .menu-node__copy small,.sub-node small{
    font-size:10px;
    opacity:.92;
  }
  .content-inner p,.content-inner li{
    font-size:15px;
    line-height:1.8;
    font-weight:500;
  }
}

/* WebKit fallback if the SVG filter is disabled by the browser. The glass
   remains curved and all raster/glow layers stay active; no geometry jumps. */
html[data-crt-engine="webkit-svg"] .signal{
  -webkit-filter:url("#crt-warp") brightness(var(--flicker));
}


/* === Interaction/boot correction pass === */
.home-jump{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:28px;
  height:24px;
  display:grid;
  place-items:center;
  color:#001807;
  background:transparent;
  font:900 16px/1 "Courier New",monospace;
  cursor:pointer;
  text-shadow:none;
}
.home-jump:hover,.home-jump:focus-visible{
  color:#001807;
  background:rgba(255,255,255,.34);
  outline:1px solid rgba(0,0,0,.75);
  outline-offset:1px;
}
.home-jump:active{transform:translateY(1px)}

/* Loading screen uses the same optical language as the live tube instead of
   a clean splash screen. */
.boot{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 48%,#123b2b,#051f17 48%,#020b08 100%);
}
.boot__raster,.boot__grain,.boot__roll{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.boot__raster{
  z-index:4;
  opacity:.46;
  mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 .65px,transparent .65px 2.1px),
    repeating-linear-gradient(90deg,rgba(255,44,79,.08) 0 1px,rgba(49,255,122,.05) 1px 2px,rgba(73,190,255,.07) 2px 3px,transparent 3px 4px);
}
.boot__grain{
  z-index:3;
  opacity:.2;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 13% 18%,rgba(255,255,255,.22) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 31%,rgba(255,255,255,.15) 0 1px,transparent 1.4px),
    radial-gradient(circle at 36% 74%,rgba(255,255,255,.12) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 82%,rgba(255,255,255,.13) 0 1px,transparent 1.4px);
  background-size:17px 13px,23px 19px,31px 27px,37px 29px;
  animation:boot-grain-shift .11s steps(2,end) infinite;
}
.boot__roll{
  z-index:5;
  top:-22%;
  bottom:auto;
  height:22%;
  opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(176,255,211,.12) 43%,rgba(255,255,255,.22) 49%,rgba(0,0,0,.32) 53%,transparent);
  filter:blur(.7px);
  -webkit-filter:blur(.7px);
  animation:boot-roll-pass 2.3s linear infinite;
}
.boot__signal{
  z-index:2;
  filter:url("#crt-warp") brightness(1.04);
  -webkit-filter:url("#crt-warp") brightness(1.04);
  animation:boot-signal-instability .085s steps(2,end) infinite;
}
.boot__mark{
  opacity:.78;
  filter:
    drop-shadow(-.7px 0 rgba(255,78,109,.58))
    drop-shadow(.85px 0 rgba(70,238,255,.56))
    drop-shadow(0 0 4px rgba(219,255,235,.66))
    drop-shadow(0 0 18px rgba(82,255,135,.36));
  -webkit-filter:
    drop-shadow(-.7px 0 rgba(255,78,109,.58))
    drop-shadow(.85px 0 rgba(70,238,255,.56))
    drop-shadow(0 0 4px rgba(219,255,235,.66))
    drop-shadow(0 0 18px rgba(82,255,135,.36));
}
.boot__name,.boot__loading{
  text-shadow:
    -.055em 0 .018em rgba(255,232,82,.62),
    .06em 0 .018em rgba(52,249,22,.58),
    0 0 .07em rgba(236,255,244,.82),
    0 0 .22em rgba(98,255,151,.5),
    0 0 .52em rgba(65,205,118,.24);
}
.boot__loading{opacity:.92}
@keyframes boot-signal-instability{
  0%{transform:translate3d(-.45px,.12px,0);opacity:.97}
  50%{transform:translate3d(.38px,-.08px,0);opacity:1}
  100%{transform:translate3d(-.12px,.04px,0);opacity:.985}
}
@keyframes boot-grain-shift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(3px,-2px,0)}
  100%{transform:translate3d(-2px,1px,0)}
}
@keyframes boot-roll-pass{
  from{transform:translateY(0)}
  to{transform:translateY(555%)}
}

/* Integrity reader used by the migrated Exedra site. */
.integrity-block{
  margin:20px 0 28px;
  padding:14px;
  border:1px solid rgba(45,239,105,.38);
  background:rgba(0,0,0,.22);
}
.integrity-block h3{margin-top:0}
.integrity-hash{overflow-wrap:anywhere}
.integrity-table-wrap{overflow:auto;margin:12px 0}
.integrity-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:11px;
}
.integrity-table th,.integrity-table td{
  padding:7px 9px;
  border:1px solid rgba(42,226,99,.28);
  text-align:left;
  vertical-align:top;
}
.integrity-table code{overflow-wrap:anywhere}
.terminal-details{
  margin:12px 0;
  border:1px solid rgba(47,229,103,.3);
  background:rgba(0,0,0,.22);
}
.terminal-details summary{
  cursor:pointer;
  padding:9px 11px;
  color:#eaffef;
  font-weight:700;
}
.terminal-details pre{
  max-height:42vh;
  margin:0;
  border:0;
  border-top:1px solid rgba(47,229,103,.25);
}

/* Mobile tabs are real accordion controls: selected content is physically
   inserted after the tapped subsystem node by app.js. */
@media(max-width:760px){
  .sub-menu>.content-panel{
    width:100%;
    min-height:0;
    margin:8px 0 13px;
    padding:16px;
    border-width:1px;
    animation:mobile-panel-open .18s steps(5,end) both;
  }
  .sub-menu>.content-panel::before{
    margin:-16px -16px 13px;
    top:-16px;
    height:4px;
  }
  .sub-node[aria-expanded="true"]{
    box-shadow:
      -1px 0 0 rgba(255,232,82,.54),
      1px 0 .3px rgba(52,249,22,.52),
      0 0 7px rgba(166,247,82,.54),
      0 0 15px rgba(105,235,76,.24);
  }
  .integrity-table{min-width:560px}
  .boot__signal{
    transform:scale(.93);
    transform-origin:center;
  }
}
@keyframes mobile-panel-open{
  0%{opacity:.25;transform:translateY(-5px);filter:blur(.55px)}
  55%{opacity:1;transform:translateY(1px);filter:blur(.15px)}
  100%{opacity:1;transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .boot__signal,.boot__grain,.boot__roll,.sub-menu>.content-panel{animation:none!important}
}


.terminal-copy-button{
  appearance:none;
  -webkit-appearance:none;
  padding:6px 9px;
  border:1px solid rgba(0,255,95,.35);
  background:rgba(0,0,0,.22);
  color:#aaffc2;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.terminal-copy-button:hover,.terminal-copy-button:focus-visible{
  background:rgba(0,255,96,.12);
  border-color:rgba(125,255,160,.72);
  outline:none;
  box-shadow:0 0 8px rgba(75,255,127,.18);
}
.terminal-copy-button:disabled{opacity:.72;cursor:wait}


/* === Alien-terminal fidelity pass / 2026-09-19 === */
@font-face{
  font-family:"MagiusPixel";
  src:
    url("./fonts/night-pixel/fusion-pixel-12px-monospaced-zh_hans.2026.07.20.woff2") format("woff2"),
    url("https://fusion-pixel-font.takwolf.com/fusion-pixel-12px-monospaced-zh_hans.otf.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"MagiusPixelJP";
  src:url("./fonts/night-pixel/fusion-pixel-12px-monospaced-ja.2026.07.20.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root{
  --pixel-face:"MagiusPixel","MS Gothic","Courier New",monospace;
  --pixel-face-jp:"MagiusPixelJP","MS Gothic","Courier New",monospace;
  --fringe-blue:rgba(65,204,255,.72);
  --fringe-red:rgba(255,57,89,.68);
}
html[data-pixel-font="true"] .signal,
html[data-pixel-font="true"] .signal :is(button,a,span,p,b,strong,small,label,h1,h2,h3,h4,li,dt,dd,code,summary,th,td){
  font-family:var(--pixel-face)!important;
  font-synthesis:none!important;
  font-weight:400!important;
}
html[data-pixel-font="false"] .signal{
  font-family:"Courier New","Lucida Console","Microsoft YaHei UI","PingFang SC",monospace;
}
html[data-pixel-font="false"] .content-inner :is(p,li){
  font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC","Segoe UI",sans-serif!important;
}

/* The reader night surface has a quiet black surround and a dark optical edge,
   not a glowing rounded neon frame. The displacement filter creates the actual
   bulge; this radius only clips the physical glass. */
.bezel{
  padding:10px;
  background:#000;
}
.screen{
  border-radius:18px / 13px!important;
  clip-path:none!important;
  box-shadow:
    0 0 0 1px rgba(40,55,44,.5),
    0 0 34px rgba(0,0,0,.92),
    inset 0 0 3px rgba(218,233,213,.18),
    inset 0 0 17px rgba(0,0,0,.68)!important;
}
.screen::before{
  border-radius:18px / 13px;
  background:
    radial-gradient(ellipse at 50% 47%,
      transparent 34%,
      rgba(0,0,0,.02) 57%,
      rgba(0,0,0,.12) 76%,
      rgba(0,0,0,.31) 91%,
      rgba(0,0,0,.66) 100%),
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 8% 92%,rgba(0,0,0,.30));
  box-shadow:
    inset 0 0 3px rgba(218,233,213,.19),
    inset 0 0 20px rgba(0,0,0,.66),
    inset 0 0 56px rgba(0,0,0,.25);
}
.signal{
  contain:strict;
  isolation:isolate;
  background:
    radial-gradient(ellipse 64% 66% at 51% 46%,#263820 0%,#192814 43%,#0d170a 73%,#020502 100%)!important;
}

/* Reader-like raster: clear horizontal structure plus a constantly moving,
   sparse emulsion grain. Canvas noise is disabled; the texture animation gives
   stronger grain while removing repeated ImageData allocations on mobile. */
.noise{display:none!important}
.tube-grain{
  position:absolute;
  inset:0;
  z-index:46;
  pointer-events:none;
  background:
    url("./lofi-grain.svg") 17px 11px / 192px 192px repeat,
    url("./lofi-grain.svg") 83px 47px / 271px 271px repeat;
  background-blend-mode:screen;
  mix-blend-mode:screen;
  opacity:.23;
  filter:sepia(.10) hue-rotate(33deg) saturate(.72);
  -webkit-filter:sepia(.10) hue-rotate(33deg) saturate(.72);
  will-change:background-position,transform;
  animation:tube-grain-drift .105s steps(2,end) infinite;
}
@keyframes tube-grain-drift{
  0%{background-position:17px 11px,83px 47px;transform:translate3d(0,0,0)}
  25%{background-position:22px 7px,78px 53px;transform:translate3d(.18px,0,0)}
  50%{background-position:13px 16px,89px 43px;transform:translate3d(-.15px,.08px,0)}
  75%{background-position:20px 13px,81px 50px;transform:translate3d(.08px,-.05px,0)}
  100%{background-position:17px 11px,83px 47px;transform:translate3d(0,0,0)}
}
.scanlines{
  z-index:48;
  opacity:.38!important;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(
    0deg,
    rgba(5,0,2,.57) 0 .65px,
    transparent .65px 2px
  )!important;
}
.phosphor-grid{
  z-index:47;
  opacity:.085!important;
  mix-blend-mode:soft-light;
}
.rolling-band{
  z-index:49;
  opacity:.34!important;
  filter:blur(.58px)!important;
  -webkit-filter:blur(.58px)!important;
}

/* Random top-to-bottom tracking pass. This is separate from the slow roll:
   a short tracking fault sweeps down the glass with a stepped bright seam,
   blur and lateral colour echo. */
.tracking-sweep{
  position:absolute;
  left:-3%;
  right:-3%;
  top:-18%;
  height:13%;
  z-index:52;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--tracking-shift,0px),0,0);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0 2px,
      rgba(116,255,153,.07) 2px 5px,
      rgba(0,0,0,.18) 5px 7px
    ),
    linear-gradient(180deg,
      transparent 0,
      rgba(78,255,123,.06) 29%,
      rgba(222,255,230,.26) 47%,
      rgba(255,255,255,.52) 50%,
      rgba(48,255,107,.12) 53%,
      rgba(0,0,0,.28) 59%,
      transparent 100%);
  box-shadow:
    -2px 0 0 var(--fringe-blue),
    2px 0 0 var(--fringe-red),
    0 2px 9px rgba(128,255,159,.16);
  backdrop-filter:blur(.34px) brightness(1.08);
  -webkit-backdrop-filter:blur(.34px) brightness(1.08);
  will-change:top,transform,opacity;
}
.tracking-sweep::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:48%;
  height:1px;
  background:rgba(235,255,240,.8);
  box-shadow:
    -1px 0 var(--fringe-blue),
    1px 0 var(--fringe-red),
    0 0 5px rgba(217,255,227,.48);
}
.signal[data-tracking="true"] .tracking-sweep{
  opacity:.74;
  animation:tracking-sweep-pass var(--tracking-duration,1.08s) steps(34,end) both;
}
@keyframes tracking-sweep-pass{
  0%{top:-18%;transform:translate3d(var(--tracking-shift,0px),0,0)}
  18%{transform:translate3d(calc(var(--tracking-shift,0px) * -0.35),0,0)}
  43%{transform:translate3d(calc(var(--tracking-shift,0px) * .7),0,0)}
  69%{transform:translate3d(calc(var(--tracking-shift,0px) * -.55),0,0)}
  100%{top:108%;transform:translate3d(0,0,0)}
}

/* Registration orientation from the supplied Alien reference:
   cool/cyan fringe on the LEFT, red/magenta fringe on the RIGHT. */
.masthead__row h1,
.menu-node__copy b,
.sub-node b,
.content-inner h2,
.content-inner h3,
.download-button,
.statusbar,
.section-label{
  text-shadow:
    -1.0px 0 .18px var(--fringe-blue),
    1.15px 0 .18px var(--fringe-red),
    0 0 3px rgba(187,255,203,.18)!important;
}
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  box-shadow:
    -2px 0 0 var(--fringe-blue),
    2px 0 0 var(--fringe-red),
    0 0 6px rgba(238,255,242,.34),
    0 0 14px rgba(100,255,137,.18)!important;
}

/* Header hardware controls live inside the green machine bar. */
.masthead__bar{
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  gap:8px;
}
.pixel-toggle,.home-jump{
  appearance:none;
  -webkit-appearance:none;
  align-self:center;
  height:22px;
  margin:0;
  padding:0 7px;
  border:1px solid rgba(0,28,9,.72);
  border-radius:0;
  color:#001707;
  background:rgba(213,255,223,.15);
  font-family:var(--pixel-face)!important;
  font-size:9px;
  line-height:20px;
  letter-spacing:.05em;
  cursor:pointer;
  text-shadow:none!important;
}
.home-jump{width:27px;padding:0;font-size:15px}
.pixel-toggle:hover,.pixel-toggle:focus-visible,
.home-jump:hover,.home-jump:focus-visible{
  color:#001707;
  background:rgba(255,255,255,.36);
  outline:1px solid rgba(0,0,0,.72);
  outline-offset:1px;
}
.pixel-toggle[aria-pressed="false"]{opacity:.58}

/* Reader loading wordmark: exact vector outlines, then CRT damage on top. */
.boot__signal{
  width:min(62vw,440px);
  filter:blur(.65px) brightness(.98)!important;
  -webkit-filter:blur(.65px) brightness(.98)!important;
}
.boot__wordmark{
  display:block;
  width:100%;
  height:auto;
  opacity:.91;
  filter:
    drop-shadow(-1.1px 0 .15px var(--fringe-blue))
    drop-shadow(1.25px 0 .15px var(--fringe-red))
    drop-shadow(0 0 4px rgba(220,255,231,.68))
    drop-shadow(0 0 16px rgba(94,255,143,.38));
  -webkit-filter:
    drop-shadow(-1.1px 0 .15px var(--fringe-blue))
    drop-shadow(1.25px 0 .15px var(--fringe-red))
    drop-shadow(0 0 4px rgba(220,255,231,.68))
    drop-shadow(0 0 16px rgba(94,255,143,.38));
}
.boot__mark,.boot__name{display:none!important}
.boot__loading{
  margin-top:18px!important;
  font-family:var(--pixel-face);
  text-shadow:
    -1px 0 .15px var(--fringe-blue),
    1.1px 0 .15px var(--fringe-red),
    0 0 7px rgba(177,255,202,.56)!important;
}
.boot__grain{
  background:url("./lofi-grain.svg") 0 0 / 192px 192px repeat!important;
  opacity:.28!important;
  mix-blend-mode:screen;
  animation:tube-grain-drift .105s steps(2,end) infinite!important;
}
.boot__raster{
  opacity:.46!important;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 .65px,transparent .65px 2px),
    repeating-linear-gradient(90deg,rgba(255,44,79,.08) 0 1px,rgba(49,255,122,.045) 1px 2px,rgba(73,190,255,.07) 2px 3px,transparent 3px 4px)!important;
}

/* Mobile keeps the same optical quality; only layout changes. */
@media(max-width:760px){
  .bezel{padding:7px}
  .screen{
    border-radius:18px / 13px!important;
  }
  .tube-grain{opacity:.21}
  .scanlines{opacity:.36!important}
  .phosphor-grid{opacity:.075!important}
  .rolling-band{opacity:.29!important}
  .boot__signal{width:min(72vw,380px)}
  .pixel-toggle{font-size:8px;padding:0 5px}
  html[data-pixel-font="true"] .content-inner :is(p,li){
    font-size:15px!important;
    line-height:1.82!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .tube-grain,.tracking-sweep,.boot__grain{animation:none!important}
}


/* Safari/iOS 27 safety path for the upstream feDisplacementMap regression.
   Stable iOS continues to use the full reader lens. */
html[data-crt-engine="ios-safe"] .signal{
  filter:brightness(var(--flicker)) contrast(1.035) saturate(.94)!important;
  -webkit-filter:brightness(var(--flicker)) contrast(1.035) saturate(.94)!important;
  transform:
    perspective(1200px)
    translate3d(var(--jitter-x),var(--jitter-y),0)
    scale(.992,.986)!important;
  -webkit-transform:
    perspective(1200px)
    translate3d(var(--jitter-x),var(--jitter-y),0)
    scale(.992,.986)!important;
}
html[data-crt-engine="ios-safe"] .screen::before{
  background:
    radial-gradient(ellipse at 50% 47%,
      transparent 31%,
      rgba(0,0,0,.025) 54%,
      rgba(0,0,0,.18) 76%,
      rgba(0,0,0,.42) 92%,
      rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 10% 90%,rgba(0,0,0,.36));
}

html[data-pixel-font="true"] .signal :is([lang="ja"],[lang="ja"] *){
  font-family:var(--pixel-face-jp)!important;
}


/* Final registration direction: Alien reference has cool fringe on LEFT,
   warm/red fringe on RIGHT. */
.masthead__bar{
  box-shadow:
    -1px 0 0 var(--fringe-blue)!important,
    1px 0 0 var(--fringe-red)!important,
    0 0 7px rgba(0,255,104,.13)!important;
}
.connector-path.is-hot{
  filter:
    drop-shadow(-1.25px 0 0 var(--fringe-blue))
    drop-shadow(1.35px 0 0 var(--fringe-red))
    drop-shadow(0 0 4px rgba(255,255,255,.40))!important;
}
.connector-dot.is-hot{
  filter:
    drop-shadow(-1px 0 var(--fringe-blue))
    drop-shadow(1px 0 var(--fringe-red))!important;
}
.tear-band{
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      rgba(255,255,255,.74) 7% 28%,
      transparent 33% 51%,
      rgba(65,255,118,.28) 57% 79%,
      transparent 88%),
    repeating-linear-gradient(90deg,
      rgba(65,204,255,.25) 0 2px,
      rgba(255,57,89,.24) 2px 4px,
      transparent 4px 12px)!important;
}

/* Branding remains a passive phosphor watermark under the functional menu. */
.brand-watermark{
  gap:10px;
}
.brand-watermark .brand-emblem{
  width:min(29vw,360px)!important;
}
.brand-wordmark{
  width:min(31vw,390px);
  height:auto;
  opacity:.72;
  filter:drop-shadow(0 0 7px rgba(80,255,130,.22));
}
.brand-watermark strong{display:none!important}

/* Boot starts with the Magius emblem, then the exact reader loading outlines. */
.boot__emblem{
  width:min(18vw,132px);
  max-height:148px;
  margin:0 auto 14px;
  opacity:.82;
  filter:
    drop-shadow(-.8px 0 .12px var(--fringe-blue))
    drop-shadow(.9px 0 .12px var(--fringe-red))
    drop-shadow(0 0 8px rgba(115,255,154,.36));
}
@media(max-width:760px){
  .brand-watermark .brand-emblem{width:min(52vw,285px)!important}
  .brand-wordmark{width:min(58vw,310px)}
  .boot__emblem{width:min(26vw,118px);margin-bottom:11px}
}


/* Performance: keep the full-quality grain raster but animate the composited
   layer itself. This avoids repainting background-position every 105ms. */
.tube-grain{
  inset:-12px!important;
  background-position:17px 11px,83px 47px!important;
  will-change:transform,opacity!important;
  animation:tube-grain-composite .105s steps(2,end) infinite!important;
}
.boot__grain{
  inset:-12px!important;
  background-position:0 0!important;
  will-change:transform,opacity!important;
  animation:tube-grain-composite .105s steps(2,end) infinite!important;
}
@keyframes tube-grain-composite{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(5px,-4px,0)}
  50%{transform:translate3d(-4px,5px,0)}
  75%{transform:translate3d(3px,2px,0)}
  100%{transform:translate3d(0,0,0)}
}


/* === Selection contrast + pixel-font control === */
html[data-pixel-font="on"] .signal,
html[data-pixel-font="on"] .boot{
  font-family:"Courier New","Lucida Console","SFMono-Regular","Cascadia Mono","MS Gothic","Microsoft YaHei UI",monospace;
  font-synthesis:none;
}
html[data-pixel-font="off"] .signal,
html[data-pixel-font="off"] .boot{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;
}

/* Alien-style white selection must invert every child, not only the parent.
   Mobile CJK subtitles used to keep their green rule and vanish on white. */
.menu-node.is-selected,
.menu-node.is-selected .menu-node__index,
.menu-node.is-selected .menu-node__copy,
.menu-node.is-selected .menu-node__copy b,
.menu-node.is-selected .menu-node__copy small,
.menu-node.is-selected .menu-node__glyph{
  color:#071109 !important;
  -webkit-text-fill-color:#071109 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.menu-node.is-selected .menu-node__copy small{
  color:#183d24 !important;
  -webkit-text-fill-color:#183d24 !important;
  font-weight:700;
}
.menu-node.is-selected .menu-node__index{
  color:#27442f !important;
  -webkit-text-fill-color:#27442f !important;
  font-weight:700;
}
.sub-node.is-selected b{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.sub-node.is-selected small{
  color:#e2ffe9 !important;
  -webkit-text-fill-color:#e2ffe9 !important;
  opacity:1 !important;
  font-weight:700;
  text-shadow:0 0 3px rgba(220,255,229,.22);
}

/* The white DOWNLOAD control needs the same hard inversion. */
.download-button{
  color:#061108 !important;
  -webkit-text-fill-color:#061108 !important;
  text-shadow:none !important;
}
.download-button:hover,.download-button:focus-visible{
  color:#001506 !important;
  -webkit-text-fill-color:#001506 !important;
}

.masthead__bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
}
.masthead__bar>span{
  width:100%;
}
.pixel-font-toggle{
  appearance:none;
  -webkit-appearance:none;
  min-width:max-content;
  border:0;
  padding:0 7px;
  color:#001807;
  background:transparent;
  font:900 10px/1 "Courier New","Lucida Console",monospace;
  letter-spacing:.05em;
  cursor:pointer;
}
.pixel-font-toggle:hover,.pixel-font-toggle:focus-visible{
  background:rgba(255,255,255,.26);
  outline:1px solid rgba(0,0,0,.72);
  outline-offset:0;
}
.pixel-font-toggle[aria-pressed="false"]{
  opacity:.66;
}

/* Exact outlined reader loading wordmark, not a font approximation. */
.boot__wordmark{
  display:block;
  width:clamp(210px,38vw,420px);
  height:auto;
  margin-top:14px;
  filter:
    drop-shadow(-.8px 0 rgba(255,78,109,.52))
    drop-shadow(.9px 0 rgba(70,238,255,.48))
    drop-shadow(0 0 4px rgba(219,255,235,.56))
    drop-shadow(0 0 16px rgba(82,255,135,.3));
  -webkit-filter:
    drop-shadow(-.8px 0 rgba(255,78,109,.52))
    drop-shadow(.9px 0 rgba(70,238,255,.48))
    drop-shadow(0 0 4px rgba(219,255,235,.56))
    drop-shadow(0 0 16px rgba(82,255,135,.3));
}
.boot__name{display:none}

@media(max-width:760px){
  .masthead__bar{
    grid-template-columns:auto 1fr auto;
    gap:5px;
  }
  .pixel-font-toggle{
    padding:0 4px;
    font-size:8px;
    letter-spacing:.025em;
  }
  .boot__wordmark{
    width:min(66vw,310px);
    margin-top:10px;
  }
  .menu-node.is-selected .menu-node__copy small{
    color:#173b22 !important;
    -webkit-text-fill-color:#173b22 !important;
  }
}


/* Final pixel-font state uses the same true/false contract as the reader. */
html[data-pixel-font="true"] .signal,
html[data-pixel-font="true"] .boot{
  font-family:var(--pixel-face)!important;
  font-synthesis:none!important;
}
html[data-pixel-font="false"] .signal,
html[data-pixel-font="false"] .boot{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif!important;
}
.pixel-toggle{
  min-width:max-content;
  display:grid;
  place-items:center;
  white-space:nowrap;
}

/* Hard contrast on white menu selections, including secondary CJK copy. */
.menu-node.is-selected .menu-node__copy b{
  color:#050b06!important;
  -webkit-text-fill-color:#050b06!important;
  opacity:1!important;
}
.menu-node.is-selected .menu-node__copy small{
  color:#15361f!important;
  -webkit-text-fill-color:#15361f!important;
  opacity:1!important;
  font-weight:700!important;
  text-shadow:none!important;
}
.menu-node.is-selected .menu-node__index,
.menu-node.is-selected .menu-node__glyph{
  color:#1d3925!important;
  -webkit-text-fill-color:#1d3925!important;
  opacity:1!important;
  text-shadow:none!important;
}


/* Large touch target for the filtered top-right HOME hardware control.
   The visual CRT warp moves pixels but not DOM hit-testing coordinates. */
.home-jump{
  position:relative;
  z-index:30;
  display:grid;
  place-items:center;
  min-width:24px;
  width:24px;
  height:20px;
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.home-jump::before{
  content:"";
  position:absolute;
  inset:-10px -12px;
}
@media(max-width:760px){
  .home-jump{
    min-width:22px;
    width:22px;
    height:16px;
  }
  .home-jump::before{inset:-13px -14px}
}


.pixel-toggle{
  position:relative;
  z-index:30;
  min-height:0;
  height:20px;
  line-height:1;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pixel-toggle::before{
  content:"";
  position:absolute;
  inset:-10px -12px;
}
@media(max-width:760px){
  .pixel-toggle{min-height:0;height:16px;line-height:1;font-size:8px;padding:0 4px}
  .pixel-toggle::before{inset:-13px -14px}
}


.content-panel[hidden]{
  display:none!important;
}
@media(max-width:760px){
  .sub-node[aria-expanded="false"].is-selected{
    box-shadow:
      -1px 0 0 rgba(255,232,82,.34),
      1px 0 .3px rgba(52,249,22,.32),
      0 0 5px rgba(166,247,82,.28)!important;
  }
}


/* === Analog signal motion pass (measured against supplied 60 fps footage) ===
   Geometry stays fixed. Only the raster/timebase/noise layers move. */
.noise{
  opacity:.105!important;
  mix-blend-mode:screen!important;
  image-rendering:pixelated;
  filter:contrast(1.08) brightness(.96);
  -webkit-filter:contrast(1.08) brightness(.96);
}
.tube-grain{
  opacity:.19!important;
  animation:tube-grain-drift .11s steps(2,end) infinite!important;
}
.scanlines{
  opacity:.46!important;
  background:repeating-linear-gradient(
    0deg,
    rgba(4,0,2,.62) 0 .72px,
    transparent .72px 1.92px,
    rgba(116,255,151,.018) 1.92px 2.18px
  )!important;
  mix-blend-mode:multiply!important;
}
.phosphor-grid{
  opacity:.072!important;
}
.rolling-band{
  opacity:.24!important;
  height:15%!important;
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(28,120,56,.02) 24%,
      rgba(116,255,151,.06) 42%,
      rgba(224,255,231,.14) 49%,
      rgba(10,0,4,.22) 54%,
      transparent 100%)!important;
  filter:blur(.46px)!important;
  -webkit-filter:blur(.46px)!important;
  transition:none!important;
}

/* Occasional vertical-sync/tracking fault. The moving boundary changes local
   luminance, blur and line phase while the tube curvature stays untouched. */
.tracking-sweep{
  height:10.5%!important;
  left:-4%!important;
  right:-4%!important;
  opacity:0!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.015) 0 1px,
      rgba(78,255,123,.055) 1px 3px,
      rgba(0,0,0,.16) 3px 5px
    ),
    linear-gradient(180deg,
      transparent 0,
      rgba(70,255,119,.025) 27%,
      rgba(192,255,208,.14) 43%,
      rgba(247,255,249,.38) 49%,
      rgba(63,255,113,.10) 52%,
      rgba(0,0,0,.28) 58%,
      transparent 100%)!important;
  box-shadow:
    -1.5px 0 0 var(--fringe-blue),
    1.6px 0 0 var(--fringe-red),
    0 0 5px rgba(231,255,238,.22),
    0 6px 14px rgba(0,0,0,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.signal[data-tracking="true"] .tracking-sweep{
  opacity:.92!important;
  backdrop-filter:blur(.52px) contrast(1.06) brightness(var(--tracking-brightness,1.08))!important;
  -webkit-backdrop-filter:blur(.52px) contrast(1.06) brightness(var(--tracking-brightness,1.08))!important;
  animation:tracking-sweep-pass var(--tracking-duration,1s) steps(38,end) both!important;
}
.tracking-sweep::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:36%;
  height:22%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.08) 0 1px,
      rgba(19,70,32,.15) 1px 3px
    );
  opacity:.44;
}
.tracking-sweep::after{
  top:49%!important;
  height:1px!important;
  background:rgba(241,255,245,.86)!important;
  box-shadow:
    -1.2px 0 .2px var(--fringe-blue),
    1.25px 0 .2px var(--fringe-red),
    0 0 4px rgba(229,255,236,.46)!important;
}

/* Short horizontal-sync tears are narrow phase errors, not giant glitches. */
.tear-band{
  mix-blend-mode:screen!important;
  background:
    linear-gradient(90deg,
      transparent 0 3%,
      rgba(255,255,255,.28) 6% 26%,
      transparent 30% 52%,
      rgba(85,255,133,.16) 57% 78%,
      transparent 86%)!important;
  box-shadow:
    -1px 0 var(--fringe-blue),
    1px 0 var(--fringe-red),
    0 0 4px rgba(225,255,234,.24)!important;
}

/* Reference registration: cyan/blue fringe to the LEFT, red/magenta RIGHT.
   Strongest on white/high-energy UI elements. */
:root{
  --fringe-blue:rgba(63,197,255,.78);
  --fringe-red:rgba(255,54,88,.74);
}
.masthead__row h1,
.menu-node__copy b,
.sub-node b,
.content-inner h2,
.content-inner h3,
.download-button,
.statusbar,
.section-label{
  text-shadow:
    -1.15px 0 .14px var(--fringe-blue),
    1.28px 0 .14px var(--fringe-red),
    0 0 2.6px rgba(187,255,203,.16)!important;
}
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  box-shadow:
    -1.8px 0 0 var(--fringe-blue),
    1.9px 0 0 var(--fringe-red),
    0 0 7px rgba(242,255,245,.34),
    0 0 16px rgba(93,244,126,.16)!important;
}

/* Current stable iOS keeps the same raster/grain/tracking layers.
   The iOS-27 safety path only omits the known-risk displacement map. */
html[data-crt-engine="ios-safe"] .tracking-sweep{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-crt-engine="ios-safe"] .signal[data-tracking="true"] .tracking-sweep{
  opacity:.94!important;
}

/* Mobile keeps full visual resolution; only temporal noise frequency/buffer
   size is reduced in JS to save battery. */
@media(max-width:760px){
  .noise{opacity:.095!important}
  .tube-grain{opacity:.18!important}
  .scanlines{opacity:.43!important}
  .rolling-band{opacity:.22!important}
  .tracking-sweep{height:11.5%!important}
}


/* === Desktop information hierarchy correction ===
   Compact subsystem choices at the top; the document reader gets the screen. */
@media(min-width:761px){
  .terminal-ui{
    grid-template-columns:minmax(220px,23%) minmax(0,1fr)!important;
  }
  .folders{
    padding-right:24px!important;
  }
  .stage{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    height:100%!important;
    min-height:0!important;
    padding-left:52px!important;
    overflow:hidden!important;
  }
  .subsystem{
    grid-row:1!important;
    width:100%!important;
    min-height:0!important;
    padding-right:2%!important;
  }
  .subsystem>.section-label{
    height:28px!important;
    padding-bottom:5px!important;
  }
  .sub-menu{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;
    grid-auto-rows:minmax(42px,auto)!important;
    gap:6px!important;
    width:100%!important;
    max-height:112px!important;
    overflow:auto!important;
    padding:0 5px 3px 0!important;
  }
  .sub-node{
    min-height:42px!important;
    padding:5px 10px!important;
    border-width:1px!important;
  }
  .sub-node b{
    font-size:clamp(12px,.92vw,16px)!important;
    line-height:1.05!important;
  }
  .sub-node small{
    font-size:9px!important;
    letter-spacing:.045em!important;
  }
  .content-panel{
    grid-row:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:calc(98% - 0px)!important;
    height:100%!important;
    min-height:0!important;
    margin:0 2% 0 0!important;
    padding:18px 22px 24px!important;
    overflow:auto!important;
  }
  .content-panel::before{
    top:-18px!important;
    margin:-18px -22px 14px!important;
  }
  .content-inner{
    max-width:none!important;
  }
  .brand-watermark{
    inset:12% 3% 7% 4%!important;
  }
}

/* === Always-alive raster/timebase motion ===
   A CRT-like display should not become a perfectly static bitmap when idle. */
.rolling-band{
  top:-16%!important;
  height:15%!important;
  animation:analog-field-roll 2.55s linear infinite!important;
  will-change:transform,opacity!important;
}
@keyframes analog-field-roll{
  0%{transform:translate3d(0,-2%,0);opacity:.12}
  12%{opacity:.24}
  48%{opacity:.31}
  78%{opacity:.19}
  100%{transform:translate3d(0,790%,0);opacity:.08}
}
.scanlines{
  animation:raster-phase .22s steps(2,end) infinite!important;
  will-change:background-position,transform!important;
}
@keyframes raster-phase{
  0%{background-position:0 0;transform:translate3d(0,0,0)}
  50%{background-position:0 .7px;transform:translate3d(.08px,.08px,0)}
  100%{background-position:0 0;transform:translate3d(0,0,0)}
}
.signal[data-tracking="true"] .tracking-sweep{
  opacity:1!important;
  height:13.5%!important;
  box-shadow:
    -1.6px 0 0 var(--fringe-blue),
    1.7px 0 0 var(--fringe-red),
    0 0 7px rgba(235,255,241,.30),
    0 7px 18px rgba(0,0,0,.22)!important;
}
.tracking-sweep::after{
  height:2px!important;
  box-shadow:
    -1.35px 0 .25px var(--fringe-blue),
    1.45px 0 .25px var(--fringe-red),
    0 0 6px rgba(232,255,238,.55)!important;
}
.tube-grain{
  opacity:.23!important;
}
.noise{
  opacity:.12!important;
}

@media(max-width:760px){
  .rolling-band{
    animation-duration:2.8s!important;
    opacity:.24!important;
  }
  .scanlines{
    animation-duration:.26s!important;
  }
  .tube-grain{opacity:.20!important}
  .noise{opacity:.105!important}
}


/* === 2026-09-19 layout + analog scan correction ===
   Desktop follows the Alien terminal hierarchy: narrow folder column,
   narrow vertical subsystem column, large reader panel on the right. */
@media(min-width:761px){
  .bezel{
    padding:0!important;
    background:#000!important;
  }
  .screen{
    border:0!important;
    outline:0!important;
    box-shadow:
      inset 0 0 6px rgba(0,0,0,.9),
      inset 0 0 28px rgba(0,0,0,.82),
      inset 0 0 62px rgba(0,0,0,.34)!important;
  }

  .terminal-ui{
    grid-template-columns:210px minmax(0,1fr)!important;
    padding:0 24px 10px 28px!important;
  }
  .folders{
    padding-right:14px!important;
  }
  .menu-node{
    min-height:66px!important;
    padding:7px 8px!important;
    grid-template-columns:28px minmax(0,1fr) 16px!important;
  }
  .menu-node__copy b{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.02!important;
    font-size:clamp(12px,1vw,16px)!important;
  }
  .menu-node__copy small{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:9px!important;
  }

  .stage{
    display:grid!important;
    grid-template-columns:minmax(205px,260px) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    column-gap:14px!important;
    height:100%!important;
    min-height:0!important;
    padding-left:52px!important;
    overflow:hidden!important;
  }
  .subsystem{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  .subsystem>.section-label{
    height:28px!important;
    padding-bottom:5px!important;
  }
  .sub-menu{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 4px 3px 0!important;
  }
  .sub-node{
    width:100%!important;
    min-height:48px!important;
    flex:0 0 auto!important;
    padding:6px 9px!important;
    border-width:1px!important;
    background:rgba(1,10,4,.94)!important;
  }
  .sub-node.is-selected{
    background:rgba(0,121,42,.88)!important;
  }
  .sub-node b{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.05!important;
    font-size:clamp(12px,.9vw,15px)!important;
  }
  .sub-node small{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.05!important;
    font-size:9px!important;
    text-align:right!important;
  }
  .content-panel{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:18px 22px 24px!important;
    overflow:auto!important;
  }
  .content-panel::before{
    top:-18px!important;
    margin:-18px -22px 14px!important;
  }
  .content-inner{
    max-width:none!important;
  }
}

/* Connector trunk lives only in the gutter between FOLDERS and SUBSYSTEM.
   Opaque submenu cells prevent the branch line from showing through text. */
.connectors{
  z-index:2!important;
}
.subsystem,.content-panel{
  z-index:3!important;
}

/* No luminous outer ring: the curved glass falls directly into black. */
.bezel{
  background:#000!important;
}
.screen{
  border:0!important;
  outline:0!important;
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.9),
    inset 0 0 28px rgba(0,0,0,.82),
    inset 0 0 62px rgba(0,0,0,.34)!important;
}

/* JS owns the subtle field drift so it can vary speed and direction.
   Remove the previous metronomic CSS loop. */
.rolling-band{
  animation:none!important;
  top:var(--roll-y,-24%)!important;
}

/* Irregular tracking fault: one scan may go down, up, or two scans may
   converge toward the centre. */
.tracking-sweep{
  position:absolute!important;
  inset:0!important;
  height:auto!important;
  top:0!important;
  left:0!important;
  right:0!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:52!important;
}
.signal[data-tracking="true"] .tracking-sweep{
  opacity:1!important;
  animation:none!important;
}
.tracking-line{
  position:absolute;
  left:-4%;
  right:-4%;
  height:var(--scan-height,9%);
  opacity:0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(81,255,126,.06) 1px 3px,
      rgba(0,0,0,.17) 3px 5px
    ),
    linear-gradient(
      180deg,
      transparent 0,
      rgba(67,255,117,.03) 28%,
      rgba(190,255,207,.16) 43%,
      rgba(247,255,249,.42) 49%,
      rgba(58,255,109,.11) 53%,
      rgba(0,0,0,.30) 59%,
      transparent 100%
    );
  box-shadow:
    -1.6px 0 0 var(--fringe-blue),
    1.7px 0 0 var(--fringe-red),
    0 0 6px rgba(235,255,241,.27),
    0 5px 14px rgba(0,0,0,.20);
  filter:blur(.45px) contrast(1.04) brightness(var(--tracking-brightness,1.08));
  -webkit-filter:blur(.45px) contrast(1.04) brightness(var(--tracking-brightness,1.08));
  will-change:transform,top,bottom,opacity;
}
.tracking-line::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:49%;
  height:2px;
  background:rgba(241,255,245,.84);
  box-shadow:
    -1.25px 0 .2px var(--fringe-blue),
    1.35px 0 .2px var(--fringe-red),
    0 0 5px rgba(232,255,238,.48);
}

.tracking-sweep[data-mode="down"] .tracking-line--a{
  opacity:.94;
  top:-15%;
  transform:translate3d(var(--tracking-shift-a,0),0,0);
  animation:scan-down var(--tracking-duration,1s) steps(36,end) both;
}
.tracking-sweep[data-mode="up"] .tracking-line--a{
  opacity:.94;
  bottom:-15%;
  transform:translate3d(var(--tracking-shift-a,0),0,0);
  animation:scan-up var(--tracking-duration,1s) steps(36,end) both;
}
.tracking-sweep[data-mode="converge"] .tracking-line--a{
  opacity:.92;
  top:-15%;
  transform:translate3d(var(--tracking-shift-a,0),0,0);
  animation:scan-down-half var(--tracking-duration,1s) steps(30,end) both;
}
.tracking-sweep[data-mode="converge"] .tracking-line--b{
  opacity:.92;
  bottom:-15%;
  transform:translate3d(var(--tracking-shift-b,0),0,0);
  animation:scan-up-half var(--tracking-duration,1s) steps(30,end) both;
}
.tracking-sweep[data-mode="double"] .tracking-line--a{
  opacity:.92;
  top:-15%;
  animation:scan-down var(--tracking-duration,.8s) steps(30,end) both;
}

@keyframes scan-down{
  0%{top:-15%;transform:translate3d(var(--tracking-shift-a,0),0,0)}
  17%{transform:translate3d(calc(var(--tracking-shift-a,0) * -.45),0,0)}
  46%{transform:translate3d(calc(var(--tracking-shift-a,0) * .72),0,0)}
  73%{transform:translate3d(calc(var(--tracking-shift-a,0) * -.3),0,0)}
  100%{top:108%;transform:translate3d(0,0,0)}
}
@keyframes scan-up{
  0%{bottom:-15%;transform:translate3d(var(--tracking-shift-a,0),0,0)}
  21%{transform:translate3d(calc(var(--tracking-shift-a,0) * .58),0,0)}
  51%{transform:translate3d(calc(var(--tracking-shift-a,0) * -.62),0,0)}
  78%{transform:translate3d(calc(var(--tracking-shift-a,0) * .3),0,0)}
  100%{bottom:108%;transform:translate3d(0,0,0)}
}
@keyframes scan-down-half{
  0%{top:-15%;transform:translate3d(var(--tracking-shift-a,0),0,0)}
  100%{top:46%;transform:translate3d(0,0,0)}
}
@keyframes scan-up-half{
  0%{bottom:-15%;transform:translate3d(var(--tracking-shift-b,0),0,0)}
  100%{bottom:46%;transform:translate3d(0,0,0)}
}

/* Whole UI timebase movement must remain visible even with no interaction. */
.signal{
  will-change:transform,filter,opacity!important;
}


/* Final glass edge: no luminous outer outline, only black falloff. */
.screen::after{
  background:
    radial-gradient(
      ellipse at 50% 49%,
      transparent 0 78%,
      rgba(0,0,0,.20) 88%,
      rgba(0,0,0,.62) 96%,
      #000 100%
    )!important;
  mix-blend-mode:normal!important;
}
.screen{
  background:#000!important;
}

/* All iOS/WebKit uses the safe compositor path. SVG displacement currently
   renders unreliably in WebKit; raster/grain/registration/tracking remain on. */
html[data-crt-engine="ios-safe"] .signal{
  filter:brightness(var(--flicker)) contrast(1.035) saturate(.94)!important;
  -webkit-filter:brightness(var(--flicker)) contrast(1.035) saturate(.94)!important;
  transform:
    perspective(1100px)
    translate3d(var(--jitter-x),var(--jitter-y),0)
    scale(.992,.986)!important;
  -webkit-transform:
    perspective(1100px)
    translate3d(var(--jitter-x),var(--jitter-y),0)
    scale(.992,.986)!important;
}


/* === Cache-busted release watermark placement ===
   Keep the complete emblem + MAGIUS LINK wordmark visible in the upper-middle
   background instead of clipping LINK below the reader panel. */
@media(min-width:761px){
  .brand-watermark{
    inset:0!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    align-content:start!important;
    justify-items:center!important;
    justify-content:center!important;
    padding-top:34px!important;
    transform:none!important;
    opacity:.105!important;
    overflow:visible!important;
  }
  .brand-watermark .brand-emblem{
    width:min(20vw,260px)!important;
    max-height:280px!important;
  }
  .brand-wordmark{
    width:min(27vw,350px)!important;
    height:auto!important;
    margin-top:-10px!important;
    opacity:.78!important;
  }
}


/* === Analog correction: noise lives on emitted UI edges, not the whole tube. === */
:root{
  --glyph-jitter-x:0px;
  --glyph-jitter-y:0px;
  --blue-edge-x:-1px;
  --red-edge-x:1px;
}

/* Never translate the whole raster during idle. Curvature stays fixed. */
.signal{
  transform:none!important;
  -webkit-transform:none!important;
}
html[data-crt-engine="ios-safe"] .signal{
  transform:perspective(1100px) scale(.992,.986)!important;
  -webkit-transform:perspective(1100px) scale(.992,.986)!important;
}

/* Static physical scan lines. Temporal life comes from grain + line-local
   horizontal timing noise, not a moving wallpaper pattern. */
.scanlines{
  animation:none!important;
  opacity:.36!important;
  background:repeating-linear-gradient(
    0deg,
    rgba(3,0,1,.52) 0 1px,
    transparent 1px 2.7px
  )!important;
}

/* Remove the conspicuous continuous rolling band. */
.rolling-band{
  opacity:0!important;
  animation:none!important;
}

/* The emitted glyphs and hot edges carry the instability seen in the source. */
:is(
  .masthead__row h1,
  .masthead__node,
  .masthead__clock,
  .section-label,
  .menu-node__copy b,
  .menu-node__copy small,
  .sub-node b,
  .sub-node small,
  .content-kicker,
  .content-inner h2,
  .content-inner h3,
  .download-button,
  .statusbar
){
  transform:translate3d(var(--glyph-jitter-x),var(--glyph-jitter-y),0)!important;
  text-shadow:
    var(--blue-edge-x) 0 .18px var(--fringe-blue),
    var(--red-edge-x) 0 .18px var(--fringe-red),
    0 0 2px rgba(188,255,205,.13)!important;
  will-change:transform,text-shadow;
}

/* Paragraph text gets registration shimmer without physically walking around. */
.content-inner :is(p,li,code,td,th){
  text-shadow:
    calc(var(--blue-edge-x) * .55) 0 .12px rgba(63,197,255,.54),
    calc(var(--red-edge-x) * .55) 0 .12px rgba(255,54,88,.50)!important;
}

/* White selections shimmer on the phosphor edges, but their boxes stay put. */
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  transform:none!important;
  box-shadow:
    var(--blue-edge-x) 0 0 var(--fringe-blue),
    var(--red-edge-x) 0 0 var(--fringe-red),
    0 0 6px rgba(241,255,245,.24),
    0 0 11px rgba(93,244,126,.11)!important;
}
.connector-path.is-hot{
  filter:
    drop-shadow(var(--blue-edge-x) 0 .12px var(--fringe-blue))
    drop-shadow(var(--red-edge-x) 0 .12px var(--fringe-red))
    drop-shadow(0 0 2px rgba(255,255,255,.28))!important;
}

/* Occasional scan is a local timebase fault: low-contrast blur/phase strip,
   not a bright bar traversing the whole display. */
.tracking-line{
  opacity:0!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(105,255,143,.025) 0 1px,
      rgba(0,0,0,.075) 1px 3px
    )!important;
  box-shadow:none!important;
  filter:blur(.18px) contrast(1.025) brightness(var(--tracking-brightness,1.015))!important;
  -webkit-filter:blur(.18px) contrast(1.025) brightness(var(--tracking-brightness,1.015))!important;
  backdrop-filter:blur(.22px) contrast(1.025)!important;
  -webkit-backdrop-filter:blur(.22px) contrast(1.025)!important;
}
.tracking-line::after{
  height:1px!important;
  background:rgba(200,255,214,.18)!important;
  box-shadow:none!important;
}
.signal[data-tracking="true"] .tracking-line{
  opacity:.28!important;
}

/* Background branding: keep the complete emblem and complete LINK wordmark
   together in the visible upper-middle field. */
@media(min-width:761px){
  .brand-watermark{
    inset:auto!important;
    left:58%!important;
    top:43%!important;
    width:min(34vw,430px)!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
    opacity:.11!important;
  }
  .brand-watermark .brand-emblem{
    width:min(19vw,235px)!important;
    height:auto!important;
  }
  .brand-wordmark{
    width:min(29vw,365px)!important;
    height:auto!important;
    margin-top:-14px!important;
    opacity:.82!important;
  }
}
@media(max-width:760px){
  .brand-watermark{
    top:46%!important;
    opacity:.105!important;
  }
}


/* === PERFORMANCE MODE: static CRT optics, no continuous animation === */
.signal{
  transform:none!important;
  -webkit-transform:none!important;
  will-change:auto!important;
  filter:url("#crt-warp") brightness(.995) contrast(1.025) saturate(.94)!important;
  -webkit-filter:url("#crt-warp") brightness(.995) contrast(1.025) saturate(.94)!important;
}

/* Keep the CRT texture, but freeze it. */
.scanlines,
.tube-grain,
.phosphor-grid,
.boot__raster,
.boot__grain{
  animation:none!important;
  will-change:auto!important;
}
.tube-grain,
.boot__grain{
  opacity:.16!important;
}
.scanlines{
  opacity:.34!important;
  background:repeating-linear-gradient(
    0deg,
    rgba(3,0,1,.50) 0 1px,
    transparent 1px 2.8px
  )!important;
}
.phosphor-grid{opacity:.045!important}

/* Remove all continuous/random scan and fault layers. */
.rolling-band,
.tracking-sweep,
.tear-band,
.mouse-glow,
.boot__roll{
  display:none!important;
}

/* No text/glyph motion. Keep only a fixed low-amplitude registration fringe. */
:is(
  .masthead__row h1,
  .masthead__node,
  .masthead__clock,
  .section-label,
  .menu-node__copy b,
  .menu-node__copy small,
  .sub-node b,
  .sub-node small,
  .content-kicker,
  .content-inner h2,
  .content-inner h3,
  .download-button,
  .statusbar
){
  transform:none!important;
  will-change:auto!important;
  text-shadow:
    -1px 0 .15px rgba(63,197,255,.54),
    1px 0 .15px rgba(255,54,88,.50),
    0 0 1.8px rgba(188,255,205,.10)!important;
}
.content-inner :is(p,li,code,td,th){
  text-shadow:
    -.45px 0 .1px rgba(63,197,255,.30),
    .45px 0 .1px rgba(255,54,88,.28)!important;
}

/* Static edge treatment only. */
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  transform:none!important;
  box-shadow:
    -1px 0 0 rgba(63,197,255,.54),
    1px 0 0 rgba(255,54,88,.50),
    0 0 5px rgba(241,255,245,.18)!important;
}
.connector-path.is-hot{
  filter:
    drop-shadow(-1px 0 .1px rgba(63,197,255,.50))
    drop-shadow(1px 0 .1px rgba(255,54,88,.46))!important;
}

/* Boot stays visually CRT-like but no longer animates grain/roll/jitter. */
.boot__signal,
.boot__grain,
.boot__roll,
.boot__loading i{
  animation:none!important;
  will-change:auto!important;
}
.boot__roll{display:none!important}
.boot__signal{
  transform:none!important;
}



/* === STATIC LOW-FIDELITY RESTORATION ===
   Keep the soft analog texture without bringing back continuous motion. */
.signal{
  filter:url("#crt-warp") brightness(1.035) contrast(1.035) saturate(.84)!important;
  -webkit-filter:url("#crt-warp") brightness(1.035) contrast(1.035) saturate(.84)!important;
}

/* Static emulsion/grain texture: stronger than the performance pass, but no
   background-position animation and no JS redraw loop. */
.tube-grain,
.boot__grain{
  opacity:.27!important;
  mix-blend-mode:screen!important;
  animation:none!important;
  will-change:auto!important;
  filter:sepia(.08) hue-rotate(31deg) saturate(.76) contrast(1.05)!important;
  -webkit-filter:sepia(.08) hue-rotate(31deg) saturate(.76) contrast(1.05)!important;
}
.scanlines{
  opacity:.54!important;
  animation:none!important;
  background:repeating-linear-gradient(
    0deg,
    rgba(1,0,1,.58) 0 1px,
    rgba(0,0,0,.10) 1px 1.55px,
    transparent 1.55px 2.85px
  )!important;
}
.phosphor-grid{
  opacity:.062!important;
  animation:none!important;
  mix-blend-mode:soft-light!important;
}

/* Tube glass stays soft and dirty, with dark edge falloff instead of an outer
   luminous ring. */
.screen::before{
  background:
    radial-gradient(ellipse at 50% 47%,
      transparent 27%,
      rgba(0,0,0,.018) 48%,
      rgba(0,0,0,.13) 72%,
      rgba(0,0,0,.39) 91%,
      rgba(0,0,0,.74) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.34),
      transparent 9% 91%,
      rgba(0,0,0,.36))!important;
  box-shadow:
    inset 0 0 3px rgba(214,238,219,.10),
    inset 0 0 22px rgba(0,0,0,.70),
    inset 0 0 68px rgba(0,0,0,.30)!important;
}
.screen::after{
  background:
    radial-gradient(ellipse at 50% 50%,
      transparent 0 80%,
      rgba(0,0,0,.17) 88%,
      rgba(0,0,0,.52) 96%,
      #000 100%)!important;
}

/* Restore the slight phosphor bloom/soft registration on emitted UI only.
   Nothing moves: this is entirely static. */
:is(
  .masthead__row h1,
  .masthead__node,
  .masthead__clock,
  .section-label,
  .menu-node__copy b,
  .menu-node__copy small,
  .sub-node b,
  .sub-node small,
  .content-kicker,
  .content-inner h2,
  .content-inner h3,
  .download-button,
  .statusbar
){
  transform:none!important;
  text-shadow:
    -1.10px 0 .22px rgba(73,196,255,.60),
    1.18px 0 .22px rgba(255,62,91,.57),
    0 0 2.7px rgba(193,255,210,.18)!important;
}
.content-inner :is(p,li,code,td,th){
  text-shadow:
    -.52px 0 .14px rgba(73,196,255,.34),
    .56px 0 .14px rgba(255,62,91,.32),
    0 0 1.1px rgba(210,255,220,.08)!important;
}
.menu-node.is-selected,
.sub-node.is-selected,
.download-button{
  transform:none!important;
  box-shadow:
    -1.1px 0 0 rgba(73,196,255,.61),
    1.2px 0 0 rgba(255,62,91,.58),
    0 0 5px rgba(243,255,246,.22),
    0 0 10px rgba(104,239,132,.10)!important;
}
.connector-path.is-hot{
  filter:
    drop-shadow(-1px 0 .12px rgba(73,196,255,.55))
    drop-shadow(1.05px 0 .12px rgba(255,62,91,.52))
    drop-shadow(0 0 2px rgba(255,255,255,.20))!important;
}

/* Preserve performance decision: absolutely no continuous scan/jitter/fault
   animations are allowed back in. */
.rolling-band,
.tracking-sweep,
.tear-band,
.mouse-glow,
.boot__roll{
  display:none!important;
}
.scanlines,
.tube-grain,
.phosphor-grid,
.boot__raster,
.boot__grain,
.boot__signal,
.boot__loading i{
  animation:none!important;
  will-change:auto!important;
}

/* Static phone texture; the same lens remains enabled at every breakpoint. */
@media(max-width:760px){
  .tube-grain,.boot__grain{opacity:.24!important}
  .scanlines{opacity:.49!important}
  .phosphor-grid{opacity:.052!important}
}

/* Opt-in iOS composition trial. Static materials and the single root lens are
   unchanged. Accelerated descendant transitions can escape SVG URL filters
   (WebKit 219729), so the trial paints their final state in the root instead. */
html[data-ios-paint-scroll="true"] .signal,
html[data-ios-paint-scroll="true"] .signal *{
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  scroll-behavior:auto!important;
}