*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0b0b0b;--fg:#d4d4d4;--dim:#6b6b6b;--line:#222;--accent:#fff;--on-accent:#0b0b0b;--err:#ff7a7a;color-scheme:dark}
body.light{--bg:#fafafa;--fg:#1c1c1c;--dim:#8a8a8a;--line:#e4e4e4;--err:#cc3333;color-scheme:light}
body.mono{--font:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
body.sans{--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.7 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--on-accent)}
main{width:min(100% - 48px,420px);margin:0 auto;padding:14vh 0 12vh}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.dim{color:var(--dim)}
.avatar{display:block;width:64px;height:64px;margin:0 0 20px;border-radius:50%;object-fit:cover;background:var(--line)}
h1{margin:0;font-size:14px;font-weight:600;letter-spacing:0}
.status{margin:2px 0 0;color:var(--dim)}
.status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:1px}
.status.blink::before{animation:pulse 1.6s ease-in-out infinite}
.status.type span{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:1px solid var(--accent);width:calc(var(--n)*1ch);animation:type calc(var(--n)*55ms) steps(var(--n),end) both,caret .8s step-end infinite}
.loc{margin:0;color:var(--dim)}
.bio{margin:20px 0 0;white-space:pre-line}
.blocks{display:grid;gap:32px;margin-top:40px}
.blk{margin:0}
.label{margin:0 0 8px;color:var(--dim)}
.body{margin:0;white-space:pre-line}
.links{display:grid}
.links a{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.links a .dim{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice{margin:0;padding-left:12px;border-left:1px solid var(--line);color:var(--dim);white-space:pre-line}
figure.img img{display:block;max-width:100%;height:auto;background:var(--line)}
figure.img.small img{width:140px;max-width:100%}
figure.img.medium img{width:280px;max-width:100%}
figure.img.full img{width:100%}
figure.img figcaption{margin-top:6px;color:var(--dim)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:6px 16px;border:1px solid var(--dim);color:var(--fg)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.solid:hover{opacity:.85;color:var(--on-accent)}
.btn.ghost{padding:6px 0;border:0;border-bottom:1px solid var(--line)}
.footer{margin:48px 0 0;color:var(--dim)}
.corner{position:fixed;right:20px;bottom:16px;display:flex;gap:14px;color:var(--dim)}
.corner form{margin:0}
.linkbtn{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.linkbtn:hover{color:var(--accent)}
.linkbtn.danger:hover{color:var(--err)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes blur{from{opacity:0;filter:blur(8px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes type{from{width:0}}
@keyframes caret{50%{border-color:transparent}}
.anim-fade{animation:fade .9s ease both;animation-delay:calc(var(--i)*90ms)}
.anim-rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*90ms)}
.anim-blur{animation:blur 1s ease both;animation-delay:calc(var(--i)*90ms)}
.anim-float{animation:float 4s ease-in-out infinite}
.anim-pulse{animation:pulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){[class*="anim-"],.status.type span,.status.blink::before{animation:none!important}}
form.stack{display:grid;gap:22px;margin-top:20px}
.field{display:grid;gap:2px}
.field>span,.field small{color:var(--dim)}
input[type=text],input[type=password],textarea,select{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--fg);font:inherit;caret-color:var(--accent)}
textarea{resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--accent)}
select option{background:var(--bg);color:var(--fg)}
input[type=color]{width:36px;height:28px;padding:0;border:1px solid var(--line);background:transparent;cursor:pointer}
input[type=file]{color:var(--dim);font:inherit;max-width:100%}
input[type=file]::file-selector-button{margin-right:10px;padding:4px 12px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}
.row{display:flex;gap:24px;flex-wrap:wrap}
.row .field{flex:1 1 120px}
button.primary{justify-self:start;padding:7px 16px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;cursor:pointer}
button.primary:hover{border-color:var(--accent);color:var(--accent)}
.err{margin:16px 0 0;color:var(--err)}
.ok{margin:16px 0 0;color:var(--dim)}
.nav{display:flex;gap:16px;margin-top:28px;color:var(--dim)}
.sep{margin-top:48px}
.vh{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
fieldset.block{display:grid;gap:14px;margin:0;padding:0 0 0 14px;border:0;border-left:1px solid var(--line)}
.bhead{display:flex;justify-content:space-between;gap:12px;color:var(--dim)}
.ctl{display:flex;gap:12px}
.adds{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim)}
img.thumb{width:48px;height:48px;object-fit:cover;border:1px solid var(--line)}
.upl{display:flex;align-items:center;gap:12px}