/* himax.cloud — EasyUI-style monochrome system, one accent (#3B82F6). */
@font-face{font-family:Geist;src:url(/assets/fonts/Geist-500.woff2) format("woff2");font-weight:500 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-2013,U+2016-2017,U+201E-2025,U+2027-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215;}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-400.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-2013,U+2016-2017,U+201E-2025,U+2027-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215;}

:root{
  --x-page:#FAFAFA;--x-outer:#F1F1F2;--x-inner:#FFFFFF;--x-line:#E4E4E7;
  --x-t1:#0A0A0A;--x-t2:#52525B;--x-t3:#6B6B73;--x-t4:#A1A1AA;
  --x-pill:#0A0A0A;--x-pill-t:#FFFFFF;--x-glass:rgba(255,255,255,.85);
  --x-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --x-hl:rgba(10,10,10,.06);--x-acc:#3B82F6;--x-acc-t:#1D4ED8;--x-green:#15803D;--x-orange:#B45309;--x-red:#B91C1C;
  --x-paper:#FBFAF7;--x-paper-line:#ECEAE4;--x-spring:linear(0,0.061,0.188,0.33,0.462,0.577,0.672,0.748,0.808,0.854,0.89,0.917,0.937,0.953,0.965,0.974,0.98,0.985,0.989,0.992,0.994,0.995,0.997,0.997,1);--x-ease:cubic-bezier(.22,1,.36,1);--x-ease-out:cubic-bezier(.16,1,.3,1);--x-fast:cubic-bezier(.2,0,0,1);--x-dur:.32s;
  --x-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","HarmonyOS Sans SC",system-ui,sans-serif;
  --x-head:Geist,MiSans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --x-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:20px;--sec:96px;--sec-tight:64px;--sec-sm:40px;--dock-h:56px;--dock-gap:12px;color-scheme:light
}
:root[data-theme=dark]{--x-paper:#EDEBE6;--x-page:#111113;--x-outer:#141416;--x-inner:#1F1F23;--x-line:#2A2A2E;--x-t1:#F2F2F3;--x-t2:#B4B4BA;--x-t3:#9A9AA1;--x-t4:#6B6B72;--x-pill:#F2F2F3;--x-pill-t:#111113;--x-glass:rgba(31,31,35,.85);--x-paper-line:#2A2A2E;--x-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.3);--x-hl:rgba(255,255,255,.08);--x-acc:#60A5FA;--x-acc-t:#93C5FD;--x-green:#4ADE80;--x-orange:#FBBF24;--x-red:#F87171;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--x-paper:#EDEBE6;--x-page:#111113;--x-outer:#141416;--x-inner:#1F1F23;--x-line:#2A2A2E;--x-t1:#F2F2F3;--x-t2:#B4B4BA;--x-t3:#9A9AA1;--x-t4:#6B6B72;--x-pill:#F2F2F3;--x-pill-t:#111113;--x-glass:rgba(31,31,35,.85);--x-paper-line:#2A2A2E;--x-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.3);--x-hl:rgba(255,255,255,.08);--x-acc:#60A5FA;--x-acc-t:#93C5FD;--x-green:#4ADE80;--x-orange:#FBBF24;--x-red:#F87171;color-scheme:dark}}
@media (min-width:768px){:root{--gutter:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--x-page);color:var(--x-t1);font:400 14px/1.6 var(--x-sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
img{max-width:100%;height:auto;display:block}
::selection{background:color-mix(in srgb,var(--x-acc) 22%,transparent)}
.x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.x-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:9999px;background:var(--x-pill);color:var(--x-pill-t);font-size:13px;text-decoration:none}
.x-skip:focus{top:12px}

.x-site{max-width:1120px;margin:0 auto;width:100%;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--x-acc);outline-offset:2px}
.x-site :focus-visible{border-radius:9999px}
.x-skip:focus-visible{outline-offset:3px}
:where(.x-site) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.x-site a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.x-eyebrow{font:500 12px/1 var(--x-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--x-t3)}
.x-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--x-acc)}
.x-press{transition:transform .16s var(--x-ease),opacity var(--x-dur) var(--x-ease),background-color var(--x-dur) var(--x-ease),color var(--x-dur) var(--x-ease)}
.x-press:active{transform:scale(.97)}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 16px;border-radius:9999px;background:var(--x-pill);color:var(--x-pill-t)!important;font:500 13px/1 var(--x-sans);white-space:nowrap;border:1px solid transparent;cursor:pointer}
.x-btn svg{width:15px;height:15px}
.x-btn--lg{min-height:44px;padding:0 22px;font-size:14px}
.x-btn--line{background:transparent;color:var(--x-t1)!important;border-color:var(--x-line)}
.x-btn[disabled]{opacity:.5;pointer-events:none}
@media (max-width:767px){.x-btn{min-height:44px}}
.x-link{color:var(--x-t1);text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:var(--x-line)!important}

/* ---------- nav ---------- */
.x-nav{position:fixed;inset:14px 0 auto;z-index:50;pointer-events:none}
.x-nav__in{max-width:1120px;margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:12px}
.x-pillbar{pointer-events:auto;display:flex;align-items:center;gap:2px;height:44px;padding:4px;border-radius:9999px;background:var(--x-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--x-line);box-shadow:var(--x-shadow);position:relative}
.x-word{padding:0 16px;min-width:44px;font:500 16px/1 var(--x-head);letter-spacing:-.01em;color:var(--x-t1);display:flex;align-items:center;gap:6px}
.x-word__en{position:relative;top:1px}
.x-word__en{font:500 11px/1 var(--x-mono);letter-spacing:.06em;color:var(--x-t3)}
.x-links a{position:relative;z-index:1;display:flex;align-items:center;height:34px;padding:0 14px;border-radius:9999px;font-size:13px;color:var(--x-t2);transition:color var(--x-dur) var(--x-ease)}
.x-links a[aria-current=page]{color:var(--x-t1)}
.x-links__hl{position:absolute;top:4px;left:0;height:34px;border-radius:9999px;background:var(--x-hl);opacity:0;transition:transform var(--x-dur) var(--x-ease),width var(--x-dur) var(--x-ease),opacity var(--x-dur) var(--x-ease)}
.x-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--x-t2)}
.x-icon svg{width:16px;height:16px}
.x-sun{display:none}
:root[data-theme=dark] .x-sun{display:block}:root[data-theme=dark] .x-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .x-sun{display:block}:root:not([data-theme=light]) .x-moon{display:none}}
@media (hover:hover){.x-links a:hover,.x-icon:hover{color:var(--x-t1)}.x-icon:hover{background:var(--x-hl)}.x-btn:hover{opacity:.86}.x-btn--line:hover{opacity:1;background:var(--x-hl)}}

.x-search{display:flex;align-items:center;height:34px;border-radius:9999px;color:var(--x-t2);cursor:text;transition:background-color var(--x-dur) var(--x-ease);margin:0}
.x-search__icon{display:grid;place-items:center;width:34px;height:34px;cursor:pointer}
.x-search svg{width:16px;height:16px}
.x-search__box{display:block;width:0;overflow:hidden;transition:width var(--x-dur) var(--x-ease)}
.x-search input{display:block;width:150px;padding:0 12px 0 0;height:34px;border:0;background:none;font:13px var(--x-sans);color:var(--x-t1);outline:0;-webkit-appearance:none;appearance:none}
.x-site .x-search input:focus-visible{outline:0}
.x-search input::-webkit-search-cancel-button{display:none}
.x-search:focus-within .x-search__box,.x-search:has(input:not(:placeholder-shown)) .x-search__box{width:150px}
.x-search:focus-within{background:var(--x-hl)}

/* dock (mobile): 5 labeled items, no theme toggle (it lives in the top-right pill) */
.x-dock{display:none}
@media (max-width:767px){
  .x-links{display:none!important}
  .x-nav{inset:10px 0 auto}
  .x-pillbar{height:42px}
  .x-tools .x-icon,.x-search__icon{width:34px;height:34px}
  .x-search input{font-size:16px;width:min(46vw,190px)}
  .x-search:focus-within .x-search__box,.x-search:has(input:not(:placeholder-shown)) .x-search__box{width:min(46vw,190px)}
  .x-nav__in:has(.x-search:focus-within) .x-word{opacity:0;pointer-events:none;transform:scale(.96)}
  .x-word{transition:opacity .2s var(--x-ease),transform .2s var(--x-ease)}
  .x-dock{display:flex;position:fixed;left:50%;bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;gap:0;padding:4px;height:var(--dock-h);border-radius:9999px;background:var(--x-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--x-line);box-shadow:var(--x-shadow)}
  .x-dock>a{position:relative;z-index:1;width:58px;height:46px;border-radius:9999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--x-t2);font:500 10.5px/1 var(--x-sans);letter-spacing:0;transition:color var(--x-dur) var(--x-ease),transform .16s var(--x-ease)}
  .x-dock>a:active{transform:scale(.94)}
  .x-dock [aria-current=page]{color:var(--x-pill-t)}
  .x-dock svg{width:18px;height:18px}
  body{padding-bottom:calc(var(--dock-h) + var(--dock-gap) + env(safe-area-inset-bottom))}
  .x-dock__hl{position:absolute;top:4px;left:4px;width:58px;height:46px;border-radius:9999px;background:var(--x-pill);opacity:0;transition:transform .36s cubic-bezier(.34,1.3,.5,1),opacity .2s var(--x-ease)}
  .x-dock__hl.is-on{opacity:1}
  .x-dock:not(.is-ready) [aria-current=page]{background:var(--x-pill)}
}
@media (max-width:359px){.x-dock>a{width:52px}.x-dock__hl{width:52px}}

/* ---------- hero: who (kicker + figure) → what (headline) → next step (CTAs) ---------- */
.x-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:104px 0 0;align-items:center}
.x-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.x-kicker{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:.04em;font:500 13px/1 var(--x-sans);color:var(--x-t2)}
.x-pulse{position:relative}
.x-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--x-acc);animation:x-ping 2.4s var(--x-ease) 3}
@keyframes x-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(3);opacity:0}}
.x-hero h1{font:500 clamp(30px,8.4vw,36px)/1.12 var(--x-head);letter-spacing:-.035em;color:var(--x-t1);text-wrap:balance}
.x-nb{display:inline-block}
.x-lead{font-size:15px;line-height:1.65;color:var(--x-t2);max-width:34em;text-wrap:pretty}
.x-hero__cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.x-hero__more{margin-left:6px}
.x-hero__art{margin:0;order:-1}
/* paper: the watercolour always sits on 纸白, in both themes (washes need paper, not near-black) */
.x-paper{background:var(--x-paper);border:1px solid var(--x-paper-line);border-radius:22px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:0 1px 2px rgba(15,15,20,.04)}
.x-paper img{display:block}
.x-paper--hero{height:188px;padding:14px 0 0}
.x-paper--hero .x-ip{height:174px;width:auto}
.x-paper--sm{width:176px;height:176px;padding-top:12px}
.x-hero--404{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:calc(100svh - 160px);gap:16px;padding-top:96px}
.x-hero--404 .x-hero__cta{justify-content:center}
.x-hero--404 .x-eyebrow{display:inline-flex;align-items:center;gap:8px}
@media (max-width:767px){.x-hero--404{min-height:0;padding-top:96px}}
.x-hero--404 .x-paper .x-ip{width:150px;height:auto;margin-bottom:-12px}
@media (min-width:768px){
  .x-hero{grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-top:136px}
  .x-hero__art{order:0}
  .x-paper--hero{height:440px;padding:28px 0 0}
  .x-paper--hero .x-ip{height:404px;width:auto;margin-bottom:-6px}
  .x-hero h1{font-size:52px}
}
@media (min-width:1024px){.x-hero{grid-template-columns:minmax(0,1fr) 340px;gap:64px}.x-hero h1{font-size:64px;line-height:1.06}.x-paper--hero{height:480px}.x-paper--hero .x-ip{height:440px}}
.x-in{animation:x-up .55s var(--x-ease-out) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes x-up{from{opacity:0;transform:translateY(8px);filter:blur(2px)}}
/* IP entrance: opacity + 8px, gentle spring (170/26/.9) */
.x-rise{animation:x-rise .7s cubic-bezier(.22,1,.36,1) .12s both}
@supports (animation-timing-function:linear(0,1)){.x-rise{animation-timing-function:var(--x-spring)}}
@keyframes x-rise{from{opacity:0;transform:translateY(8px)}}

/* page heads */
.x-page-head{padding:136px 0 var(--sec-sm);display:flex;flex-direction:column;gap:14px}
.x-page-head h1{font:500 36px/1.1 var(--x-head);letter-spacing:-.035em;text-wrap:balance}
@media (min-width:768px){.x-page-head h1{font-size:48px}}
.x-page-head--center{align-items:center;text-align:center}

/* ---------- sections ---------- */
.x-sec{padding-top:var(--sec);scroll-margin-top:24px}
.x-sec--tight{padding-top:var(--sec-tight)}
.x-sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.x-sec h2{margin-top:12px;font:500 30px/1.15 var(--x-head);letter-spacing:-.03em;color:var(--x-t1);text-wrap:balance}
@media (min-width:768px){.x-sec h2{font-size:38px}}
.x-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:12px/1.4 var(--x-sans);color:var(--x-t3)}
.x-note .x-dot{width:5px;height:5px;background:var(--x-t3)}
.x-textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font-size:14px;color:var(--x-t2)!important;text-decoration:underline!important;text-decoration-color:var(--x-line)!important;text-underline-offset:4px;transition:color var(--x-dur) var(--x-ease),text-decoration-color var(--x-dur) var(--x-ease)}
.x-textlink svg{width:15px;height:15px}
@media (hover:hover){.x-textlink:hover{color:var(--x-t1)!important;text-decoration-color:var(--x-t3)!important}}
.x-all{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;color:var(--x-t2)!important;white-space:nowrap;transition:color var(--x-dur) var(--x-ease)}
@media (hover:hover){.x-all:hover{color:var(--x-t1)!important}}
.x-empty{padding:28px 16px;color:var(--x-t3);font-size:14px}

/* ---------- segmented ---------- */
.x-seg{position:relative;display:inline-flex;padding:3px;border-radius:9999px;background:var(--x-outer);border:1px solid var(--x-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.x-seg::-webkit-scrollbar{display:none}
.x-seg a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:44px;padding:0 14px;border-radius:9999px;font-size:13px;color:var(--x-t2);white-space:nowrap;transition:color .2s var(--x-fast)}
@media (max-width:767px){.x-seg a{min-height:40px}}
.x-seg a[aria-current=true]{color:var(--x-pill-t);background:var(--x-pill)}
.js .x-seg.is-ready a[aria-current=true]{background:transparent}
.x-seg__hl{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:9999px;background:var(--x-pill);opacity:0;transition:transform .38s cubic-bezier(.3,1.25,.5,1),width .38s cubic-bezier(.3,1.25,.5,1)}
.x-seg.is-ready .x-seg__hl{opacity:1}
.x-sec .x-seg{margin-bottom:12px}
.x-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

/* inputs */
.x-field{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:9999px;border:1px solid var(--x-line);background:var(--x-inner);color:var(--x-t3);transition:border-color .2s var(--x-fast),box-shadow .2s var(--x-fast);margin:0}
.x-field:focus-within{border-color:var(--x-t4);box-shadow:0 0 0 3px var(--x-hl)}
.x-field svg{width:16px;height:16px}
.x-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:14px var(--x-sans);color:var(--x-t1)}
.x-field--search{width:100%;max-width:300px}
@media (max-width:639px){.x-field--search{max-width:none}.x-field input{font-size:16px}}

/* tags */
.x-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.x-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:9999px;border:1px solid var(--x-line);font:12px/1 var(--x-sans);color:var(--x-t2)!important;background:var(--x-inner);transition:background-color .2s var(--x-fast),color .2s var(--x-fast)}
.x-chip span{font-family:var(--x-mono);color:var(--x-t3);font-variant-numeric:tabular-nums}
.x-chip.is-on{background:var(--x-pill);color:var(--x-pill-t)!important;border-color:var(--x-pill)}
.x-chip--static{background:transparent;height:22px;font-size:12px}
@media (hover:hover){a.x-chip:not(.is-on):hover{background:var(--x-hl);color:var(--x-t1)!important}}
.x-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border:1px dashed var(--x-t4);border-radius:6px;font:400 11px/1 var(--x-mono);letter-spacing:0;text-transform:none;color:var(--x-t3)}
.x-pin{font:500 12px/1 var(--x-sans);color:var(--x-t1)}

/* ---------- article rows ---------- */
.x-list{position:relative;border-top:1px solid var(--x-line);transition:opacity .16s var(--x-ease),filter .16s var(--x-ease),transform .16s var(--x-ease)}
.x-list.is-out{opacity:0;filter:blur(4px);transform:scale(.995)}
.x-list__hl{position:absolute;left:0;right:0;top:0;height:0;border-radius:14px;background:var(--x-hl);opacity:0;pointer-events:none;transition:transform var(--x-dur) var(--x-ease),height var(--x-dur) var(--x-ease),opacity var(--x-dur) var(--x-ease)}
.x-post{position:relative;z-index:1;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:6px 24px;padding:18px 16px;border-bottom:1px solid var(--x-line);color:var(--x-t1)}
.x-post--simple{grid-template-columns:minmax(0,1fr) auto}
.x-site .x-post:focus-visible{border-radius:14px;outline-offset:-2px}
.x-post>*{transition:opacity var(--x-dur) var(--x-ease)}
.x-post.is-dim>*{opacity:.2}
.x-post[hidden]{display:none}
.x-post__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:12px/1 var(--x-mono);color:var(--x-t3);font-variant-numeric:tabular-nums}
.x-post h3{font:500 16px/1.45 var(--x-sans);letter-spacing:-.01em}
.x-post p{margin-top:2px;font-size:13px;color:var(--x-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-post__end{display:flex;align-items:center;gap:10px;font:12px/1 var(--x-mono);color:var(--x-t3);white-space:nowrap}
.x-arrow{font-size:16px;color:var(--x-t2);line-height:1.3;font-family:var(--x-sans);transition:opacity .2s var(--x-ease),transform .2s var(--x-ease)}
@media (hover:hover){.x-arrow{opacity:0;transform:translate(-3px,3px)}.x-card:hover .x-arrow,.x-post:hover .x-arrow,.x-post:focus-visible .x-arrow{opacity:1;transform:none}}
.x-cat{font:400 12px/1 var(--x-sans);color:var(--x-t3)}
.x-cat::before{content:"·";margin-right:8px;color:var(--x-t4)}
@media (max-width:639px){
  .x-post{grid-template-columns:minmax(0,1fr) auto;padding:16px 10px}
  .x-post__main{grid-column:1/-1;grid-row:2}
  .x-post--simple .x-post__main{grid-column:auto;grid-row:auto}
  .x-post p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.x-swap{animation:x-swap var(--x-dur) var(--x-ease) both;animation-delay:calc(min(var(--i,0),8)*35ms)}
@keyframes x-swap{from{opacity:0;filter:blur(3px);transform:translateY(6px)}}

/* ---------- grid + cards ---------- */
.x-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:640px){.x-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.x-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.x-card{background:var(--x-outer);border:1px solid var(--x-line);border-radius:26px;padding:10px;display:flex;flex-direction:column;min-width:0}
.x-card[hidden]{display:none}
.x-card>*{transition:opacity var(--x-dur) var(--x-ease)}
.x-card.is-dim>*{opacity:.2}
.x-prev{position:relative;background:var(--x-inner);border:1px solid var(--x-line);border-radius:22px;min-height:240px;display:flex;align-items:center;justify-content:center;padding:44px 18px 22px;overflow:hidden;flex:1;color:var(--x-t1)}
.x-prev::before{content:"";position:absolute;inset:0 0 auto;height:40%;background:linear-gradient(rgba(255,255,255,.05),transparent);pointer-events:none}
.x-prev>.x-eyebrow{position:absolute;top:16px;left:18px;font-size:12px;color:var(--x-t3);display:flex;align-items:center;gap:8px;z-index:1;text-transform:none;letter-spacing:.04em}
.x-prev--img{padding:0}
.x-prev--img>.x-eyebrow{background:var(--x-glass);padding:5px 9px;border-radius:9999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.x-prev__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x-prev--stage{min-height:320px}
.x-st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:9999px;font:500 12px/1 var(--x-sans);color:var(--x-t2);white-space:nowrap;border:1px solid color-mix(in srgb,var(--c) 28%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.x-st::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c)}

/* project cards: real cover, or a compact typographic card — no fake UI art */
.x-pcard{padding:6px;border-radius:22px}
.x-pcard__in{display:flex;flex-direction:column;gap:14px;height:100%;min-height:196px;padding:18px 18px 16px;border-radius:17px;background:var(--x-inner);border:1px solid var(--x-line);color:var(--x-t1)}
.x-pcard--img .x-pcard__in{padding-top:6px}
.x-pcard__cover{display:block;margin:0 -12px;border-radius:13px;overflow:hidden;aspect-ratio:16/9;background:var(--x-outer);border:1px solid var(--x-line)}
.x-pcard__cover img{width:100%;height:100%;object-fit:cover}
.x-pcard__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.x-pcard__n{font:500 11px/1 var(--x-mono);letter-spacing:.08em;color:var(--x-t3)}
.x-pcard__body{display:flex;flex-direction:column;gap:6px;flex:1}
.x-pcard h3{font:500 22px/1.2 var(--x-head);letter-spacing:-.025em}
.x-pcard p{font-size:14px;line-height:1.55;color:var(--x-t2)}
.x-pcard__foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.x-pcard__tags{display:flex;flex-wrap:wrap;gap:4px 10px;font:12px/1 var(--x-mono);color:var(--x-t3)}
.x-site .x-pcard__in:focus-visible{border-radius:17px}
@media (hover:hover){.x-pcard:hover .x-arrow,.x-pcard__in:focus-visible .x-arrow{opacity:1;transform:none}}
@media (max-width:639px){
  .x-grid--projects{gap:10px}
  .x-pcard__in{min-height:0;padding:14px 14px 12px;gap:10px}
  .x-pcard h3{font-size:18px}
  .x-pcard p{font-size:13px}
}
.x-st{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--x-sans);color:var(--x-t2);white-space:nowrap}
.x-st::before{content:"";width:7px;height:7px;border-radius:50%;box-sizing:border-box;background:var(--x-t1)}
.x-st--wip::before{background:transparent;border:1.5px solid var(--x-t2)}
.x-st--off{color:var(--x-t3)}.x-st--off::before{background:var(--x-t4)}

/* ---------- about ---------- */
.x-card--wide .x-prev{min-height:0}
.x-about{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;padding:24px}
.x-about .x-textlink{margin:-6px 0 -10px}
.x-about::before{display:none}
.x-about__who{display:flex;align-items:center;gap:14px}
.x-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--x-line);flex:none;background:var(--x-paper)}
.x-avatar--mono{display:grid;place-items:center;background:var(--x-outer);color:var(--x-t1);font:500 24px/1 var(--x-head);letter-spacing:0;box-shadow:inset 0 0 0 1px var(--x-line)}
.x-avatar--lg{width:88px;height:88px}
.x-about__name{font:600 17px/1.3 var(--x-sans)}
.x-about__name span{color:var(--x-t3);font-weight:500}
.x-about__meta{font-size:13px;color:var(--x-t3);margin-top:2px}
.x-about__one{font-size:15px;color:var(--x-t2)}
.x-bio{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--x-line);padding-top:18px;width:100%}
.x-bio p{font:400 15px/1.75 var(--x-sans);color:var(--x-t2);letter-spacing:.01em}
.x-bio--lg{border:0;padding:0;gap:14px}
.x-bio--lg p{font-size:19px;line-height:1.6;display:flex;gap:16px;align-items:baseline;color:var(--x-t1)}
@media (min-width:768px){.x-bio--lg p{font-size:24px}.x-about--page{padding:44px 48px}}
.x-bio__n{font:400 12px/1 var(--x-mono);color:var(--x-t3);flex:none;font-variant-numeric:tabular-nums}
.x-facts{display:grid;grid-template-columns:1fr;border-top:1px solid var(--x-line)}
.x-facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 6px;border-bottom:1px solid var(--x-line)}
.x-facts dt{font:12px/1.8 var(--x-mono);color:var(--x-t3);letter-spacing:.06em}
.x-facts dd{font-size:15px}
.x-cta{margin-top:var(--sec);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.x-cta p{font:500 22px/1.3 var(--x-head);letter-spacing:-.02em}

/* ---------- contact form ---------- */
.x-card--form{max-width:760px}
.x-form-wrap{padding:28px 24px;display:block}
.x-form-wrap::before{display:none}
.x-form{display:flex;flex-direction:column;gap:16px}
.x-form__row{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.x-form__row{grid-template-columns:1fr 1fr}}
.x-label{display:flex;flex-direction:column;gap:8px;font:500 13px/1 var(--x-sans);color:var(--x-t2)}
.x-input{width:100%;min-height:44px;padding:11px 14px;border-radius:14px;border:1px solid var(--x-line);background:var(--x-page);color:var(--x-t1);font:400 15px/1.5 var(--x-sans);outline:0;transition:border-color .2s var(--x-fast),box-shadow .2s var(--x-fast),background-color .2s var(--x-fast)}
.x-input::placeholder{color:var(--x-t3)}
.x-input:focus{border-color:var(--x-t4);background:var(--x-inner);box-shadow:0 0 0 3px var(--x-hl)}
.x-input[aria-invalid=true]{border-color:color-mix(in srgb,var(--x-red) 45%,transparent)}
.x-textarea{resize:vertical;min-height:140px}
@media (max-width:639px){.x-input{font-size:16px}}
.x-form__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.x-form__msg{font-size:13px;color:var(--x-t3);display:flex;align-items:center;gap:6px;min-height:20px}
.x-form__msg svg{width:16px;height:16px}
.x-form__msg.is-ok{color:var(--x-green)}
.x-form__msg.is-err{color:var(--x-red)}
.x-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* pager */
.x-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:28px}
.x-pager>:last-child{justify-self:end}
.x-pager__n{font:12px/1 var(--x-mono);color:var(--x-t3);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.x-foot{margin-top:var(--sec);border-top:1px solid var(--x-line);padding:20px 0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;font-size:12px;color:var(--x-t3)}
.x-foot nav{display:flex;gap:2px;flex-wrap:wrap}
.x-foot a{color:var(--x-t3);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;transition:color var(--x-dur) var(--x-ease)}
.x-foot p a{min-height:0;min-width:0;padding:0}
@media (hover:hover){.x-foot a:hover{color:var(--x-t1)}}
@media (max-width:767px){:root{--sec:64px;--sec-tight:48px;--sec-sm:28px}.x-foot{flex-direction:column;align-items:flex-start;gap:0;padding:16px 0 20px}.x-foot nav{margin-left:-8px}.x-page-head{padding-top:88px}}

/* toast */
.x-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,8px);opacity:0;padding:10px 16px;border-radius:9999px;background:var(--x-pill);color:var(--x-pill-t);font:500 13px/1 var(--x-sans);box-shadow:0 10px 25px -8px rgba(15,15,20,.3);pointer-events:none;transition:opacity .2s var(--x-ease),transform .3s cubic-bezier(.3,1.3,.5,1)}
.x-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:767px){.x-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.x-nav,.x-dock,.x-foot{display:none!important}}
.x-about--page>.x-eyebrow{position:static}

/* contact / follow block */
.x-follow{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;border:1px solid var(--x-line);border-radius:22px;background:var(--x-inner)}
.x-follow h2{margin-top:10px;font:500 22px/1.25 var(--x-head);letter-spacing:-.02em}
.x-sec .x-follow h2{font-size:22px}
@media (min-width:768px){.x-sec .x-follow h2{font-size:24px}}
.x-follow__lead{margin-top:8px;font-size:14px;color:var(--x-t2);max-width:36em}
.x-follow__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.x-follow__links .x-textlink{margin-left:4px}
.x-follow--art{justify-content:flex-start}
.x-follow__art{flex:none;width:120px;height:132px;align-self:stretch;max-height:150px}
.x-follow__art .x-ip{width:104px;height:auto;margin-bottom:-4px}
.x-follow__main{flex:1;min-width:0}
.x-follow__qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:1px solid var(--x-line);border-radius:20px;background:var(--x-outer)}
.x-follow__qr img{width:120px;height:120px;border-radius:14px;object-fit:cover;background:#fff}
.x-follow__qr figcaption{font-size:12px;color:var(--x-t3)}
.x-follow__qr--about{margin:16px 0 0;align-self:flex-start;width:max-content}
.x-article__foot .x-follow{margin-top:8px}
@media (max-width:639px){.x-follow{flex-direction:column;align-items:flex-start;padding:20px}.x-follow__art{width:96px;height:104px;align-self:flex-start}.x-follow__art .x-ip{width:84px}}

/* empty states */
.x-emptybox{display:flex;align-items:center;gap:24px;padding:20px;border:1px solid var(--x-line);border-radius:22px;background:var(--x-inner);color:var(--x-t2);font-size:14px}
.x-emptybox__txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.x-emptybox__art{flex:none;width:156px;height:156px}
.x-emptybox__art .x-ip{max-height:148px;width:auto;margin-bottom:-2px}
@media (max-width:519px){.x-emptybox{flex-direction:column;align-items:flex-start;gap:16px}.x-emptybox__art{width:132px;height:132px}.x-emptybox__art .x-ip{max-height:124px}}
.x-emptybox__t{font:500 17px/1.4 var(--x-head);color:var(--x-t1)}
.x-emptybox .x-btn{margin-top:6px}

/* project status help */
.x-help{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 18px;font-size:13px;color:var(--x-t3)}
.x-help__i{display:inline-flex;align-items:center;gap:6px}
.x-hero__cta--start{justify-content:flex-start}

/* about: focus list */
.x-focus{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.x-focus li{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9999px;border:1px solid var(--x-line);background:var(--x-inner);font-size:14px}

/* contact: math question */
.x-label--inline{flex-direction:row;align-items:center;gap:12px;font:500 14px/1 var(--x-mono);color:var(--x-t2)}
.x-input--num{width:88px;text-align:center}

/* cross-document view transitions where supported (Chrome 126+, Safari 18.2+) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* contact success */
.x-done{display:flex;align-items:center;gap:24px}
.x-done[hidden],.x-form[hidden]{display:none}
.x-done__art{flex:none;width:136px;height:150px}
.x-done__art .x-ip{width:96px;height:auto;margin-bottom:-6px}
.x-done__t{font:500 22px/1.3 var(--x-head);letter-spacing:-.02em}
.x-done__p{margin-top:6px;color:var(--x-t2);font-size:14px}
@media (max-width:519px){.x-done{flex-direction:column;align-items:flex-start}}

/* about intro: text + IP figure on paper */
.x-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;padding:120px 0 var(--sec-sm)}
.x-intro__text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.x-intro h1{font:500 34px/1.1 var(--x-head);letter-spacing:-.035em;text-wrap:balance}
.x-intro__art{margin:0;width:120px;height:150px}
.x-intro__art .x-ip{width:100px;height:auto;margin-bottom:-4px}
@media (min-width:768px){.x-intro{gap:48px;padding-top:144px}.x-intro h1{font-size:48px}.x-intro__art{width:200px;height:232px}.x-intro__art .x-ip{width:136px}}
@media (max-width:519px){.x-intro{grid-template-columns:1fr;padding-top:96px}.x-intro__art{order:-1;width:112px;height:132px}.x-intro__art .x-ip{width:90px}}
.x-post--static{cursor:default}

/* 44px hit areas without changing the visual size (Apple HIG / Material) */
.x-icon,.x-search__icon,.x-chip,.x-crumb a,.x-seg a{position:relative}
.x-icon::after,.x-search__icon::after{content:"";position:absolute;inset:-5px}
.x-chip::after{content:"";position:absolute;inset:-8px -2px}
.x-crumb a{padding:14px 0;margin:-14px 0}
.x-seg a::after{content:"";position:absolute;inset:-4px 0}