:root{--paper: #0c1d55;--paper-2: #15296c;--deep: #071340;--ink: #f1f3ff;--muted: #9eabd6;--line: #2b3f80;--accent: #ffd23f;--blue-1: #6f9bff;--blue-2: #b4c3ff;--display: "Unbounded", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;--font: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.8;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}::selection{background:var(--accent);color:var(--deep)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px)}.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}.logo{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.03em}.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.92rem}.nav ul a{color:var(--muted);transition:color .15s}.nav ul a:hover{color:var(--accent)}@media(max-width:720px){.nav ul .hide-sm{display:none}.nav ul{gap:1.1rem}}.hero{padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,6vw,4rem)}.hero-name{position:relative;margin:0;font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,13.5vw,11.5rem);line-height:.86;letter-spacing:-.065em}.hero-name span{display:block}.hero-name span+span{padding-left:.62em}.hero-name .sticker{position:absolute;right:0;top:-.1em;width:clamp(110px,17vw,210px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid var(--paper);box-shadow:0 0 0 3px var(--accent);transform:rotate(-8deg)}.hero-body{display:grid;grid-template-columns:minmax(0,34rem) auto;justify-content:space-between;gap:2rem 3rem;align-items:end;margin-top:clamp(2rem,5vw,3.2rem)}.hero-body .lead{margin:0;font-size:1.1rem}@media(max-width:720px){.hero-name .sticker{position:static;margin-bottom:1.4rem;transform:rotate(-6deg)}.hero-name span+span{padding-left:0}.hero-body{grid-template-columns:1fr}}.social{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;margin:0;padding:0;font-size:.95rem}.social a{border-bottom:2px solid var(--ink);padding-bottom:1px;transition:color .15s,border-color .15s}.social a:hover{color:var(--accent);border-color:var(--accent)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.3rem;border-radius:999px;font-weight:700;font-size:.92rem;border:2px solid var(--ink);transition:background .15s,color .15s}.btn:hover,.btn.primary{background:var(--ink);color:var(--paper)}.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--deep)}section.block{padding-block:clamp(3.5rem,8vw,6rem);border-top:2px solid var(--ink)}.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem;margin-bottom:2.4rem}.sec-head h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.05em;line-height:1}.sec-head p{margin:0;color:var(--muted);font-size:.92rem}.more{margin-top:1.8rem}.trace{--label: 18rem}.axis,.span-row{display:grid;grid-template-columns:var(--label) 1fr;gap:1.2rem;align-items:center}.axis{margin-bottom:.4rem;font-size:.78rem;color:var(--muted)}.axis .ticks{position:relative;height:1.4rem}.axis .ticks span{position:absolute;transform:translate(-50%)}.axis .ticks span:first-child{transform:none}.axis .ticks span.now{color:var(--ink);font-weight:700}.track{position:relative;height:1.5rem}.track:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / var(--years)))}.bar{position:absolute;top:.2rem;bottom:.2rem;left:var(--x);width:var(--w);min-width:6px;background:var(--c);border-radius:3px;transform-origin:left;animation:draw .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 70ms + .15s)}.bar.open-end{border-radius:3px 0 0 3px;background:linear-gradient(90deg,var(--c) 85%,color-mix(in srgb,var(--c) 30%,transparent))}@keyframes draw{0%{transform:scaleX(0)}}.trace details{border-bottom:1px solid var(--line)}.trace details.root{border-bottom:0;margin-top:1rem}.trace summary{list-style:none;cursor:pointer;padding:.45rem .5rem;margin-inline:-.5rem;border-radius:6px;transition:background .15s}.trace summary::-webkit-details-marker{display:none}.trace summary:hover{background:var(--paper-2)}.trace summary:hover .name{color:var(--c)}.span-row .name{display:flex;gap:.7rem;align-items:center;min-width:0;font-size:.92rem;line-height:1.4}.span-row .name:before{content:"";flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--c);color:var(--c);background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat;transition:transform .2s,background-color .15s,color .15s}.trace summary:hover .name:before{background-color:color-mix(in srgb,var(--c) 22%,transparent)}details[open]>summary .name:before{transform:rotate(45deg);background-color:var(--c);color:var(--deep)}.root>summary .name{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.03em}.root>summary .track{height:2rem}.root>summary .bar{top:.15rem;bottom:.15rem}.bar .dur{display:block;padding-left:.6rem;font-size:.75rem;font-weight:700;line-height:1.7rem;color:var(--deep);white-space:nowrap;overflow:hidden}.span-row .when{display:none}.detail{margin:.2rem 0 1.2rem calc(var(--label) + 1.2rem);padding-left:1.2rem;border-left:3px solid var(--c);animation:open .25s ease-out}@keyframes open{0%{opacity:0;transform:translateY(-4px)}}.detail .meta{margin:0 0 .5rem;font-size:.85rem;color:var(--muted)}.detail .meta a{color:var(--ink);border-bottom:1px solid var(--c)}.detail ul.hl{margin:0;padding-left:1.1rem;font-size:.95rem;max-width:46rem}.detail ul.hl li::marker{color:var(--c)}.stack{margin:.6rem 0 0;font-size:.82rem;color:var(--muted)}@media(max-width:720px){.trace{--label: 0rem}.axis{grid-template-columns:1fr}.axis .label{display:none}.axis .ticks span:nth-child(2n):not(.now){display:none}.span-row{grid-template-columns:1fr;gap:.2rem}.span-row .when{display:inline;margin-left:auto;padding-left:.6rem;font-family:var(--font);font-weight:400;font-size:.75rem;letter-spacing:0;color:var(--muted);white-space:nowrap}.detail{margin-left:0}}.skills{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:0 3rem}.skills>div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-block:1rem;border-bottom:1px solid var(--line)}.skills dt{font-weight:700;font-size:.85rem;color:var(--muted);padding-top:.2rem}.skills dd{margin:0;font-size:1.1rem;line-height:1.6}.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.list li a,.list li>div{display:grid;grid-template-columns:7rem 1fr auto;gap:1.2rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line);transition:color .15s}.list time{font-size:.85rem;color:var(--muted)}.list .t{font-weight:500}.list .src{font-size:.8rem;color:var(--muted)}.list li a:hover{color:var(--accent)}@media(max-width:600px){.list li a,.list li>div{grid-template-columns:1fr auto;gap:.1rem 1rem}.list time{grid-column:1 / -1}}.sub{margin:2.6rem 0 .8rem;font-size:1rem;font-weight:700}.sub:first-of-type{margin-top:0}.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:3rem 4rem}.works{display:flex;flex-wrap:wrap;gap:2.5rem}.work{width:min(100%,17rem)}.work img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center bottom;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--c);transition:transform .2s,box-shadow .2s}.work:nth-child(odd) img{transform:rotate(-2deg)}.work:nth-child(2n) img{transform:rotate(1.5deg)}.work:hover img{transform:rotate(0);box-shadow:4px 4px 0 var(--c)}.work h3{margin:1.2rem 0 0;font-size:1rem}.work p{margin:0;font-size:.85rem;color:var(--muted)}.empty{color:var(--muted);font-size:.9rem}footer{background:var(--deep);color:var(--ink);padding-block:2.5rem}footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;align-items:center;font-size:.85rem}footer .social a{border-color:var(--ink)}footer .social a:hover{color:var(--accent);border-color:var(--accent)}.page{padding-block:clamp(3rem,7vw,5rem)}.page h1{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.05em;margin:0 0 .6rem;line-height:1.05}.page article h1{font-family:var(--font);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.3}.page .desc{color:var(--muted);margin:0 0 2.2rem}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.2rem}.tag{font-size:.82rem;padding:.15rem .75rem;border-radius:999px;border:1.5px solid var(--ink);transition:background .15s,color .15s}.tag:hover,.tag.on{background:var(--ink);color:var(--paper)}.prose{max-width:44rem;min-width:0;overflow-wrap:anywhere;font-size:1.02rem}.prose h1,.prose h2,.prose h3{letter-spacing:-.01em;line-height:1.4}.prose h2{margin-top:2.8rem;padding-bottom:.4rem;border-bottom:2px solid var(--ink)}.prose h3{margin-top:2rem}.prose a{color:var(--accent);border-bottom:1px solid currentColor}.prose img{border-radius:6px;margin-block:1.2rem}.prose blockquote{margin:1.4rem 0;padding:.2rem 1.2rem;border-left:3px solid var(--accent);color:var(--muted)}.prose code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:.1em .4em;border-radius:4px}.prose pre{padding:1.1rem 1.3rem;border-radius:8px;overflow-x:auto;line-height:1.6;font-size:.86rem}.prose pre code{background:none;padding:0}.prose table{display:block;overflow-x:auto;border-collapse:collapse}.prose th,.prose td{border:1px solid var(--line);padding:.4rem .8rem}.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}.prose iframe,.prose video{width:100%!important;max-width:100%!important;border:0;border-radius:8px}.post-meta{font-size:.9rem;color:var(--muted);margin-bottom:.6rem;display:block}.back{display:inline-block;margin-bottom:2rem;color:var(--muted);font-size:.9rem}.back:hover{color:var(--accent)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
