:root{--ink:#3b3558;--on:#352f52;--bg:#faf4ea;--txt:#352f52;--glass:rgba(255,255,255,.64);--y:#f8e0a0;--p:#f5c2cf;--m:#b5e5d8;--l:#d3c8f5;--b:#b4d8f5;--sh:4px 4px 0 var(--ink);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#d9d0f0;--bg:#1e1a33;--txt:#ece6fa;--glass:rgba(64,52,104,.55)}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--txt);background:var(--bg);background-image:radial-gradient(circle at 8% 6%,var(--l) 0,transparent 32%),radial-gradient(circle at 94% 24%,var(--p) 0,transparent 28%),radial-gradient(circle at 12% 88%,var(--m) 0,transparent 34%),radial-gradient(circle at 90% 86%,var(--y) 0,transparent 30%);background-attachment:fixed;min-height:100vh;padding:0 14px 120px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
.g{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh)}
header{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20;max-width:960px;margin:12px auto 0;padding:8px 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.brand{background:var(--y);color:var(--on);border:2.5px solid var(--ink);padding:3px 12px;border-radius:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.hr{display:flex;gap:6px;flex-wrap:wrap}
.hb{min-width:36px;height:36px;padding:0 6px;display:inline-grid;place-items:center;font:700 12px 'Space Grotesk',system-ui,sans-serif;background:#fffdf8;color:var(--on);border:2.5px solid var(--ink);border-radius:11px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.hb:hover,.btn:hover,.cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hb.on{background:var(--m)}
main{max-width:960px;margin:24px auto 0;position:relative;z-index:1}
.dc{position:fixed;width:38px;height:38px;z-index:0;pointer-events:none;animation:fl 6s ease-in-out infinite}
.d1{top:120px;right:4%;color:var(--y)}.d2{top:58%;left:2%;color:var(--p);animation-delay:-2s}.d3{bottom:16%;right:5%;color:var(--m);animation-delay:-4s}
@keyframes fl{50%{transform:translateY(-14px) rotate(18deg)}}
.sec{display:inline-block;margin:36px 0 16px;scroll-margin-top:96px}
.sec h2{display:inline-block;background:var(--y);color:var(--on);border:2.5px solid var(--ink);padding:3px 16px;border-radius:12px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:4px 4px 0 var(--ink)}
.sq{display:block;width:70px;height:14px;color:var(--p);margin:6px 0 0 8px}
.card{padding:20px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.btn,.cta{display:inline-block;background:var(--y);color:var(--on);border:2.5px solid var(--ink);border-radius:14px;padding:11px 20px;font:700 1rem 'Space Grotesk',system-ui,sans-serif;text-decoration:none;box-shadow:var(--sh);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn.p{background:var(--p)}.btn.m,.cta.alt{background:var(--m)}.cta{display:block;text-align:center;margin-top:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero{display:grid;gap:26px;align-items:center}
@media(min-width:760px){.hero{grid-template-columns:1.1fr .9fr}}
.kick{display:inline-block;background:var(--b);color:var(--on);border:2.5px solid var(--ink);padding:2px 14px;border-radius:99px;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)}
h1{font-size:clamp(2.7rem,11vw,4.8rem);line-height:.98;margin:14px 0 8px;background:linear-gradient(transparent 62%,var(--y) 62%) no-repeat;background-size:100% 100%;display:inline-block;color:var(--txt)}
.typed{font-weight:700;font-size:1.2rem;min-height:1.9rem}.typed i{display:inline-block;width:3px;height:1.1em;background:var(--p);vertical-align:-2px;margin-left:3px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.lead{max-width:46ch;margin-top:6px}
.fw{position:relative;padding:10px}
.frame{display:block;width:100%;max-width:380px;margin:auto;aspect-ratio:1;object-fit:cover;border:4px solid var(--ink);border-radius:38% 62% 55% 45%/50% 40% 60% 50%;box-shadow:8px 8px 0 var(--ink);background:var(--l)}
.stk{position:absolute;background:var(--p);color:var(--on);border:2.5px solid var(--ink);padding:2px 12px;border-radius:10px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.stk.a{right:2%;top:4%;}.stk.b{left:2%;bottom:6%;background:var(--m)}
.art{width:100%;max-width:300px;display:block;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
@media(min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border:2.5px solid var(--ink);border-radius:16px;padding:12px;text-align:center;color:var(--on);box-shadow:4px 4px 0 var(--ink)}
.stat:nth-child(1){background:var(--y)}.stat:nth-child(2){background:var(--m)}.stat:nth-child(3){background:var(--p)}.stat:nth-child(4){background:var(--l)}
.stat b{display:block;font-size:1.7rem;line-height:1.1}.stat span{font-size:.85rem;font-weight:500}
.tm{padding:18px}.tm p{font-weight:500}.tm .q{font-size:2.4rem;line-height:.6;color:var(--p);font-weight:700;display:block;margin-bottom:6px}.tm small{display:block;margin-top:10px;opacity:.75}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:7px 16px;border:2.5px solid var(--ink);border-radius:99px;font-weight:700;background:var(--glass);box-shadow:3px 3px 0 var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--p);border:2px solid var(--ink);margin-right:8px}
.chip:nth-child(3n+2)::before{background:var(--m)}.chip:nth-child(3n)::before{background:var(--y)}
.who{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ava{width:96px;height:96px;object-fit:cover;border:2.5px solid var(--ink);border-radius:30% 70% 60% 40%/50% 40% 60% 50%;box-shadow:4px 4px 0 var(--ink);background:var(--l)}
.who h3{font-size:1.5rem;line-height:1.1}
.role{display:inline-block;background:var(--m);color:var(--on);border:2.5px solid var(--ink);border-radius:8px;padding:0 10px;font-weight:700;font-size:.85rem;margin:6px 0}
.quote{font-style:italic;opacity:.85}
.story p{margin-top:14px;font-size:1.02rem}
.story p:first-child{margin-top:18px}
.yt{display:flex;gap:14px;align-items:center;padding:16px;text-decoration:none}
.ic{flex:none;width:50px;height:50px;display:grid;place-items:center;font-size:1.5rem;border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);background:var(--y);color:var(--on)}
.yt h3,.proj h3{font-size:1.05rem}.yt p,.proj p{font-size:.88rem;opacity:.8}
.bar{display:grid;grid-template-columns:110px 1fr 42px;gap:10px;align-items:center;margin:12px 0;font-weight:700;font-size:.92rem}
.bar div{height:18px;border:2.5px solid var(--ink);border-radius:99px;background:#fffdf8;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--p);border-right:2.5px solid var(--ink);transition:width 1s cubic-bezier(.2,.8,.2,1)}

.street{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--p);color:var(--on);border:2.5px solid var(--ink);border-radius:14px;padding:10px 16px;box-shadow:4px 4px 0 var(--ink);}
.proj{display:flex;gap:14px;align-items:center;padding:14px;cursor:default}



.bs{display:inline-block;background:var(--p);color:var(--on);border:2px solid var(--ink);border-radius:8px;padding:0 6px;font-size:.7rem}
.fl{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.fl button{font:700 .9rem 'Space Grotesk',system-ui,sans-serif;background:var(--glass);color:var(--txt);border:2.5px solid var(--ink);border-radius:99px;padding:5px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.fl button.on{background:var(--y);color:var(--on)}
.vid{position:relative;overflow:hidden;padding:0}
.vid video{display:block;width:100%;max-height:420px;background:#000;object-fit:cover}
.vc{display:flex;gap:10px;padding:12px}
.vc button{flex:1;font:700 1rem 'Space Grotesk',system-ui,sans-serif;border:2.5px solid var(--ink);border-radius:12px;padding:8px;background:var(--m);color:var(--on);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.vc button+button{background:var(--p)}
.jump{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-top:20px}
.jump button{flex:none;font:700 .85rem 'Space Grotesk',system-ui,sans-serif;background:var(--glass);color:var(--txt);border:2.5px solid var(--ink);border-radius:99px;padding:4px 14px;cursor:pointer}
.info2{display:flex;gap:10px;flex-wrap:wrap}.info2 .chip::before{display:none}
.vbar{margin-top:14px;text-align:center;font-weight:500;opacity:.85}
.rk{position:relative;display:flex;gap:10px;align-items:center;width:100%;margin-bottom:10px;padding:10px 14px;overflow:hidden;font:700 .95rem 'Space Grotesk',system-ui,sans-serif;color:var(--txt);text-align:left;background:var(--glass);border:2.5px solid var(--ink);border-radius:14px;cursor:pointer}
.rk .fill{position:absolute;left:0;top:0;bottom:0;background:var(--m);opacity:.55}
.rk.on{outline:2.5px solid var(--p)}.rk span{position:relative}.rk .nm{flex:1}
.chart{padding:16px;margin-top:6px}.chart h3{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.chart small{font-weight:500;opacity:.7}
.bars{display:flex;align-items:flex-end;gap:5px;height:160px;margin-top:14px;border-bottom:2.5px solid var(--ink)}
.bars button{flex:1;border:2.5px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;background:var(--p);cursor:pointer;min-height:6px}
.bars button:nth-child(even){background:var(--l)}
.mo{display:flex;gap:5px;font-size:.62rem;text-align:center;margin-top:4px}.mo span{flex:1}
.cinfo{margin-top:10px;font-weight:700;font-size:.9rem}
.steps{list-style:none;counter-reset:s;padding:0}
.steps li{counter-increment:s;position:relative;padding:4px 0 14px 54px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;display:grid;place-items:center;background:var(--y);color:var(--on);border:2.5px solid var(--ink);border-radius:50%;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.steps b{display:block}.steps span{opacity:.82;font-size:.92rem}
.ben{list-style:none;padding:0}.ben li{padding:6px 0 6px 32px;position:relative}
.note{margin-top:12px;opacity:.8;font-size:.92rem}
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;gap:4px;padding:6px;width:min(94vw,540px);border-radius:22px}
nav a{flex:1;text-align:center;text-decoration:none;font-size:.7rem;font-weight:700;padding:5px 2px;border:2.5px solid transparent;border-radius:15px;line-height:1.25;transition:transform .15s}
nav a em{display:block;font-style:normal;font-size:1.3rem}
nav a.on{background:var(--y);color:var(--on);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);transform:translateY(-8px)}
.mx{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(53,47,82,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}
.mx.on{display:grid}
.mbox{width:min(92vw,400px);padding:20px;text-align:center;background:var(--bg)}
.mbox h3{margin-bottom:12px}.mbox .btn{margin-top:14px}.mbox .big{font-size:2.6rem}.mbox ul{text-align:left}
.song{display:flex;gap:12px;align-items:center;width:100%;text-align:left;margin-bottom:10px;padding:10px 12px;font:inherit;color:var(--txt);background:var(--glass);border:2.5px solid var(--ink);border-radius:14px;cursor:pointer}
.song.on{background:var(--m);color:var(--on)}.song small{display:block;opacity:.75}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 80px);transform:translate(-50%,-20px);opacity:0;z-index:60;background:var(--y);color:var(--on);border:2.5px solid var(--ink);border-radius:12px;padding:8px 18px;font-weight:700;box-shadow:var(--sh);transition:.3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.center{min-height:100vh;display:grid;place-items:center;text-align:center;padding:20px}
.center .g{padding:28px;max-width:420px;width:100%}
.lt{height:20px;border:2.5px solid var(--ink);border-radius:99px;background:#fffdf8;overflow:hidden;margin:16px 0 8px}.lt i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--p) 0 10px,var(--y) 10px 20px)}
.lv video{width:100%;max-height:200px;object-fit:cover;border:2.5px solid var(--ink);border-radius:16px;background:#000}
.e404{font-size:5rem;font-weight:700;line-height:1}
@media(max-width:480px){.bar{grid-template-columns:84px 1fr 38px}.hb{min-width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.sec{margin:34px 0 14px}.dc{opacity:.6}
svg.i{width:1.25em;height:1.25em;vertical-align:-.28em;flex:none}
.hb svg{width:18px;height:18px}.ic svg{width:26px;height:26px}
nav a svg{width:23px;height:23px;display:block;margin:0 auto 2px}
.brand{white-space:nowrap}header{flex-wrap:nowrap}
.stack{display:grid;gap:16px}.stack .stats{margin-top:0}
.story p:first-child{margin-top:16px}
.own{display:flex;gap:16px;align-items:flex-start;padding:20px}.own h3{font-size:1.25rem;line-height:1.2;margin:6px 0}.own p{opacity:.92}.own .ic{background:var(--b)}
.skills h3{margin-bottom:6px}
.skills .bar:nth-child(2) i{background:var(--p)}.skills .bar:nth-child(3) i{background:var(--m)}.skills .bar:nth-child(4) i{background:var(--y)}.skills .bar:nth-child(5) i{background:var(--l)}
.grid.pg{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.proj .ic{background:var(--y)}.proj:nth-child(4n+2) .ic{background:var(--m)}.proj:nth-child(4n+3) .ic{background:var(--p)}.proj:nth-child(4n) .ic{background:var(--l)}
.prod{flex-direction:column;align-items:stretch;gap:12px}.prod .top{display:flex;gap:14px;align-items:flex-start}
.prod .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);padding-top:12px;margin-top:auto}
.mini{background:var(--y);color:var(--on);border:2.5px solid var(--ink);border-radius:10px;padding:3px 16px;font-weight:700;text-decoration:none;box-shadow:2px 2px 0 var(--ink)}
.bs{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.ben li svg{position:absolute;left:0;top:9px;width:20px;height:20px;color:#3a9d7a}
.btns{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:20px}.btns .cta{margin:0}
.cta svg{margin-right:6px}.cta.tt{background:var(--l)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.facts .chip::before{display:none}
.copy p{margin-top:12px}.copy p:first-child{margin-top:16px}
.ld{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .2s}
.ld.on{display:grid}.ld.out{opacity:0}
.ldc{width:min(88vw,320px);padding:18px;text-align:center}.ldc .lt{margin:14px 0 8px}
.dots::after{content:'';animation:dt 1.2s steps(1) infinite}
@keyframes dt{25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.mbox .big svg{width:48px;height:48px}
.song svg{width:22px;height:22px}
@media(max-width:480px){.brand{font-size:.8rem;padding:3px 9px}.hr{gap:4px}.hb{min-width:32px;height:32px;padding:0}.hb svg{width:17px;height:17px}}

.chip{display:inline-flex;align-items:center;gap:8px}.chip svg{width:22px;height:22px}.chip.ci::before{display:none}
svg.b{width:24px;height:24px}.chip svg.b+svg.b{margin-left:-4px}
.bar{grid-template-columns:130px 1fr 38px}.bar span{display:flex;align-items:center;gap:6px}.bar span svg{width:18px;height:18px}
header,nav{background:color-mix(in srgb,var(--bg) 84%,transparent)}
.hr{flex-wrap:nowrap}
@media(max-width:480px){.bar{grid-template-columns:120px 1fr 36px;font-size:.85rem}header{padding:8px;gap:6px}.brand{font-size:.74rem;padding:3px 8px;letter-spacing:.04em}.hr{gap:4px}.hb{min-width:30px;height:30px;border-radius:9px}.hb svg{width:16px;height:16px}}

html.nv .ld{display:none!important}
.names{margin-top:20px;padding-top:16px;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)}.names h4{font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.names p{margin-top:6px}
main>.sec:first-child,main>section>.sec:first-child{margin-top:6px}
.who{flex-wrap:nowrap}.who>div{min-width:0}
.facts .chip{padding:4px 12px;font-size:.9rem}.facts .chip svg{width:18px;height:18px}
.cta{display:flex;justify-content:center;align-items:center;gap:8px;text-align:center}.cta svg{margin:0;flex:none}
.street strong{white-space:nowrap}
@media(max-width:480px){.ava{width:80px;height:80px}.who{gap:14px}.who h3{font-size:1.35rem}.stat b{font-size:1.5rem}.bar{grid-template-columns:118px 1fr 36px}.bar span{font-size:.8rem}.cta{font-size:.95rem}.street{font-size:.9rem}}
@keyframes fill{from{width:0}to{width:100%}}
.ld .lt i,.center .lt i{animation:fill 2.8s cubic-bezier(.22,.7,.2,1) forwards}
.hb.lang{display:inline-flex;gap:3px;align-items:center;padding:0 7px;font-size:.7rem;min-width:46px}.hb.lang svg{width:14px;height:14px}