/* SCAPE intro — generated by build.py from src/. Do not hand-edit.
   Everything here is scoped to .stage; see scape-page.css for the shell. */
.stage{
  --splash-duration:4s; --splash-ease:ease-in-out; --lift:38px;
  --ui-dur:.8s; --ui-delay:3.2s;
  position:relative; min-height:100vh; min-height:100dvh; overflow:hidden;
  background:#000; color:rgb(223,219,219);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.stage header *, .stage main *{transition:2s}

.stage header{
  position:absolute; z-index:21; top:0; left:0; right:0; height:48px;
  border-bottom:1px solid #fff; background:#000; display:flex; align-items:center;
  opacity:0; animation:k-ui var(--ui-dur) linear var(--ui-delay) forwards;
}
.stage main{position:relative; z-index:1; margin:64px 16px}

.search-container{display:flex;align-items:center;margin-left:24px;position:relative;flex:1;max-width:400px}
.search-wrapper{position:relative;width:100%;display:flex;align-items:center;background:#000;border:1px solid rgba(255,255,255,.3);height:33px;transition:all .3s ease}
.search-wrapper:focus-within{border-color:#fff;box-shadow:0 0 0 1px #fff}
.search-input{background:transparent;border:none;color:rgb(223,219,219);font-weight:300;font-size:14px;padding:8px 16px;flex:1;outline:none;height:100%}
.search-input::placeholder{color:rgba(223,219,219,.4);font-weight:100}
.search-icon{padding:8px 16px;color:rgba(223,219,219,.6)}
.header-right{display:flex;align-items:center;margin-left:auto}
#accountButton{padding:11px 24px;cursor:pointer;font-size:14px;font-weight:500}
#accountButton:hover{background:rgba(255,255,255,.1)}

.logoBox{position:absolute;inset:0;pointer-events:none;user-select:none}
.logo{
  /* The mark is 112 + 32 padding + 32 border = 176x144. That arithmetic only
     holds under content-box, so state it — a host page with the usual
     `*{box-sizing:border-box}` reset would otherwise collapse the mark to
     112x80 and desync it from the ascii field. */
  box-sizing:content-box;
  position:absolute; top:50vh; left:50%; padding:16px; border:0 solid #fff;
  transform:translate(-16px,-16px);
  animation-name:k-draw-logo; animation-duration:var(--splash-duration);
  animation-fill-mode:forwards; animation-timing-function:var(--splash-ease);
}
.logo>div{
  box-sizing:content-box;
  position:absolute; background:#fff; height:16px; color:transparent;
  animation-duration:var(--splash-duration); animation-fill-mode:forwards;
  animation-timing-function:var(--splash-ease);
}
.el1{top:16px;left:16px;animation-name:k-draw-el1}
.el2{bottom:16px;right:16px;animation-name:k-draw-el2}
.el3{width:16px;animation-name:k-draw-el3}
.el4{width:16px;bottom:16px;right:16px;animation-name:k-draw-el4}
.el5{top:48px;left:48px;width:16px;height:16px;animation-name:k-draw-el5}
.el6{top:48px;right:48px;width:16px;height:16px;z-index:11;animation-name:k-draw-el6}

.intro{
  width:30%; position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  opacity:0; animation:k-ui var(--ui-dur) linear var(--ui-delay) forwards;
}
.button{
  background:#fff;color:#000;text-align:center;width:100%;margin:24px auto;padding:10px 24px;
  box-sizing:border-box;border:none;font-weight:500;cursor:pointer;text-transform:uppercase;
  letter-spacing:.08em;position:relative;overflow:hidden;transition:all .3s ease;
}
.button:hover{background:rgba(255,255,255,.95);transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,255,255,.2)}
.button:active{transform:translateY(0)}
.button .label{text-align:center;font-size:14px;margin:6px;position:relative;z-index:1}

@keyframes k-ui{from{opacity:0}to{opacity:1}}

/* ---- style: DRAW (the current production sequence) ---- */
@keyframes k-draw-logo{
  0%{width:0;height:0;border-width:0;transform:translate(-16px,-16px)}
  10%{width:112px;height:80px;border-width:16px;transform:translate(-88px,-72px)}
  80%{transform:translate(-88px,-72px)}
  100%{width:112px;height:80px;border-width:16px;transform:translate(-88px,calc(-72px - var(--lift)))}
}
@keyframes k-draw-el1{0%,10%{width:0}40%{width:112px}80%{color:transparent}100%{width:112px;color:#000}}
@keyframes k-draw-el2{0%,10%{width:0}40%,100%{width:112px}}
@keyframes k-draw-el3{0%,40%{height:0}50%,100%{height:48px}}
@keyframes k-draw-el4{0%,40%{height:0}50%,100%{height:48px}}
@keyframes k-draw-el5{0%,50%{opacity:0}60%,100%{opacity:1}}
@keyframes k-draw-el6{0%,60%{opacity:0}70%,100%{opacity:1}}

/* ---- style: SNAP — every part arrives instantly, no growth ---- */
.stage[data-style="snap"] .logo{animation-name:k-snap-logo}
.stage[data-style="snap"] .el1{animation-name:k-snap-el1}
.stage[data-style="snap"] .el2{animation-name:k-snap-el2}
.stage[data-style="snap"] .el3{animation-name:k-snap-el3}
.stage[data-style="snap"] .el4{animation-name:k-snap-el4}
.stage[data-style="snap"] .el5{animation-name:k-snap-el5}
.stage[data-style="snap"] .el6{animation-name:k-snap-el6}
@keyframes k-snap-logo{
  0%,9.9%{width:0;height:0;border-width:0;transform:translate(-16px,-16px)}
  10%,80%{width:112px;height:80px;border-width:16px;transform:translate(-88px,-72px)}
  100%{width:112px;height:80px;border-width:16px;transform:translate(-88px,calc(-72px - var(--lift)))}
}
@keyframes k-snap-el1{0%,39.9%{width:0}40%,80%{width:112px;color:transparent}100%{width:112px;color:#000}}
@keyframes k-snap-el2{0%,39.9%{width:0}40%,100%{width:112px}}
@keyframes k-snap-el3{0%,49.9%{height:0}50%,100%{height:48px}}
@keyframes k-snap-el4{0%,54.9%{height:0}55%,100%{height:48px}}
@keyframes k-snap-el5{0%,59.9%{opacity:0}60%,100%{opacity:1}}
@keyframes k-snap-el6{0%,69.9%{opacity:0}70%,100%{opacity:1}}

/* ---- style: FADE — full geometry, staggered dissolve ---- */
.stage[data-style="fade"] .logo{animation-name:k-fade-logo}
.stage[data-style="fade"] .el1{animation-name:k-fade-el1}
.stage[data-style="fade"] .el2{animation-name:k-fade-el2}
.stage[data-style="fade"] .el3{animation-name:k-fade-el3}
.stage[data-style="fade"] .el4{animation-name:k-fade-el4}
.stage[data-style="fade"] .el5{animation-name:k-fade-el5}
.stage[data-style="fade"] .el6{animation-name:k-fade-el6}
@keyframes k-fade-logo{
  0%{width:112px;height:80px;border-width:16px;border-color:rgba(255,255,255,0);transform:translate(-88px,-72px)}
  30%,80%{border-color:#fff;transform:translate(-88px,-72px)}
  100%{width:112px;height:80px;border-width:16px;border-color:#fff;transform:translate(-88px,calc(-72px - var(--lift)))}
}
@keyframes k-fade-el1{0%,30%{width:112px;opacity:0}45%{opacity:1}80%{color:transparent}100%{width:112px;opacity:1;color:#000}}
@keyframes k-fade-el2{0%,35%{width:112px;opacity:0}50%,100%{width:112px;opacity:1}}
@keyframes k-fade-el3{0%,45%{height:48px;opacity:0}58%,100%{height:48px;opacity:1}}
@keyframes k-fade-el4{0%,50%{height:48px;opacity:0}62%,100%{height:48px;opacity:1}}
@keyframes k-fade-el5{0%,55%{opacity:0}68%,100%{opacity:1}}
@keyframes k-fade-el6{0%,62%{opacity:0}75%,100%{opacity:1}}

/* ---- style: IRIS — finished mark scales up with a small overshoot ---- */
.stage[data-style="iris"] .logo{animation-name:k-iris-logo}
.stage[data-style="iris"] .el1{animation-name:k-static-el1}
.stage[data-style="iris"] .el2{animation-name:k-static-w}
.stage[data-style="iris"] .el3,.stage[data-style="iris"] .el4{animation-name:k-static-h}
.stage[data-style="iris"] .el5,.stage[data-style="iris"] .el6{animation-name:k-static-o}
@keyframes k-iris-logo{
  0%{width:112px;height:80px;border-width:16px;opacity:0;transform:translate(-88px,-72px) scale(.12)}
  18%{opacity:1}
  55%{transform:translate(-88px,-72px) scale(1.07)}
  72%,80%{opacity:1;transform:translate(-88px,-72px) scale(1)}
  100%{width:112px;height:80px;border-width:16px;opacity:1;transform:translate(-88px,calc(-72px - var(--lift))) scale(1)}
}
@keyframes k-static-el1{0%{width:112px}80%{color:transparent}100%{width:112px;color:#000}}
@keyframes k-static-w{0%,100%{width:112px}}
@keyframes k-static-h{0%,100%{height:48px}}
@keyframes k-static-o{0%,100%{opacity:1}}

/* ---- style: SWEEP — all strokes draw at once, quick ---- */
.stage[data-style="sweep"] .logo{animation-name:k-sweep-logo}
.stage[data-style="sweep"] .el1{animation-name:k-sweep-el1}
.stage[data-style="sweep"] .el2{animation-name:k-sweep-el2}
.stage[data-style="sweep"] .el3,.stage[data-style="sweep"] .el4{animation-name:k-sweep-v}
.stage[data-style="sweep"] .el5,.stage[data-style="sweep"] .el6{animation-name:k-sweep-o}
@keyframes k-sweep-logo{
  0%{width:0;height:0;border-width:0;transform:translate(-16px,-16px)}
  8%{width:112px;height:80px;border-width:16px;transform:translate(-88px,-72px)}
  80%{transform:translate(-88px,-72px)}
  100%{width:112px;height:80px;border-width:16px;transform:translate(-88px,calc(-72px - var(--lift)))}
}
@keyframes k-sweep-el1{0%,8%{width:0}30%{width:112px}80%{color:transparent}100%{width:112px;color:#000}}
@keyframes k-sweep-el2{0%,8%{width:0}30%,100%{width:112px}}
@keyframes k-sweep-v{0%,8%{height:0}30%,100%{height:48px}}
@keyframes k-sweep-o{0%,18%{opacity:0}32%,100%{opacity:1}}

/* ---- style: SEQUENCE — strict metronome, one part per beat ---- */
.stage[data-style="sequence"] .logo{animation-name:k-draw-logo}
.stage[data-style="sequence"] .el1{animation-name:k-seq-el1}
.stage[data-style="sequence"] .el2{animation-name:k-seq-el2}
.stage[data-style="sequence"] .el3{animation-name:k-seq-el3}
.stage[data-style="sequence"] .el4{animation-name:k-seq-el4}
.stage[data-style="sequence"] .el5{animation-name:k-seq-el5}
.stage[data-style="sequence"] .el6{animation-name:k-seq-el6}
@keyframes k-seq-el1{0%,12%{width:0}24%{width:112px}80%{color:transparent}100%{width:112px;color:#000}}
@keyframes k-seq-el2{0%,24%{width:0}36%,100%{width:112px}}
@keyframes k-seq-el3{0%,36%{height:0}48%,100%{height:48px}}
@keyframes k-seq-el4{0%,48%{height:0}58%,100%{height:48px}}
@keyframes k-seq-el5{0%,58%{opacity:0}66%,100%{opacity:1}}
@keyframes k-seq-el6{0%,66%{opacity:0}74%,100%{opacity:1}}

@media (max-width:768px){
  .stage main{padding:0}
  .intro{width:100%;padding:0 20px;box-sizing:border-box}
  .intro .button{padding:14px 24px;max-width:300px;margin:16px auto}
  .intro .button .label{font-size:13px}
}
/* ══════════════════════════════════════════════════════════════════════
   ASCII INTRO — the mark assembles itself out of characters on a shared
   grid. The canvas is a fixed full-viewport field; the DOM logo sits ABOVE
   it and is invisible until the hand-off, at which point the ascii mark
   cross-fades into the real mark (identical geometry, so it never jumps).
   ══════════════════════════════════════════════════════════════════════ */
.ascii-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:15;pointer-events:none;display:none;transition:none;
}
.stage[data-mode="ascii"] .ascii-canvas{display:block}
/* main is a stacking context (z-index:1), so raising .logoBox alone would not
   lift the DOM mark above the canvas — the whole of main has to clear it. */
.stage[data-mode="ascii"] main{z-index:16}

/* in ascii mode the DOM logo skips its keyframes and sits at final geometry */
.stage[data-mode="ascii"] .logo{
  animation:none!important;
  width:112px;height:80px;border-width:16px;
  opacity:0;
  transform:translate(-88px,-72px) scale(var(--mark-zoom,1));
  /* opacity is driven per-frame off the ignite progress — a transition here
     would lag the cross-fade and reintroduce the pop */
  transition:transform .55s var(--splash-ease);
}
.stage[data-mode="ascii"] .logo>div{animation:none!important;color:transparent}
.stage[data-mode="ascii"] .el1,
.stage[data-mode="ascii"] .el2{width:112px}
.stage[data-mode="ascii"] .el3,
.stage[data-mode="ascii"] .el4{height:48px}
.stage[data-mode="ascii"] .el5,
.stage[data-mode="ascii"] .el6{opacity:1}
/* switching back to a classic style must snap, not creep through the
   inherited 2s transition on everything inside main */
.stage[data-mode="classic"] .logo,
.stage[data-mode="classic"] .logo>div{transition:none}
.stage[data-mode="ascii"].is-lift .logo{
  transform:translate(-88px,calc(-72px - var(--lift))) scale(var(--mark-zoom,1));
}

/* Reduced motion, or an intro that has already played this session: land on
   the finished page immediately, with no reveal delay to sit through.
   `.is-done` carries no styling of its own — it is a hook for the site to
   react to the intro finishing (it is also when the onDone callback fires). */
.stage.no-intro .ascii-canvas{display:none}
.stage.no-intro header,
.stage.no-intro .intro{animation:none;opacity:1}
.stage.no-intro .logo,
.stage.no-intro .logo>div{animation:none;transition:none}
.stage.no-intro[data-mode="ascii"] .logo{opacity:1}

/* ── trippy ascii buttons ── */
.button{position:relative;overflow:hidden;isolation:isolate}
.btn-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;transition:none;opacity:1;
}
/* `.stage main *{transition:2s}` outranks `.button` on its own — these carry a
   class more, so they win it back. Background and colour deliberately do NOT
   transition: a cross-fading invert reads as flicker against a field that is
   already redrawing every frame, so the inversion snaps instead (and is
   hysteresis-gated in ButtonFx so it cannot strobe at the threshold). */
.stage main .button{transition:box-shadow .3s linear,transform .12s ease}
.stage main .button .label{position:relative;z-index:1;transition:transform .1s linear}
.stage main .btn-canvas{transition:none}
.stage main .button.fx-hot,
.stage main .button.fx-hot .label{transition:box-shadow .3s linear}
/* the base sheet tints the button on hover, which reads as a second, competing
   fade underneath the invert — hold it flat and keep only the lift */
.stage main .button:hover{background:#fff}
.stage main .button.fx-hot:hover{background:#000}
.button .lbl-glyphs{white-space:pre;font-variant-ligatures:none}
.button.fx-mono .lbl-glyphs{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em}
/* inverted ("hot") state — must come after .button:hover to win the cascade */
.button.fx-hot{background:#000;color:#fff;box-shadow:0 0 28px rgba(255,255,255,.18)}
.button.fx-hot .label{color:#fff}
.button.fx-hot:hover{background:#000}