:root { --bg:#ececec; --fg:#111; --muted:#777; --line:#9aa0ff; --accent:#3b3bff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#111; --fg:#e8e8e8; --muted:#888; --line:#4a4fbf; --accent:#7c7cff; } }
:root[data-theme="dark"] { --bg:#111; --fg:#e8e8e8; --muted:#888; --line:#4a4fbf; --accent:#7c7cff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font:12px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:520px; margin:0 auto; padding:32px 16px 40px; position:relative; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }

.avatar { width:56px; height:56px; background:#111; color:#fff; display:grid; place-items:center;
  font:500 16px "JetBrains Mono", monospace; letter-spacing:-.04em; position:relative; margin-bottom:0; }

h1 { font-size:14px; font-weight:600; margin:12px 0 8px; }
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#22c55e; margin-left:1px; }
.bio { margin-bottom:8px; }
.meta { color:var(--muted); font-size:10px; margin-bottom:6px; }
nav { display:flex; gap:12px; flex-wrap:wrap; }

section { margin-top:28px; }
h2 { font-size:10px; font-weight:400; color:var(--muted); margin-bottom:4px; }
h3 { font-size:12px; font-weight:600; }
.role { font-size:10px; color:var(--muted); margin:6px 0 2px; }
.role b { color:var(--fg); font-weight:500; }
article { margin-bottom:10px; }
.src { font-size:10px; }
.tags { font-size:10px; color:var(--muted); margin-bottom:3px; }
ul { list-style:none; }
ul li { padding-left:10px; text-indent:-10px; margin-bottom:1px; }
ul li::before { content:"- "; }
footer { margin-top:32px; font-size:10px; color:var(--muted); }
.theme { position:absolute; top:32px; right:16px; background:none; border:0; padding:0; color:var(--fg); cursor:pointer; opacity:.6; line-height:0; }
.theme svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme:hover { opacity:1; }
.avatar { overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); mix-blend-mode:luminosity; }
.ext { font-style:normal; color:var(--muted); font-size:.85em; margin-left:1px; }
.avatar .dot { width:4px; height:4px; margin-left:1px; }
.preview { position:fixed; z-index:10; width:320px; height:200px; overflow:hidden; pointer-events:none; background:var(--bg);
  border:1px solid var(--muted); box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; transition:opacity .15s; }
.preview.on { opacity:1; }
.preview iframe { width:1280px; height:800px; border:0; transform:scale(.25); transform-origin:0 0; }
@media (hover: none) { .preview { display:none; } }
.preview img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.preview.tall { width:220px; height:285px; }
main > header, main > section, main > footer { animation:fade .5s ease-out both; }
main > section:nth-of-type(1) { animation-delay:.08s; }
main > section:nth-of-type(2) { animation-delay:.16s; }
main > section:nth-of-type(3) { animation-delay:.24s; }
main > footer { animation-delay:.32s; }
@keyframes fade { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { main > * { animation:none; } }
.status { font-weight:400; font-size:10px; color:var(--muted); margin-left:4px; }
html { scroll-behavior:smooth; }
section, header { scroll-margin-top:32px; }
.toc { position:fixed; top:32px; left:calc(50% + 244px + 48px);
  display:flex; flex-direction:column; gap:6px; font-size:10px; animation:fade .6s .4s ease-out both; }
.toc a { color:var(--muted); opacity:.55; transition:opacity .2s, color .2s, transform .2s; }
.toc a:hover { text-decoration:none; opacity:1; }
.toc a.on { color:var(--fg); opacity:1; transform:translateX(3px); }
@media (max-width: 860px) { .toc { display:none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .toc a { transition:none; } }
body::after { content:""; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.name { position:relative; display:inline-block; }
.name svg { position:absolute; left:-2px; right:-2px; bottom:-6px; width:calc(100% + 4px); height:7px; overflow:visible; }
.name path { fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; animation:draw .9s .5s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
#email { min-width:5.5ch; display:inline-block; }
@media (prefers-reduced-motion: reduce) { .name path { animation:none; stroke-dashoffset:0; } }
.theme { view-transition-name:theme-toggle; }
.theme svg { overflow:visible; }
.theme .core { fill:currentColor; stroke:none; transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.6,0,.3,1); }
.theme .cut { transform:translate(10px,-10px); transition:transform .5s cubic-bezier(.6,0,.3,1); }
.theme .rays { transform-origin:12px 12px; transition:transform .5s cubic-bezier(.6,0,.3,1), opacity .3s; }
:root[data-theme="dark"] .theme .core { transform:scale(1.75); }
:root[data-theme="dark"] .theme .cut { transform:none; transition-delay:.1s; }
:root[data-theme="dark"] .theme .rays { transform:rotate(90deg) scale(0); opacity:0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .core { transform:scale(1.75); }
  :root:not([data-theme="light"]) .theme .cut { transform:none; transition-delay:.1s; }
  :root:not([data-theme="light"]) .theme .rays { transform:rotate(90deg) scale(0); opacity:0; }
}
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-old(theme-toggle) { display:none; }
::view-transition-new(theme-toggle) { animation:none; }
@media (prefers-reduced-motion: reduce) { .theme .core, .theme .cut, .theme .rays { transition:none; } }