/* yuchengkeke.com — 版面：固定上方列與底部段落選單（漸進霧面）、單欄 720px；墨水屏日曆四季卷軸卡、迴紋針機密檔案卡 */
:root{
  --bg:#121412; --surface:#1a1d1a; --raise:#232723; --line:#2c312c;
  --fg:#e8eee7; --dim:#97a097; --accent:#a9b2ff; --stamp:#e0524a; --note2:#9dd3a6;
  --hand:"Shantell Sans","LXGW WenKai TC","Comic Sans MS",cursive;
  --sig:"Homemade Apple","Bradley Hand",cursive;
  --kai:"LXGW WenKai TC","Kaiti TC","STKaiti",serif;
  --body:"Noto Sans TC",system-ui,-apple-system,sans-serif;
  --mono:"Google Sans Code",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f4f3ec; --surface:#ebeae2; --raise:#ffffff; --line:#d8d7cc;
  --fg:#1c1f1c; --dim:#5d645d; --accent:#4c58d0; --stamp:#c0362c; --note2:#2e7a46; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#f4f3ec; --surface:#ebeae2; --raise:#ffffff; --line:#d8d7cc;
  --fg:#1c1f1c; --dim:#5d645d; --accent:#4c58d0; --stamp:#c0362c; --note2:#2e7a46; color-scheme:light}
:root[data-theme="dark"]{
  --bg:#121412; --surface:#1a1d1a; --raise:#232723; --line:#2c312c;
  --fg:#e8eee7; --dim:#97a097; --accent:#a9b2ff; --stamp:#e0524a; --note2:#9dd3a6; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.75;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:76px 140px}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---------- progressive blur bands (top bar & bottom dock) ---------- */
.pblur{position:absolute;inset:0;pointer-events:none}
.pblur i{position:absolute;inset:0}
.top .pblur{background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 45%,transparent 100%)}
.dockband .pblur{background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 40%,transparent 100%)}

/* ---------- top bar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-inner{position:relative;z-index:1;height:52px;display:flex;align-items:center}
.logo{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px;border-radius:14px;text-decoration:none;font-family:var(--hand);font-size:19px;color:var(--fg);transition:color .15s cubic-bezier(.4,0,.2,1)}
.logo:hover{color:var(--accent)}
.top-inner{justify-content:space-between}
.lang{pointer-events:auto;text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--raise) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dim);font:500 13px var(--mono);letter-spacing:.08em;cursor:pointer}
.lang .sep{opacity:.4}.lang [data-l]{transition:color .15s}
:root[lang="zh-Hant"] .lang [data-l="zh"],:root[lang="en"] .lang [data-l="en"]{color:var(--fg)}
:root[lang="en"] .about-text p:not(.beat){font-size:16.5px}
.logo b{font-family:var(--sig);font-weight:400;font-size:20px;line-height:1;transform:translateY(3px)}
.top-right{display:flex;align-items:center;gap:8px}

/* ---------- hero ---------- */
.hero-img{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;max-width:100%;background:var(--surface)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.intro{display:flex;flex-direction:column;gap:14px;padding-block:28px 0}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.aside{font-family:var(--kai);font-size:19px;color:var(--accent);transform:rotate(-2deg)}
h1{font-family:var(--hand);font-weight:600;font-size:clamp(44px,9vw,68px);line-height:1.1;margin:0;width:fit-content;position:relative;text-wrap:balance}
h1 svg{position:absolute;left:4px;bottom:-10px;width:calc(100% - 8px);height:14px;overflow:visible}
h1 path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{color:var(--dim);font-size:17px;max-width:60ch;margin:6px 0 0}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:14px;text-decoration:none;cursor:pointer;color:var(--fg);font-family:var(--body);transition:border-color .15s,background-color .15s}
.pill svg{width:16px;height:16px;flex:none}

/* page-load reveal, like the reference */
.reveal{animation:rise .62s cubic-bezier(.22,1,.36,1) both}
.reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- sections ---------- */
section{padding-block:72px 0;scroll-margin-top:72px}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
h2{font-family:var(--hand);font-weight:600;font-size:30px;margin:0;line-height:1.3}
.works{display:flex;flex-direction:column;gap:56px}
.work{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.work-media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1200/630;max-width:100%;background:var(--surface)}
.work-media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
a.work:hover .work-media>img{transform:scale(1.02)}
.status{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:4px 9px;border-radius:6px;background:rgba(10,12,10,.74);color:#e8eee7;backdrop-filter:blur(6px)}
.work-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.work-title h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--hand);font-weight:600;font-size:26px;margin:0;line-height:1.2}
.work-title h3 small{font-family:var(--kai);font-weight:400;font-size:19px;color:var(--dim)}
.work-title svg{width:18px;height:18px;flex:none;color:var(--dim);transition:transform .2s,color .2s}
.appicon{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);flex:none}
.work p{margin:0;color:var(--dim);max-width:60ch}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em}

/* Ink Calendar: four hanging scrolls, one per season */
.seasons{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:48px 14px 32px;list-style:none;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.season-box{position:relative}
/* the label has its own strip inside the frame, above the scrolls, so it never covers a face */
.season-box>.status{top:12px;left:14px;background:none;color:var(--dim);border:1px solid var(--line);backdrop-filter:none}
.seasons li{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;min-width:0}
.seasons li:nth-child(even){transform:translateY(18px)}
.seasons .pic{width:100%;border-radius:10px;overflow:hidden;aspect-ratio:9/16;border:1px solid var(--line)}
.seasons img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
a.work:hover .seasons img{transform:scale(1.04)}
.seal{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border:1.5px solid var(--stamp);color:var(--stamp);border-radius:4px;font:700 14px var(--kai);line-height:1}
:root[lang="en"] .seal{font:500 9px var(--mono);letter-spacing:.12em;border-width:1px;height:22px;padding:0 6px}
@media (max-width:480px){.seasons{grid-template-columns:repeat(2,1fr);row-gap:30px}}

/* classified: whole picture beside a lined case file, both the same height */
.status{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:4px 9px;border-radius:6px;background:rgba(10,12,10,.74);color:#e8eee7;backdrop-filter:blur(6px)}
.casefile{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  background:var(--surface) repeating-linear-gradient(to bottom,transparent 0 31px,color-mix(in srgb,var(--line) 70%,transparent) 31px 32px)}
.casefile .no{font-size:11px;letter-spacing:.18em;color:var(--dim)}
.casefile h3{font-family:var(--hand);font-weight:600;font-size:24px;margin:0}
.casefile h3 small{font-family:var(--kai);font-weight:400;font-size:18px;color:var(--dim);margin-left:8px}
.casefile dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.casefile dt{color:var(--dim)}.casefile dd{margin:0;color:var(--fg);font-family:var(--body);letter-spacing:0}
.casefile p{margin:0;color:var(--dim);font-family:var(--body);letter-spacing:0;font-size:15px}
.stamp{position:absolute;right:16px;bottom:14px;transform:rotate(-9deg);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 12px 5px;border:3px double var(--stamp);border-radius:7px;color:var(--stamp);font-family:var(--kai);font-weight:700;font-size:24px;letter-spacing:.3em;line-height:1;text-indent:.3em}
.stamp small{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.28em;text-indent:.28em}
.stamp.en{font:700 13px var(--mono);letter-spacing:.22em;text-indent:.22em;padding:7px 10px}
/* paper-clipped photo on the case file. Tap it and a gust flips it over the top edge, behind the file */
.dossier{display:block;position:relative;isolation:isolate}
.casefile{z-index:1}
.dossier .shot{position:absolute;z-index:2;top:-10px;right:-6px;width:var(--shot);margin:0;padding:0;border:0;background:none;cursor:pointer;
  transform:rotate(5deg);transform-origin:50% 0;perspective:900px;-webkit-tap-highlight-color:transparent}
.dossier.behind .shot{z-index:0;cursor:default}
.dossier .shot::before{content:"";position:absolute;z-index:3;top:-22px;left:34px;width:19px;height:56px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 52'%3E%3Cpath d='M6 14V40a4 4 0 0 0 8 0V9a6.5 6.5 0 0 0-13 0v33a9 9 0 0 0 18 0V16' fill='none' stroke='%23c9ccc6' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;transform:rotate(-8deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.flip{display:block;position:relative;transform-style:preserve-3d;transform-origin:50% 0;animation:breeze 4.5s ease-in-out 1.2s infinite}
.dossier.gusting .flip,.dossier.behind .flip{animation:none}
@keyframes breeze{0%,62%,100%{transform:none}68%{transform:rotateX(22deg) rotate(3.5deg)}74%{transform:rotateX(-6deg) rotate(-2.5deg)}80%{transform:rotateX(12deg) rotate(2deg)}87%{transform:rotateX(-2deg) rotate(-.6deg)}93%{transform:rotateX(3deg)}}
.face{display:block;border-radius:4px;border:4px solid #f1efe8;box-shadow:0 10px 22px rgba(0,0,0,.38);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face img{width:100%;height:auto;aspect-ratio:941/1672;display:block}
.face.back{position:absolute;inset:0;transform:rotateX(180deg);background:#efece3;color:#5a554b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--kai);font-size:20px}
.face.back small{font:500 10px var(--mono);letter-spacing:.2em;color:#8a8478}
.dossier .status{top:8px;left:8px;font-size:9.5px;padding:2px 7px;letter-spacing:.1em}
.putback{position:absolute;z-index:3;top:-16px;right:calc(var(--shot) * .5 - 70px);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--raise);color:var(--fg);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.putback svg{width:16px;height:16px}
.putback:hover{border-color:var(--dim)}
/* visible hint (title tooltips don't show inside the page frame) */
.putback::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);white-space:nowrap;
  padding:5px 10px;border-radius:8px;background:var(--fg);color:var(--bg);font:500 13px var(--body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.putback:hover::after,.putback:focus-visible::after,.putback.hint::after{opacity:1;transform:translate(0,-50%)}
@media (min-width:561px){.putback{top:16px;right:16px}}
.gust{position:absolute;inset:-20px 0 auto;height:60%;pointer-events:none;z-index:4;overflow:hidden}
.gust i{position:absolute;left:0;height:2px;width:38%;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 55%,transparent),transparent);opacity:0}
.gust i:nth-child(1){top:22%}.gust i:nth-child(2){top:42%;width:28%}.gust i:nth-child(3){top:62%;width:44%}
.dossier.gusting .gust i{animation:whoosh .7s ease-out both}
.dossier.gusting .gust i:nth-child(2){animation-delay:.12s}.dossier.gusting .gust i:nth-child(3){animation-delay:.22s}
@keyframes whoosh{from{transform:translateX(-40%);opacity:0}30%{opacity:.9}to{transform:translateX(260%);opacity:0}}
.casefile{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:22px 24px 24px;min-height:calc(var(--shot) * 1.78 + 10px)}
.casefile .no{display:block}
.stamp{position:static;align-self:flex-start;margin-top:6px;transform:rotate(-7deg)}
.mnote{display:none}
:root{--shot:210px}
@media (max-width:560px){
  :root{--shot:128px}
  .casefile{padding:16px 16px 18px;min-height:calc(var(--shot) * 1.78)}
  .dossier .shot::before{left:26px;top:-20px;height:50px}
  .face.back{font-size:16px}
}
/* desktop: three handwritten margin notes in the space between the text and the photo */
@media (min-width:561px){
  .casefile>*:not(.stamp):not(.putback){max-width:calc(100% - var(--shot) - 30px)}
  /* each note sits on the line of the row it talks about, in the space left of the photo */
  .mnote{display:inline-flex;position:absolute;left:auto;margin-left:22px;width:auto;align-items:center;gap:8px;margin-top:-4px;
    font:400 17px/1.3 var(--kai);letter-spacing:0;white-space:nowrap;pointer-events:none;transition:opacity .3s}
  :root[lang="en"] .mnote{font:500 14px/1.3 var(--hand);white-space:normal;width:206px}
  :root[lang="en"] .mnote>span{flex:1 1 auto;min-width:0}
  .mnote svg{flex:none;width:62px;height:24px;overflow:visible}
  .mnote path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnote.n2{color:var(--note2);transform:rotate(3deg)}
  .mnote.n3{margin-left:34px;color:var(--stamp);transform:rotate(-3deg)}
  .mnote.n1{margin-left:16px;color:var(--accent);transform:rotate(-5deg) translateY(-6px)}
  .mnote.n1 svg{height:30px;margin-top:-18px}
  .wavy{text-decoration:underline wavy;text-decoration-thickness:1px;text-underline-offset:5px}
  .dossier.behind .mnote.n1{opacity:0}
  .mnote.squeezed{white-space:normal}
  .mnote.nofit{visibility:hidden}
}

/* the stamp is ink on the case file: a long band, above the paper and below the clipped photo */
.stamps{position:absolute;inset:0;pointer-events:none;z-index:1}
.stamps .stamp{position:absolute;left:16px;right:16px;bottom:22px;margin:0;justify-content:center;align-items:center;transform:rotate(-6deg)}
@media (max-width:560px){.casefile{padding-bottom:112px}}
@media (min-width:561px){
  .casefile{padding-bottom:150px}
  .stamps .stamp{left:calc((100% - var(--shot)) * .22);right:calc(var(--shot) - 34px);bottom:34px;transform:rotate(-10deg);font-size:32px;padding:10px 16px 8px;border-width:4px}
  .stamps .stamp small{font-size:10px}
  .stamps .stamp.en{font-size:18px;padding:14px 16px}
}

.redact{display:inline-block;background:var(--fg);color:transparent;border-radius:2px;user-select:none;line-height:1.1}

/* confession */
.about{display:grid;grid-template-columns:1fr 220px;gap:32px;align-items:start}
.about-text{min-width:0;display:flex;flex-direction:column;gap:18px}
.about-text p{margin:0}
.about-text .beat{font-family:var(--kai);font-size:22px;color:var(--fg);padding-left:14px;border-left:2px solid var(--accent);line-height:1.5}
.about-fig{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px;margin:0}
.about-fig img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.about-fig figcaption{font-family:var(--kai);font-size:15px;color:var(--accent);transform:rotate(-2deg);text-align:center}
@media (max-width:640px){.about{grid-template-columns:1fr}.about-fig{position:static;max-width:240px}}

.contact p{color:var(--dim);margin:0 0 14px}
.mail{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail code{font-family:var(--mono);font-size:15px;padding:8px 12px;border:1px dashed var(--line);border-radius:8px;user-select:all}
footer{padding-block:64px 0;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.08em}

/* ---------- bottom dock: section menu + theme ---------- */
.dockband{position:fixed;inset:auto 0 0;z-index:40;pointer-events:none;padding-top:40px;padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dock{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:flex;justify-content:flex-end;align-items:flex-end;gap:10px}
@media (max-width:700px){.dock{justify-content:center}}
.menu{pointer-events:auto;position:relative;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--raise) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.22);overflow:hidden;
  width:var(--w,150px);height:var(--h,46px);transition:width .55s cubic-bezier(.3,1.35,.45,1),height .32s cubic-bezier(.22,1,.36,1),border-radius .32s}
.menu.open{border-radius:18px}
.menu-btn{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 16px 0 12px;border:0;background:none;color:var(--fg);font:500 15px var(--body);cursor:pointer;border-radius:inherit;
  transition:opacity .18s}
.menu.open .menu-btn{opacity:0;pointer-events:none}
#secName{position:relative;display:inline-block;flex:none;height:22px;width:var(--lw,40px);transition:width .55s cubic-bezier(.3,1.35,.45,1)}
#secName>span{position:absolute;left:0;top:0;line-height:22px;white-space:nowrap}
.ring{width:22px;height:22px;transform:rotate(-90deg);flex:none}
.ring circle{fill:none;stroke-width:2.5}
.ring .track{stroke:var(--line)}.ring .prog{stroke:var(--fg);stroke-linecap:round}
.menu-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(6px);transition:opacity .2s .08s,transform .25s .06s;pointer-events:none;width:max-content;min-width:100%}
.menu.open .menu-list{opacity:1;transform:none;pointer-events:auto}
.menu-list a{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:12px;text-decoration:none;font-size:14px;color:var(--dim);white-space:nowrap}
.menu-list a::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.45}
.menu-list a:hover{color:var(--fg)}
.menu-list a[aria-current="true"]{color:var(--fg);background:color-mix(in srgb,var(--fg) 9%,transparent)}
.menu-list a[aria-current="true"]::before{opacity:1}
.theme{pointer-events:auto;width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--fg);
  background:color-mix(in srgb,var(--raise) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.theme svg{width:19px;height:19px}
.theme .moon{display:none}
:root[data-theme="light"] .theme .sun{display:none}:root[data-theme="light"] .theme .moon{display:block}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .theme .sun{display:none}:root:not([data-theme="dark"]) .theme .moon{display:block}}

/* theme switch: circular reveal from the click point (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (max-width:480px){.aside{font-size:17px}}
/* ---------- feedback on everything you can click (like the reference) ---------- */
.pill,.lang{transition:color .15s,border-color .15s,background-color .15s,transform .15s}
.pill:active,.lang:active{transform:translate(1px,1px)}
.work .t{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s}
.theme,.menu{transition:background-color .15s,border-color .15s}
.theme svg{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.theme:active svg{transform:rotate(30deg) scale(.9)}
@media (hover:hover){
  .pill:hover,.lang:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  .lang:hover [data-l]{color:inherit}
  a.work:hover .work-title svg{transform:translate(3px,-3px);color:var(--accent)}
  a.work:hover .t{text-decoration-color:currentColor}
  a.work:hover .appicon{transform:rotate(-6deg) scale(1.06)}
  .theme:hover,.menu:not(.open):hover{background:var(--raise);border-color:color-mix(in srgb,var(--fg) 25%,transparent)}
  .theme:hover svg{transform:rotate(20deg)}
  .mail code:hover{border-color:var(--accent);color:var(--accent)}
}
.appicon{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mail code{transition:color .15s,border-color .15s}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}h1 path{stroke-dashoffset:0}}

/* 404 page */
.nf{min-height:100vh;justify-content:center;gap:14px;padding-block:48px}
.nf .logo{margin-left:-8px}
.nf h1{margin:6px 0 4px}
.nf p{margin:0}