@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url("./fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
:root{
  --bg:#ffffff; --ink:#111111; --key:#a1a1a1; --punct:#cfcfcf; --guide:#efefef;
  --accent:#ff4f00; --ease:cubic-bezier(.22,1,.36,1);
  --indent:2ch; --fs:15px; --lh:1.95;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0b0b;--ink:#f2f2f2;--key:#6f6f6f;--punct:#3a3a3a;--guide:#1c1c1c}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;font-size:var(--fs);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;justify-content:center}
main{width:100%;max-width:46rem;padding:clamp(5rem,16vh,10rem) 2rem 8rem}
.line{display:block;white-space:nowrap;padding-left:1.4em;text-indent:-1.4em;opacity:0;transform:translateY(6px);
  animation:in .35s var(--ease) forwards;animation-delay:calc(var(--i,0) * 15ms + 60ms)}
@keyframes in{to{opacity:1;transform:none}}
.p{color:var(--punct)}
.k{color:var(--key);transition:color .25s}
.v{color:var(--ink);white-space:normal;overflow-wrap:anywhere}
a.v{overflow-wrap:normal}
.n{color:var(--ink)}
.lit{color:var(--ink)}
.row{position:relative}
.row:hover > .line .k,.row:hover > .head .k{color:var(--ink)}
.name .v{font-size:clamp(1.6rem,4.2vw,2.5rem);letter-spacing:-.02em;line-height:1.25}
.name{margin-bottom:.35rem}
a.v{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--ease),color .2s}
a.v:hover,a.v:focus-visible{color:var(--accent);background-size:100% 1px;outline:none}
a.v .arrow{text-indent:0;display:inline-block;color:var(--punct);margin-left:.35em;transition:transform .35s var(--ease),color .2s}
a.v:hover .arrow{transform:translate(2px,-2px);color:var(--accent)}
.body{padding-left:calc(var(--indent) - .5ch - 1px);border-left:1px solid var(--guide);margin-left:.5ch}
button.t{all:unset;text-indent:0;cursor:pointer;display:inline-flex;align-items:baseline;gap:.5rem;border-radius:4px}
button.t:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.caret{text-indent:0;display:inline-block;width:.7em;color:var(--punct);transition:transform .35s var(--ease),color .2s;transform:rotate(90deg)}
button.t:hover .caret{color:var(--accent)}
.col[data-open="false"] > .head .caret{transform:rotate(0)}
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease)}
.fold > div{overflow:hidden;min-height:0}
.col[data-open="false"] > .fold{grid-template-rows:0fr;opacity:0}
.summary{color:var(--key);display:none;margin-left:.15rem;font-size:.85em}
.col[data-open="false"] > .head .summary{display:inline}
.summary::after{content:attr(title)}
.col[data-open="false"] > .head .close-inline{display:inline}
.close-inline{display:none}
.col[data-open="false"] > .tail{display:none}
.hint{margin-top:4rem;color:var(--punct);font-size:12px;opacity:0;animation:in .35s var(--ease) forwards;animation-delay:.6s}
.cursor{display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-2px;margin-left:.2em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:600px){
  :root{--fs:12.5px;--indent:2ch;--lh:1.85}
  main{padding:4.5rem 1rem 6rem}
  .summary::after{content:"…"}
  a.v .arrow{display:none}
  .line{white-space:normal;padding-left:1.4em;text-indent:-1.4em}
  .line .k,.line .t{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .line,.hint{animation:none;opacity:1;transform:none}
  .fold,.caret,a.v,a.v .arrow{transition:none}
  .cursor{animation:none}
}
/* avatar reveal: hover (fine pointers), keyboard focus, or tap toggles .is-open */
.avatar-row{position:relative;z-index:6}
.avatar-wrap{position:relative;display:inline}
button.avatar-trigger{all:unset;cursor:pointer;color:var(--ink);text-indent:0;border-radius:3px;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease),color .2s}
button.avatar-trigger:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.avatar-pop{position:absolute;left:calc(100% + 1rem);top:50%;z-index:5;width:68px;height:68px;text-indent:0;
  pointer-events:none;opacity:0;visibility:hidden;
  transform:translateY(-50%) scale(.86);transform-origin:left center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.14)) drop-shadow(0 0 .5px rgba(0,0,0,.18));
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
/* iOS app-icon shape: continuous-corner squircle mask (external SVG, img-src self); border-radius 22.37% is the fallback */
.avatar-pop picture{display:block;width:100%;height:100%;overflow:hidden;border-radius:22.37%;
  -webkit-mask:url("squircle.svg") center/100% 100% no-repeat;mask:url("squircle.svg") center/100% 100% no-repeat}
.avatar-pop img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-wrap.is-open .avatar-pop,.avatar-wrap:focus-within .avatar-pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);transition-delay:0s}
.avatar-wrap.is-open button.avatar-trigger,.avatar-wrap:focus-within button.avatar-trigger{color:var(--accent);background-size:100% 1px}
@media (hover:hover) and (pointer:fine){
  .avatar-wrap:hover .avatar-pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);transition-delay:0s}
  .avatar-wrap:hover button.avatar-trigger{color:var(--accent);background-size:100% 1px}
}
@media (max-width:600px){
  .avatar-pop{left:0;top:calc(100% + .6rem);width:60px;height:60px;transform:scale(.86);transform-origin:left top}
  .avatar-wrap.is-open .avatar-pop,.avatar-wrap:focus-within .avatar-pop{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .avatar-pop,button.avatar-trigger{transition:none}
}
.noscript{padding:2rem}