:root{
  --f4e-bg:#11110f;
  --f4e-ink:#d8d2c9;
  --f4e-muted:#8f8a82;
  --f4e-dim:#5b5853;
  --f4e-line:rgba(216,210,201,.22);
}

html,body{
  margin:0!important;
  padding:0!important;
  width:100%;
  min-height:100%;
  background:var(--f4e-bg)!important;
}

body{
  overflow:hidden;
  color:var(--f4e-ink);
}

body.admin-bar .f4e-home{
  height:calc(100svh - 32px);
}

.f4e-home{
  position:relative;
  width:100vw;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.035),transparent 24%),
    radial-gradient(circle at 50% 52%,#171715 0,#11110f 58%,#0b0b0a 100%);
  font-family:"Courier New","SFMono-Regular",Consolas,monospace;
  letter-spacing:.04em;
}

.f4e-atmosphere,.f4e-glow,.f4e-scanline,.f4e-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.f4e-atmosphere{z-index:0}
.f4e-glow{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(208,200,189,.055) 0,rgba(208,200,189,.018) 28%,transparent 58%);
  opacity:.9;
}

.f4e-grain{
  opacity:.11;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E");
}

.f4e-scanline{
  height:18%;
  top:-22%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.025),transparent);
  animation:f4e-scan 8s linear infinite;
  opacity:.55;
}

@keyframes f4e-scan{
  to{transform:translateY(720%)}
}

.f4e-intro{
  position:absolute;
  inset:0;
  z-index:2;
}

.f4e-logo-shell{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(280px,39vw,560px);
  transform:translate(-50%,-56%);
  transform-origin:center center;
  transition:
    left 1.425s cubic-bezier(.2,.82,.2,1),
    top 1.425s cubic-bezier(.2,.82,.2,1),
    width 1.425s cubic-bezier(.2,.82,.2,1),
    transform 1.425s cubic-bezier(.2,.82,.2,1),
    opacity .675s ease;
  will-change:left,top,width,transform;
}

.f4e-logo{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.f4e-stone{
  fill:url(#f4eStone);
  filter:url(#f4eTexture);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scaleY(.04);
}

.f4e-symbol,
.f4e-detail{
  fill:none;
  stroke:#171715;
  stroke-width:4;
  stroke-linecap:square;
  stroke-linejoin:miter;
  opacity:0;
}

.f4e-symbol{
  fill:#171715;
  stroke-width:2;
}

.f4e-baseline path{
  fill:none;
  stroke:#b8b1a8;
  stroke-width:5;
  stroke-linecap:square;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
}

.f4e-home.is-booting .f4e-baseline path{
  animation:f4e-drawline .9s .27s forwards cubic-bezier(.2,.8,.2,1);
}

.f4e-home.is-booting .f4e-pillar-3 .f4e-stone{
  animation:f4e-rise 1.08s 1.11s forwards cubic-bezier(.16,.84,.2,1);
}
.f4e-home.is-booting .f4e-pillar-2 .f4e-stone{
  animation:f4e-rise .99s 1.47s forwards cubic-bezier(.16,.84,.2,1);
}
.f4e-home.is-booting .f4e-pillar-4 .f4e-stone{
  animation:f4e-rise .99s 1.59s forwards cubic-bezier(.16,.84,.2,1);
}
.f4e-home.is-booting .f4e-pillar-1 .f4e-stone{
  animation:f4e-rise .93s 1.92s forwards cubic-bezier(.16,.84,.2,1);
}
.f4e-home.is-booting .f4e-pillar-5 .f4e-stone{
  animation:f4e-rise .93s 2.04s forwards cubic-bezier(.16,.84,.2,1);
}

.f4e-home.is-booting .f4e-detail,
.f4e-home.is-booting .f4e-symbol{
  animation:f4e-detail-in .63s 2.67s forwards ease-out;
}

@keyframes f4e-drawline{
  from{stroke-dashoffset:1;opacity:0}
  to{stroke-dashoffset:0;opacity:1}
}

@keyframes f4e-rise{
  0%{opacity:0;transform:scaleY(.04);filter:brightness(.45)}
  18%{opacity:.4}
  100%{opacity:1;transform:scaleY(1);filter:brightness(1)}
}

@keyframes f4e-detail-in{
  from{opacity:0}
  to{opacity:1}
}

.f4e-copy{
  position:absolute;
  left:50%;
  top:57.8%;
  width:min(900px,88vw);
  text-align:center;
  transform:translate(-50%,16px);
  opacity:0;
  transition:
    opacity 1.275s ease,
    transform 1.275s cubic-bezier(.2,.8,.2,1);
}

.f4e-copy h1{
  margin:0;
  color:#cbc5bc;
  font-family:"Courier New","SFMono-Regular",Consolas,monospace;
  font-size:clamp(18px,2.15vw,34px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.19em;
  text-transform:uppercase;
  white-space:nowrap;
}

.f4e-subline{
  margin:18px 0 0;
  color:#8c8780;
  font-size:clamp(9px,.85vw,13px);
  font-weight:400;
  letter-spacing:.38em;
  text-transform:lowercase;
}

.f4e-subline span{
  margin:0 .7em;
  color:#5f5b55;
}

.f4e-choices{
  position:absolute;
  left:50%;
  top:70.5%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transform:translate(-50%,12px);
  opacity:0;
  transition:opacity 1.05s ease,transform 1.05s ease;
}

.f4e-choices a{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:8px;
  align-items:center;
  width:128px;
  color:#8b867f;
  text-decoration:none!important;
  text-transform:lowercase;
  font-size:clamp(9px,.72vw,11px);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.17em;
  transition:color .28s ease,letter-spacing .28s ease,opacity .28s ease;
}

.f4e-choices a span{
  color:#5d5954;
  transition:color .28s ease;
}

.f4e-choices a .f4e-choice-label{
  justify-self:end;
  margin-left:0;
  color:inherit;
  text-align:right;
}

.f4e-choices a .f4e-keycap{
  justify-self:start;
  margin-left:0;
}

.f4e-choices [data-entry="index"] .f4e-keycap{
  min-width:23px;
  width:23px;
  padding:0;
}

.f4e-choices .f4e-keycap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:46px;
  height:23px;
  margin-left:.65em;
  padding:0 7px;
  border:1px solid rgba(170,164,156,.72);
  border-radius:3px;
  color:#aaa49c;
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}

.f4e-choices a::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:0;
  height:1px;
  background:#aaa49c;
  transform:translateY(-50%);
  transition:width .28s ease;
}

.f4e-choices a:hover,
.f4e-choices a:focus-visible{
  color:#d5cfc6;
  letter-spacing:.205em;
  outline:none;
}

.f4e-choices a:hover span,
.f4e-choices a:focus-visible span{
  color:#aaa49c;
}

.f4e-choices a:hover::before,
.f4e-choices a:focus-visible::before{
  width:10px;
}

.f4e-corner-note{
  position:absolute;
  bottom:26px;
  z-index:2;
  color:#4b4844;
  font-size:8px;
  letter-spacing:.15em;
  opacity:0;
  transition:opacity 1.2s ease 6.75s;
  text-transform:uppercase;
}

.f4e-note-left{left:30px}
.f4e-note-right{right:30px;text-align:right}

.f4e-home.is-titled .f4e-logo-shell{
  top:39%;
  transform:translate(-50%,-56%) scale(.79);
}

.f4e-home.is-titled .f4e-copy{
  opacity:1;
  transform:translate(-50%,0);
}

.f4e-home.is-ready .f4e-choices{
  opacity:1;
  transform:translate(-50%,0);
}

.f4e-home.is-ready .f4e-corner-note{
  opacity:1;
}

.f4e-home.is-exiting .f4e-copy,
.f4e-home.is-exiting .f4e-choices,
.f4e-home.is-exiting .f4e-corner-note{
  opacity:0;
  transform:translate(-50%,-10px);
  transition-duration:.34s;
}

.f4e-home.is-exiting .f4e-corner-note{
  transform:none;
}

.f4e-home.is-exiting .f4e-logo-shell{
  left:clamp(20px,3vw,46px);
  top:clamp(18px,3.2vh,34px);
  width:clamp(86px,9vw,128px);
  transform:translate(0,0);
}

.f4e-home.is-exiting::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(circle at 8% 8%,rgba(255,255,255,.018),transparent 26%);
  opacity:0;
  animation:f4e-transition-wash .88s .15s forwards ease;
  pointer-events:none;
}

@keyframes f4e-transition-wash{
  to{opacity:1}
}

@media(max-width:780px){
  body.admin-bar .f4e-home{height:calc(100svh - 46px)}
  .f4e-logo-shell{width:min(76vw,420px);transform:translate(-50%,-58%)}
  .f4e-home.is-titled .f4e-logo-shell{top:38%;transform:translate(-50%,-58%) scale(.84)}
  .f4e-copy{top:57.5%;width:92vw}
  .f4e-copy h1{font-size:clamp(15px,4.2vw,21px);letter-spacing:.105em}
  .f4e-subline{margin-top:14px;font-size:9px;letter-spacing:.3em}
  .f4e-choices{top:69.5%}
  .f4e-choices a{font-size:10px}
  .f4e-corner-note{bottom:18px;font-size:6px}
  .f4e-note-left{left:18px}.f4e-note-right{right:18px}
  .f4e-home.is-exiting .f4e-logo-shell{
    left:18px;
    top:18px;
    width:86px;
    transform:translate(0,0);
  }
}

@media(max-width:480px){
  .f4e-copy h1{
    white-space:normal;
    max-width:88vw;
    margin:0 auto;
    line-height:1.35;
  }
  .f4e-copy{top:57%}
  .f4e-choices{top:69%}
  .f4e-note-right{display:none}
}

@media(prefers-reduced-motion:reduce){
  .f4e-scanline{animation:none}
  .f4e-stone{opacity:1!important;transform:none!important;animation:none!important}
  .f4e-detail,.f4e-symbol{opacity:1!important;animation:none!important}
  .f4e-baseline path{opacity:1!important;stroke-dashoffset:0!important;animation:none!important}
  .f4e-logo-shell,.f4e-copy,.f4e-choices,.f4e-corner-note{transition-duration:.01ms!important}
}