/* eeee.mu shared chrome (header, menu panel, footer), copied VERBATIM from https://eeee.mu/style.css on 2026-09-26
   by tools/extract-estate.py, so /20 wears the estate's nav without the homepage's loader/field/3D scene. Don't hand-edit: re-extract. */
:root{--ease:cubic-bezier(.19,1,.22,1);--line:rgba(247,247,242,.08);--mono:'Space Mono', monospace;--muted:rgba(247,247,242,.36);--red:#ff3b30;--section-lift:0px;--soft:rgba(247,247,242,.66);--text:#f7f7f2}
@keyframes eqBar{
  0%, 100% { height: 3px;  opacity: .5; }
  50%       { height: 13px; opacity: 1; }
}
body.menu-open{overflow: hidden;}
body.menu-open #cursor-spirit,
body:not(.loader-done) #cursor-spirit{opacity: 0; pointer-events: none;}
body.menu-open .menu-panel,
body.menu-open .menu-panel a,
body.menu-open .menu-panel button{cursor: auto !important;}
body.menu-open .menu-panel a,
body.menu-open .menu-panel button{cursor: pointer !important;}
.site-header{position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 190;          
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 28px;
  pointer-events: none;}
.header-actions{position: fixed;
  top: 20px;
  right: 28px;
  z-index: 221;
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;}
.menu-btn,
.electro-btn,
.stop-music-btn{display: flex;
  align-items: center;
  color: var(--red);
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1.5px solid var(--red);
  border-radius: 8px;
  background: transparent;
  transition: color .2s, border-color .2s, background .2s;}
.menu-btn:hover,
.electro-btn:hover,
.electro-btn[aria-pressed="true"]{background: rgba(255,59,48,.08); color: var(--red); border-color: var(--red);}
body.menu-open .menu-btn{color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.2); background: transparent;}
.menu-btn-label{transition: color .2s;}
.header-coords{position: fixed;
  top: 31px;
  left: 50%;
  z-index: 220;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.32);
  text-transform: lowercase;
  white-space: nowrap;}
.site-logo{justify-self: start;       
  position: fixed;
  top: 20px;
  left: 28px;
  z-index: 220;
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  width: 48px;
  height: 48px;
  transform: none !important;
  translate: none !important;}
.site-logo img{height: 46px;
  width: auto;
  display: block;
  opacity: .82;
  transition: opacity .2s;}
.site-logo:hover img{opacity: 1;}
.footer-loc{font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .12em;
  color: rgba(245,245,242,.28);
  text-transform: lowercase;}
.menu-panel{position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(4,4,4,.98);
  transform: translateY(-105%);
  visibility: hidden;
  overflow-y: auto;
  transition: transform .62s var(--ease), visibility 0s linear .62s;
  cursor: default;}
body.menu-open .menu-panel{transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;}
.menu-panel::before{content: '';
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  opacity: 0;
  transition: opacity .5s var(--ease) .3s;
  z-index: 2;
  pointer-events: none;}
body.menu-open .menu-panel::before{opacity: .7;}
.menu-panel-inner{display: grid;
  grid-template-columns: 1fr .88fr .92fr;
  gap: 0;
  min-height: 80svh;
  padding: 100px 40px 52px;
  pointer-events: none;}
.menu-panel-inner a,
.menu-panel-inner button,
.menu-panel-inner input,
.menu-col{pointer-events: all;}
.menu-col{border-top: 1px solid rgba(255,59,48,.22);
  padding-top: 24px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;}
.menu-col:not(:first-child){border-left: 1px solid rgba(255,59,48,.16);
  padding-left: 40px;}
.menu-kicker{display: block;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  opacity: .55;}
.menu-nav{display: grid;
  gap: 2px;}
.menu-nav a{display: block;
  width: fit-content;
  font-size: clamp(1.9rem, 3.8vw, 3.8rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: rgba(245,245,242,.38);
  position: relative;
  transition: color .25s var(--ease), transform .25s var(--ease);}
.menu-nav a::after{display: none;
  content: none;}
.menu-nav a:hover{color: var(--red); transform: translateX(10px);}
.menu-nav a:hover::after{transform: none;}
.menu-list{display: grid;
  gap: 12px;
  margin-bottom: 28px;}
.menu-group{margin-top: 4px;}
.menu-subkicker{display: block;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,59,48,.52);}
.menu-list a{display: block;
  font-size: 1.12rem;
  font-weight: 300;
  color: rgba(245,245,242,.45);
  text-transform: lowercase;
  transition: color .2s var(--ease), transform .2s var(--ease);}
.menu-list a:hover{color: var(--text); transform: translateX(6px);}
.menu-feature-card{display: block;
  position: relative;
  overflow: hidden;
  flex: 1;
  max-height: 220px;
  margin-top: auto;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.06);}
.menu-feature-card img{width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.7) grayscale(.2);
  transition: filter .4s var(--ease), transform .5s var(--ease);}
.menu-feature-card:hover img{filter: brightness(.9); transform: scale(1.04);}
.menu-feature-label{position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: rgba(0,0,0,.82);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);}
.menu-feature-label span:last-child{color: rgba(255,255,255,.9);}
.menu-radio-row{display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #050505;
  text-decoration: none;
  border: 1px solid var(--red);
  background: var(--red);
  padding: 10px 16px;
  transition: border-color .22s, color .22s, background .22s;
  cursor: pointer;}
.menu-radio-row strong,
.menu-radio-row small{display: block;
  font: inherit;}
.menu-radio-row small{margin-top: 4px;
  font-size: .46rem;
  letter-spacing: .12em;
  color: rgba(0,0,0,.54);}
.menu-radio-row:hover{border-color: var(--text);
  color: #050505;
  background: var(--text);}
.menu-radio-eq{display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;}
.menu-radio-eq span{display: block;
  width: 3px;
  background: #050505;
  border-radius: 1px;
  animation: eqBar 1.1s ease-in-out infinite;
  transform-origin: bottom;}
.menu-radio-eq span:nth-child(1){animation-duration: 1.0s; animation-delay: 0s;}
.menu-radio-eq span:nth-child(2){animation-duration: 0.7s; animation-delay: -.3s;}
.menu-radio-eq span:nth-child(3){animation-duration: 1.3s; animation-delay: -.6s;}
.menu-radio-eq span:nth-child(4){animation-duration: 0.9s; animation-delay: -.1s;}
.menu-since{margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: rgba(255,255,255,.16);}
.menu-808-btn{display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid var(--red);
  border-radius: 4px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background .25s var(--ease), transform .15s var(--ease);
  background: var(--red);}
.menu-808-btn::before{content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .25s var(--ease);}
.menu-808-btn:hover::before{opacity: 0;}
.menu-808-btn:hover{transform: translateY(-1px); background: var(--text); border-color: var(--text);}
.menu-808-label{display: block;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: #050505;
  position: relative;}
.menu-808-sub{display: block;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: rgba(0,0,0,.54);
  position: relative;
  transition: color .2s;}
.menu-808-btn:hover .menu-808-sub{color: rgba(0,0,0,.72); opacity: 1;}
@media (max-width: 900px){
  .menu-panel-inner{grid-template-columns: 1fr .9fr;
    padding: 88px 28px 48px;
    min-height: auto;}
  .menu-col:last-child{grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-left: 0;
    padding-top: 24px;
    margin-top: 4px;}
  .menu-feature-card{max-height: 160px;}
}
@media (max-width: 600px){
  .menu-panel-inner{grid-template-columns: 1fr; padding: 80px 20px 40px;}
  .menu-col:not(:first-child){border-left: none; border-top: 1px solid rgba(255,255,255,.06); padding-left: 0; padding-top: 20px; margin-top: 4px;}
  .menu-nav a{font-size: clamp(1.7rem, 7vw, 2.8rem);}
  .menu-since{padding-top: 16px;}
}
@media (max-width: 760px){
  .header-coords{display: none;}
  .site-logo{top: 20px; left: 20px;}
  .header-actions{right: 20px; gap: 6px;}
  .menu-btn,
  .electro-btn,
  .stop-music-btn{font-size: .42rem;
    letter-spacing: .12em;
    padding: 7px 10px;}
}
.site-footer{position: relative;
  z-index: 2;
  padding: 82px clamp(32px, 4vw, 64px) 28px;
  border-top: 1px solid var(--line);
  background: rgba(4,4,4,.97);
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) repeat(3, minmax(160px, .8fr));
  grid-template-rows: auto auto;
  gap: 0 clamp(28px, 4vw, 64px);
  align-items: start;
  overflow: hidden;
  transform: translateY(var(--section-lift, 0px));}
.footer-brand{display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-bottom: 56px;}
.footer-tagline{margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 300;
  color: var(--soft);
  text-transform: lowercase;
  letter-spacing: .01em;}
.footer-coords{margin: 0;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: lowercase;}
.footer-status{margin: 12px 0 0;
  width: fit-content;
  border: 1px solid rgba(255,59,48,.45);
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .14em;
  color: var(--red);
  text-transform: lowercase;}
.footer-pronunciation{margin-top: 28px;
  max-width: 36ch;}
.footer-pronunciation strong{display: block;
  font-family: var(--mono);
  font-size: 4.6rem;
  line-height: .88;
  letter-spacing: 0;
  color: var(--red);
  text-transform: lowercase;}
.footer-pronunciation em{display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .14em;
  color: rgba(245,245,242,.46);
  text-transform: lowercase;}
.footer-pronunciation p{margin: 16px 0 0;
  color: rgba(245,245,242,.38);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.55;
  text-transform: lowercase;}
.footer-col{display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-bottom: 56px;
  border-left: 1px solid var(--line);
  padding-left: 24px;}
.footer-kicker{font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin-bottom: 6px;
  display: block;}
.footer-col a{font-size: .84rem;
  font-weight: 300;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: .01em;
  transition: color .2s, transform .2s var(--ease);
  display: block;
  width: fit-content;}
.footer-col a:hover{color: var(--text); transform: translateX(4px);}
.footer-note{margin-top: 6px;
  max-width: 26ch;
  color: rgba(245,245,242,.25);
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.5;
  text-transform: lowercase;}
.footer-disclaimer{margin-top: 18px;
  max-width: 34ch;
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .08em;
  line-height: 1.55;
  color: rgba(245,245,242,.26);
  text-transform: lowercase;}
.footer-bar{grid-column: 1 / -1;
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: rgba(255,255,255,.18);}
.footer-bar a{color: rgba(245,245,242,.38);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s;}
.footer-bar a:hover{color: var(--red);}
@media (max-width: 900px){
  .site-footer{grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    padding: 56px 28px 24px;}
  .footer-brand{grid-column: 1 / -1;}
  .footer-col{border-left: none; padding-left: 0;}
  .home-body .site-footer{min-height: auto;
    grid-template-rows: auto;}
}
@media (max-width: 560px){
  .site-footer{grid-template-columns: 1fr;}
  .footer-bar{flex-direction: column; gap: 6px; text-align: center;}
  .footer-pronunciation strong{font-size: 3rem;}
}
@media (max-width: 620px){
  .site-footer{padding: 48px 20px 24px;}
  .header-coords{display: none;}
}
.home-body .site-footer{min-height: 92vh;
  grid-template-rows: minmax(0, 1fr) auto;}
.site-logo{transition: opacity .45s ease;}
body.logo-hidden .site-logo{opacity: 0; pointer-events: none;}
/* eeee.mu base rules the chrome relies on (style.css: a{text-decoration:none} button{border:0;background:transparent;padding:0}) */
:where(.site-header,.menu-panel,.site-footer) a,:where(.site-logo){text-decoration:none}
:where(.site-header,.menu-panel) button{border:0;background:transparent;padding:0}