@font-face{font-family:Poppins;src:url(../fonts/poppins-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-600.ttf) format("truetype");font-weight:600;font-display:swap}

:root{--bg:#f0f0f6;--surface:#fff;--side:#f4f7f9;--head:#3b4b5e;--text:#5f6f81;--mute:#7b8797;--line:#e3e5e8;--chip:#eef1fb;--acc:#304cfd;--c2:#8b5cf6;--c3:#0d9488;--acc2:#2640eb;--on-acc:#fff;--ok:#16a34a;--shadow:0 30px 80px rgba(48,60,120,.14);--btn-sh:0 .5rem 1rem rgba(48,76,253,.25);--ease:cubic-bezier(.16,1,.3,1);--sans:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--shape:1;--dot:rgba(48,76,253,.16);--o1:#c7d2ff;--o2:#ffd9c2;--o3:#b9f0ec}
[data-theme=dark]{--c2:#a78bfa;--c3:#2dd4bf;--bg:#0e0f14;--surface:#181a20;--side:#1e2027;--head:#eef0f6;--text:#a9afbd;--mute:#8a91a0;--line:#2a2d37;--chip:#252938;--acc:#6d84ff;--acc2:#4d68ff;--on-acc:#0b0d16;--ok:#4ade80;--shadow:0 30px 80px rgba(0,0,0,.5);--btn-sh:0 .5rem 1.2rem rgba(109,132,255,.25);--shape:1;--dot:rgba(140,160,255,.14);--o1:rgba(77,104,255,.35);--o2:rgba(167,85,247,.22);--o3:rgba(6,193,200,.2)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 15px/1.75 var(--sans);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .3s}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--on-acc);padding:8px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.bgshapes{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--shape);transition:opacity .3s}
.bgshapes::after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.bgshapes i{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 22s ease-in-out infinite alternate}
.o1{width:46vw;height:46vw;left:-12vw;top:-16vw;background:var(--o1)}
.o2{width:38vw;height:38vw;right:-10vw;top:22vh;background:var(--o2);animation-delay:-8s}
.o3{width:42vw;height:42vw;left:22vw;bottom:-24vw;background:var(--o3);animation-delay:-15s}
@keyframes drift{to{transform:translate(4vw,3vw) scale(1.1)}}

.avatar{width:170px;height:170px;border-radius:34px;overflow:hidden;background:linear-gradient(135deg,#ffd29a,#ffb37a);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar span{font:600 54px/1 var(--sans);color:#fff;letter-spacing:.02em;text-shadow:0 3px 14px rgba(120,60,0,.25)}
.avail{display:inline-flex;align-items:center;gap:8px;font:500 12.5px var(--sans);color:var(--ok)}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tools{display:flex;gap:8px}
.tool{width:36px;height:36px;border-radius:12px;background:var(--surface);display:grid;place-items:center;font:600 12px var(--sans);color:var(--head);border:1px solid var(--line);transition:border-color .2s,transform .3s var(--ease)}
.tool:hover{border-color:var(--acc);transform:translateY(-2px)}
.sun{display:none}
[data-theme=dark] .sun{display:block}[data-theme=dark] .moon{display:none}


.ph{margin-bottom:26px}
.ph h1{font:500 30px/1.25 var(--sans);color:var(--head);letter-spacing:-.01em;position:relative;padding-bottom:18px}
.ph h1::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:4px;border-radius:4px;background:var(--acc)}
.pdate{display:block;font:500 13px var(--sans);color:var(--acc);margin-bottom:6px}



.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 12.5px var(--sans);padding:5px 13px;border-radius:99px;background:var(--chip);color:var(--text)}


.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.proj{display:flex;flex-direction:column;gap:10px;border:2px solid var(--line);border-radius:24px;padding:14px 14px 22px;transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}
a.proj:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 18px 40px rgba(48,76,253,.12)}
.proj .media{aspect-ratio:16/8;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.proj .media img{width:100%;height:100%;object-fit:cover}
.media.t0{background:linear-gradient(135deg,#304cfd,#06c1c8)}
.media.t1{background:linear-gradient(135deg,#f97316,#ef3340)}
.media.t2{background:linear-gradient(135deg,#0e7490,#06c1c8)}
.glyph{font:600 64px var(--sans);color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.2)}
.proj .meta,.proj .desc,.proj .chips{padding:0 8px}
.proj .meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.proj h3{font:500 18px var(--sans);color:var(--head)}
.proj .go{color:var(--acc);transition:transform .3s var(--ease)}
a.proj:hover .go{transform:translate(3px,-3px)}
.proj .desc{font-size:14px}

.posts{display:grid;gap:18px}
.post{display:block;border:2px solid var(--line);border-radius:22px;padding:22px 24px;transition:transform .4s var(--ease),border-color .3s}
.post:hover{transform:translateY(-4px);border-color:var(--acc)}
.post time{font:500 12.5px var(--sans);color:var(--acc)}
.post h3{font:500 19px/1.4 var(--sans);color:var(--head);margin:4px 0 6px}
.post p{font-size:14.5px}
.post .more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:500 13.5px var(--sans);color:var(--acc)}
.empty{color:var(--mute)}
.pager{margin-top:24px}
.back{display:inline-block;margin-bottom:14px;font:500 13.5px var(--sans);color:var(--acc)}
.cover{border-radius:20px;margin-bottom:24px;width:100%}
.prose{max-width:70ch}
.prose h2,.prose h3{font-family:var(--sans);font-weight:500;color:var(--head);margin:28px 0 10px}
.prose p,.prose ul,.prose ol{margin-bottom:16px}
.prose ul{list-style:disc;padding-left:22px}.prose ol{list-style:decimal;padding-left:22px}
.prose a{color:var(--acc);text-decoration:underline}
.prose img{border-radius:16px;margin:18px 0}
.prose code{background:var(--chip);padding:2px 7px;border-radius:6px;font-size:.9em}
.prose pre{background:var(--side);padding:16px;border-radius:14px;overflow:auto;margin-bottom:16px}

.form{display:grid;gap:16px;max-width:960px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font:500 13px var(--sans);color:var(--mute)}
.form input,.form textarea{font:400 15px var(--sans);color:var(--head);background:var(--side);border:2px solid transparent;border-radius:14px;padding:13px 16px;width:100%;transition:border-color .2s,background .2s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--acc);background:var(--surface)}
.form textarea{resize:vertical}
.send{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:16px;background:linear-gradient(137deg,var(--acc) 26%,var(--acc2) 94%);color:#fff;font:500 15px var(--sans);box-shadow:var(--btn-sh);transition:transform .3s var(--ease)}
.send:hover{transform:translateY(-3px)}
.err{color:#d14343}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

.foot{position:relative;z-index:1;text-align:center;font-size:13px;color:var(--mute);padding:26px 0 34px}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0)*1s)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}


.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(14,16,30,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal-box{position:relative;overflow:hidden;width:min(420px,100%);background:var(--surface);border-radius:28px;padding:38px 32px 34px;text-align:center;box-shadow:0 40px 90px rgba(0,0,0,.35);transform:translateY(30px) scale(.9);transition:transform .6s var(--ease)}
.modal.open .modal-box{transform:none}
.modal-box h2{font:500 22px var(--sans);color:var(--head);margin:18px 0 6px}
.modal-box p{margin-bottom:24px}
.check{width:92px;height:92px;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ring{stroke-dasharray:145;stroke-dashoffset:145;transform-origin:center;transform:rotate(-90deg)}
.tick{stroke-dasharray:50;stroke-dashoffset:50}
.modal.open .ring{animation:draw .7s .25s var(--ease) forwards}
.modal.open .tick{animation:draw .45s .85s var(--ease) forwards}
.modal.open .check{animation:pop .5s 1.1s var(--ease)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{40%{transform:scale(1.12)}}
.modal .bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.modal.open .bar{animation:bar 7s linear forwards}
@keyframes bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.modal.open .bar{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

.cardpage{position:relative;max-width:520px;margin:0 auto;padding:72px 20px 56px;min-height:100vh;display:flex;flex-direction:column;align-items:stretch}
.cardpage .tools{position:absolute;top:20px;right:20px}
.chead{text-align:center}
.chead .avatar{width:132px;height:132px;margin:0 auto 18px;border-radius:34px}
.chead .avatar span{font-size:46px}
.chead h1{font:600 28px/1.25 var(--sans);color:var(--head)}
.chead .role{font-size:15px;color:var(--mute);margin-top:2px;font-weight:400}
.chead .avail{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:500 12.5px var(--sans);color:var(--ok)}
.chead .avail i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.ctag{margin:16px auto 0;max-width:42ch;font-size:15px}
.clinks{display:grid;gap:12px;margin-top:28px}
.clink{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--head);font:500 15px/1.3 var(--sans);box-shadow:0 8px 24px rgba(48,60,120,.08);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.clink span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clink .ic{width:22px;height:22px;color:var(--acc)}
.clink .go{width:16px;height:16px;color:var(--mute);transition:transform .25s var(--ease),color .25s}
.clink:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 14px 34px rgba(48,76,253,.18)}
.clink:hover .go{transform:translate(2px,-2px);color:var(--acc)}
.clink.main{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:var(--btn-sh)}
.clink.main .ic,.clink.main .go{color:var(--on-acc)}
.cloc{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:13.5px;color:var(--mute)}
.cloc .ic{width:16px;height:16px;color:var(--acc)}
@media (max-width:420px){.cardpage{padding:64px 16px 40px}.chead h1{font-size:25px}}


html.lock{overflow:hidden}
button.clink{width:100%;cursor:pointer;text-align:left}
.fbox{width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;text-align:left;padding:34px 30px 30px}
.fbox h2{margin:0 0 6px;padding-right:40px}
.fbox .fsub{margin-bottom:20px;font-size:14.5px}
.fbox .form{max-width:none;gap:14px}
.fbox .send{justify-self:start}
.mclose{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--chip);color:var(--head);cursor:pointer;border:0;transition:background .2s,color .2s}
.mclose:hover{background:var(--acc);color:var(--on-acc)}
.mclose .ic{width:18px;height:18px}
@media (max-width:560px){.fbox{padding:28px 20px 24px}.fbox .form .two{grid-template-columns:1fr}}


.cardpage.sub{max-width:720px;padding-top:24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:34px}
.cardpage.sub .tools{position:static}
.homelink{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--head);font:500 14px var(--sans);box-shadow:0 8px 24px rgba(48,60,120,.08);transition:border-color .25s,transform .25s var(--ease)}
.homelink:hover{border-color:var(--acc);transform:translateY(-2px)}
.homelink .avatar{width:34px;height:34px;border-radius:50%;box-shadow:none}
.homelink .avatar span{font-size:13px;text-shadow:none}
.cardpage.sub .ph{margin-bottom:28px}
.cardpage.sub .foot{margin-top:auto;padding-top:48px}
.work{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.proj,.post{background:var(--surface);box-shadow:0 8px 24px rgba(48,60,120,.06)}
@media (max-width:1000px){body{font-size:14.5px}.o1,.o2,.o3{width:80vw;height:80vw}}
@media (max-width:420px){.cardpage.sub{padding-top:16px}.topbar{margin-bottom:26px}}
.cpages{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:26px}
.cpages a{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--acc) 12%,var(--surface));border:2px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);font:600 15px var(--sans);transition:background .2s,color .2s,transform .25s var(--ease),box-shadow .25s}
.cpages a .ic{width:20px;height:20px}
.cpages a:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc);transform:translateY(-3px);box-shadow:var(--btn-sh)}