/* ============ Theme tokens ============ */
:root{
  --paper:#F2F4F7; --surface:#FFFFFF; --ink:#152033; --muted:#5A6577;
  --line:#D8DDE5; --accent:#2A52BE; --accent-soft:#E4EAFA; --on-accent:#FFFFFF;

  /* Badge tones (paper types, project kinds) */
  --t-blue:#2A52BE; --t-green:#1F7A4D; --t-amber:#A35A00; --t-purple:#6D3FC0;
  --t-rose:#B4234F; --t-teal:#0F7480; --t-slate:#4A5568;

  /* Link button colours */
  --b-email:#2A52BE; --b-cv:#A35A00; --b-scholar:#1A73E8; --b-github:#24292F;
  --b-linkedin:#0A66C2; --b-orcid:#5B8A12; --b-researchgate:#00897B;
  --b-instagram:#C13584; --b-website:#6D3FC0;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-lg:14px; --radius-sm:8px;
  --gutter:clamp(16px,4vw,40px); --max:1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F141B; --surface:#161D27; --ink:#E6EBF2; --muted:#98A3B3;
    --line:#29323F; --accent:#88A6FF; --accent-soft:#1D2740; --on-accent:#0F141B;
    --t-blue:#88A6FF; --t-green:#6FD3A0; --t-amber:#F2B45C; --t-purple:#B89BFF;
    --t-rose:#FF8FAE; --t-teal:#5ED0DC; --t-slate:#AAB4C3;
    --b-email:#88A6FF; --b-cv:#F2B45C; --b-scholar:#8AB4F8; --b-github:#E6EDF3;
    --b-linkedin:#70B5F9; --b-orcid:#B5DA5E; --b-researchgate:#4FD1C5;
    --b-instagram:#F48FC8; --b-website:#B89BFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F141B; --surface:#161D27; --ink:#E6EBF2; --muted:#98A3B3;
  --line:#29323F; --accent:#88A6FF; --accent-soft:#1D2740; --on-accent:#0F141B;
  --t-blue:#88A6FF; --t-green:#6FD3A0; --t-amber:#F2B45C; --t-purple:#B89BFF;
  --t-rose:#FF8FAE; --t-teal:#5ED0DC; --t-slate:#AAB4C3;
  --b-email:#88A6FF; --b-cv:#F2B45C; --b-scholar:#8AB4F8; --b-github:#E6EDF3;
  --b-linkedin:#70B5F9; --b-orcid:#B5DA5E; --b-researchgate:#4FD1C5;
  --b-instagram:#F48FC8; --b-website:#B89BFF;
  color-scheme: dark;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ============ Top bar ============ */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:16px; height:60px}
.nav .brand{font:500 1.15rem/1 var(--serif); color:var(--ink); text-decoration:none; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav nav{display:flex; gap:4px}
.nav nav a{color:var(--muted); text-decoration:none; font-size:.92rem; padding:6px 10px; border-radius:999px}
.nav nav a:hover, .nav nav a.active{color:var(--ink); background:var(--accent-soft)}
.icon-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; flex:none}
.icon-btn svg{width:18px; height:18px}
@media (max-width:640px){ .nav nav{display:none} }

/* ============ Hero ============ */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(40px,6vw,72px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,5vw,64px); align-items:center}
.hero h1{font:400 clamp(2.4rem,5.2vw,4rem)/1 var(--serif); letter-spacing:-.02em; margin:0 0 16px}
.hero .headline{font:400 clamp(1.1rem,2vw,1.35rem)/1.4 var(--serif); font-style:italic; color:var(--muted); margin:0 0 16px; max-width:38ch}
.hero .bio{max-width:62ch; margin:0 0 24px}
.hero .bio p{margin:0 0 .8em}
.where{color:var(--muted); font-size:.95rem; margin:0 0 20px}
.tally{margin-top:28px; font-size:.95rem; color:var(--muted)}
.tally a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}
.tally a:hover{border-color:var(--accent)}

.portrait{width:clamp(220px,32vw,360px); aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:var(--accent-soft); position:relative; transform:rotate(1.5deg); box-shadow:0 1px 0 var(--line), 0 28px 56px -30px color-mix(in srgb, var(--ink) 55%, transparent)}
.portrait img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s}
.portrait img.loaded{opacity:1}
.portrait .initials{position:absolute; inset:0; display:grid; place-items:center; font:400 4.5rem/1 var(--serif); color:var(--accent)}
@media (max-width:720px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{order:-1; width:min(220px, 60vw); transform:rotate(-1.5deg)}
}

/* ============ Buttons ============ */
.links{display:flex; flex-wrap:wrap; gap:8px}
.btn{--c:var(--ink); display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font:500 .92rem/1.2 var(--sans); cursor:pointer}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn svg{width:16px; height:16px; flex:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08); color:var(--on-accent)}

/* Coloured link buttons: each sets --c */
.btn.tint{color:var(--c); background:color-mix(in srgb, var(--c) 9%, var(--surface)); border-color:color-mix(in srgb, var(--c) 30%, transparent)}
.btn.tint:hover{color:var(--c); background:color-mix(in srgb, var(--c) 16%, var(--surface)); border-color:var(--c)}
.btn.solid{background:var(--c); border-color:var(--c); color:var(--surface)}
.btn.solid:hover{filter:brightness(1.08); color:var(--surface)}
.b-email{--c:var(--b-email)} .b-cv{--c:var(--b-cv)} .b-scholar{--c:var(--b-scholar)}
.b-github{--c:var(--b-github)} .b-linkedin{--c:var(--b-linkedin)} .b-orcid{--c:var(--b-orcid)}
.b-researchgate{--c:var(--b-researchgate)} .b-instagram{--c:var(--b-instagram)} .b-website{--c:var(--b-website)}

/* ============ Badges & tones ============ */
.tone-blue{--c:var(--t-blue)} .tone-green{--c:var(--t-green)} .tone-amber{--c:var(--t-amber)}
.tone-purple{--c:var(--t-purple)} .tone-rose{--c:var(--t-rose)} .tone-teal{--c:var(--t-teal)} .tone-slate{--c:var(--t-slate)}
.badge{display:inline-block; font:600 .75rem/1.5 var(--sans); padding:1px 9px; border-radius:999px; background:color-mix(in srgb, var(--c, var(--t-blue)) 13%, transparent); color:var(--c, var(--t-blue)); margin-left:6px; vertical-align:2px; white-space:nowrap}
.badge.outline{background:transparent; border:1px solid color-mix(in srgb, var(--c, var(--t-blue)) 45%, transparent)}

/* ============ Sections ============ */
section.block{padding:clamp(48px,7vw,88px) 0; border-top:1px solid var(--line)}
.block-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; margin-bottom:28px}
.block-head h2{font:400 clamp(2rem,4.2vw,2.9rem)/1.05 var(--serif); letter-spacing:-.015em; margin:0}
.block-head p{margin:0; color:var(--muted); max-width:52ch}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:24px}
.search{flex:1 1 240px; max-width:340px; position:relative}
.search input{width:100%; padding:9px 14px 9px 38px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:.95rem}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute; left:13px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:6px 12px; font:500 .85rem/1.2 var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--c)}
.chip .n{opacity:.6; font-weight:400}
.count{color:var(--muted); font-size:.88rem; margin-left:auto}

/* ============ Research ============ */
.year-group{display:grid; grid-template-columns:88px minmax(0,1fr); gap:0 24px; padding:18px 0; border-top:1px solid var(--line)}
.year-group:first-child{border-top:0; padding-top:0}
.year{font:400 1.6rem/1.2 var(--serif); color:var(--muted); padding-top:12px}
@media (max-width:640px){ .year-group{grid-template-columns:1fr} .year{padding-top:0} }
.paper + .paper{margin-top:4px}
.paper-toggle{all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; width:100%; padding:12px 14px; margin:0 -14px; border-radius:var(--radius-sm); cursor:pointer}
.paper-toggle:hover{background:var(--surface)}
.paper-toggle:focus-visible{outline:2px solid var(--accent)}
.paper-title{font:500 1.18rem/1.35 var(--serif); margin:0 0 4px; color:var(--ink)}
.paper-authors{font-size:.92rem; color:var(--muted); margin:0}
.paper-authors strong{color:var(--ink); font-weight:600}
.paper-venue{font-size:.92rem; margin:2px 0 0}
.paper-venue .badge:first-of-type{margin-left:8px}
.chev{width:20px; height:20px; color:var(--muted); margin-top:4px; transition:transform .2s}
.paper.open .chev{transform:rotate(180deg)}
.paper-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease}
.paper.open .paper-body{grid-template-rows:1fr}
.paper-body > div{overflow:hidden}
.paper-body .inner{padding:4px 0 18px; max-width:70ch}
.paper-body .abstract{margin:0 0 12px; white-space:pre-line}
.kw{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.kw span{font-size:.8rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 10px}
.paper-body .links .btn{padding:6px 12px; font-size:.85rem}

/* ============ Projects ============ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(16px,2.5vw,28px)}
.project{all:unset; box-sizing:border-box; display:flex; flex-direction:column; cursor:pointer; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:border-color .2s, transform .2s}
.project:hover{border-color:var(--accent); transform:translateY(-2px)}
.project:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.thumb{aspect-ratio:16/10; background:color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)); position:relative; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .mono{position:absolute; inset:0; display:grid; place-items:center; font:400 3rem/1 var(--serif); color:var(--c, var(--accent))}
.project .meta{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1}
.project h3{font:500 1.3rem/1.25 var(--serif); margin:0}
.project p{margin:0; color:var(--muted); font-size:.93rem}
.project .foot{margin-top:auto; padding-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:.8rem; color:var(--muted)}
.project .foot .badge{margin-left:0}
.project .foot .tech{border:1px solid var(--line); border-radius:999px; padding:1px 8px}

/* ============ Dialog ============ */
dialog{border:0; padding:0; border-radius:var(--radius-lg); background:var(--surface); color:var(--ink); width:min(720px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
dialog::backdrop{background:color-mix(in srgb, var(--ink) 45%, transparent); backdrop-filter:blur(2px)}
dialog[open]{animation:pop .22s ease}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)}}
.dlg-wrap{position:relative}
.dlg-img{aspect-ratio:16/9; background:var(--accent-soft)}
.dlg-img img{width:100%; height:100%; object-fit:cover}
.dlg-body{padding:24px clamp(18px,4vw,32px) 28px}
.dlg-body h3{font:400 2rem/1.1 var(--serif); margin:0 0 8px}
.dlg-body .sub{color:var(--muted); margin:0 0 16px; font-size:.95rem; display:flex; align-items:center; gap:8px}
.dlg-body .sub .badge{margin-left:0}
.dlg-body .desc{margin:0 0 18px; white-space:pre-line}
.dlg-close{position:absolute; top:12px; right:12px; z-index:1}

/* ============ CV ============ */
.cv{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,64px)}
.cv h3{font:500 1.35rem/1.2 var(--serif); margin:0 0 18px}
.timeline{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.timeline li{position:relative; padding:0 0 22px 22px}
.timeline li::before{content:""; position:absolute; left:-5px; top:8px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--accent)}
.timeline li:first-child::before{background:var(--accent)}
.when{font-size:.85rem; color:var(--muted)}
.timeline h4{margin:2px 0 0; font-size:1rem; font-weight:600}
.timeline .org{margin:0}
.timeline .d{margin:6px 0 0; color:var(--muted); font-size:.93rem; white-space:pre-line}

/* ============ Pagination ============ */
.pager{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:28px}
.pager:empty{display:none}
.cv .pager{margin-top:4px}
.pager button{min-width:36px; height:36px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:500 .88rem/1 var(--sans); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px}
.pager button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.pager button[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.pager button:disabled{opacity:.4; cursor:default}
.pager svg{width:16px; height:16px}
.pager .gap{color:var(--muted); padding:0 4px}
.pager .info{color:var(--muted); font-size:.85rem; margin-left:auto}

/* ============ Contact & footer ============ */
footer{border-top:1px solid var(--line); background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--accent) 7%, var(--paper)) 100%); overflow:hidden}
.contact{padding-top:clamp(56px,8vw,96px); padding-bottom:8px}
.contact h2{font:400 clamp(2rem,4.6vw,3.2rem)/1.05 var(--serif); letter-spacing:-.015em; margin:0 0 14px}
.contact-text{margin:0 0 24px; max-width:56ch; font-size:1.06rem; color:var(--muted)}
.contact-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.contact-actions .addr{color:var(--ink); font-size:.95rem}
.copy-btn{border:0; background:none; color:var(--muted); font:500 .85rem/1 var(--sans); cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px}
.copy-btn:hover{color:var(--accent)}

.footbar{border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.footbar .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; padding-top:16px; padding-bottom:20px; font-size:.82rem; color:var(--muted)}
.status{margin-left:auto; text-align:right}
.status.demo{color:var(--ink); background:var(--accent-soft); padding:6px 12px; border-radius:var(--radius-sm)}

/* ============ Cat playground ============ */
:root{
  --cat-orange:#F29A4A; --cat-orange-d:#D9772A; --cat-grey:#9AA5B8; --cat-grey-d:#76829A;
  --cat-black:#2E2A35; --cat-cream:#F6E7C8; --cat-cream-d:#E8CF9E; --cat-white:#FBF7F0;
  --cat-eye:#2E2A35; --cat-pink:#F3A0B5; --cat-nose:#E5708E; --whisker:rgba(46,42,53,.45);
  --yarn:#E85D9A; --yarn-l:#F7A8CB; --wing-a:#4C7BF0; --wing-b:#F5C342;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cat-black:#4A4453; --whisker:rgba(230,235,242,.4) }
}
:root[data-theme="dark"]{ --cat-black:#4A4453; --whisker:rgba(230,235,242,.4) }

.playground{--h:140px; position:relative; height:var(--h); margin-top:clamp(16px,4vw,40px); max-width:calc(var(--max) + 120px); margin-inline:auto}
.playground .floor{position:absolute; left:0; right:0; bottom:10px; height:2px; border-radius:2px; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent) 0 14px, transparent 14px 22px)}
.pg{position:absolute; bottom:12px; cursor:pointer}
.pg svg{display:block; width:100%; height:auto; overflow:visible}
.pg.sit{left:3%; width:84px}
.pg.nap{right:4%; width:134px}
.pg.play{left:48%; width:96px}
.walker{--w:136px; position:absolute; bottom:12px; width:var(--w); z-index:2; cursor:pointer; animation:stroll 28s linear infinite}
.walker.chase{--w:204px; animation-duration:19s; animation-delay:-7s}
.walker .cat-hit{display:block}
.walker.chase{display:flex; align-items:flex-end}
.walker.chase > span{display:block!important}

@keyframes stroll{
  0%  {left:0; transform:scaleX(1)}
  47% {left:calc(100% - var(--w)); transform:scaleX(1)}
  50% {left:calc(100% - var(--w)); transform:scaleX(-1)}
  97% {left:0; transform:scaleX(-1)}
  100%{left:0; transform:scaleX(1)}
}

/* body parts */
.leg{transform-box:fill-box; transform-origin:50% 8%; animation:step .5s ease-in-out infinite alternate}
.leg.b{animation-delay:-.5s}
@keyframes step{from{transform:rotate(20deg)} to{transform:rotate(-20deg)}}
.tail{transform-box:fill-box; transform-origin:100% 100%; animation:wag 1.6s ease-in-out infinite alternate}
.sit .tail{transform-origin:0% 100%; animation-duration:2.4s}
@keyframes wag{from{transform:rotate(-8deg)} to{transform:rotate(10deg)}}
.walker .head{transform-box:fill-box; transform-origin:30% 80%; animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)} to{transform:translateY(1.5px)}}
.eyes{transform-box:fill-box; transform-origin:center; animation:blink 5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.1)}}
.yarn-ball{transform-box:fill-box; transform-origin:center; animation:roll 1.1s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}

.breath{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03,1.05)}}
.zz{font:600 13px var(--sans); fill:var(--muted); opacity:0; animation:zz 3.6s ease-out infinite}
.zz.z2{animation-delay:1.2s; font-size:11px} .zz.z3{animation-delay:2.4s; font-size:9px}
@keyframes zz{0%{opacity:0; transform:translate(0,0)} 20%{opacity:1} 100%{opacity:0; transform:translate(10px,-22px)}}

.play .kitten{animation:pounce 2.8s ease-in-out infinite}
@keyframes pounce{
  0%,55%,100%{transform:translateY(0) scale(1,1)}
  62%{transform:translateY(2px) scale(1.06,.9)}
  75%{transform:translateY(-34px) scale(.96,1.05)}
  88%{transform:translateY(0) scale(1.05,.92)}
}
.butterfly{position:absolute; left:24px; bottom:78px; width:30px; animation:flutter 5.6s ease-in-out infinite}
.butterfly .wing{transform-box:fill-box; transform-origin:100% 50%; animation:flap .18s ease-in-out infinite alternate}
.butterfly .wing.r{transform-origin:0% 50%}
@keyframes flap{to{transform:scaleX(.25)}}
@keyframes flutter{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(34px,-14px)} 50%{transform:translate(8px,-28px)} 75%{transform:translate(-26px,-8px)}
}

/* click reactions */
.hop{animation:hop .45s ease-out}
@keyframes hop{40%{transform:translateY(-16px)}}
.bubble{position:absolute; z-index:5; translate:-50% 0; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--line); font:600 .8rem/1 var(--sans); padding:6px 10px; border-radius:999px; box-shadow:0 6px 16px -8px rgba(0,0,0,.3); animation:pop-up 1.4s ease-out forwards}
@keyframes pop-up{0%{opacity:0; transform:translateY(6px) scale(.8)} 15%{opacity:1; transform:translateY(0) scale(1)} 80%{opacity:1} 100%{opacity:0; transform:translateY(-14px)}}

@media (max-width:640px){
  .playground{--h:104px}
  .pg.sit{width:54px; left:2%} .pg.nap{width:88px; right:2%} .pg.play{width:62px; left:44%}
  .walker{--w:88px} .walker.chase{--w:134px}
  .butterfly{bottom:54px; width:22px}
}
@media (prefers-reduced-motion: reduce){
  .walker{animation:none!important; left:22%} .walker.chase{left:auto; right:24%}
}
.empty{color:var(--muted); padding:24px 0; font-style:italic}
.skeleton{height:14px; border-radius:6px; background:linear-gradient(90deg, var(--line), var(--surface), var(--line)); background-size:200% 100%; animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed; left:50%; bottom:24px; translate:-50% 20px; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:999px; font-size:.9rem; opacity:0; pointer-events:none; transition:.25s; z-index:50}
.toast.show{opacity:1; translate:-50% 0}