@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2?v=18") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-500.woff2?v=18") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-600.woff2?v=18") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400-italic.woff2?v=18") format("woff2")}

:root{
  --bg:#08080a;
  --fg:#f4f4f2;
  --dim:#8a8a96;
  --faint:#4a4a55;
  --line:#1c1c23;
  --acc:#4ade80;
  --acc-soft:rgba(74,222,128,.14);
  --err:#f08a7a;
  --glow:0 0 10px rgba(74,222,128,.35);
  --bar-bg:rgba(8,8,10,.82);
  --scan:rgba(255,255,255,.022);
  --cat-fill:#0b0b0e;
  --cat-line:#0b0b0e;

  --cat-rim:drop-shadow(0 0 .6px rgba(244,244,242,.75)) drop-shadow(0 0 3px rgba(74,222,128,.25));
  --eye-glow:drop-shadow(0 0 6px rgba(74,222,128,.5));
  --ol:rgba(74,222,128,.28);
  --ol-glow:0 0 10px rgba(74,222,128,.17);
  --ol-snap:0 0 24px rgba(74,222,128,.5),0 0 6px rgba(74,222,128,.6);
  --sweep:#4ade80;
  --sweep-glow:drop-shadow(0 0 3px rgba(74,222,128,.9));
  --floor:rgba(74,222,128,.95);
  --floor-glow:rgba(74,222,128,.65);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs:15px;
  --pad:clamp(14px,4vw,40px);
  --barh:44px;
}
:root[data-theme="light"]{
  --bg:#f4f4f1;
  --fg:#14141a;
  --dim:#5c5c6b;
  --faint:#a3a3ad;
  --line:#e0e0dc;
  --acc:#0d7a45;
  --acc-soft:rgba(13,122,69,.10);
  --err:#b3402e;
  --glow:none;
  --bar-bg:rgba(244,244,241,.85);
  --scan:transparent;
  --cat-fill:#0b0b0e;
  --cat-line:#0b0b0e;
  --cat-rim:none;
  --eye-glow:none;
  --ol:rgba(13,122,69,.3);
  --ol-glow:none;
  --ol-snap:0 0 10px rgba(13,122,69,.25);
  --sweep:#0d7a45;
  --sweep-glow:none;
  --floor:rgba(13,122,69,.9);
  --floor-glow:rgba(13,122,69,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:var(--fs);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;
  background:
    repeating-linear-gradient(to bottom,var(--scan) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%,transparent 60%,rgba(0,0,0,.28) 100%);
}
:root[data-theme="light"] body::after{background:none}
::selection{background:var(--acc);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
a{color:inherit}
b{font-weight:600}
.acc{color:var(--acc)}
.dim{color:var(--dim)}
.faint{color:var(--faint)}

.bar{
  position:sticky;top:0;z-index:60;height:var(--barh);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 var(--pad);
  background:var(--bar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-size:12.5px;letter-spacing:.03em;
}
.bar-id{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.mark{width:26px;height:auto;display:block;flex:none}
.mark-t{fill:var(--fg)}
.mark-b{fill:var(--acc)}
.bar-name b{color:var(--acc);font-weight:500}
.bar-tty{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-tty::before{content:"— "}
.bar-r{display:flex;align-items:center;gap:10px;flex:none}
.skip{
  font:inherit;font-size:12px;color:var(--dim);background:none;border:0;padding:4px 2px;cursor:pointer;
}
.skip kbd{
  font:inherit;border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:4px;color:var(--fg);
}
.skip:hover kbd{border-color:var(--acc)}
.theme{
  display:grid;place-items:center;width:27px;height:27px;padding:0;border-radius:50%;
  background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  transition:color .25s,border-color .25s,transform .5s cubic-bezier(.16,1,.3,1);
}
.theme:hover{color:var(--fg);border-color:var(--acc)}
.theme svg{width:14px;height:14px;display:block}
.theme circle{fill:none;stroke:currentColor;stroke-width:1.3}
.theme path{fill:currentColor}
:root[data-theme="light"] .theme{transform:rotate(180deg)}

.term{
  width:100%;max-width:96ch;margin:0 auto;flex:1 0 auto;
  padding:clamp(22px,5vw,56px) var(--pad) 48px;
  overflow-wrap:anywhere;
}
.ln{margin:0;min-height:1.65em;white-space:pre-wrap}
.sec{margin-top:clamp(30px,5vw,48px)}

.ps{color:var(--acc);text-shadow:var(--glow)}
.pw{color:#7aa2f7}
:root[data-theme="light"] .pw{color:#2b59c3}
.prompt .cmd{color:var(--fg)}
.prompt{font-weight:500}
.ok{color:var(--acc)}
.err{color:var(--err)}
.err b{font-weight:600}

.cur{
  display:inline-block;width:.6em;height:1.15em;margin-left:1px;
  background:var(--acc);box-shadow:var(--glow);
  vertical-align:-.2em;animation:blink 1.05s steps(1,end) infinite;
}
.typing .cur{animation:none}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.motd{
  font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(46px,11vw,104px);
  margin:.22em 0 .18em;min-height:0;white-space:nowrap;
}
.motd b{color:var(--acc);text-shadow:var(--glow);font-weight:600}

.quote{
  font-size:clamp(19px,2.6vw,27px);line-height:1.45;font-weight:400;
  margin:.45em 0 .35em;max-width:46ch;
  text-wrap:pretty;
}
.quote .qm{color:var(--acc)}

.proj{display:grid;grid-template-columns:max-content 1fr;gap:.15em 1.6em;margin-top:.4em}
.proj .name{color:var(--acc);font-weight:500}
.proj .tags{color:var(--dim)}
.proj .desc{grid-column:2;margin-bottom:.7em;max-width:60ch}
@media (max-width:560px){
  .proj{grid-template-columns:1fr}
  .proj .desc{grid-column:1;padding-left:2ch}
}
.foot-wrap{width:100%;max-width:96ch;margin:0 auto;flex:none;padding:10px var(--pad) 14px}
.foot{color:var(--dim);font-size:12px;letter-spacing:.02em;min-height:0}

@media (max-width:560px){
  :root{--fs:13.5px}
  .bar-tty,.tz{display:none}
  .skip{font-size:11px}
}

.cat{
  position:fixed;right:clamp(16px,6vw,72px);bottom:0;z-index:55;
  width:clamp(60px,8vw,96px);
  transform:translateY(102%);visibility:hidden;
  transition:none;
}
.cat.up{transform:translateY(30%);visibility:visible;transition:transform .8s cubic-bezier(.16,1,.3,1),visibility 0s}
.cat.up:hover{transform:translateY(102%)}
.cat svg{display:block;width:100%;height:auto;filter:var(--cat-rim)}
.cat .fur{fill:var(--cat-fill);stroke:var(--cat-line);stroke-width:1.6}
.cat .eye{fill:#4ade80;filter:var(--eye-glow)}
.cat.up .eye{animation:catblink 5.4s steps(1,end) infinite 1.2s}
@keyframes catblink{0%,93%{opacity:1}94%,96%{opacity:.06}97%,100%{opacity:1}}

.quick .term > section{animation:qin .32s ease-out both}
.quick .term > section:nth-child(2){animation-delay:.06s}
.quick .term > section:nth-child(3){animation-delay:.12s}
.quick .term > section:nth-child(4){animation-delay:.18s}
.quick .term > p{animation:qin .32s ease-out .22s both}
@keyframes qin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .quick .term > *{animation:none !important}
  .cur{animation:none !important}
  .theme,.cat,.cat.up{transition:none}
  .cat .eye{animation:none !important}
  .motd .lt,.motd .lb,.frame,.tin,.floor{animation:none !important}
  .floor{opacity:.72}
  .sweep{display:none}
}

.logo-wrap{
  position:relative;display:block;width:max-content;max-width:100%;
  padding:30px 30px 10px;margin:.2em 0 0 -30px;
  overflow:hidden;
}
@media (max-width:560px){.logo-wrap{margin-left:-14px;padding:24px 14px 8px}}
.frame{

  position:relative;
  border:1px solid var(--ol);border-radius:16px;box-shadow:var(--ol-glow);
  padding:clamp(12px,2.6vw,26px) clamp(14px,3.4vw,34px) calc(clamp(12px,2.6vw,26px) + 26px);
}

.floor{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--floor) 22%,var(--floor) 78%,transparent);
  animation:fpulse 3.6s ease-in-out infinite;
}
.floor::after{
  content:"";position:absolute;left:6%;right:6%;top:-5px;height:11px;border-radius:50%;
  background:linear-gradient(90deg,transparent,var(--floor-glow),transparent);filter:blur(7px);
}
@keyframes fpulse{0%,100%{opacity:.45}50%{opacity:1}}

.sweep{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.sweep rect{
  x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:15.5px;ry:15.5px;
  fill:none;stroke:var(--sweep);stroke-width:1;stroke-linecap:round;
}
.sweep .tail{stroke-dasharray:14 86;stroke-opacity:.35;animation:sweepT 9s linear infinite}
.sweep .head{stroke-dasharray:4 96;stroke-opacity:.9;filter:var(--sweep-glow);animation:sweepH 9s linear infinite}
@keyframes sweepT{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes sweepH{from{stroke-dashoffset:-10}to{stroke-dashoffset:-110}}
.frame .motd{
  font-size:clamp(50px,15vw,150px);margin:0;
  display:flex;justify-content:center;
}
.motd .lt,.motd .lb{display:inline-block;will-change:transform}
.anim .motd .lt{animation:slideL 1.45s cubic-bezier(.2,.9,.25,1.25) both}
.anim .motd .lb{animation:slideR 1.45s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes slideL{0%{transform:translateX(-110vw);opacity:0}55%{opacity:1}78%{transform:translateX(5px)}90%{transform:translateX(-1.5px)}100%{transform:none;opacity:1}}
@keyframes slideR{0%{transform:translateX(110vw);opacity:0}55%{opacity:1}78%{transform:translateX(-5px)}90%{transform:translateX(1.5px)}100%{transform:none;opacity:1}}
.snap .frame{animation:fglow 1.1s ease-out}
@keyframes fglow{0%{border-color:var(--acc);box-shadow:var(--ol-snap)}100%{border-color:var(--ol);box-shadow:var(--ol-glow)}}
.welcome{margin:.1em 0 .2em}
.welcome b{color:var(--acc);font-weight:600}

.fcat{
  position:absolute;left:0;top:0;width:34px;height:22px;
  transform-origin:50% 50%;pointer-events:none;z-index:2;
}
.fcat svg{display:block;width:100%;height:100%;overflow:visible;filter:var(--cat-rim)}
.fcat .fur{fill:var(--cat-fill);stroke:var(--cat-line);stroke-width:1}
.fcat .leg{stroke:var(--cat-line);stroke-width:2.4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.fcat .eye{fill:#4ade80;filter:drop-shadow(0 0 2px rgba(74,222,128,.8))}
.fcat .tail{fill:none;stroke:var(--cat-line);stroke-width:2.4;stroke-linecap:round}
.fcat.walk .l1,.fcat.walk .l3{animation:legA .5s ease-in-out infinite alternate}
.fcat.walk .l2,.fcat.walk .l4{animation:legA .5s ease-in-out infinite alternate-reverse}
@keyframes legA{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}

.prompt.live{display:flex;align-items:baseline;white-space:pre}
.prompt.live .cmd{flex:1;min-width:0}
.tin{
  width:100%;background:transparent;border:0;outline:0;padding:0;margin:0;
  font:inherit;font-weight:500;color:var(--fg);caret-color:var(--acc);
}
.tin:focus-visible{outline:0}
.out{white-space:pre-wrap}
.nf{display:flex;gap:2.5ch;flex-wrap:wrap;align-items:flex-start}
.nf pre{margin:0;font:inherit;color:var(--acc);text-shadow:var(--glow);line-height:1.2}
.nf .k{color:var(--acc);font-weight:500}
.sw{display:inline-block;width:2ch;height:1em;vertical-align:-.15em}

#hack{position:fixed;inset:0;z-index:100;background:#000;display:block;width:100vw;height:100vh;cursor:pointer}
.hack-hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:101;color:#4ade80;font-size:12px;opacity:.8;pointer-events:none}

.hint{color:var(--dim);cursor:text;transition:opacity .5s ease}
.hint.gone{opacity:0}
.tin::placeholder{color:var(--dim);opacity:1}
.tin.ph:placeholder-shown{animation:phpulse 2.4s ease-in-out infinite}
@keyframes phpulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (min-width:900px){
  .bar{padding:0 max(var(--pad), calc((100% - clamp(720px,56vw,1080px)) / 2))}
  .logo-wrap{
    --bw:clamp(720px,56vw,1080px);
    width:calc(var(--bw) + 60px);max-width:none;
    margin-left:calc((100% - var(--bw)) / 2 - 30px);
  }

  .frame{padding:calc(var(--bw) * .008) calc(var(--bw) * .0523) calc(var(--bw) * .008 + 26px)}
  .frame .motd{font-size:calc(var(--bw) * .184)}

  .term{padding-top:18px}
}

@media (max-width:899.98px){
  .term{max-width:none}
  .logo-wrap{
    --bw:calc(100vw - 16px);
    width:auto;max-width:none;
    margin-left:calc(8px - var(--pad));margin-right:calc(8px - var(--pad));
    padding-left:0;padding-right:0;
  }
  .frame{padding:calc(var(--bw) * .04) calc(var(--bw) * .0523) calc(var(--bw) * .04 + 26px)}
  .frame .motd{font-size:calc(var(--bw) * .2277)}
}

.socials{display:flex;flex-wrap:wrap;gap:.3em 2ch;font-size:18px;margin:.15em 0 .3em}
.socials a,.out .soc{
  display:inline-flex;align-items:center;gap:.6ch;
  color:var(--dim);text-decoration:none;transition:color .2s;
}
.socials a:hover,.socials a:focus-visible,.out .soc:hover,.out .soc:focus-visible{color:var(--acc)}
.socials svg,.out .soc svg{width:18px;height:18px;fill:currentColor;flex:none}
.out .soc{margin-right:2ch}
@media (prefers-reduced-motion:reduce){.socials a,.out .soc{transition:none}}

:root{
  --bob-glow:0 0 1px rgba(74,222,128,.9),0 0 .05em rgba(74,222,128,.7),0 0 .16em rgba(74,222,128,.45),0 0 .42em rgba(74,222,128,.25);
  --bob-snap:0 0 2px rgba(74,222,128,1),0 0 .09em rgba(74,222,128,.95),0 0 .3em rgba(74,222,128,.7),0 0 .75em rgba(74,222,128,.45);
  --tech-snap:none;
  --tech-glow:none;--tech-stroke:0px;--tech-stroke-c:transparent;
}
:root[data-theme="light"]{
  --bob-glow:0 0 .04em rgba(13,122,69,.28),0 0 .14em rgba(13,122,69,.14);
  --bob-snap:0 0 .06em rgba(13,122,69,.5),0 0 .25em rgba(13,122,69,.3);
  --tech-snap:none;
  --tech-glow:none;
}
.motd .lb{text-shadow:var(--bob-glow)}
.motd .lt{color:var(--fg);text-shadow:var(--tech-glow);-webkit-text-stroke:var(--tech-stroke) var(--tech-stroke-c);paint-order:stroke fill}
.snap .motd .lb{animation:bglow 1.1s ease-out}
.snap .motd .lt{animation:tglow 1.1s ease-out}
@keyframes bglow{0%{text-shadow:var(--bob-snap)}100%{text-shadow:var(--bob-glow)}}
@keyframes tglow{0%,100%{text-shadow:none}}

.ecat{
  position:absolute;left:0;top:0;width:.6em;height:.4em;z-index:-1;
  pointer-events:none;visibility:hidden;
}

.ecat svg{display:block;width:100%;height:100%;overflow:visible;filter:var(--ecat-rim)}
.ecat .hd{transform:translateY(24px);transition:transform .22s cubic-bezier(.55,0,.85,.35)}
.ecat.up .hd{transform:translateY(0);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ecat .fur{fill:var(--cat-fill);stroke:rgba(244,244,242,.42);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ecat .ear{fill:#1b1b21}
.ecat .eye{fill:#4ade80}
.ecat .pupil{fill:#0b0b0e}
.ecat.on{visibility:visible}
:root{--ecat-rim:drop-shadow(0 0 3px rgba(74,222,128,.25))}
:root[data-theme="light"]{--ecat-rim:none}
:root[data-theme="light"] .ecat .fur{stroke:none}
@media (prefers-reduced-motion:reduce){.ecat{display:none !important}}

.tilt{position:relative;transform-style:preserve-3d}
.tilt.on{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt.on .frame{transform-style:preserve-3d}
.tilt.on .motd{transform:translateZ(var(--tz,0px))}
.tilt.flat,.tilt.flat .motd{transform:none !important}
.sheen{
  position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.038),rgba(74,222,128,.018) 28%,transparent 58%);
}
.tilt.on .sheen{opacity:var(--sa,0)}
:root[data-theme="light"] .sheen{background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(13,122,69,.035),rgba(13,122,69,.013) 28%,transparent 58%)}

:root{--spot-c:74,222,128}
:root[data-theme="light"]{--spot-c:13,122,69}
.spot{position:absolute;inset:-1px;border-radius:16px;pointer-events:none;display:none;opacity:var(--sa,0);
  filter:drop-shadow(0 0 4px rgba(var(--spot-c),.45))}
.spot.on{display:block}
.spot-in,.spot-ring{position:absolute;inset:0;border-radius:inherit}
.spot-in{background:radial-gradient(circle 340px at var(--mx,50%) var(--my,50%),rgba(var(--spot-c),.045),rgba(var(--spot-c),.016) 45%,transparent 75%)}
.spot-ring{
  padding:1.5px;
  background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),rgba(var(--spot-c),.85),rgba(var(--spot-c),.38) 40%,rgba(var(--spot-c),0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

.frame .motd{position:relative;z-index:2}
.glitch{position:absolute;inset:0;pointer-events:none;display:none}
.glitch.run{display:block}
.glitch > div{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:max-content;display:flex;white-space:pre;opacity:0}
.glitch .gt,.glitch .gb{display:inline-block}
.g-r{color:#ff3358;mix-blend-mode:screen;z-index:-1}
.g-c{color:#22d3ee;mix-blend-mode:screen;z-index:-1}
:root[data-theme="light"] .g-r,:root[data-theme="light"] .g-c{mix-blend-mode:multiply}
.g-s{background:var(--bg);z-index:1}
.g-s .gt{color:var(--fg);text-shadow:var(--tech-glow)}
.g-s .gb{color:var(--acc);text-shadow:var(--bob-glow)}
.g-s1{clip-path:inset(22% 0 67% 0)}
.g-s2{clip-path:inset(48% 0 43% 0)}
.g-s3{clip-path:inset(69% 0 22% 0)}
.glitch.run .g-r{animation:glR .36s linear both}
.glitch.run .g-c{animation:glC .36s linear both}
.glitch.run .g-s1{animation:glS1 .36s steps(1,end) both}
.glitch.run .g-s2{animation:glS2 .36s steps(1,end) both}
.glitch.run .g-s3{animation:glS3 .36s steps(1,end) both}
.motd.gj{animation:glJ .36s steps(1,end)}
@keyframes glR{0%{opacity:.8;transform:translate(-4px,1px)}20%{transform:translate(3px,-1px)}40%{opacity:.65;transform:translate(-2px,0)}60%{opacity:.45;transform:translate(2px,1px)}80%{opacity:.25;transform:translate(-1px,0)}100%{opacity:0;transform:none}}
@keyframes glC{0%{opacity:.8;transform:translate(4px,-1px)}20%{transform:translate(-3px,1px)}40%{opacity:.65;transform:translate(2px,0)}60%{opacity:.45;transform:translate(-2px,-1px)}80%{opacity:.25;transform:translate(1px,0)}100%{opacity:0;transform:none}}
@keyframes glS1{0%{opacity:1;transform:translateX(11px)}18%{transform:translateX(-7px)}34%{opacity:0}100%{opacity:0}}
@keyframes glS2{0%{opacity:0}22%{opacity:1;transform:translateX(-14px)}40%{transform:translateX(5px)}56%{opacity:0}100%{opacity:0}}
@keyframes glS3{0%{opacity:0}44%{opacity:1;transform:translateX(9px)}62%{transform:translateX(-4px)}76%{opacity:0}100%{opacity:0}}
@keyframes glJ{0%{translate:1px 0}12%{translate:-1.5px 1px}26%{translate:1.5px -1px}40%{translate:-1px 0}55%{translate:1px 1px}72%{translate:0 -1px}86%{translate:none}}
@media (prefers-reduced-motion:reduce){.tilt.on,.tilt.on .motd{transform:none !important}.sheen,.spot,.glitch{display:none !important}.motd.gj{animation:none !important}}

.frame .motd::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;width:4.6em;height:.5em;margin:-.25em 0 0 -2.3em;
  background:radial-gradient(closest-side,rgba(74,222,128,.2),rgba(74,222,128,.08) 55%,rgba(74,222,128,0));
  filter:blur(8px);
  transform:translate(var(--gx,0px),calc(var(--gy,0px) + .3em));
}
:root[data-theme="light"] .frame .motd::before{background:radial-gradient(closest-side,rgba(13,122,69,.09),rgba(13,122,69,.035) 55%,rgba(13,122,69,0))}
.anim .frame .motd::before{animation:ugIn 1.45s ease-out both}
@keyframes ugIn{0%,40%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.frame .motd::before{animation:none !important;transform:translate(0,.3em) !important}}

.g-s .gt{text-shadow:none !important;filter:none !important}

:root{
  --tech-ext:.009em .009em 0 #2a2a30,.018em .018em 0 #232328,.027em .027em 0 #1c1c21,.036em .036em 0 #16161a;
  --bob-ext:.009em .009em 0 #1f6b3f,.018em .018em 0 #19592f,.027em .027em 0 #144a2a,.036em .036em 0 #0f3a22;
  --tech-bevel:linear-gradient(180deg,#ffffff 0%,#f4f4f2 45%,#d9d9dc 100%);
  --bob-bevel:linear-gradient(180deg,#7ef0a8 0%,#4ade80 50%,#3fcf75 100%);
}
:root[data-theme="light"]{
  --tech-ext:.009em .009em 0 #a9a9b2,.018em .018em 0 #b8b8c0,.027em .027em 0 #c7c7ce,.036em .036em 0 #d5d5db;
  --bob-ext:.009em .009em 0 #5fae84,.018em .018em 0 #7bbf99,.027em .027em 0 #97cfae,.036em .036em 0 #b2dfc4;
  --tech-bevel:linear-gradient(180deg,#3a3a44 0%,#14141a 55%,#0c0c10 100%);
  --bob-bevel:linear-gradient(180deg,#1f9a5c 0%,#0d7a45 55%,#0a6339 100%);
}
.motd .lt,.snap .motd .lt{text-shadow:var(--tech-ext) !important;filter:none !important}
.motd .lb{text-shadow:var(--bob-ext),var(--bob-glow)}
@keyframes bglow{0%{text-shadow:var(--bob-ext),var(--bob-snap)}100%{text-shadow:var(--bob-ext),var(--bob-glow)}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .motd .lt::after,.motd .lb::after{
    content:attr(data-t);content:attr(data-t) / "";
    position:absolute;left:0;top:0;pointer-events:none;white-space:pre;
    text-shadow:none;color:transparent;-webkit-text-fill-color:transparent;
    -webkit-background-clip:text;background-clip:text;
  }
  .motd .lt::after{background-image:var(--tech-bevel)}
  .motd .lb::after{background-image:var(--bob-bevel)}
}
#rain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.25}
@media (max-width:899px){#rain{display:none}}
@media (min-width:900px){.term{background:color-mix(in srgb,var(--bg) 82%,transparent)}}
.yunagi-note{font-size:18px;display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1.2ch;margin:.5em 0 .3em}
.yunagi-note a{color:var(--acc);text-decoration:none;border:1px solid var(--acc);border-radius:4px;padding:.15em .7ch;transition:background .2s,color .2s}
.yunagi-note a:hover,.yunagi-note a:focus-visible{background:var(--acc);color:var(--bg)}
@media (prefers-reduced-motion:reduce){.yunagi-note a{transition:none}}