/* An opaque, optional entrance; ordinary navigation never waits for resources. */
.site-intro{
  --site-intro-ready:1;
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;
  max-width:none;max-height:none;box-sizing:border-box;margin:0;padding:16px;
  border:0;border-radius:0;overflow:hidden;
  background:#020806;color:var(--ink);font:1rem/1.6 var(--mono);
}
.site-intro:not([open]){display:none}
.site-intro[open]{display:grid;place-items:center}
.site-intro::backdrop{background:#020806;opacity:1}
.intro-rain{position:absolute;inset:0;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));overflow:hidden;pointer-events:none;user-select:none}
.intro-rain::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#020806b3 12%,#0208061a 76%)}
.intro-rain>span{display:block;align-self:start;text-align:center;white-space:pre;font:14px/1.7 var(--mono);color:#51f39d;opacity:.32;text-shadow:0 0 6px #32f09180;transform:translateY(-65%)}
.intro-rain>span:nth-child(3n){opacity:.5;font-size:16px}
.intro-rain>span:nth-child(4n){opacity:.2}
.intro-card{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(38rem,100%);max-height:100%;min-height:0;overflow:hidden;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);box-shadow:0 1.5rem 5rem #000b}
.intro-titlebar{display:flex;align-items:center;gap:.8rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--line);background:var(--surface);color:var(--dim);font-size:.8rem;overflow-wrap:anywhere}
.intro-window-marks{display:flex;gap:.3rem;flex:none}
.intro-window-marks i{width:.4rem;height:.4rem;border:1px solid var(--line-strong);border-radius:50%}
.intro-terminal{min-height:0;overflow:auto;padding:1.5rem 1.3rem 1.15rem;font-size:1rem;line-height:1.85}
.intro-command{display:flex;align-items:baseline;gap:.35ch;max-width:100%;margin-bottom:.7rem}
.intro-prompt,.intro-marker{color:var(--acc)}
.intro-typed{display:inline-block;flex:none;width:11ch;max-width:calc(100% - 2.3ch);overflow:hidden;white-space:nowrap;vertical-align:bottom}
.intro-cursor{display:inline-block;flex:none;align-self:center;width:.55ch;height:1.1em;background:var(--acc)}
.intro-line{overflow-wrap:anywhere}
.intro-line-ready{margin-top:.7rem;color:var(--acc)}
.intro-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:.85rem 1.2rem;border-top:1px solid var(--line);background:var(--surface)}
.intro-footer p{margin:0;max-width:25ch;font:.8rem/1.6 var(--sans);color:var(--dim)}
.intro-skip{flex:none;min-height:44px;padding:.6rem .85rem;font-size:.8rem;box-shadow:none}
.intro-skip:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.intro-preference .tgl-text{display:flex;flex-wrap:wrap;gap:.25rem .55rem;align-items:baseline}
[data-intro-preference-state]{font-size:.75em;font-weight:400;color:var(--dim)}
.appearance-panel>.intro-preference-note{font-size:.8rem;line-height:1.6;margin:.1rem 0 0}
@media(prefers-reduced-motion:no-preference){
  html:not([data-paused]) .site-intro,
  html:not([data-paused]) .site-intro::backdrop{transition:opacity .5s ease-in-out}
  html:not([data-paused]) .site-intro .intro-card{transition:transform .5s cubic-bezier(.22,1,.36,1)}
  html:not([data-paused]) .site-intro[data-intro-leaving],
  html:not([data-paused]) .site-intro[data-intro-leaving]::backdrop{opacity:0}
  html:not([data-paused]) .site-intro[data-intro-leaving] .intro-card{transform:translateY(-12px) scale(.985)}
  html:not([data-paused]) .site-intro[open] .intro-rain>span{animation:intro-rain 7s linear both}
  html:not([data-paused]) .site-intro[open] .intro-rain>span:nth-child(3n){animation-duration:9s;animation-delay:-2s}
  html:not([data-paused]) .site-intro[open] .intro-rain>span:nth-child(3n+1){animation-duration:8s;animation-delay:-1s}
  html:not([data-paused]) .site-intro[open] .intro-rain>span:nth-child(4n){animation-delay:-3s}
  html:not([data-paused]) .site-intro[open] .intro-typed{animation:intro-type .65s steps(11,end) both}
  html:not([data-paused]) .site-intro[open] .intro-line{animation:intro-line .18s linear both}
  html:not([data-paused]) .site-intro[open] .intro-line-cases{animation-delay:.8s}
  html:not([data-paused]) .site-intro[open] .intro-line-tools{animation-delay:1.25s}
  html:not([data-paused]) .site-intro[open] .intro-line-ready{animation-delay:1.55s}
  html:not([data-paused]) .site-intro[open] .intro-cursor{animation:intro-cursor .8s step-end 3}
}
@keyframes intro-rain{from{transform:translateY(-65%)}to{transform:translateY(35vh)}}
@keyframes intro-type{from{width:0}to{width:11ch}}
@keyframes intro-line{from{opacity:0}to{opacity:1}}
@keyframes intro-cursor{0%,70%{opacity:1}71%,100%{opacity:0}}
@media(max-width:420px){
  .intro-rain{grid-template-columns:repeat(15,minmax(0,1fr))}
  .intro-rain>span:nth-child(even){display:none}
  .intro-titlebar{gap:.5rem;padding:.7rem .85rem}
  .intro-window-marks{display:none}
  .intro-terminal{padding:1.2rem 14px;font-size:.875rem}
  .intro-footer{flex-wrap:wrap;padding:.8rem .85rem}
  .intro-footer p{max-width:none;flex:1 1 100%}
  .intro-skip{margin-left:auto}
  .intro-skip>span{display:none}
}
@media print{.site-intro,.site-intro::backdrop{display:none!important}}
@media screen and (max-height:420px){
  .intro-titlebar{padding:.3rem .85rem}
  .intro-terminal{padding:.4rem 14px}
  .intro-footer{padding:.25rem .85rem}
}
