:root{--ink:#1b1140;--mute:#5d5680;--bg:#f8f6ff;--k0:#6c4cff;--k1:#ff4d8d;--k2:#ff8a1f;--k3:#0fb5a0;--k4:#2f80ff;--r:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 1.05rem/1.65 "DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",sans-serif;line-height:1.1;margin:0}
a{color:inherit}.wrap{max-width:1080px;margin:0 auto;padding:4.5rem 1.4rem 0}
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.4rem;background:rgba(248,246,255,.85);backdrop-filter:blur(10px)}
.nav nav{display:flex;gap:1.2rem;font-weight:500;font-size:.95rem}.nav nav a{text-decoration:none}.nav nav a:hover{color:var(--k0)}
.logo{font:800 1.4rem "Bricolage Grotesque",sans-serif;text-decoration:none;background:linear-gradient(90deg,var(--k0),var(--k1),var(--k2));-webkit-background-clip:text;color:transparent}
.hero{position:relative;overflow:hidden;padding:6rem 1.4rem 5rem;max-width:1080px;margin:0 auto}
.hello{font-weight:700;color:var(--k1);margin:0 0 .6rem;font-size:1.1rem}
.hero h1{font-size:clamp(3rem,10vw,7.2rem);font-weight:800;letter-spacing:-.03em}
.role{font-size:1.3rem;color:var(--mute);margin:1rem 0 2rem;max-width:34ch}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1}
.b1{width:340px;height:340px;background:var(--k0);top:-60px;right:-40px}.b2{width:260px;height:260px;background:var(--k1);top:180px;right:220px}.b3{width:240px;height:240px;background:var(--k2);bottom:-60px;left:35%}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;max-width:760px}
.chip{padding:.45rem 1rem;border-radius:99px;background:var(--c);color:#fff;font-weight:700;font-size:.9rem;transform:rotate(calc((var(--n,0) - 1) * 1deg))}
.chip:nth-child(3n+1){transform:rotate(-2deg)}.chip:nth-child(3n+2){transform:rotate(1.5deg)}
.about p{font-size:1.35rem;max-width:62ch;margin:0}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:2rem}
small{color:var(--mute);font-weight:700}h3{font-size:1.4rem;margin:.3rem 0}
.timeline{border-left:3px solid #e2dcff;margin-left:.5rem;padding-left:1.8rem;display:grid;gap:1.6rem}
.tl{position:relative;background:#fff;padding:1.3rem 1.5rem;border-radius:var(--r);box-shadow:0 8px 30px -14px var(--c)}
.tl .dot{position:absolute;left:-2.3rem;top:1.6rem;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px var(--bg)}
.tl p,.card p{margin:.5rem 0 0;color:var(--mute)}.tl b,.card>b{color:var(--c)}
.grid{display:grid;gap:1.4rem}.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.three{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card{background:#fff;border-radius:var(--r);padding:1.5rem;border-top:8px solid var(--c);display:flex;flex-direction:column;box-shadow:0 10px 30px -18px var(--c)}
.proj .top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.proj p{flex:1}.pill{font-size:.75rem;font-weight:700;padding:.2rem .7rem;border-radius:99px;background:var(--c);color:#fff;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}.tags span{font-size:.8rem;padding:.15rem .6rem;border-radius:8px;background:#f0edff}
.btn{display:inline-block;padding:.6rem 1.2rem;border-radius:99px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--k0)}.btn.ghost{background:#eee9ff;color:var(--ink)}.btn.danger{background:#ffe3ea;color:#c0203f}
.card .btn{align-self:flex-start;background:var(--c)}
footer{padding-bottom:3rem}.links{display:flex;flex-wrap:wrap;gap:.8rem}.copy{margin-top:3rem;color:var(--mute);font-size:.9rem}
.empty{color:var(--mute)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--k4);outline-offset:2px}
@media(max-width:640px){.nav nav a:nth-child(-n+2){display:none}.role{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* admin */
.adm{max-width:900px;margin:0 auto;padding:1.5rem 1.4rem 4rem}.adm h1{font-size:2rem}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}.tabs button{padding:.5rem 1.1rem;border-radius:99px;border:0;background:#eee9ff;font:700 .95rem "DM Sans";cursor:pointer}
.tabs button.on{background:var(--k0);color:#fff}
.panel{background:#fff;border-radius:var(--r);padding:1.2rem;box-shadow:0 10px 30px -20px var(--k0)}
.row{display:flex;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid #f0edff}.row:last-child{border:0}
.row .sw{width:14px;height:36px;border-radius:6px;flex:none}.row .t{flex:1;min-width:0}.row .t b,.row .t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .t span{color:var(--mute);font-size:.9rem}
.row .btn{padding:.4rem .9rem;font-size:.85rem}
label{display:block;font-weight:700;font-size:.9rem;margin:.9rem 0 .3rem}
input,textarea{width:100%;padding:.65rem .8rem;border:2px solid #e2dcff;border-radius:12px;font:inherit;background:#fff}
input[type=color]{height:44px;padding:3px}textarea{min-height:96px;resize:vertical}
dialog{border:0;border-radius:var(--r);padding:1.5rem;width:min(520px,92vw);box-shadow:0 30px 80px -20px rgba(27,17,64,.5)}
dialog::backdrop{background:rgba(27,17,64,.45)}.acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem}
.login{max-width:380px;margin:12vh auto;padding:2rem;background:#fff;border-radius:var(--r);box-shadow:0 20px 50px -25px var(--k0)}
.err{color:#c0203f;font-weight:700}.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1.2rem;border-radius:99px;font-weight:700}