:root{
  --bg:#0c0a1d; --bg-2:#161236; --ink:#f2efff; --ink-dim:#a39fc4; --line:rgba(190,180,255,.16);
  --violet:#7b5cff; --cyan:#3fe0d0; --rose:#ff6fae; --amber:#ffc46b;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#f5f3ff;--bg-2:#e7e1ff;--ink:#1a1438;--ink-dim:#5a5480;--line:rgba(60,40,140,.16)}
}
:root[data-theme="light"]{--bg:#f5f3ff;--bg-2:#e7e1ff;--ink:#1a1438;--ink-dim:#5a5480;--line:rgba(60,40,140,.16)}
:root[data-theme="dark"]{--bg:#0c0a1d;--bg-2:#161236;--ink:#f2efff;--ink-dim:#a39fc4;--line:rgba(190,180,255,.16)}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}

/* background aurora */
.aurora{position:fixed;inset:-20%;filter:blur(90px);opacity:.38;pointer-events:none;z-index:0}
.aurora span{position:absolute;width:45vmax;height:45vmax;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.aurora span:nth-child(1){background:var(--violet);top:0;left:0}
.aurora span:nth-child(2){background:var(--cyan);top:40%;right:-10%;animation-delay:-8s;opacity:.6}
.aurora span:nth-child(3){background:var(--rose);bottom:-10%;left:30%;animation-delay:-14s;opacity:.5}
@keyframes drift{to{transform:translate(8vw,-6vh) scale(1.15)}}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .aurora span{mix-blend-mode:multiply;opacity:.3}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 1rem) clamp(1.25rem,4vw,3rem) 1rem;display:flex;justify-content:space-between;align-items:center;transition:background .4s}
nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;letter-spacing:-.02em}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--violet),var(--cyan),var(--rose));transform-origin:left;transform:scaleX(0)}
nav ul{display:flex;gap:clamp(1rem,2.5vw,2rem);list-style:none}
nav ul a{text-decoration:none;font-size:.92rem;color:var(--ink-dim);transition:color .2s}
nav ul a:hover,nav ul a[aria-current="true"]{color:var(--ink)}
@media (max-width:900px){nav ul li:not(:last-child){display:none}}

/* LAYOUT */
.split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.content{padding:0 clamp(1.25rem,5vw,5rem)}
.slide{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:6rem 0 4rem;max-width:640px}
.slide>*{opacity:.18;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.slide.seen>*{opacity:1;transform:none}
.slide.seen>*:nth-child(2){transition-delay:.08s}.slide.seen>*:nth-child(3){transition-delay:.16s}.slide.seen>*:nth-child(4){transition-delay:.24s}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6.5vw,5.6rem);letter-spacing:-.05em;line-height:.98}
h1 span{background:linear-gradient(100deg,var(--violet),var(--cyan) 45%,var(--rose) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.04em;line-height:1.05;margin-bottom:1.4rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink-dim);max-width:42ch;margin-top:1.4rem}
.lead strong{color:var(--ink);font-weight:600}
.cue{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.5rem;font-size:.92rem;color:var(--ink-dim)}
.cue i{width:22px;height:36px;border:1.5px solid var(--ink-dim);border-radius:12px;position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:var(--ink);translate:-50% 0;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(11px);opacity:0}100%{opacity:0}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.stat{border:1px solid var(--line);border-radius:18px;padding:1.2rem;background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat span{font-size:.88rem;color:var(--ink-dim)}
.cards{display:grid;gap:1rem}
.card{border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.4rem;background:color-mix(in srgb,var(--bg-2) 60%,transparent);transition:border-color .3s,transform .3s}
.card:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);transform:translateX(4px)}
.card h3{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.card p{color:var(--ink-dim);font-size:.97rem;margin-top:.3rem}
.card .meta{font-size:.85rem;color:var(--cyan);font-weight:600;margin-bottom:.2rem}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem;list-style:none}
.tags li{font-size:.8rem;padding:.2rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
.chips li{font-family:var(--display);font-weight:300;font-size:clamp(.95rem,1.5vw,1.15rem);padding:.45rem 1.1rem;border:1px solid var(--line);border-radius:999px}
.chips li:nth-child(4n+1){color:var(--cyan)}
.group{margin-top:1.4rem}
.group h3{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.7rem}
.btn{display:inline-block;padding:1rem 2.2rem;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none;margin-top:2rem}
.links{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem}
.links a{color:var(--ink-dim);text-decoration:none}
.links a:hover{color:var(--ink)}
footer{position:relative;z-index:1;text-align:center;color:var(--ink-dim);font-size:.85rem;padding:2rem 1rem calc(env(safe-area-inset-bottom,0px) + 2rem);border-top:1px solid var(--line)}

/* hobbies */
.hobbies{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hobby{border:1px solid var(--line);border-radius:20px;padding:1.4rem;background:color-mix(in srgb,var(--bg-2) 60%,transparent);transition:border-color .3s,transform .3s}
.hobby:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);transform:translateY(-4px)}
.hobby h3{font-family:var(--display);font-weight:500;font-size:1.05rem;margin-top:.8rem}
.hobby p{color:var(--ink-dim);font-size:.95rem;margin-top:.35rem}
.icon{display:inline-grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:16px;font-size:1.7rem;background:color-mix(in srgb,var(--violet) 22%,transparent)}
.slide.seen .icon.bowl{animation:roll 2.6s cubic-bezier(.3,.6,.4,1) .4s both}
.slide.seen .icon.paint{animation:wiggle 1.2s ease-in-out .9s both}
.slide.seen .icon.bot{animation:beep 1.4s ease-in-out 1.3s both}
.hobby:hover .icon.bowl{animation:roll 1.6s cubic-bezier(.3,.6,.4,1)}
.hobby:hover .icon.paint{animation:wiggle .9s ease-in-out}
.hobby:hover .icon.bot{animation:beep 1s ease-in-out}
@keyframes roll{0%{transform:translateX(-140%) rotate(-360deg);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes beep{0%,100%{transform:translateY(0)}25%{transform:translateY(-18%)}50%{transform:translateY(0) scale(1.08)}75%{transform:translateY(-8%)}}
@media (max-width:640px){.hobbies{grid-template-columns:1fr}}

/* AI projects dialog */
.hobby.clickable{cursor:pointer;position:relative}
.hobby .more{display:inline-block;margin-top:.8rem;font-size:.88rem;font-weight:700;color:var(--cyan);transition:transform .25s}
.hobby.clickable:hover .more,.hobby.clickable:focus-visible .more{transform:translateX(5px)}
.ai-dialog{margin:auto;width:min(680px,calc(100vw - 2rem));max-height:min(86vh,760px);border:1px solid var(--line);border-radius:26px;padding:clamp(1.25rem,3vw,2rem);background:var(--bg);color:var(--ink);box-shadow:0 40px 100px -30px rgba(20,10,60,.7);overflow:auto}
.ai-dialog::backdrop{background:rgba(10,6,30,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ai-dialog[open]{animation:dlgin .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes dlgin{from{opacity:0;transform:translateY(24px) scale(.96)}}
.ai-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
.ai-head h2{margin:0;font-size:clamp(1.4rem,3vw,2rem)}
.ai-close{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:1rem;cursor:pointer}
.ai-close:hover{background:color-mix(in srgb,var(--violet) 20%,transparent)}
.ai-list{list-style:none;display:grid;gap:.9rem}
.ai-list>li{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.ai-dialog[open] .ai-list>li{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--i) * .09s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.ai-ico{flex:none;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:14px;font-size:1.4rem;background:color-mix(in srgb,var(--violet) 22%,transparent)}
.ai-list h3{font-family:var(--display);font-weight:500;font-size:1.02rem}
.ai-list p{color:var(--ink-dim);font-size:.95rem;margin-top:.25rem}
.ai-link{display:inline-block;margin-top:.8rem;font-size:.9rem;font-weight:700;color:var(--cyan);text-decoration:none}
.ai-link:hover{text-decoration:underline;text-underline-offset:4px}
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.8rem;max-width:360px}
.reel figure{margin:0;position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.reel figure:hover img{transform:scale(1.08)}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem .3rem .3rem;font-size:.66rem;font-weight:700;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.ai-dialog[open] .reel figure{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.ai-dialog[open] .reel figure:nth-child(2){animation-delay:.08s}.ai-dialog[open] .reel figure:nth-child(3){animation-delay:.16s}.ai-dialog[open] .reel figure:nth-child(4){animation-delay:.24s}

/* web design dialog */
.wd-dialog{width:min(860px,calc(100vw - 2rem))}
.wd-shot.scrolly{position:relative;aspect-ratio:16/10}
.wd-shot.scrolly img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.wd-dialog[open] .wd-shot.scrolly img{animation:shotin .9s cubic-bezier(.2,.8,.2,1) .1s both,pagescroll 18s ease-in-out 1.2s infinite alternate}
@keyframes pagescroll{0%,8%{object-position:50% 0}92%,100%{object-position:50% 100%}}
.wd-item:hover .wd-shot.scrolly img{transform:none}
.scroll-tag{position:absolute;right:.8rem;bottom:.8rem;padding:.3rem .7rem;border-radius:999px;background:rgba(20,15,40,.72);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.02em}
.wd-item+.wd-item{margin-top:1rem}
.wd-item{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.wd-shot{margin:0;overflow:hidden;background:var(--bg-2)}
.wd-shot img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wd-dialog[open] .wd-shot img{animation:shotin .9s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes shotin{from{opacity:0;transform:scale(1.08)}}
.wd-item:hover .wd-shot img{transform:scale(1.03)}
.wd-body{padding:1.2rem 1.4rem 1.4rem}
.wd-body h3{font-family:var(--display);font-weight:600;font-size:1.25rem}
.wd-sub{color:var(--cyan);font-weight:700;font-size:.9rem;margin-top:.1rem}
.wd-body p:not(.wd-sub){color:var(--ink-dim);margin-top:.6rem;font-size:.97rem}
.wd-dialog[open] .wd-body{animation:rise .5s cubic-bezier(.2,.8,.2,1) .35s both}

/* ================= STAGE ================= */
.stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9vh;overflow:visible}
.spot{position:absolute;left:50%;bottom:6vh;width:min(36vw,520px);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 40%,transparent),transparent);opacity:.8;transition:background 1s}
.floor{position:absolute;left:50%;bottom:7vh;width:min(30vw,420px);height:3.4vh;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);overflow:hidden}
.floor::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.25) 22px 26px);background-position-x:var(--tread,0px);mask:radial-gradient(closest-side,#000,transparent);-webkit-mask:radial-gradient(closest-side,#000,transparent);opacity:0;transition:opacity .3s}
.actor.walk~.floor::before,.stage.walking .floor::before{opacity:1}
.shadow{position:absolute;left:50%;bottom:-1.2vh;width:120%;height:3vh;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(5,3,20,.55),transparent)}

.actor{position:relative;height:min(76vh,700px);aspect-ratio:.32;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pose{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:var(--ar);translate:calc(var(--ax) * -100%) 0;transform-origin:calc(var(--ax) * 100%) 100%;opacity:0;transition:opacity .25s;pointer-events:none}
.pose.on{opacity:1;animation:posein .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes posein{from{transform:translateY(1.5%) scale(.97)}}
.pose img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block}
.pose .body{animation:breathe 4.6s ease-in-out infinite;transform-origin:50% 100%}
.pose .head{position:absolute;left:0;top:0;width:100%;height:var(--hh);transform-origin:var(--hx) 96%;animation:headidle 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.007)}}
@keyframes headidle{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.4deg)}70%{transform:rotate(1.2deg)}}
.actor.talk .pose .head{animation:nod 1.1s ease-in-out infinite}
.actor.talk .pose.nohead .body{animation:sway 1.4s ease-in-out infinite}
@keyframes nod{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-2.6deg) translateY(.5%)}50%{transform:rotate(.6deg) translateY(-.4%)}75%{transform:rotate(2.2deg) translateY(.4%)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1deg) translateY(-.3%)}}
.actor.hop{animation:hop .55s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{30%{transform:translateY(-7%) scaleY(1.02)}55%{transform:translateY(0) scaleY(.96)}75%{transform:translateY(-1.5%)}}
.shadow{position:absolute;left:50%;bottom:-1.2vh;width:150%;height:3vh;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(5,3,20,.55),transparent)}

/* walking: two real frames flip-booked */
.actor.walk #poses .pose{opacity:0!important;animation:none;transition:none;visibility:hidden}
.walker{position:absolute;inset:0;opacity:0;pointer-events:none}
.actor.walk .walker{opacity:1;animation:wbob .26s ease-in-out infinite alternate}
#walker .pose{opacity:1;animation:none;transition:none;visibility:hidden}
.actor.walk #walker .pose.f1{animation:fa .52s steps(1) infinite}
.actor.walk #walker .pose.f2{animation:fb .52s steps(1) infinite}
@keyframes fa{0%{visibility:visible}50%{visibility:hidden}}
@keyframes fb{0%{visibility:hidden}50%{visibility:visible}}
.actor.flip #walker .pose{scale:-1 1}
@keyframes wbob{from{transform:translateY(0)}to{transform:translateY(-1.6%)}}

/* speech bubble */
.bubble{position:absolute;right:calc(50% + min(76vh,700px) * .11);top:calc(100% - 9vh - min(76vh,700px) * 1.02);z-index:3;width:max-content;max-width:min(300px,30vw);padding:.9rem 1.15rem;border-radius:20px 20px 6px 20px;background:#fff;color:#1a1438;font-weight:600;font-size:clamp(.92rem,1.2vw,1.05rem);line-height:1.4;box-shadow:0 18px 40px -12px rgba(20,10,60,.45);transform-origin:100% 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.bubble::after{content:"";position:absolute;right:-9px;bottom:6px;border:10px solid transparent;border-left-color:#fff;border-right:0}
.bubble.hidden{opacity:0;transform:scale(.6) translateY(10px)}
.bubble .caret{display:inline-block;width:2px;height:1em;background:var(--violet);vertical-align:-2px;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hint{position:absolute;bottom:2.4vh;left:50%;translate:-50% 0;font-size:.78rem;color:var(--ink-dim);white-space:nowrap}

/* MOBILE: presenter becomes a small guide in the corner */
@media (max-width:900px){
  .split{display:block}
  .content{padding-bottom:30vh}
  .slide{min-height:auto;padding:7rem 0 3rem}
  .slide:first-child{min-height:100svh;padding-top:5rem}
  .stage{position:fixed;right:0;bottom:0;top:auto;width:38vw;height:36vh;padding-bottom:2.5vh;z-index:20;pointer-events:none}
  .actor{height:27vh;pointer-events:auto}
  .spot{width:44vw;bottom:0}
  .floor{width:30vw;bottom:1.6vh;height:2vh}
  .bubble{right:calc(50% + 27vh * .1);top:calc(100% - 2.5vh - 27vh * 1.08);max-width:52vw;font-size:.85rem;padding:.6rem .8rem;pointer-events:none}
  .hint{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .slide>*{opacity:1;transform:none}
}