/* Two perspectives on one person: the same page re-tunes its accent, hero and work list
   between product design (care green) and data science (model indigo). */
:root{
  --bg:#fbfbfa; --surface:#f1f2f0; --surface-2:#e7e9e5; --fg:#18191a; --muted:#5d625f; --line:#d9dcd8;
  --design:#2c6b5a; --data:#4446c9; --warn:#b4472f;
  --accent:var(--design);color-scheme:light;
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --col:44rem; --wide:74rem; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121413; --surface:#1b1e1c; --surface-2:#242826; --fg:#ecedeb; --muted:#9ba29e; --line:#2e3330;
  --design:#7cc4ad; --data:#a6a8ff; --warn:#f08a70; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121413; --surface:#1b1e1c; --surface-2:#242826; --fg:#ecedeb; --muted:#9ba29e; --line:#2e3330;
  --design:#7cc4ad; --data:#a6a8ff; --warn:#f08a70; color-scheme:dark}
:root[data-view="data"]{--accent:var(--data)}
/* Design perspective keeps neutral surfaces; beige from the portrait's backdrop is only an accent.
   --accent fills and strokes, --ink is the accent for small text, dark enough to read. */
:root{--ink:var(--fg)}
:root[data-view="design"]{--design:#c9a47e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-view="design"]{--design:#d6b591; --ink:#d6b591}}
:root[data-theme="dark"][data-view="design"]{--design:#d6b591; --ink:#d6b591}
:root{--accent-soft:color-mix(in srgb,var(--accent) 13%,transparent);--accent-line:color-mix(in srgb,var(--accent) 40%,var(--line))}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s,color .5s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--accent-line);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.015em;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
.label{font:500 .72rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.col{max-width:var(--col)}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.5rem .8rem;z-index:100}
.skip:focus{left:8px;top:8px}


/* ---- header + perspective switch ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;transition:background-color .4s}
/* Liquid glass: translucent fill, heavy blur with saturation, a bright top edge and a soft specular sheen. */
:root{--glass:color-mix(in srgb,var(--bg) 66%,transparent);--glass-edge:rgba(255,255,255,.55);
  --glass-shade:0 8px 28px -18px rgba(20,20,20,.22),inset 0 1px 0 rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:color-mix(in srgb,var(--bg) 50%,transparent);--glass-edge:rgba(255,255,255,.13);
  --glass-shade:0 12px 40px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 1px rgba(255,255,255,.04)}}
:root[data-theme="dark"]{--glass:color-mix(in srgb,var(--bg) 50%,transparent);--glass-edge:rgba(255,255,255,.13);
  --glass-shade:0 12px 40px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 1px rgba(255,255,255,.04)}
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);border:1px solid var(--glass-edge);box-shadow:var(--glass-shade)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,0) 40%);mix-blend-mode:soft-light}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:color-mix(in srgb,var(--bg) 94%,transparent)}}
.top{position:sticky;top:0;z-index:50;padding:10px clamp(8px,2vw,24px) 0;pointer-events:none}
.top .wrap{--glass:color-mix(in srgb,var(--bg) 86%,transparent);pointer-events:auto;display:flex;align-items:center;gap:.5rem;height:3.5rem;border-radius:999px;width:fit-content;max-width:calc(100vw - 16px);margin:0 auto;padding:0 .4rem 0 1.15rem;transition:height .35s var(--ease),box-shadow .3s,background-color .3s}
.top.scrolled .wrap{height:3.2rem}
.top.scrolled .wrap{--glass:color-mix(in srgb,var(--bg) 90%,transparent)}
@media (max-width:420px){.top .wrap{padding-left:.9rem}}
.brand{font:700 1rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.mark{position:relative;display:inline-block;width:24px;height:18px;flex:none}
.mark i{position:absolute;top:1px;width:16px;height:16px;border-radius:50%;transition:transform .6s var(--ease),opacity .8s var(--ease) .15s}
.mark i:first-child{left:0;background:#c9a47e}
.mark i+i{left:7.5px;background:#a6a8ff;mix-blend-mode:multiply}
:root[data-view="design"] .mark i+i{opacity:.32}
:root[data-view="data"] .mark i:first-child{opacity:.32}
.intro .mark i{opacity:1!important}
.brand:hover .mark i:first-child{transform:translateX(-2px)}.brand:hover .mark i+i{transform:translateX(2px)}
.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;padding:3px}
.switch button{position:relative;z-index:1;appearance:none;border:0;background:none;color:var(--muted);font:500 .8rem/1 var(--body);padding:.6rem 1rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s}
.switch button[aria-pressed="true"]{color:var(--bg)}
.switch .pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--fg);transition:transform .45s var(--ease)}
:root[data-view="data"] .switch .pill{transform:translateX(100%)}
.nav{display:flex;gap:.1rem;font-size:.85rem;align-items:center;margin:0 .6rem 0 1.1rem}
.nav a{padding:.5rem .7rem;border-radius:999px;transition:color .2s,background-color .2s}
.nav a:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--fg)}
@media (max-width:760px){.nav{display:none}.switch button{padding:.55rem .75rem;font-size:.76rem}}
@media (max-width:420px){.brand>span:not(.mark){display:none}}

/* ---- hero ---- */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-start;padding:clamp(4.5rem,13vh,8.5rem) 0 3rem;overflow:hidden}
#signal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.hero .wrap{position:relative}
.hero-id{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
.pf{position:relative;flex:none;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--accent-line);transition:box-shadow .5s var(--ease)}
.pf img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pf{view-transition-name:portrait}
.pf .pf-a{clip-path:circle(0% at 105% 50%);transition:clip-path .95s cubic-bezier(.65,0,.25,1)}
:root[data-view="data"] .pf .pf-a{clip-path:circle(150% at 105% 50%)}
.pf .pf-d{transition:transform .95s cubic-bezier(.65,0,.25,1)}
:root[data-view="data"] .pf .pf-d{transform:scale(1.04)}
.pf.pop{animation:pfPop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes pfPop{40%{transform:scale(1.08)}}
::view-transition-group(portrait),::view-transition-new(portrait){animation:none}
::view-transition-old(portrait){display:none}
.hero h1{font-size:clamp(2.6rem,8.4vw,6.2rem);font-weight:700;letter-spacing:-.035em;line-height:.98}
.hero h1 .ch{display:inline-block;transform:translateY(105%);opacity:0;animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--i) * 28ms + 120ms)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
@keyframes rise{to{transform:none;opacity:1}}
.hero .kicker{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;color:var(--ink);transition:color .4s}
.hero .kicker::before{content:"";width:28px;height:1px;background:currentColor}
.statement{margin-top:1.75rem;max-width:40rem;font-size:clamp(1.12rem,2.2vw,1.38rem);line-height:1.5;color:var(--fg)}
.statement b{font-weight:600}
.statement em{font-style:normal;color:var(--ink);transition:color .4s}
.statement em{color:var(--fg);font-weight:600}
.sub{margin-top:.9rem;max-width:36rem;color:var(--muted)}
.stats{margin-top:2.25rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:46rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:1rem 1rem 1rem 0}
.stats div + div{padding-left:1rem;border-left:1px solid var(--line)}
.stats b{display:block;font:500 clamp(1.4rem,3.6vw,2.1rem)/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:.3rem;font-size:.82rem;color:var(--muted);line-height:1.35}
.cta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:500 .85rem/1 var(--body);padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.btn:hover{border-color:var(--fg);transform:translateY(-1px)}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn svg{width:16px;height:16px}
.copy{font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:none;border:1px solid var(--line);color:var(--fg);padding:.45rem .6rem;border-radius:3px;cursor:pointer}
.copy:hover{border-color:var(--fg)}
.scroll-hint{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stats div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.scroll-hint{display:none}}

/* 3D tilt on work tiles */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.tilt.tilting{transition:transform .08s linear,border-color .3s,box-shadow .4s}

/* ---- perspective visibility ---- */
:root[data-view="design"] [data-for="data"],:root[data-view="data"] [data-for="design"]{display:none!important}
.view-enter{animation:viewIn .6s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- work index ---- */
.index{padding-top:clamp(3rem,6vw,4.5rem)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.tiles,.tiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles,.tiles.six{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;background:var(--bg);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.tile:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:0 20px 36px -28px rgba(0,0,0,.4)}
.tile .vis{height:132px;background:var(--surface);position:relative;overflow:hidden;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.tile .vis img{position:absolute;width:44%;top:14px;left:50%;transform:translateX(-50%);border-radius:12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.35);transition:transform .6s var(--ease)}
.tile:hover .vis img{transform:translateX(-50%) translateY(-8px)}
.tile .vis img.l{width:36%;left:24%;top:30px;transform:translateX(-50%) rotate(-8deg)}
.tile .vis img.r{width:36%;left:76%;top:30px;transform:translateX(-50%) rotate(8deg)}
.tile:hover .vis img.l{transform:translateX(-50%) rotate(-11deg) translateY(-4px)}
.tile:hover .vis img.r{transform:translateX(-50%) rotate(11deg) translateY(-4px)}
.tile .vis .big{font:600 2.6rem/1 var(--mono);letter-spacing:-.04em;color:var(--ink);transition:transform .5s var(--ease)}
.tile:hover .vis .big{transform:scale(1.06)}
.tile .vis .big small{display:block;font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:.4rem}
.tile .vis svg{width:46px;height:46px;color:var(--ink)}
.tile .txt{padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.tile .txt b{font:600 1rem/1.25 var(--display)}
.tile .txt span{font-size:.84rem;line-height:1.45;color:var(--muted)}
.tile .txt em{margin-top:auto;padding-top:.5rem;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink);font-style:normal;display:flex;justify-content:space-between}
.tile .txt em::after{content:"→";transition:transform .3s}
.tile:hover .txt em::after{transform:translateX(4px)}

/* ---- at a glance ---- */
.tldr{margin-top:1.75rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:62rem}
.tldr div{background:var(--bg);padding:1rem 1.1rem}
.tldr p:last-child{margin-top:.35rem;font-size:.95rem;line-height:1.45}
.tldr .label{color:var(--ink)}
@media (max-width:760px){.tldr{grid-template-columns:1fr}}
.facts-line{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem}

/* ---- read more ---- */
details.more{margin-top:1.25rem;max-width:62rem}
details.more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;font:500 .85rem/1 var(--body);padding:.7rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--bg);transition:border-color .2s}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary:hover{border-color:var(--fg)}
details.more > summary::before{content:"+";font:500 1rem/1 var(--mono);color:var(--ink);transition:transform .3s}
details.more[open] > summary::before{transform:rotate(45deg)}
details.more > summary .when-open{display:none}
details.more[open] > summary .when-open{display:inline}
details.more[open] > summary .when-closed{display:none}
details.more[open] > .more-body{animation:viewIn .45s var(--ease) both}
.more-body{margin-top:1.1rem}

/* ---- chapter rail + back to top ---- */
.rail{position:fixed;left:clamp(14px,1.8vw,32px);top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:.1rem;opacity:0;transition:opacity .4s var(--ease)}
.rail.show{opacity:1}
@media (min-width:1380px){.rail{display:flex}}
.rail a{display:flex;align-items:center;gap:.65rem;text-decoration:none;font:500 .76rem/1 var(--body);color:var(--muted);padding:.42rem 0;transition:color .3s}
.rail a:hover{color:var(--fg)}
.rail a i{flex:none;width:12px;height:2px;border-radius:2px;background:var(--line);transition:width .4s var(--ease),background-color .3s}
.rail a span{opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;white-space:nowrap}
.rail:hover a span,.rail a.on span{opacity:1;transform:none}
.rail a.on{color:var(--fg);font-weight:600}
.rail a.on i{width:26px;background:var(--accent)}
@media (min-width:1640px){.rail a span{opacity:.75;transform:none}.rail a.on span{opacity:1}}
.totop{position:fixed;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + 66px);z-index:45;width:44px;height:44px;border-radius:50%;color:var(--fg);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s,border-color .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--fg)}
.totop svg{width:16px;height:16px}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:.9rem 0;background:var(--surface)}
.marquee .track{display:flex;width:max-content;gap:2.5rem;animation:slide 48s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:2.5rem}
.marquee span::after{content:"✦";color:var(--ink);transition:color .4s}
.marquee b{color:var(--fg);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- sections ---- */
section.block{padding:clamp(4rem,9vw,7rem) 0 0}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.sec-head .num{font:500 .8rem/1 var(--mono);color:var(--ink);transition:color .4s}
.sec-head h2{font-size:clamp(1.05rem,2vw,1.2rem);font-weight:600}
.sec-head .label{margin-left:auto}
.case-title{font-size:clamp(2rem,5.4vw,3.6rem);font-weight:700;letter-spacing:-.03em;max-width:52rem}
.lede{margin-top:1rem;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55;max-width:42rem}
.prose{max-width:var(--col);color:var(--fg)}
.prose + .prose{margin-top:.8rem}
.muted{color:var(--muted)}
h3.sub-h{font-size:1.25rem;margin:3rem 0 .8rem}
.meta{margin-top:1.75rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 1.5rem;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:58rem}
.meta p:last-child{margin-top:.25rem;font-size:.92rem;line-height:1.4}
@media (max-width:640px){.meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chip{font:500 .72rem/1 var(--mono);padding:.42rem .55rem;border:1px solid var(--line);border-radius:4px;color:var(--muted);background:var(--bg)}
.chip.on{color:var(--ink);border-color:var(--accent-line);background:var(--accent-soft)}
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}

/* ---- featured case layout ---- */
.feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (max-width:900px){.feature{grid-template-columns:1fr}}

/* phone fan */
.fan{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;margin:0 auto}
.fan .device{position:absolute;top:8%;left:50%;width:31%;transform:translateX(-50%) rotate(0deg);transition:transform 1.1s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.fan.in .device:nth-child(1){transform:translateX(-50%) translate(-98%,10%) rotate(-10deg)}
.fan.in .device:nth-child(2){transform:translateX(-50%) translate(-50%,3%) rotate(-5deg)}
.fan.in .device:nth-child(3){transform:translateX(-50%) translateY(-2%);z-index:3}
.fan.in .device:nth-child(4){transform:translateX(-50%) translate(50%,3%) rotate(5deg);z-index:2}
.fan.in .device:nth-child(5){transform:translateX(-50%) translate(98%,10%) rotate(10deg);z-index:1}
.fan .device:nth-child(3){z-index:3}.fan .device:nth-child(2){z-index:2}.fan .device:nth-child(1){z-index:1}
.device{aspect-ratio:9/19.5;border-radius:22px;padding:5px;background:#0e0f0f;box-shadow:0 1px 0 var(--line)}
.device img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:17px;background:#fff}
@media (max-width:520px){.fan .device:nth-child(1),.fan .device:nth-child(5){display:none}.fan .device{width:40%}}

/* visit loop */
.loop{margin-top:1.5rem;border:1px solid var(--line);border-radius:10px;padding:1rem;background:var(--surface);max-width:58rem;overflow-x:auto}
.loop svg{width:100%;min-width:640px;height:auto;display:block}
.loop .node{fill:var(--bg);stroke:var(--line)}
.loop .nt{fill:var(--fg);font:600 13px var(--body)}
.loop .ns{fill:var(--muted);font:400 11px var(--body)}
.loop .path{stroke:var(--accent-line);stroke-width:1.5;fill:none;stroke-dasharray:4 5}
.loop .dot{fill:var(--accent)}
.loop .halo{fill:var(--accent);opacity:.18}

/* gallery tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0 1.25rem}
.tabs button{appearance:none;font:500 .8rem/1 var(--body);padding:.6rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;transition:all .25s}
.tabs button:hover{color:var(--fg);border-color:var(--fg)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.panel[hidden]{display:none}
.panel{animation:viewIn .5s var(--ease) both}
.panel > .prose{margin-bottom:1.25rem;color:var(--muted)}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.phone{margin:0;min-width:0}
.phone .device{transition:transform .5s var(--ease),box-shadow .5s}
.phone:hover .device{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(0,0,0,.5)}
.phone figcaption,.shot figcaption{margin-top:.7rem;font-size:.84rem;line-height:1.45;color:var(--muted)}
.phone figcaption b,.shot figcaption b{display:block;color:var(--fg);font-weight:600;font-size:.9rem}
@media (max-width:700px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
.shot{margin:0;min-width:0}
.browser{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);transition:transform .5s var(--ease),box-shadow .5s}
.browser::before{content:"";display:block;height:22px;background:radial-gradient(circle at 12px 11px,#ff6159 3.5px,transparent 4px),radial-gradient(circle at 26px 11px,#ffbd2e 3.5px,transparent 4px),radial-gradient(circle at 40px 11px,#28c941 3.5px,transparent 4px);border-bottom:1px solid var(--line)}
.browser img{width:100%;height:auto;background:#fff}
.shot:hover .browser{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(0,0,0,.45)}
.note{margin-top:1rem;font-size:.84rem;color:var(--muted)}

/* decisions */
.decisions{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;counter-reset:d}
.decisions li{background:var(--bg);counter-increment:d;position:relative;transition:background-color .3s}
.decisions li:hover{background:var(--surface)}
.decisions summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2rem minmax(0,1fr) 1rem;gap:.5rem;align-items:baseline;padding:1.1rem 1.2rem;font:600 1rem/1.3 var(--display)}
.decisions summary::-webkit-details-marker{display:none}
.decisions summary::before{content:counter(d,decimal-leading-zero);font:500 .72rem/1 var(--mono);color:var(--ink);transition:color .4s}
.decisions summary::after{content:"+";font:500 1rem/1 var(--mono);color:var(--muted);transition:transform .3s;justify-self:end}
.decisions details[open] summary::after{transform:rotate(45deg);color:var(--ink)}
.decisions details p{font-size:.92rem;color:var(--muted);padding:0 1.2rem 1.2rem 3.7rem;margin-top:-.3rem;animation:viewIn .35s var(--ease) both}
.dec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;max-width:none}
.dec-head .copy{white-space:nowrap}
.dec-head.sub-h{margin:3rem 0 .9rem}
@media (max-width:700px){.decisions{grid-template-columns:1fr}}

/* ERP flow */
.flow{margin-top:1.25rem;border:1px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto;background:var(--surface);max-width:58rem}
.flow svg{display:block;min-width:600px;width:100%;height:auto}
.flow .box{fill:var(--bg);stroke:var(--line)}
.flow .bt{fill:var(--fg);font:600 12px var(--body)}
.flow .bs{fill:var(--muted);font:400 10.5px var(--body)}
.flow .lane{fill:var(--muted);font:500 10px var(--mono);letter-spacing:.08em}
.flow .ar{stroke:var(--muted);stroke-width:1.2;fill:none}
.flow .ahp{fill:var(--muted)}
.flow .mk{fill:var(--accent)}
.flow .mt{fill:var(--bg);font:500 9px var(--mono)}
.lock{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.5rem;padding:1rem 1.1rem;border:1px dashed var(--line);border-radius:10px;max-width:42rem;font-size:.92rem;color:var(--muted)}
.lock svg{flex:none;width:18px;height:18px;margin-top:.15rem;color:var(--fg)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{position:relative;border:1px solid var(--line);border-radius:12px;padding:1.4rem;background:var(--bg);overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{border-color:var(--accent-line)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.card h3{font-size:1.3rem;margin-top:.5rem}
.card p{margin-top:.6rem;font-size:.95rem;color:var(--muted)}
.card .links{margin-top:1.1rem}
.card .chips{margin-top:1rem}

/* trophy / hackathons */
.award{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center;border:1px solid var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),transparent 60%);border-radius:14px;padding:clamp(1.25rem,3vw,2rem)}
.award .medal{width:clamp(84px,12vw,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);position:relative}
.award .medal b{font:700 clamp(1.8rem,4vw,2.6rem)/1 var(--display);letter-spacing:-.04em}
.award .medal b sup{font-size:.45em;vertical-align:top;margin-left:1px}
.award .medal::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--accent);animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.award h3{font-size:clamp(1.4rem,3vw,2rem)}
.award p{margin-top:.6rem;color:var(--fg);max-width:40rem}
.agent{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem;font:500 .75rem/1 var(--mono);color:var(--muted)}
.agent span{padding:.45rem .6rem;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.agent i{width:22px;height:1px;background:var(--accent);position:relative;overflow:hidden}
.agent i::after{content:"";position:absolute;inset:0;background:var(--bg);animation:wire 1.8s linear infinite}
@keyframes wire{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:560px){.award{grid-template-columns:1fr}}

.lemi{margin-top:2.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.lemi{grid-template-columns:1fr}}
.facts{display:grid;gap:.6rem;margin-top:1.25rem}
.fact{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:.8rem;align-items:baseline;padding:.75rem 0;border-top:1px solid var(--line)}
.fact b{font:500 1.35rem/1 var(--mono);color:var(--ink);transition:color .4s}
.fact span{font-size:.9rem;color:var(--muted)}
.fact small{display:block;font-size:.75rem;opacity:.8}
.feat{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.55rem}
.feat li{padding-left:1.4rem;position:relative;font-size:.95rem}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;border-radius:2px;background:var(--accent);transition:background-color .4s}
.lemi-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.lemi-phones .phone:nth-child(even){translate:0 2.5rem}
.lemi-phones{padding-bottom:2.5rem}

/* ---- data: unmasked demo ---- */
.demo{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.demo-top{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);font:500 .72rem/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.demo-top .led{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.demo-top button{margin-left:auto}
.demo-body{position:relative;padding:1.1rem}
.page{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;position:relative;overflow:hidden}
.page .pt{font:600 1.05rem/1.3 var(--display)}
.page .price{font:500 1.1rem/1 var(--mono);margin:.5rem 0 .7rem}
.page p{font-size:.92rem;line-height:1.6;margin:.25rem 0}
.page .sweep{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(to bottom,transparent,var(--accent-soft) 70%,var(--accent) 100%);opacity:0;transform:translateY(-100%);pointer-events:none}
.page.scanning .sweep{animation:sweep 1.1s var(--ease)}
@keyframes sweep{0%{opacity:0;transform:translateY(-100%)}15%{opacity:.9}100%{opacity:0;transform:translateY(260%)}}
mark.dp{background:none;color:inherit;border-radius:3px;padding:0 .1em;box-shadow:inset 0 -.5em 0 var(--hl,transparent);transition:box-shadow .5s var(--ease)}
mark.dp[data-c]{--hl:color-mix(in srgb,var(--sev) 32%,transparent)}
mark.dp[data-sev="critical"]{--sev:#e5484d}mark.dp[data-sev="warning"]{--sev:#f5a524}mark.dp[data-sev="info"]{--sev:#3e9bff}
.page.pending mark.dp{--hl:transparent!important}
.findings{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;min-height:1.9rem}
.finding{font:500 .72rem/1 var(--mono);padding:.45rem .55rem;border-radius:4px;border:1px solid var(--line);background:var(--bg);display:flex;gap:.4rem;align-items:center;animation:viewIn .4s var(--ease) both}
.finding i{width:8px;height:8px;border-radius:2px;background:var(--sev)}
.finding[data-sev="critical"]{--sev:#e5484d}.finding[data-sev="warning"]{--sev:#f5a524}.finding[data-sev="info"]{--sev:#3e9bff}
.demo textarea{width:100%;min-height:5.2rem;margin-top:.9rem;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:400 .9rem/1.5 var(--body);padding:.7rem .8rem}
.demo textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.demo .hint{font-size:.78rem;color:var(--muted);margin-top:.5rem}

.metrics{margin-top:1.5rem;display:grid;gap:.9rem;max-width:34rem}
.metric{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 3.4rem;gap:.8rem;align-items:center;font-size:.85rem}
.metric .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.metric .bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width 1.4s var(--ease)}
.metrics.in .bar i{width:var(--v)}
.metric b{font:500 .9rem/1 var(--mono);text-align:right}
.models{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}

/* pipeline */
.pipe{margin-top:1.5rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1rem;overflow-x:auto}
.pipe svg{display:block;min-width:720px;width:100%;height:auto}
.pipe .pn{fill:var(--bg);stroke:var(--line)}
.pipe .pn.hot{stroke:var(--accent-line)}
.pipe .pt{fill:var(--fg);font:600 12px var(--body)}
.pipe .ps{fill:var(--muted);font:400 10px var(--mono)}
.pipe .wire{stroke:var(--line);stroke-width:1.5;fill:none}
.pipe .pkt{fill:var(--accent)}
.pipe .bad{fill:var(--warn)}
.pipe .tag{fill:var(--bg);stroke:var(--warn)}
.pipe .tt{fill:var(--warn);font:500 10px var(--mono)}

.medallion{display:flex;gap:.4rem;margin-top:1rem;align-items:stretch}
.medallion span{flex:1;text-align:center;padding:.65rem .4rem;border-radius:6px;font:500 .72rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#1b1b1b}
.medallion .b{background:#c88a5a}.medallion .s{background:#c9cdd1}.medallion .g{background:#e2bd4f}
.funnel{display:grid;gap:.35rem;margin-top:1rem}
.funnel div{height:26px;border-radius:4px;background:var(--accent-soft);border:1px solid var(--accent-line);display:flex;align-items:center;padding:0 .6rem;font:500 .72rem/1 var(--mono);color:var(--fg);width:0;transition:width 1.2s var(--ease);white-space:nowrap;overflow:hidden}
.funnel.in div:nth-child(1){width:100%}.funnel.in div:nth-child(2){width:78%;transition-delay:.12s}.funnel.in div:nth-child(3){width:56%;transition-delay:.24s}.funnel.in div:nth-child(4){width:38%;transition-delay:.36s}
.dq{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.35rem;font-size:.85rem}
.dq li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem;color:var(--muted)}
.dq b{font:500 .75rem/1.6 var(--mono);color:var(--ink)}

.arch{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin-top:1.25rem}
.arch div{border:1px solid var(--line);border-radius:8px;padding:.7rem;background:var(--bg);font-size:.8rem;position:relative}
.arch div b{display:block;font:600 .85rem/1.25 var(--display);margin-bottom:.25rem}
.arch div span{color:var(--muted);line-height:1.35;display:block}
.arch div:not(:last-child)::after{content:"";position:absolute;right:-.5rem;top:50%;width:.5rem;height:1px;background:var(--accent)}
@media (max-width:760px){.arch{grid-template-columns:1fr 1fr}.arch div::after{display:none}}

/* github list */
.repos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
@media (max-width:900px){.repos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.repos{grid-template-columns:1fr}}
.repo{display:flex;flex-direction:column;gap:.45rem;border:1px solid var(--line);border-radius:10px;padding:1rem;text-decoration:none;background:var(--bg);transition:border-color .25s,transform .3s var(--ease)}
.repo:hover{border-color:var(--accent);transform:translateY(-2px)}
.repo b{font:600 .95rem/1.25 var(--mono);word-break:break-word}
.repo p{font-size:.84rem;color:var(--muted);line-height:1.45}
.repo .rm{margin-top:auto;display:flex;gap:.8rem;font:400 .72rem/1 var(--mono);color:var(--muted);padding-top:.4rem}
.repo .rm i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.3rem;vertical-align:-1px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about .big{font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.5}
.edu{list-style:none;padding:0;margin:0;display:grid}
.edu li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.edu li:last-child{border-bottom:1px solid var(--line)}
.edu .when{font:400 .78rem/1.5 var(--mono);color:var(--muted)}
.edu b{font-weight:600;display:block}
.edu span{font-size:.9rem;color:var(--muted)}
.skills{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
@media (max-width:760px){.skills{grid-template-columns:1fr}}
.skills h4{font:500 .72rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem}
.skills .chips{margin-top:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact{border-radius:22px;padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:1rem}
.contact > *{position:relative;z-index:1}
.contact label{display:grid;gap:.35rem;font:500 .8rem/1.2 var(--body);color:var(--muted)}
.contact input,.contact textarea{width:100%;font:400 1rem/1.45 var(--body);color:var(--fg);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);border-radius:12px;padding:.75rem .85rem;transition:border-color .2s,box-shadow .2s}
.contact textarea{min-height:7.5rem;resize:vertical}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.contact .row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:520px){.contact .row2{grid-template-columns:1fr}}
.topics{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.topics legend{margin-bottom:.5rem;padding:0}
.topics input{position:absolute;opacity:0;pointer-events:none}
.topics label{display:inline-flex;font:500 .8rem/1 var(--body);color:var(--fg);padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:color-mix(in srgb,var(--bg) 60%,transparent);transition:all .2s}
.topics input:checked + label{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.topics input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.contact .send{justify-self:start}
.contact .send[disabled]{opacity:.6;cursor:progress}
.form-status{font-size:.88rem;min-height:1.3em;color:var(--muted)}
.form-status.err{color:var(--warn)}
.sent{display:none;text-align:center;padding:1.5rem .5rem}
.contact.done .sent{display:block;animation:viewIn .5s var(--ease) both}
.contact.done > :not(.sent){display:none}
.sent svg{width:56px;height:56px;margin:0 auto .8rem;color:var(--accent)}
.sent svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:tick .7s .15s var(--ease) forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.sent h3{font-size:1.3rem}
.sent p{color:var(--muted);margin-top:.4rem}

/* chat */
.chat-btn{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:70;display:flex;align-items:center;gap:.6rem;height:54px;padding:0 1.15rem 0 .6rem;border-radius:999px;color:var(--fg);font:600 .88rem/1 var(--body);cursor:pointer;transition:transform .3s var(--ease)}
.chat-btn:hover{transform:translateY(-2px)}
.chat-btn .txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.chat-btn .txt b{font-weight:600;font-size:.88rem}
.chat-btn .txt small{font-weight:400;font-size:.74rem;color:var(--muted)}
.cb-av{position:relative;flex:none;display:block}
.cb-av .venn-av{width:36px;height:36px;border-radius:11px}
.cb-av .venn-av i{width:16px;height:16px;top:10px}.cb-av .venn-av i:first-child{left:6.5px}.cb-av .venn-av i+i{left:13.5px}
.chat-btn .q{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;font:700 .7rem/19px var(--body);text-align:center;box-shadow:0 0 0 2.5px var(--bg);animation:nudge 5s var(--ease) infinite}
@keyframes nudge{0%,82%,100%{transform:none}86%{transform:translateY(-4px) rotate(-12deg)}90%{transform:none}94%{transform:translateY(-2px) rotate(8deg)}}
.chat-btn[aria-expanded="true"] .q{animation:none}
.chat-teaser{position:fixed;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + 64px);z-index:69;display:flex;align-items:center;gap:.2rem;padding:.3rem .3rem .3rem .2rem;border-radius:18px 18px 6px 18px;animation:tz .5s var(--ease) both}
.chat-teaser[hidden]{display:none}
.chat-teaser > *{position:relative;z-index:1}
.chat-teaser .tz-open{appearance:none;border:0;background:none;color:var(--fg);font:400 .86rem/1.3 var(--body);padding:.55rem .6rem;cursor:pointer;text-align:left}
.chat-teaser .tz-open b{font-weight:600}
.chat-teaser .tz-x{appearance:none;border:0;background:none;color:var(--muted);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:1.05rem}
.chat-teaser .tz-x:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg)}
@keyframes tz{from{opacity:0;transform:translateY(8px) scale(.97)}}
.msg .sum{margin-top:.55rem;padding:.65rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);border:1px solid var(--line);font-size:.85rem}
.msg .sum span{color:var(--muted)}
.msg .sum p{margin-top:.35rem;white-space:pre-wrap}
@media (prefers-reduced-motion:reduce){.chat-btn .q{animation:none}}
@media (max-width:520px){.chat-btn .txt{display:none}.chat-btn{width:54px;padding:0;justify-content:center}}
.chat{position:fixed;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + 66px);z-index:70;width:min(390px,calc(100vw - 28px));height:min(600px,calc(100vh - 120px));border-radius:24px;display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;transition:opacity .3s var(--ease),transform .4s var(--ease),visibility .3s}
.chat[hidden]{display:flex;visibility:hidden;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none}
.chat > *{position:relative;z-index:1}
.chat-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.venn-av{position:relative;flex:none;width:38px;height:38px;border-radius:12px;background:#161718;display:grid;place-items:center;overflow:hidden}
.venn-av i{position:absolute;width:17px;height:17px;border-radius:50%;top:10.5px;transition:transform .5s var(--ease)}
.venn-av i:first-child{left:7px;background:#c9a47e}
.venn-av i+i{left:14px;background:#a6a8ff;opacity:.88}
.chat.busy .venn-av i:first-child{animation:vennL 1s ease-in-out infinite}
.chat.busy .venn-av i+i{animation:vennR 1s ease-in-out infinite}
@keyframes vennL{50%{transform:translateX(-3px)}}
@keyframes vennR{50%{transform:translateX(3px)}}
.chat-head b{display:block;font:600 .95rem/1.2 var(--display)}
.chat-head span{font-size:.75rem;color:var(--muted)}
.chat-head button{margin-left:auto;appearance:none;border:0;background:none;color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1}
.chat-head button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:88%;padding:.65rem .85rem;border-radius:18px;font-size:.9rem;line-height:1.5;animation:viewIn .35s var(--ease) both}
.msg.bot{align-self:flex-start;background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--fg);color:var(--bg);border-bottom-right-radius:6px}
.msg a{color:inherit}
.msg .acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.msg .acts button,.msg .acts a{appearance:none;font:500 .75rem/1 var(--body);padding:.5rem .7rem;border-radius:999px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--fg);cursor:pointer;text-decoration:none}
.typing{display:inline-flex;gap:4px;padding:.8rem .9rem}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bob 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-sugg{display:flex;gap:.4rem;overflow-x:auto;padding:0 1rem .6rem;scrollbar-width:none}
.chat-sugg::-webkit-scrollbar{display:none}
.chat-sugg button{flex:none;appearance:none;font:500 .76rem/1 var(--body);padding:.55rem .75rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--fg);cursor:pointer;white-space:nowrap}
.chat-sugg button:hover{border-color:var(--fg)}
.chat-form{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.chat-form input{flex:1;min-width:0;font:400 .95rem/1.3 var(--body);color:var(--fg);background:color-mix(in srgb,var(--bg) 75%,transparent);border:1px solid var(--line);border-radius:999px;padding:.7rem .95rem}
.chat-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-form button{appearance:none;border:0;width:42px;height:42px;border-radius:50%;background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center}
.chat-form button svg{width:16px;height:16px}
.chat-note{font-size:.7rem;color:var(--muted);text-align:center;padding:0 1rem .7rem}
@media (max-width:520px){
  .chat{left:0;right:0;top:var(--vvt,0px);bottom:auto;width:100%;height:var(--vvh,100dvh);max-height:none;border-radius:0;transform-origin:bottom center;padding-bottom:env(safe-area-inset-bottom)}
  .chat[hidden]{transform:translateY(24px)}
  .chat-head{padding-top:max(.9rem,env(safe-area-inset-top))}
  .chat-x{width:40px;height:40px;font-size:1.4rem}
  .chat-note{display:none}
  .chat-sugg{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chat-sugg::-webkit-scrollbar{display:none}
  .chat-sugg button{flex:none}
  html.chat-open .chat-btn,html.chat-open .totop,html.chat-open .welcome{opacity:0;pointer-events:none}
}

/* footer */
.end{margin-top:clamp(5rem,10vw,8rem);border-top:1px solid var(--line);padding:clamp(3rem,7vw,5rem) 0 2.5rem}
.end h2{font-size:clamp(2.5rem,6.4vw,4.8rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.end h2 em{font-style:normal;color:var(--ink);transition:color .4s}
.end .row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;font-size:1.05rem}
.end .fine{margin-top:3.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
#email{font-family:var(--mono);font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero h1 .ch{transform:none;opacity:1}
  .marquee .track{animation:none;flex-wrap:wrap;width:auto}
}

/* ---- type system: one family, hierarchy from size and weight only ---- */
body{font-size:1.02rem;letter-spacing:-.006em;font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em}
.hero h1{font-weight:700;letter-spacing:-.055em;line-height:.95}
.case-title{font-weight:600;letter-spacing:-.045em;line-height:1.02}
.label,.copy,.tile .txt em,.tile .vis .big small,.medallion span,.skills h4,.rail a,.demo-top,.sec-head .num,.finding,.chip,.repo .rm,.agent,.fact small,.tldr .label,.meta .label,.dq b,.chat-sugg button{font-family:var(--body);text-transform:none;letter-spacing:0}
.label{font-size:.82rem;font-weight:500;color:var(--muted)}
.tldr .label{color:var(--muted)}
.chip{font-size:.78rem;font-weight:500;padding:.45rem .7rem;border-radius:999px}
.chip.on{color:var(--fg);background:var(--accent-soft);border-color:var(--accent-line)}
.stats b,.metric b,.fact b,.tile .vis .big,.repo b,#email{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stats b{font-weight:600}
.fact b,.metric b{color:var(--fg);font-weight:600}
.tile .vis .big{color:var(--fg);font-weight:600;letter-spacing:-.04em}
.tile .txt em{font-size:.78rem;color:var(--muted)}
.repo b{font-weight:600;letter-spacing:-.01em}
.copy{font-size:.78rem;font-weight:500;border-radius:999px;padding:.5rem .8rem}
.sec-head{border-bottom:0;padding-bottom:0;margin-bottom:1.6rem;gap:.8rem}
.sec-head .num{color:var(--muted);font-size:.85rem;font-weight:500}
.sec-head h2{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600}
.rail a{font-size:.78rem}
.medallion span{font-size:.75rem;font-weight:500}
.end h2 em{color:color-mix(in srgb,var(--fg) 32%,var(--bg))}
.decisions summary::before{color:var(--muted)}
.dq b{color:var(--muted)}
.card,.tile,.decisions,.tldr,.demo,.pipe,.flow,.loop,.browser,.award{border-radius:18px}
.flow svg .lane,.pipe .ps,.pipe .tt{font-family:var(--body)}

/* ---- smooth perspective change: the page dissolves into the other view ---- */
@view-transition{navigation:auto}
.top{view-transition-name:topbar}
#signal{view-transition-name:signal}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-in .75s cubic-bezier(.65,0,.25,1) both}
::view-transition-group(signal),::view-transition-new(signal){animation:none}
::view-transition-old(signal){display:none}
@keyframes vt-in{from{clip-path:circle(0 at var(--vx,50%) var(--vy,60px))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,60px))}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---- intro: design and data slide together, the overlap is where they meet, then it lands in the logo ---- */
.intro-ov{display:none}
.intro .intro-ov{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--bg);animation:introFail .01s 5s forwards}
@keyframes introFail{to{visibility:hidden;opacity:0}}
.intro-ov .iw{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro-ov .iv{width:min(78vw,520px);overflow:visible}
.intro-ov .ia{fill:#c9a47e;opacity:0}
.intro-ov .ib{fill:#a6a8ff;opacity:0;mix-blend-mode:multiply}
.intro-ov .il{fill:#161718;opacity:0}
.intro-ov .it{font:600 27px var(--body);letter-spacing:-.03em;fill:#161718;opacity:0}
.intro-ov .in{font:600 22px var(--body);letter-spacing:-.02em;fill:#fff;opacity:0}
.intro-ov .iname{margin:clamp(1.4rem,4vh,2.2rem) 0 0;overflow:hidden;font:600 clamp(1.4rem,3.2vw,2.1rem)/1.15 var(--body);letter-spacing:-.035em;color:var(--fg);padding-bottom:.08em}
.intro-ov .iname span{display:block;transform:translateY(105%)}
.intro .mark{opacity:0}
.intro .hero h1 .ch{animation-play-state:paused}

/* ---- about: the same venn, with skills in each region ---- */
.venn-about{position:relative;margin:2.5rem auto 0;max-width:720px;aspect-ratio:600/360}
.venn-about svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.venn-about .va-a{fill:color-mix(in srgb,#c9a47e 30%,transparent);stroke:#c9a47e;stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:translateX(-14%);transition:transform 1.2s var(--ease)}
.venn-about .va-b{fill:color-mix(in srgb,#a6a8ff 30%,transparent);stroke:#a6a8ff;stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:translateX(14%);transition:transform 1.2s var(--ease)}
.venn-about .va-l{fill:#161718;opacity:0;transition:opacity .6s .9s var(--ease)}
.venn-about.in .va-a,.venn-about.in .va-b{transform:none}
.venn-about.in .va-l{opacity:1}
.vt{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;font-size:clamp(.62rem,1.7vw,.9rem);line-height:1.35;color:var(--fg)}
.vt b{font-size:1.25em;font-weight:600;margin-bottom:.2rem;letter-spacing:-.02em}
.vt-a{left:4%;width:28%}.vt-b{right:4%;width:28%}
.vt-m{left:50%;transform:translate(-50%,-50%);width:26%;color:#fff;opacity:0;transition:opacity .6s 1.1s var(--ease)}
.venn-about.in .vt-m{opacity:1}
.vt-m span{color:rgba(255,255,255,.75)}
@media (max-width:520px){.vt span:nth-of-type(n+4){display:none}.vt-m span:nth-of-type(n+3){display:none}}
@media (prefers-reduced-motion:reduce){.venn-about .va-a,.venn-about .va-b{transform:none}.venn-about .va-l,.vt-m{opacity:1}}

/* ---- project pages ---- */
.cp-wrap{padding-top:3.2rem;padding-bottom:1rem}
.back{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--muted);text-decoration:none;padding:.4rem .2rem;margin-bottom:1.6rem}
.back:hover{color:var(--fg)}
.back svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.back:hover svg{transform:translateX(-3px)}
.cp-head{max-width:56rem}
.cp-head .case-title{margin-top:.6rem;font-size:clamp(2.3rem,6vw,4.4rem)}
.cp-head .tldr{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cp-head .tldr{grid-template-columns:1fr}}
.cp-hero{margin-top:2.6rem}
.cp-hero .metrics{max-width:40rem}
.cp-sec{margin-top:clamp(3.5rem,8vw,5.5rem)}
.cp-sec > h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;letter-spacing:-.035em;margin-bottom:1rem}
.cp-lead{max-width:44rem;color:var(--muted);font-size:1.05rem;margin-bottom:1.4rem}
.cp-p{max-width:44rem;font-size:1.05rem;line-height:1.7}
.cp-p + .cp-p{margin-top:1rem}
.cp-sec .cards,.cp-sec .facts,.cp-sec .tbl,.cp-sec .loop,.cp-sec .flow{margin-top:1.4rem}
.cp-sec .feat{max-width:46rem}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.tbl table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tbl th{text-align:left;font-weight:600;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:var(--surface)}
.tbl td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.tbl td:first-child{color:var(--fg);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
code{font:500 .86em ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--fg) 6%,transparent);padding:.1em .35em;border-radius:5px}
.next{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1rem;margin-top:clamp(4rem,9vw,6rem);padding:1.6rem 1.8rem;border:1px solid var(--line);border-radius:22px;text-decoration:none;background:var(--bg);transition:border-color .3s,transform .4s var(--ease)}
.next:hover{border-color:var(--accent);transform:translateY(-3px)}
.next b{grid-column:1;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:600;letter-spacing:-.035em}
.next .arrow{grid-row:1/3;grid-column:2;font-size:1.8rem;transition:transform .35s var(--ease)}
.next:hover .arrow{transform:translateX(6px)}
.case-more{margin-top:1.4rem}

/* ---- welcome bar: bottom centre, one question ---- */
.welcome{position:fixed;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);z-index:68;width:min(640px,calc(100vw - 24px));border-radius:26px;padding:1.3rem 1.3rem 1.2rem;--glass:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 30px 70px -20px rgba(20,20,30,.28),0 0 0 1px var(--line);animation:wlIn .7s var(--ease) both}
.welcome[hidden]{display:none}
.welcome > *{position:relative;z-index:1}
.welcome.bye{animation:wlOut .25s var(--ease) both}
.wl-k{margin:0;font-size:.9rem;color:var(--muted)}
.welcome h2{margin:.15rem 0 0;font-size:clamp(1.35rem,3vw,1.7rem);font-weight:700;letter-spacing:-.035em;line-height:1.15}
.wl-x{position:absolute;top:.75rem;right:.75rem;appearance:none;border:0;background:none;width:36px;height:36px;border-radius:50%;font-size:1.25rem;color:var(--muted);cursor:pointer}
.wl-x:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg)}
.wl-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:1rem}
.wl-opts button{appearance:none;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:16px;padding:.85rem .9rem .9rem;cursor:pointer;color:var(--fg);display:grid;gap:.25rem;align-content:start;transition:border-color .2s,transform .3s var(--ease),background-color .2s}
.wl-opts button:hover{border-color:var(--fg);transform:translateY(-2px)}
.wl-opts i{width:10px;height:10px;border-radius:50%;margin-bottom:.35rem}
.wl-opts i.d{background:#c9a47e}.wl-opts i.a{background:#a6a8ff}.wl-opts i.e{background:none;border:1.5px solid var(--muted)}
.wl-opts b{font-size:.92rem;font-weight:600;line-height:1.25}
.wl-opts span{font-size:.78rem;color:var(--muted)}
.wl-opts [data-pick="design"]:hover{background:color-mix(in srgb,#c9a47e 14%,var(--bg))}
.wl-opts [data-pick="data"]:hover{background:color-mix(in srgb,#a6a8ff 16%,var(--bg))}
@media (max-width:600px){.welcome{padding:1.1rem 1rem 1rem;border-radius:22px}.wl-opts{grid-template-columns:1fr;gap:.4rem}.wl-opts button{grid-template-columns:auto 1fr;align-items:center;column-gap:.6rem;padding:.75rem .85rem}.wl-opts i{grid-row:1/3;margin:0}.wl-opts span{grid-column:2}}

/* ---- story: sticky venn that follows the steps ---- */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.story-vis{position:sticky;top:22vh}
.sv{position:relative;aspect-ratio:600/360}
.sv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sv .sa,.sv .sb{transition:fill-opacity .7s var(--ease),stroke-opacity .7s var(--ease),transform .9s cubic-bezier(.65,0,.25,1);transform-box:fill-box;transform-origin:center;stroke-width:1.2}
.sv .sa{transform:translateX(-46px)}.sv .sb{transform:translateX(46px)}
.sv .sa{fill:#c9a47e;stroke:#c9a47e}.sv .sb{fill:#a6a8ff;stroke:#a6a8ff}
.sv .sl{fill:#161718;fill-opacity:0;transition:fill-opacity .25s var(--ease)}
.svt{position:absolute;top:50%;transform:translate(-50%,-50%);font:600 clamp(.95rem,1.7vw,1.3rem)/1 var(--body);letter-spacing:-.035em;color:var(--fg);transition:opacity .6s var(--ease)}
.svt-a{left:21%}.svt-b{left:79%}.svt-m{left:50%;font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.06em;color:#fff;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s var(--ease)}
.sv[data-step="1"] .sa,.sv[data-step="2"] .sa{fill-opacity:.42;stroke-opacity:1}
.sv[data-step="1"] .sb,.sv[data-step="2"] .sb{fill-opacity:.08;stroke-opacity:.35}
.sv[data-step="2"] .sa{transform:translateX(-46px) scale(1.04)}
.sv[data-step="1"] .svt-b,.sv[data-step="2"] .svt-b{opacity:.35}
.sv[data-step="3"] .sb{fill-opacity:.42;stroke-opacity:1;transform:translateX(46px) scale(1.04)}
.sv[data-step="3"] .sa{fill-opacity:.08;stroke-opacity:.35}
.sv[data-step="3"] .svt-a{opacity:.35}
.sv[data-step="4"] .sa,.sv[data-step="4"] .sb{fill-opacity:.3;stroke-opacity:.9;transform:none}
.sv[data-step="4"] .sl{fill-opacity:1;transition:fill-opacity .6s .55s var(--ease)}
.sv[data-step="4"] .svt-m{opacity:1;transition:opacity .5s .8s var(--ease)}
.story-steps{list-style:none;margin:0;padding:0}
.st{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:.5rem;opacity:.3;transition:opacity .5s var(--ease)}
.st.on{opacity:1}
.st:first-child{min-height:48vh}.st:last-child{min-height:56vh}
.st-n{font-size:.85rem;color:var(--muted);font-weight:500}
.st h3{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.04em}
.st p{color:var(--muted);font-size:1.05rem;max-width:30rem}
.st a,.st button{appearance:none;border:0;background:none;padding:0;font:500 .95rem var(--body);color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:4px;cursor:pointer;margin-right:1rem;align-self:flex-start;display:inline}
.st li{display:block}
@media (max-width:860px){
  .story-grid{grid-template-columns:1fr}
  .story-vis{top:74px;z-index:2;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.5rem 0;border-radius:18px}
  .sv{max-width:360px;margin:0 auto}
  .st{min-height:58vh}
}
@media (prefers-reduced-motion:reduce){.sv .sa,.sv .sb{transform:none!important}}

/* hero: quieter numbers */
.hero .stats{border:0;margin-top:2rem;gap:0;max-width:40rem}
.hero .stats div{padding:0 1.6rem 0 0;border:0!important}
.hero .stats div + div{padding-left:1.6rem;border-left:1px solid var(--line)!important}
.hero .stats b{font-size:clamp(1.15rem,2.2vw,1.45rem)}
.hero .stats span{font-size:.78rem}
.hero .cta{margin-top:2rem}
.hero .statement{max-width:34rem}
@media (max-width:640px){.hero .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.hero .stats div{padding:0 .7rem 0 0}.hero .stats div + div{padding-left:.7rem;border-top:0!important}.hero .stats span{font-size:.7rem}}

/* ---- motion polish ---- */
.js .case-title .w{display:inline-block;opacity:0;transform:translateY(.7em) rotate(7deg);transform-origin:0 100%;transition:opacity .5s var(--ease),transform .9s cubic-bezier(.2,1.3,.4,1);transition-delay:calc(var(--k) * 45ms)}
.js .case-title.in .w,.js .reveal.in .case-title .w{opacity:1;transform:none}
.js .sec-head.reveal h2{transition:letter-spacing 1s var(--ease)}
.js .sec-head.reveal:not(.in) h2{letter-spacing:.02em}
.mag{transition:transform .35s var(--ease)}
.hero .wrap{will-change:transform}
.tile .vis{transition:background-color .4s}
.tile:hover .vis{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.card,.repo,.tile{transition:border-color .3s,transform .5s var(--ease),box-shadow .5s}
@media (prefers-reduced-motion:reduce){.js .case-title .w{opacity:1;transform:none}}

/* ---- kinetic line ---- */
.kin{overflow:hidden;padding:clamp(2.5rem,6vw,4.5rem) 0 0;pointer-events:none}
.kin-t{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);width:max-content;will-change:transform;padding-left:6vw}
.kin-t span{font:700 clamp(3rem,9vw,8rem)/1 var(--body);letter-spacing:-.055em;white-space:nowrap;color:color-mix(in srgb,var(--fg) 10%,var(--bg))}
.kin-t span:nth-child(4n+1){color:var(--fg)}
.kin-t em{font:300 clamp(2.4rem,7vw,6rem)/1 var(--body);font-style:normal;color:var(--accent)}
.kin-t i{flex:none;width:clamp(28px,5vw,64px);height:clamp(28px,5vw,64px);border-radius:50%;background:#c9a47e;position:relative}
.kin-t i::after{content:"";position:absolute;inset:0;left:45%;border-radius:50%;background:#a6a8ff;mix-blend-mode:multiply}

/* ---- scroll-driven reveals where the browser supports them ---- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .phones .phone,.shots .shot{animation:sv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .loop,.flow,.pipe,.demo{animation:sv-wipe linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .decisions li{animation:sv-slide linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    .case-title{animation:sv-title linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .fan{animation:sv-fan linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}
@keyframes sv-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sv-curtain{from{clip-path:inset(0 0 100% 0 round 24px);transform:translateY(40px)}to{clip-path:inset(-20% -20% -20% -20% round 0);transform:none}}
@keyframes sv-wipe{from{clip-path:inset(-20% 100% -20% -20%)}to{clip-path:inset(-20% -20% -20% -20%)}}
@keyframes sv-slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes sv-title{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes sv-fan{from{transform:scale(.85) rotate(-4deg)}to{transform:none}}

/* ---- recruiter checklist ---- */
.chk-btn{appearance:none;display:inline-flex;align-items:center;gap:.4rem;height:36px;border:0;background:none;color:var(--fg);font:600 .8rem/1 var(--body);padding:0 .7rem 0 .55rem;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .2s,background-color .3s}
.chk-btn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.chk-btn .ring{width:20px;height:20px;transform:rotate(-90deg);overflow:visible}
.chk-btn .ring circle{fill:none;stroke-width:2.4}
.chk-btn .tr{stroke:color-mix(in srgb,var(--fg) 12%,transparent)}
.chk-btn .pr{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:calc(var(--c,0) * 1) 7;transition:stroke-dasharray .7s var(--ease)}
.chk-btn .ok{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:10px 10px;opacity:0;transition:opacity .3s}
.chk-btn.full .tr{stroke:var(--accent);fill:var(--accent)}.chk-btn.full .ok{opacity:1}
.chk-btn.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.14)}}
.chk{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:60;width:min(340px,calc(100vw - 24px));border-radius:22px;padding:1.1rem 1.1rem .9rem;animation:wlIn .35s var(--ease) both}
.chk[hidden]{display:none}
.chk > *{position:relative;z-index:1}
.chk-top h2{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.chk-s{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.chk-bar{height:5px;border-radius:999px;background:var(--surface-2);margin:.8rem 0 .5rem;overflow:hidden}
.chk-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c9a47e,#a6a8ff);transition:width .6s var(--ease)}
.chk-list{list-style:none;margin:0;padding:0;display:grid}
.chk-list li{position:relative;padding:.5rem 0 .5rem 1.8rem;font-size:.9rem;color:var(--muted);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.chk-list li:last-child{border-bottom:0}
.chk-list li::before{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;border:1.5px solid var(--line);background:var(--bg);transition:all .3s var(--ease)}
.chk-list li.on{color:var(--fg)}
.chk-list li.on::before{background:var(--fg);border-color:var(--fg)}
.chk-list li.on::after{content:"";position:absolute;left:5px;top:50%;width:6px;height:9px;margin-top:-6px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk-f{font-size:.74rem;color:var(--muted);margin-top:.6rem}
.chk-toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:59;padding:.6rem 1rem;border-radius:999px;font-size:.86rem;white-space:nowrap}
.chk-toast[hidden]{display:none}
.chk-toast > *{position:relative;z-index:1}
.chk-toast.go{animation:toast 2.6s var(--ease) both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
.chk-toast b{color:var(--accent)}
.chk-toast span{color:var(--muted);margin-left:.3rem}
.chk-toast em{font-style:normal;font-weight:600}
i.cf{position:fixed;z-index:300;width:8px;height:8px;border-radius:50%;pointer-events:none;margin:-4px 0 0 -4px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- project finder ---- */
.cmd-btn{appearance:none;display:inline-flex;align-items:center;gap:.5rem;height:36px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);background:color-mix(in srgb,var(--surface) 70%,var(--bg));color:var(--muted);font:inherit;font-size:.82rem;cursor:pointer;padding:0 .4rem 0 .8rem;border-radius:999px;min-width:12.5rem;transition:border-color .2s,color .2s}
.cmd-btn kbd{margin-left:auto}
.cmd-btn:hover{color:var(--fg);border-color:var(--fg)}
.cmd-btn svg{width:14px;height:14px}
kbd{font:500 .68rem/1 var(--body);padding:.22rem .38rem;border-radius:6px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--muted)}
.cmd-ov{position:fixed;inset:0;z-index:150;background:color-mix(in srgb,#1b1c1d 22%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 12px;animation:fadeIn .2s ease both}
.cmd-ov[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}
.cmd{width:min(620px,100%);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;max-height:76vh;--glass:color-mix(in srgb,var(--bg) 86%,transparent);animation:cmdIn .35s var(--ease) both}
@keyframes cmdIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.cmd > *{position:relative;z-index:1}
.cmd-in{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.cmd-in svg{width:18px;height:18px;color:var(--muted);flex:none}
.cmd-in input{flex:1;min-width:0;border:0;background:none;font:400 1.05rem var(--body);color:var(--fg);outline:none}
.cmd-f{display:flex;gap:.35rem;padding:.7rem 1rem .3rem;flex-wrap:wrap}
.cmd-f button{appearance:none;display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--bg);color:var(--muted);font:500 .8rem/1 var(--body);padding:.45rem .7rem;border-radius:999px;cursor:pointer}
.cmd-f button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cmd-f i{width:8px;height:8px;border-radius:50%}.cmd-f i.d{background:#c9a47e}.cmd-f i.a{background:#a6a8ff}
.cmd-list{list-style:none;margin:0;padding:.4rem;overflow-y:auto;overscroll-behavior:contain}
.cmd-list li[data-k]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.6rem .7rem;border-radius:14px;cursor:pointer}
.cmd-list li[aria-selected="true"]{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface);color:var(--fg)}
.ci svg{width:19px;height:19px}
.g-design .ci{background:color-mix(in srgb,#c9a47e 22%,var(--bg));color:#6d4f35}
.g-data .ci{background:color-mix(in srgb,#a6a8ff 24%,var(--bg));color:#3c3eaa}
.ct b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.ct span{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg{font-size:.72rem;color:var(--muted);padding:.25rem .5rem;border-radius:999px;border:1px solid var(--line)}
.cmd-none{padding:1.2rem;color:var(--muted);font-size:.9rem}
.cmd-none button{appearance:none;border:0;background:none;color:var(--fg);text-decoration:underline;cursor:pointer;font:inherit}
.cmd-foot{display:flex;gap:1rem;padding:.6rem 1.1rem;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);font-size:.75rem;color:var(--muted)}
.cmd-foot kbd{margin-right:.15rem}
@media (max-width:760px){.cmd-foot,.cmd-in kbd{display:none}.cmd-ov{padding-top:70px}}
@media (hover:none){.cmd-btn kbd{display:none}}
@media (max-width:1180px){.cmd-btn{min-width:0}.cmd-l{display:none}}
@media (max-width:980px){.nav a[href="#work"]{display:none}}
@media (max-width:860px){.nav{display:none!important}.cmd-btn{margin-left:auto}}
@media (max-width:560px){.cmd-btn{width:36px;padding:0;justify-content:center;border-radius:50%}.cmd-btn svg{width:16px;height:16px}.cmd-btn kbd{display:none}.chk-btn{padding:0 .4rem}}
@media (max-width:420px){.chk-btn .chk-n{display:none}}
.skills{display:grid;grid-template-columns:1.3fr 1fr .6fr;gap:2rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.skills .label{margin:0 0 .8rem}
@media (max-width:900px){.skills{grid-template-columns:1fr;gap:1.4rem}}

main,footer.end{overflow-x:clip}

/* ---- project pages: where am I ---- */
.cp .top .wrap{padding-right:.45rem}
.crumb{display:flex;align-items:center;gap:.15rem;font-size:.85rem;margin-left:.9rem}
.crumb-home{color:var(--muted);text-decoration:none;padding:.5rem .35rem;border-radius:999px}
.crumb-home:hover{color:var(--fg)}
.crumb .sep{color:color-mix(in srgb,var(--fg) 25%,transparent)}
.pmenu{position:relative}
.pmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 .75rem;border-radius:999px;font-weight:600;font-size:.85rem;white-space:nowrap;transition:background-color .2s}
.pmenu summary::-webkit-details-marker{display:none}
.pmenu summary:hover,.pmenu[open] summary{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.pmenu summary svg{width:12px;height:12px;flex:none;transition:transform .3s var(--ease)}
.pmenu[open] summary svg{transform:rotate(180deg)}
.pm-list{position:absolute;top:calc(100% + 12px);left:0;z-index:60;min-width:260px;padding:.5rem;border-radius:18px;display:flex;flex-direction:column;background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 18px 50px -12px rgba(20,20,30,.22),0 0 0 1px var(--line)!important;animation:cmdIn .25s var(--ease) both}
.pm-list .label{margin:0;padding:.6rem .7rem .3rem;font-size:.72rem;color:var(--muted)}
.pm-list a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;text-decoration:none;color:var(--fg);font-size:.86rem;transition:background-color .2s}
.pm-list a:hover,.pm-list a.on{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.pm-list a[aria-current]{font-weight:600;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pm-list a[aria-current]::after{content:"You are here";margin-left:auto;font-size:.7rem;font-weight:500;color:var(--muted)}
.pm-list .pm-all{margin-top:.35rem;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:.75rem;color:var(--muted)}
.pm-list .pm-all svg{width:14px;height:14px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:#c9a47e}.dot.data{background:#a6a8ff}
.smenu summary{font-weight:500;color:var(--muted);max-width:15rem;border:1px solid color-mix(in srgb,var(--line) 85%,transparent)}
.sm-now{overflow:hidden;text-overflow:ellipsis}
.smenu .pm-list{left:auto;right:0;max-height:70vh;overflow:auto}
.smenu .pm-list a{color:var(--muted)}.smenu .pm-list a.on{color:var(--fg);font-weight:600}
.btn-all{display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 1rem 0 .85rem;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none;font:600 .82rem/1 var(--body);margin-left:.3rem}
.btn-all svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn-all:hover svg{transform:translateX(-3px)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(4rem,9vw,6rem)}
.pn .next{margin-top:0}
.pn .prev{grid-template-columns:auto 1fr;text-align:right}
.pn .prev .label,.pn .prev b{grid-column:2}
.pn .prev .arrow{grid-column:1}
.pn .prev:hover .arrow{transform:translateX(-6px)}
.pn-all{text-align:center;margin:1.6rem 0 0}
@media (max-width:980px){.smenu{display:none}}
@media (max-width:640px){.cp .brand>span:not(.mark){display:none}.crumb{margin-left:.3rem}.btn-all span{display:none}.btn-all{width:36px;padding:0;justify-content:center}
  .crumb .pm-list{position:fixed;left:12px;right:12px;top:72px;min-width:0}.pn{grid-template-columns:1fr}}
@media (max-width:600px){body:has(#welcome:not([hidden]):not(.mini)) .chat-btn{opacity:0;pointer-events:none;transform:scale(.8)}}

/* ---- guided tour ---- */
.tour{position:fixed;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);z-index:68;width:min(640px,calc(100vw - 24px));border-radius:22px;padding:.75rem .7rem .75rem 1.1rem;--glass:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 26px 60px -20px rgba(20,20,30,.28),0 0 0 1px var(--line);animation:wlIn .5s var(--ease) both}
.tour[hidden]{display:none}
.tour.bye{animation:wlOut .25s var(--ease) both}
.tour > *{position:relative;z-index:1}
.tr-seg{display:flex;gap:4px;margin:0 .4rem .65rem 0}
.tr-seg i{flex:1;height:3px;border-radius:3px;background:color-mix(in srgb,var(--fg) 10%,transparent);transition:background-color .4s}
.tr-seg i.done{background:var(--accent)}
.tr-seg i.cur{background:var(--fg)}
.tr-row{display:flex;align-items:center;gap:.8rem}
.tr-body{flex:1;min-width:0;display:grid;gap:.12rem}
.tr-n{margin:0;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tr-t{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.tr-h{font-size:.82rem;color:var(--muted);line-height:1.4}
.tr-h a{color:var(--fg);font-weight:500;white-space:nowrap}
.tr-act{display:flex;align-items:center;gap:.3rem;flex:none}
.tr-act button{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--fg);height:38px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:600 .84rem/1 var(--body);transition:border-color .2s,background-color .2s,opacity .2s}
.tr-act svg{width:14px;height:14px}
.tr-prev{width:38px}
.tr-prev:disabled{opacity:.35;cursor:default}
.tr-next{padding:0 1rem;background:var(--fg)!important;color:var(--bg)!important;border-color:var(--fg)!important}
.tr-next.fin{background:var(--accent)!important;border-color:var(--accent)!important}
.tr-act .tr-x{border:0;background:none;width:34px;font-size:1.2rem;color:var(--muted)}
.tr-act button:not(.tr-next):not(:disabled):hover{border-color:var(--fg)}
@media (max-width:600px){.tour{padding:.7rem .6rem .7rem .9rem}.tr-t{font-size:.92rem}.tr-h{font-size:.76rem}.tr-next{padding:0 .8rem}
  body:has(#tour:not([hidden])) .chat-btn{opacity:0;pointer-events:none;transform:scale(.8)}}
section[id],footer[id],[data-rail]{scroll-margin-top:84px}

/* ---- award: dark card with a swinging medal ---- */
.award{grid-template-columns:clamp(170px,22vw,250px) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,4rem);align-items:center;background:#161718;color:#f4f2ee;border:0;border-radius:24px;padding:clamp(1.6rem,4vw,3rem) clamp(1.6rem,4vw,3.2rem);position:relative;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.45)}
.award > *{position:relative}
.aw-medal{margin:-3.2rem 0 0;align-self:start}
.aw-medal svg{width:100%;height:auto;overflow:visible;display:block}
.aw-swing{transform-origin:120px 0;transform-box:view-box}
.js .award .aw-swing{opacity:0}
.js .award.in .aw-swing{animation:awDrop .5s var(--ease) both,awSwing 2.6s .35s cubic-bezier(.3,.6,.3,1) both}
@keyframes awDrop{from{opacity:0;transform:translateY(-60px) rotate(-14deg)}to{opacity:1;transform:rotate(-14deg)}}
@keyframes awSwing{0%{transform:rotate(-14deg)}25%{transform:rotate(9deg)}48%{transform:rotate(-5deg)}70%{transform:rotate(2.5deg)}85%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.award:hover .aw-swing{animation:awNudge 1.6s cubic-bezier(.3,.6,.3,1) both}
@keyframes awNudge{0%{transform:none}30%{transform:rotate(5deg)}60%{transform:rotate(-2.5deg)}100%{transform:none}}
.rb-a{fill:#c9a47e}.rb-b{fill:#a6a8ff}
.md{fill:#d8b47f}
.md-ring{fill:none;stroke:#a9824f;stroke-width:1.5}
.md-rim{font:600 9.5px var(--body);letter-spacing:.2em;fill:#7d5f37}
.md-n{font:800 86px var(--body);letter-spacing:-.06em;fill:#161718}
.md-st{font-size:28px;letter-spacing:0}
.md-shine{fill:none;stroke:rgba(255,255,255,.45);stroke-width:5;stroke-linecap:round}
.aw-kicker{display:inline-flex;align-items:center;gap:.55rem;margin:0;font-size:.8rem;font-weight:500;color:#e8d6c1;padding:.45rem .8rem;border:1px solid rgba(201,164,126,.35);border-radius:999px}
.aw-dot{width:7px;height:7px;border-radius:50%;background:#c9a47e;box-shadow:0 0 0 4px rgba(201,164,126,.18);animation:awPulse 2.4s ease-in-out infinite}
@keyframes awPulse{50%{box-shadow:0 0 0 8px rgba(201,164,126,0)}}
.award h3{margin-top:1rem;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.02;letter-spacing:-.045em;color:#fff}
.award .aw-sub{margin-top:.7rem;font-size:clamp(1rem,1.6vw,1.15rem);color:#e8d6c1;max-width:34rem}
.award p{color:rgba(244,242,238,.72);max-width:36rem;margin-top:.9rem}
.award p b{color:#fff}
.aw-facts{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12)}
.aw-facts dt{font-size:.72rem;color:rgba(244,242,238,.5)}
.aw-facts dd{margin:.25rem 0 0;font-size:.92rem;font-weight:600;color:#fff}
.aw-flow{margin-top:1.3rem;color:rgba(244,242,238,.7)}
.aw-flow span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-radius:999px;padding:.55rem .85rem}
.aw-flow i{flex:1;min-width:20px;max-width:60px;background:rgba(201,164,126,.6)}
.aw-flow i::after{background:#161718}
@media (max-width:760px){.award{grid-template-columns:1fr;text-align:left}.aw-medal{width:150px;margin:-2.2rem auto 0}.aw-flow i{display:none}}
@media (prefers-reduced-motion:reduce){.js .award .aw-swing{opacity:1;animation:none!important}}

/* floating panels sit over dark sections too: solid fills, no see-through */
.chat,.welcome,.tour,.chk,.chk-toast,.chat-btn,.totop,.cmd{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.chat,.welcome,.tour,.chk,.cmd{box-shadow:0 24px 60px -18px rgba(20,20,30,.3),0 0 0 1px var(--line)!important}
.chat-btn,.totop,.chk-toast{box-shadow:0 10px 30px -10px rgba(20,20,30,.28),0 0 0 1px var(--line)!important}
.chat .chat-head{background:var(--bg)}
.msg.bot{background:var(--surface);border-color:var(--line)}

html{scrollbar-gutter:stable}
.hero .view-enter{animation-name:viewFade}
@keyframes viewFade{from{opacity:0}to{opacity:1}}
.hero .stats span{display:block;min-height:3em}
#ai-data .award{margin-bottom:clamp(1rem,2vw,1.4rem)}

/* experience impact lines */
.edu .imp{display:block;margin-top:.35rem;font-size:.84rem;line-height:1.5;color:var(--muted)}
.edu li{grid-template-columns:7.5rem minmax(0,1fr)}
/* lemi: copy stays beside the long phone column */
@media (min-width:901px){.lemi > div:first-child{position:sticky;top:110px}}
/* data view: three cards in one row under the medal */
@media (min-width:901px){#ai-data .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: wide diagrams scroll sideways, with a hint and a soft edge */
.swipe-hint{display:none;margin:.5rem 0 0;font-size:.78rem;color:var(--muted)}
@media (max-width:760px){.swipe-hint{display:block}.loop,.flow,.pipe{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}}
/* quieter checklist toast */
.chk-toast{top:72px;padding:.45rem .85rem;font-size:.78rem}

/* welcome folds into a pill */
.wl-mini{display:none}
.welcome.mini{left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);transform:none;width:auto;padding:0;border-radius:999px;animation:wlMini .45s var(--ease) both}
.welcome.mini > *:not(.wl-mini):not(.wl-x){display:none}
.welcome.mini .wl-mini{appearance:none;border:0;background:none;display:inline-flex;align-items:center;gap:.6rem;height:46px;padding:0 .4rem 0 .9rem;font:600 .86rem/1 var(--body);color:var(--fg);cursor:pointer;white-space:nowrap}
.welcome.mini .wl-x{position:static;width:34px;height:34px;margin-right:6px;font-size:1.1rem}
.welcome.mini{display:flex;align-items:center}
.welcome.mini[hidden]{display:none}
.wl-dots{position:relative;width:24px;height:16px;flex:none}
.wl-dots i{position:absolute;top:0;width:16px;height:16px;border-radius:50%}
.wl-dots i:first-child{left:0;background:#c9a47e}.wl-dots i+i{left:8px;background:#a6a8ff;mix-blend-mode:multiply}
@keyframes wlMini{from{opacity:0;transform:translateY(10px) scale(.94)}}
@media (max-width:600px){.welcome.mini .wl-mini{font-size:.8rem;padding-left:.75rem}}
body:has(#tour:not([hidden])) .welcome.mini{display:none}
/* phone: the whole chat button is the dark avatar */
@media (max-width:520px){
  .chat-btn{background:#161718!important;box-shadow:0 12px 30px -10px rgba(20,20,30,.45)!important;width:56px;height:56px}
  .cb-av .venn-av{background:none;width:36px;height:36px}
  .cb-av .venn-av i{width:18px;height:18px;top:9px}.cb-av .venn-av i:first-child{left:5px}.cb-av .venn-av i+i{left:13px}
  .chat-btn .q{top:-9px;right:-9px;box-shadow:0 0 0 2.5px var(--bg)}
}

/* iOS zooms into any field under 16px: keep every input at 16px on phones */
@media (max-width:760px){input,textarea,select,.chat-form input,.demo textarea,.cmd input{font-size:16px!important}}
.chat-log{-webkit-overflow-scrolling:touch}
/* close buttons: always on top and finger-sized */
.welcome .wl-x{z-index:5;width:44px;height:44px;top:.5rem;right:.5rem}
.welcome .wl-k,.welcome h2{padding-right:2.6rem}
.welcome.mini .wl-x{width:40px;height:40px;margin-right:3px}
.tr-act .tr-x{width:44px;height:44px}
.chk .chk-x,.chat-x{min-width:44px;min-height:44px}
/* desktop: suggestions wrap so every chip is reachable without a sideways scroll */
@media (min-width:521px){.chat-sugg{flex-wrap:wrap;overflow:visible;padding-bottom:.7rem}.chat-sugg button{flex:none}}

/* ---- hero as a Figma canvas: selection on the name, two multiplayer cursors ---- */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--fg) 12%,transparent) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 70% at 30% 45%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 30% 45%,#000,transparent 75%)}
.hero{isolation:isolate}
.figsel{position:relative;display:inline-block;margin-bottom:1.7rem}
.fs-frame{position:absolute;inset:-.24em -.5em -.42em -.26em;border:1.5px solid #0d99ff;pointer-events:none;opacity:0;transform:scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.fs-frame i{position:absolute;width:9px;height:9px;background:var(--bg);border:1.5px solid #0d99ff}
.fs-frame .tl{left:-5px;top:-5px}.fs-frame .tr{right:-5px;top:-5px}.fs-frame .bl{left:-5px;bottom:-5px}.fs-frame .br{right:-5px;bottom:-5px}
.fs-dim{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font:500 11.5px/1 var(--mono,ui-monospace);font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#fff;background:#0d99ff;border-radius:5px;padding:5px 8px}
.fcur{position:absolute;display:flex;align-items:flex-start;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.fcur svg{width:17px;height:23px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.fcur em{font-style:normal;margin:15px 0 0 -2px;font:600 12.5px/1 var(--body);color:#fff;padding:5px 9px;border-radius:9px 7px 7px 7px}
.fc-d{right:-3.3em;top:-.5em}.fc-d em{background:#c9a47e}
.fc-a{right:-4em;bottom:0}.fc-a em{background:#8587e6}
html.figon .fs-frame{opacity:1;transform:none}
html.figon .fcur{opacity:1}
:root[data-view="design"] .fc-a,:root[data-view="data"] .fc-d{opacity:.35}
html:not(.figon) .fc-a,html:not(.figon) .fc-d{opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.figon .fc-d{animation:fcDrift1 9s ease-in-out infinite}
  html.figon .fc-a{animation:fcDrift2 11s ease-in-out infinite}
}
@keyframes fcDrift1{0%,100%{translate:0 0}30%{translate:22px 12px}60%{translate:8px -14px}}
@keyframes fcDrift2{0%,100%{translate:0 0}35%{translate:26px 10px}70%{translate:12px -18px}}
@media (max-width:640px){.fcur{display:none}.fs-dim{font-size:10px;bottom:-26px}}

/* hackathon photos inside the award card */
.aw-photos{grid-column:1/-1;margin:.6rem 0 0;display:grid;grid-template-columns:1.6fr 1fr;gap:.7rem}
.aw-photos img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block}
.aw-photos figcaption{grid-column:1/-1;font-size:.82rem;color:rgba(244,242,238,.55)}
@media (max-width:760px){.aw-photos{grid-template-columns:1fr}.aw-photos img+img{display:none}}
/* hero: more air between the name, the statement and the stats */
.hero .figsel{margin-bottom:2.6rem}
.hero .statement{margin-top:0}
.hero .stats{margin-top:2.6rem}
.hero .cta{margin-top:2.6rem}
.hero-id{margin-bottom:2.4rem}
.hero .figsel{margin-bottom:4.2rem}
/* phones stay minimal: no canvas, no selection, no cursors */
@media (max-width:640px){.hero::after,.fs-frame,.fcur{display:none!important}.hero .figsel{margin-bottom:1.6rem}}

/* Lemi, the lemur from the app, says hi */
.lemur{display:flex;align-items:flex-end;gap:.6rem;margin-bottom:1rem}
.lemur img{width:84px;height:auto;transform-origin:50% 100%}
.lm-say{position:relative;margin-bottom:3.2rem;font-size:.86rem;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:.45rem .75rem;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .js .lemur.in img{animation:lmHop .9s cubic-bezier(.3,1.6,.5,1) .2s both,lmBob 4s ease-in-out 1.2s infinite}
  .js .lemur .lm-say{opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .4s var(--ease) .8s,transform .5s cubic-bezier(.3,1.6,.5,1) .8s}
  .js .lemur.in .lm-say{opacity:1;transform:none}
  .lemur:hover img{animation:lmWiggle .6s ease-in-out}
}
@keyframes lmHop{from{transform:translateY(24px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes lmBob{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes lmWiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(6deg)}}
/* desktop: the whole hero, buttons included, fits the first screen on short laptop displays */
@media (min-width:641px){
  .hero{min-height:0;padding-top:clamp(1.5rem,7vh,6rem);padding-bottom:clamp(1.5rem,4vh,3rem)}
  .hero-id{margin-bottom:clamp(.9rem,3vh,2.4rem)}
  .hero h1{font-size:clamp(2.6rem,min(8.4vw,12vh),6.2rem)}
  .hero .figsel{margin-bottom:clamp(2.6rem,6vh,4.2rem)}
  .hero .stats{margin-top:clamp(1.1rem,3.4vh,2.6rem)}
  .hero .cta{margin-top:clamp(1.1rem,3.4vh,2.6rem)}
}
@media (min-width:641px) and (max-height:780px){
  .hero .pf{width:52px;height:52px}
  .hero-id{margin-bottom:.8rem}
  .hero h1{font-size:clamp(2.6rem,min(8.4vw,11vh),6.2rem)}
  .hero .figsel{margin-bottom:2.6rem}
  .hero .statement{font-size:1.06rem;line-height:1.5}
  .hero .stats b{font-size:1.2rem}
}

/* the win card and Lemi get clear air between them */
@media (min-width:901px){#ai .lemi > div:first-child{top:120px}}
.award.reveal{transform:translateY(18px)}
.js .award.reveal.in{transform:none}
/* descenders (the tail of ę) stay visible inside the masked lines */
.hero h1 .line{padding-bottom:.2em;margin-bottom:-.14em}
/* selection frame: fixed breathing room around the name */
.fs-frame{inset:-20px -40px -18px -22px}
.fs-dim{bottom:-34px}
.fc-d{right:-104px;top:-26px}
.fc-a{right:-112px;bottom:4px}

/* Lemi as a product with its own brand */
.app-id{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.app-icon{width:72px;height:72px;border-radius:22%;box-shadow:0 10px 24px -10px rgba(40,30,90,.35),0 0 0 1px rgba(0,0,0,.05)}
.lemi-word{margin:0;font:800 2rem/1 var(--body);letter-spacing:-.06em;color:#16151f}
.app-meta{margin:.3rem 0 0;font-size:.82rem;color:#5e6070}
.app-badge{margin-left:auto;align-self:flex-start;font:600 .72rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#5146c9;background:rgba(81,70,201,.1);border:1px solid rgba(81,70,201,.25);border-radius:999px;padding:.42rem .7rem}
#ai .lemi .lemi-title{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.05em}
#ai .lemi .lemi-title .l2{display:block;color:#5146c9}#ai .lemi .lemi-title .l2 .w{color:inherit}
.lemur-peek{display:inline-flex;align-items:flex-end;gap:.4rem;margin-right:.4rem}
.lemur-peek img{width:52px;height:auto}
.lemur-peek .lm-say{margin-bottom:1.6rem;font-size:.78rem;padding:.35rem .6rem}
#ai .lemi .links{align-items:flex-end}
@media (prefers-reduced-motion:no-preference){.js .reveal.in .lemur-peek img{animation:lmBob 4s ease-in-out infinite}}

/* SiDLY Health as a shipped app */
.sidly-ic{width:72px;height:72px}
.sidly-word{margin:0;display:flex;align-items:center;gap:.5rem}
.sidly-word img{height:24px;width:auto}
.sidly-word span{font:300 1.5rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#212121}
.app-badge.live{color:#1f7a4d;background:rgba(47,191,113,.1);border-color:rgba(47,191,113,.35);display:inline-flex;align-items:center;gap:.4rem}
.app-badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#2fbf71}
.stores{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1.2rem}
.store{display:inline-flex;align-items:center;gap:.6rem;height:48px;padding:0 1.05rem 0 .85rem;border-radius:12px;background:#161718;color:#fff;text-decoration:none;transition:transform .2s var(--ease),background-color .2s}
.store:hover{transform:translateY(-2px);background:#000}
.store svg{width:22px;height:22px;flex:none}
.store span{display:flex;flex-direction:column;font:600 1.02rem/1.05 var(--body);letter-spacing:-.01em}
.store small{font:500 .64rem/1 var(--body);letter-spacing:.02em;opacity:.8;margin-bottom:2px}

/* GovBot as a product inside the win card */
.gb-id{margin-bottom:1.4rem}
.gb-ic{width:64px;height:64px}
.gb-word{margin:0;font:700 1.7rem/1 var(--body);letter-spacing:-.04em;color:#fff}
.award .app-meta{color:rgba(244,242,238,.6)}
.app-badge.gold{color:#161718;background:#d8b47f;border-color:#d8b47f}
.award h3{margin-top:0}
.award .gb-word{color:#fff}
.app-badge{white-space:nowrap}
.award .app-meta{margin-top:.3rem}

/* minimal, in the site's own language */
#ai .lemi{margin-top:clamp(4rem,8vw,6.5rem);padding-top:clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line)}
.sidly-word .hw{height:15px;width:auto;margin-left:.15rem}
.app-icon{box-shadow:0 0 0 1px var(--line)}
.app-id{gap:.9rem}
/* screen tabs: quiet underline tabs instead of heavy pills */
.tabs{gap:1.6rem;border-bottom:1px solid var(--line);margin:1.4rem 0 1.6rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0!important;background:none!important;border-radius:0;padding:.7rem 0;font-size:.9rem;color:var(--muted);position:relative;white-space:nowrap;flex:none}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg);transform:scaleX(0);transition:transform .3s var(--ease)}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:var(--fg)!important;font-weight:600}
.tabs button[aria-selected="true"]::after{transform:none}

/* win card: dark, minimal, photos as a clean pair */
.aw-lead{margin-top:1.1rem!important;font-size:clamp(1.35rem,2.4vw,1.9rem)!important;line-height:1.3!important;letter-spacing:-.025em;font-weight:500;color:#fff!important;max-width:30ch!important}
.aw-lead b{color:#d8b47f!important;font-weight:600}
.award .aw-sub{margin-top:1rem!important;font-size:.92rem!important;color:rgba(244,242,238,.55)!important}
.aw-photos{grid-column:1/-1;margin:1.4rem 0 0!important;display:grid;grid-template-columns:2fr 1fr;gap:.6rem;height:clamp(220px,30vw,380px)}
.aw-photos figure{position:relative;margin:0;overflow:hidden;border-radius:16px;height:100%}
.aw-photos img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;border-radius:0!important;transition:transform .8s var(--ease)}
.aw-photos figure:hover img{transform:scale(1.03)}
.aw-photos figcaption{position:absolute;left:12px;bottom:12px;font-size:.78rem;font-weight:500;color:#fff!important;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:.4rem .75rem}
@media (max-width:760px){.aw-photos{grid-template-columns:1fr;height:auto}.aw-photos figure{height:220px}.aw-photos .ph-b{display:none}}
/* medal: drop and swing when the card comes into view, then a slow idle sway */
@media (prefers-reduced-motion:no-preference){
  .js .award.in .aw-swing{animation:awDrop .55s var(--ease) both,awSwing 2.8s .4s cubic-bezier(.3,.6,.3,1) both,awIdle 6s 3.4s ease-in-out infinite}
}
@keyframes awIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(2.2deg)}}

/* Lemi: the wordmark is the logo, the lemur is a friend */
.lemi-word{margin:0;font:800 clamp(2.4rem,4vw,3.2rem)/1 var(--body);letter-spacing:-.065em;color:var(--fg)}
#ai .lemi .app-meta{margin:.5rem 0 0;font-size:.88rem;color:var(--muted)}
.tagline{margin:1.2rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.7}
.tagline i{font-style:normal;color:var(--line);margin:0 .35rem}
.lemur-friend{display:flex;align-items:flex-end;gap:1rem;margin:2rem 0 .6rem}
.lemur-big{width:clamp(130px,14vw,170px);height:auto;overflow:visible;flex:none}
.lf-say{margin-bottom:5.4rem;font-size:.92rem;line-height:1.4;font-weight:500;background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:.65rem .9rem;max-width:15rem}
.lm-body,.lm-tail,.lm-ear-l,.lm-ear-r{transform-box:fill-box}
.lm-body{transform-origin:50% 100%}
.lm-tail{transform-origin:0% 100%}
.lm-ear-l{transform-origin:100% 100%}.lm-ear-r{transform-origin:0% 100%}
@media (prefers-reduced-motion:no-preference){
  .lemur-friend.in .lm-body{animation:lmHop .9s cubic-bezier(.3,1.6,.5,1) both,lmBreath 4.5s 1s ease-in-out infinite}
  .lemur-friend.in .lm-tail{animation:lmTail 2.6s ease-in-out infinite}
  .lemur-friend.in .lm-ear-l{animation:lmEarL 5s 1.5s ease-in-out infinite}
  .lemur-friend.in .lm-ear-r{animation:lmEarR 5s 1.7s ease-in-out infinite}
  .js .lemur-friend .lf-say{opacity:0;transform:translateY(8px) scale(.92);transform-origin:0 100%;transition:opacity .4s var(--ease) .7s,transform .5s cubic-bezier(.3,1.6,.5,1) .7s}
  .js .lemur-friend.in .lf-say{opacity:1;transform:none}
  .lemur-friend:hover .lm-body{animation:lmWiggle .7s ease-in-out}
}
@keyframes lmBreath{0%,100%{transform:none}50%{transform:translateY(-3px) scaleY(1.02)}}
@keyframes lmTail{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes lmEarL{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-12deg)}96%{transform:rotate(4deg)}}
@keyframes lmEarR{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(12deg)}96%{transform:rotate(-4deg)}}
/* win card kicker: plain text, no pill */
.award .aw-kicker{border:0!important;padding:0!important;font-size:.85rem;letter-spacing:.01em}
.device:has(img[src*="lemi/"]){aspect-ratio:420/1000}.device:has(img[src*="lemi/"]) img{object-fit:contain}
/* room between the portrait row and the top of the selection frame */
@media (min-width:641px){.hero-id{margin-bottom:calc(clamp(.9rem,3vh,2.4rem) + 30px)}}
@media (min-width:641px) and (max-height:780px){.hero-id{margin-bottom:calc(.8rem + 26px)}}

/* secondary button that pairs with the solid one */
.btn.soft{background:color-mix(in srgb,var(--fg) 7%,var(--bg));border-color:transparent;color:var(--fg)}
.btn.soft:hover{background:color-mix(in srgb,var(--fg) 12%,var(--bg))}

/* lighter store buttons */
.store{height:40px;padding:0 .9rem 0 .7rem;border-radius:10px}
.store svg{width:18px;height:18px}
.store span{font-size:.88rem}
.store small{font-size:.58rem}
.stores{margin:1.2rem 0 .4rem}
#health .app-id{margin-bottom:1.1rem}
/* liquid glass for the second button and Lemi's speech bubble */
.btn.soft,.lf-say,.lm-say{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45))!important;-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 8px 24px -10px rgba(20,20,30,.22),0 0 0 1px rgba(20,20,30,.06)!important;color:var(--fg)}
.btn.soft:hover{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6))!important;box-shadow:inset 0 1px 0 #fff,0 12px 28px -10px rgba(20,20,30,.28),0 0 0 1px rgba(20,20,30,.08)!important}
.cta .btn:not(.solid),.links .btn:not(.solid){background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 24px -10px rgba(20,20,30,.22),0 0 0 1px rgba(20,20,30,.06)}
.cta .btn:not(.solid):hover,.links .btn:not(.solid):hover{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));border-color:#fff}
.award .links .btn:not(.solid){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* contact: email is one obvious copy button, socials are glass pills with icons */
.end .row{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.mailchip{appearance:none;display:inline-flex;align-items:center;gap:.7rem;height:56px;padding:0 .5rem 0 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:500 1.05rem/1 var(--body);letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 28px -14px rgba(20,20,30,.3);transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.mailchip:hover{border-color:var(--fg);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(20,20,30,.35)}
.mailchip>svg{width:20px;height:20px;color:var(--muted)}
.mailchip .mc{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .95rem;border-radius:999px;background:var(--fg);color:var(--bg);font-size:.85rem;font-weight:600;transition:background-color .2s}
.mailchip .mc svg{width:15px;height:15px}
.mailchip.ok .mc{background:#2fbf71}
.mailchip.ok .ic-copy{display:none}
.socials{display:flex;flex-wrap:wrap;gap:.5rem}
.soc{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1rem 0 .85rem;border-radius:999px;text-decoration:none;color:var(--fg);font:500 .9rem/1 var(--body);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 22px -12px rgba(20,20,30,.25),0 0 0 1px rgba(20,20,30,.07);transition:transform .25s var(--ease)}
.soc:hover{transform:translateY(-2px)}
.soc svg{width:17px;height:17px}
@media (max-width:420px){.mailchip{font-size:.92rem;padding-left:.9rem}.mailchip .mc b{display:none}.mailchip .mc{padding:0 .7rem}}

/* story: every step, the last one most of all, gets enough scroll to land */
.st{min-height:72vh}
.st:first-child{min-height:56vh}
.st:last-child{min-height:110vh;justify-content:flex-start;padding-top:22vh}
@media (max-width:860px){.st{min-height:66vh}.st:last-child{min-height:95vh}}
/* flat glass: no drop shadows on the pills and bubbles */
.soc,.lf-say,.lm-say,.btn.soft,.cta .btn:not(.solid),.links .btn:not(.solid){box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,20,30,.08)!important}
.soc:hover,.btn.soft:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,20,30,.16)!important}
.mailchip{box-shadow:none}.mailchip:hover{box-shadow:none}
/* the Figma canvas belongs to the design view only */
:root[data-view="data"] .fs-frame,:root[data-view="data"] .fcur{opacity:0!important;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.hero::after{transition:opacity .6s var(--ease)}
:root[data-view="data"] .hero::after{opacity:0}
/* the selection draws itself in whenever the design view opens */
@media (prefers-reduced-motion:no-preference){
  html.figin .fs-frame{animation:fsDraw .75s cubic-bezier(.65,0,.25,1) backwards}
  html.figin .fs-frame i{animation:fsPop .45s cubic-bezier(.3,1.7,.5,1) both}
  html.figin .fs-frame .tl{animation-delay:.05s}html.figin .fs-frame .tr{animation-delay:.3s}html.figin .fs-frame .br{animation-delay:.5s}html.figin .fs-frame .bl{animation-delay:.65s}
  html.figin .fs-dim{animation:fsDim .5s cubic-bezier(.3,1.5,.5,1) .75s both}
  html.figin .fc-d{animation:fcIn1 .9s cubic-bezier(.2,.9,.3,1) .5s both,fcDrift1 9s ease-in-out 1.4s infinite}
  html.figin .fc-a{animation:fcIn2 .9s cubic-bezier(.2,.9,.3,1) .8s both,fcDrift2 11s ease-in-out 1.7s infinite}
}
@keyframes fsDraw{from{clip-path:inset(-12px 100% 100% -12px);opacity:1}to{clip-path:inset(-12px -12px -12px -12px);opacity:1}}
@keyframes fsPop{from{transform:scale(0)}to{transform:none}}
@keyframes fsDim{from{opacity:0;transform:translate(-50%,8px) scale(.85)}to{opacity:1;transform:translateX(-50%)}}
@keyframes fcIn1{from{opacity:0;translate:90px -40px}to{translate:0 0}}
@keyframes fcIn2{from{opacity:0;translate:110px 50px}to{translate:0 0}}
html.figon:not(.figin) .fs-frame,html.figon:not(.figin) .fcur{opacity:0}

/* data-view portrait is a background, so search engines pick the warm portrait */
.pf span.pf-a{position:absolute;inset:0;border-radius:50%;background:url(katarzyna-stepien-data.webp) center/cover}

/* one layout for both views, so nothing jumps when switching */
.hero .statement{max-width:40rem}
@media (min-width:641px){
  .hero-id{margin-bottom:calc(clamp(.9rem,3vh,2.4rem) + 18px)}
  .hero .figsel{margin-bottom:clamp(2.2rem,5vh,3.4rem)}
}
@media (min-width:641px) and (max-height:780px){.hero-id{margin-bottom:calc(.8rem + 18px)}.hero .figsel{margin-bottom:2.3rem}}
@media (min-width:641px) and (max-height:780px){.hero .statement{min-height:4.5em}}

/* leaving the design view: the selection wipes away and the cursors drift off, above the circular reveal */
@media (min-width:641px){.fs-frame{view-transition-name:figframe}.fc-d{view-transition-name:fcd}.fc-a{view-transition-name:fca}}
::view-transition-group(figframe),::view-transition-group(fcd),::view-transition-group(fca){animation:none}
::view-transition-new(figframe),::view-transition-new(fcd),::view-transition-new(fca){animation:none;opacity:0}
::view-transition-old(figframe){animation:fsOut .5s cubic-bezier(.65,0,.35,1) both}
::view-transition-old(fcd){animation:fcOut1 .5s cubic-bezier(.4,0,.2,1) both}
::view-transition-old(fca){animation:fcOut2 .5s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes fsOut{to{clip-path:inset(0 0 0 100%);opacity:.2}}
@keyframes fcOut1{to{transform:translate(90px,-40px);opacity:0}}
@keyframes fcOut2{to{transform:translate(110px,40px);opacity:0}}
html.figin .fs-frame.drawn{animation:none!important;clip-path:none!important}

/* ---- motion budget: one-time entrances stay, endless loops are cut back to the few that carry meaning ---- */
.aw-dot{animation:none}
@media (prefers-reduced-motion:no-preference){
  .js .award.in .aw-swing{animation:awDrop .55s var(--ease) both,awSwing 2.8s .4s cubic-bezier(.3,.6,.3,1) both}
  .lemur-friend.in .lm-ear-l,.lemur-friend.in .lm-ear-r{animation:none}
  .lemur-friend.in .lm-tail{animation:lmTail 4s ease-in-out infinite}
  html.figin .fc-d{animation:fcIn1 .9s cubic-bezier(.2,.9,.3,1) .5s both,fcDrift1 16s ease-in-out 1.4s infinite}
  html.figin .fc-a{animation:fcIn2 .9s cubic-bezier(.2,.9,.3,1) .8s both,fcDrift2 19s ease-in-out 1.7s infinite}
  .chat-btn .q{animation:nudge 9s var(--ease) 6s infinite}
}
.scroll-hint{display:none}
.hid-t{display:grid;gap:.35rem}
.avail{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;color:var(--fg)}
.avail i{width:7px;height:7px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.18)}