:root{--bg:#f4f4f6;--ink:#1b1b22;--dim:#5d5d6b;--line:#d3d3dc;--hot:#c9243c;color-scheme:light}
:root[data-theme=dark]{--bg:#1c1a22;--ink:#f1eff5;--dim:#a29fae;--line:#36323f;--hot:#ff5c72;color-scheme:dark}
.tt{font:inherit;font-size:.85rem;color:var(--dim);background:none;border:1px solid var(--line);border-radius:6px;padding:.15rem .6rem;cursor:pointer}
.tt:hover{color:var(--ink);border-color:var(--hot)}
.chart{background:#fff;padding:.8rem;border-radius:6px;overflow-x:auto}
.chart img{display:block;min-width:640px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:17px/1.6 "Instrument Sans",system-ui,sans-serif}
h1,h2,h3,.logo,.name{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem;width:100%}
.dim{color:var(--dim)}
.u{color:var(--hot);text-decoration:underline;text-underline-offset:4px}
.u:hover{color:var(--ink)}
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem}
.logo{font-size:1.3rem;text-decoration:none}
nav{display:flex;gap:1.6rem;font-size:.95rem}
nav a{color:var(--dim);text-decoration:none;padding-bottom:.2rem;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink);border-color:var(--hot)}
main{flex:1}
footer{margin-top:4rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:2rem;padding-bottom:2rem}
footer a{margin-left:1.2rem;text-decoration:none}
footer a:hover{color:var(--ink)}
.hero{display:flex;flex-wrap:wrap-reverse;gap:2.5rem;align-items:center;justify-content:space-between;padding:5rem 0}
.hero h1{font-size:clamp(2.8rem,9vw,5.5rem);line-height:.95;margin:.8rem 0 1.5rem}
.hero p{max-width:28rem;font-size:1.15rem}
.avatar{width:11rem;height:11rem;border-radius:50%;object-fit:cover;box-shadow:8px 8px 0 var(--hot)}
.btns{display:flex;gap:1.5rem;align-items:center;margin-top:2rem;font-weight:600}
.btn{background:var(--ink);color:var(--bg);padding:.8rem 1.3rem;border-radius:6px;text-decoration:none}
.btn:hover{background:var(--hot)}
section{border-top:1px solid var(--line);padding:3rem 0}
section h2{font-size:1.7rem;margin-bottom:1.2rem}
.head{padding:3.5rem 0 2rem}
.head h1{font-size:clamp(2.4rem,6vw,3.2rem)}
.head p{margin:1rem 0 0;max-width:32rem;font-size:1.15rem;color:var(--dim)}
.prose{max-width:36rem;font-size:1.15rem}
.prose p{margin:0 0 1rem}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:12rem 1fr 9rem;gap:1.2rem;padding:1.25rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .name{font-size:1.25rem}
.row:hover .name{color:var(--hot)}
.meta{text-align:right}
.ev{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.stack{display:flex;flex-wrap:wrap;gap:1.2rem 1.8rem;list-style:none;padding:0;margin:0}
.stack li{display:flex;align-items:center;gap:.5rem}
.stack img{width:1.5rem;height:1.5rem}
.feat .name{font-size:2rem}
.feat{display:block;max-width:34rem;text-decoration:none}
.feat:hover .name{color:var(--hot)}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:.2rem}.meta{text-align:left}.hero{padding:3rem 0}nav{gap:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.stats{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.3rem;color:var(--dim);font-size:.95rem}
.stats b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.4rem;color:var(--ink);margin-right:.35rem}
.icons{display:flex;gap:.8rem;margin-top:1.4rem}
.icons a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%}
.icons a:hover{border-color:var(--hot)}
.ico{width:1.2rem;height:1.2rem}
:root[data-theme=dark] .ico{filter:invert(1)}
.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}
.tile{flex:0 0 17rem;scroll-snap-align:start;display:flex;flex-direction:column;gap:.6rem;padding:1.3rem;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.tile:first-child{border-color:var(--hot)}
.tile:hover{border-color:var(--hot)}
.tile:hover .name{color:var(--hot)}
.tile .name{font-size:1.35rem}
#clock{font-variant-numeric:tabular-nums}
.stack li .dim{font-size:.9rem}

.banner{height:11rem;margin-top:1.5rem;border-radius:12px;overflow:hidden;background:var(--line)}
.banner img{width:100%;height:100%;object-fit:cover;filter:blur(28px) saturate(1.1);transform:scale(1.4);opacity:.85}
.profile{display:grid;gap:2rem;padding:0 0 3rem}
@media(min-width:760px){.profile{grid-template-columns:1.25fr 1fr}}
.profile .avatar{position:relative;width:8rem;height:8rem;border-radius:50%;object-fit:cover;border:5px solid var(--bg);box-shadow:none;margin:-4.5rem 0 1rem 1.2rem}
.who{font-size:clamp(2.6rem,7vw,4rem)}
.tag{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em;line-height:1.1;margin:1.2rem 0 .4rem}
#presence{padding-top:1.5rem}
.card{border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.card p{margin:0}
.dot{display:inline-block;width:.65rem;height:.65rem;margin-right:.55rem;border-radius:50%;background:#8a8a96}
.dot.online{background:#2fb344}.dot.idle{background:#e0a100}.dot.dnd{background:#d63b3b}
.spot{display:flex;gap:.9rem;align-items:center;text-decoration:none}
.spot img{width:3.5rem;height:3.5rem;border-radius:6px}
.spot span{display:block}

.tt{display:grid;place-items:center;width:2.2rem;height:2.2rem;padding:0;border-radius:50%}
.tt svg{width:1.1rem;height:1.1rem}
.stack .lang{display:flex;align-items:center;gap:.55rem;padding:.45rem 1rem .45rem .6rem;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.stack .lang:hover{border-color:var(--hot)}
.stack .lang img{width:1.6rem;height:1.6rem}

.skip{position:absolute;left:-999px;top:0;z-index:20;padding:.6rem 1rem;background:var(--ink);color:var(--bg)}
.skip:focus{left:0}
.tools{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1rem}
.tools input,.tools select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem}
.tools input{flex:1 1 14rem}
#chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:inherit;font-size:.9rem;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;cursor:pointer}
.chip:hover{border-color:var(--hot)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.proj{display:grid;grid-template-columns:12rem 1fr 11rem;gap:1.2rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.proj .name{font-size:1.25rem;text-decoration:none}
.proj .name:hover{color:var(--hot)}
.tags{font-size:.9rem;margin:.3rem 0 0}
.acts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.7rem 0 0;font-size:.95rem}
.copy{font:inherit;font-size:.95rem;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.copy:hover{color:var(--ink)}
@media(max-width:640px){.proj{grid-template-columns:1fr;gap:.3rem}}