:root{
    --bg:#F1F5F5; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#EAF0F0;
    --ink:#071319; --ink-2:#26424E; --muted:#557180;
    --line:rgba(7,19,25,.14); --line-soft:rgba(7,19,25,.07);
    --jade:#0B8A63; --amber:#A96A06;
    --jade-soft:rgba(11,138,99,.12); --amber-soft:rgba(169,106,6,.12);
    --shadow:0 18px 40px -28px rgba(7,19,25,.45);
    --display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
    --body:'Instrument Sans','Helvetica Neue',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
    --maxw:1180px;
    --ease:cubic-bezier(.22,.7,.28,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#07131A; --bg-2:#0A1B23; --surface:#0E2530; --surface-2:#12303C;
      --ink:#E9F2F3; --ink-2:#C3D6DB; --muted:#8CA7B1;
      --line:rgba(233,242,243,.13); --line-soft:rgba(233,242,243,.06);
      --jade:#3FD9A4; --amber:#F7A94B;
      --jade-soft:rgba(63,217,164,.13); --amber-soft:rgba(247,169,75,.13);
      --shadow:0 24px 60px -34px rgba(0,0,0,.85);
    }
  }
  :root[data-theme="dark"]{
    --bg:#07131A; --bg-2:#0A1B23; --surface:#0E2530; --surface-2:#12303C;
    --ink:#E9F2F3; --ink-2:#C3D6DB; --muted:#8CA7B1;
    --line:rgba(233,242,243,.13); --line-soft:rgba(233,242,243,.06);
    --jade:#3FD9A4; --amber:#F7A94B;
    --jade-soft:rgba(63,217,164,.13); --amber-soft:rgba(247,169,75,.13);
    --shadow:0 24px 60px -34px rgba(0,0,0,.85);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body.locked{overflow:hidden}
  body.hide-cursor,body.hide-cursor *{cursor:none!important}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  :focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:6px}

  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .rule{height:1px;background:var(--line-soft);width:100%}
  .sect{padding:clamp(56px,7vw,104px) 0;position:relative}
  .sect-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,4vw,56px)}
  @media (max-width:820px){.sect-grid{grid-template-columns:1fr;gap:14px}}
  .rail-inner{position:sticky;top:96px;display:flex;flex-direction:column;gap:8px}
  @media (max-width:820px){.rail-inner{position:static;flex-direction:row;align-items:center;gap:10px}}
  .rail-idx{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
  .rail-name{font-weight:600;font-size:13.5px;color:var(--ink-2)}
  .rail-bar{width:34px;height:2px;background:var(--jade);margin-top:4px;opacity:.75}
  @media (max-width:820px){.rail-bar{margin:0}}
  h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.08}
  h2{font-size:clamp(28px,3.6vw,44px)}
  .lead{color:var(--ink-2);font-size:clamp(16px,1.35vw,18.5px);max-width:62ch;margin:16px 0 0}
  .mono{font-family:var(--mono)}

  /* ---------- loader ---------- */
  .loader{position:fixed;inset:0;z-index:120;background:var(--bg);display:grid;place-content:center;gap:18px;transition:transform 1s var(--ease-out),opacity .5s var(--ease)}
  .loader.out{transform:translateY(-101%)}
  .loader-num{font-family:var(--display);font-size:clamp(56px,12vw,120px);font-weight:600;letter-spacing:-.05em;line-height:1;text-align:center}
  .loader-num sup{font-family:var(--mono);font-size:14px;font-weight:400;color:var(--muted);vertical-align:super;margin-left:6px}
  .loader-track{width:min(260px,60vw);height:2px;background:var(--line);margin:0 auto;overflow:hidden}
  .loader-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--amber));width:0%}
  .loader-cap{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center}

  /* ---------- custom cursor ---------- */
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:110;pointer-events:none;border-radius:999px;will-change:transform}
  .cur-dot{width:6px;height:6px;background:var(--jade);margin:-3px 0 0 -3px}
  .cur-ring{width:34px;height:34px;border:1px solid var(--jade);margin:-17px 0 0 -17px;display:grid;place-content:center;font-family:var(--mono);font-size:10px;color:#04150F;background:transparent;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)}
  .cur-ring.big{width:66px;height:66px;margin:-33px 0 0 -33px;background:var(--jade);border-color:transparent}
  :root[data-theme="light"] .cur-ring.big{color:#fff}
  .cur-hide{opacity:0}

  /* ---------- split text ---------- */
  .split{display:block}
  .split .mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
  .split .ch{display:inline-block;transform:translateY(112%);opacity:0}
  .split.go .ch{animation:chUp .85s var(--ease-out) forwards}
  @keyframes chUp{to{transform:none;opacity:1}}

  /* ---------- chrome ---------- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
  header.nav.stuck{border-bottom-color:var(--line-soft)}
  .nav-in{display:flex;align-items:center;gap:18px;height:64px}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:17px}
  .brand-mark{width:26px;height:26px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:grid;place-content:center;font-family:var(--mono);font-size:11px;color:var(--jade)}
  .nav-links{display:flex;gap:4px;margin-left:auto}
  .nav-link{position:relative;padding:7px 12px;border-radius:999px;font-size:14px;color:var(--muted);transition:color .2s var(--ease),background .2s var(--ease)}
  .nav-link:hover{color:var(--ink)}
  .nav-link.active{color:var(--ink);background:var(--surface)}
  .nav-tools{display:flex;align-items:center;gap:8px;margin-left:8px}
  .icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:grid;place-content:center;background:var(--surface);transition:transform .2s var(--ease),border-color .2s var(--ease)}
  .icon-btn:hover{transform:translateY(-1px);border-color:var(--jade)}
  .kbd{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--surface)}
  .menu-btn{display:none}
  @media (max-width:820px){.nav-links,.kbd{display:none}.menu-btn{display:grid;margin-left:auto}}

  /* ---------- hero ---------- */
  .hero{padding:clamp(34px,5vw,64px) 0 clamp(40px,5vw,64px);position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:center}
  @media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}}
  .hero-id{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .hero-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;border:2px solid var(--jade);box-shadow:0 0 0 4px var(--jade-soft);image-rendering:auto}
  .status{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px 6px 10px;font-size:13px;color:var(--ink-2);font-family:var(--mono);font-size:11.5px}
  .status i{width:7px;height:7px;border-radius:50%;background:var(--jade);animation:beacon 2.4s var(--ease) infinite}
  @keyframes beacon{0%{box-shadow:0 0 0 0 var(--jade-soft)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .hero h1{font-size:clamp(38px,5.4vw,66px);font-weight:600;margin:20px 0 0;letter-spacing:-.04em}
  .hero h1 .two{color:var(--ink-2)}
  .hero-sub{margin:20px 0 0;color:var(--ink-2);max-width:48ch;font-size:clamp(15.5px,1.3vw,17.5px)}
  .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
  .btn{display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:12px 18px;font-size:14.5px;font-weight:500;border:1px solid var(--line);background:var(--surface);transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
  .btn:hover{box-shadow:var(--shadow);border-color:var(--ink-2)}
  .btn-primary{background:var(--jade);color:#04150F;border-color:transparent;font-weight:600}
  :root[data-theme="light"] .btn-primary{color:#fff}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
  .hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;font-size:13.5px;color:var(--muted)}
  .hero-meta b{color:var(--ink-2);font-weight:600}

  /* ---------- system graph ---------- */
  .system{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--bg-2),var(--surface));overflow:hidden;box-shadow:var(--shadow)}
  .system-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
  .system-head>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dots{display:flex;gap:5px}
  .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
  .dots i:first-child{background:var(--amber)}
  .dots i:nth-child(2){background:var(--jade)}
  .system-stats{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--muted);white-space:nowrap}
  .system-stats b{color:var(--ink-2);font-weight:600}
  .system-live{display:inline-flex;align-items:center;gap:6px}
  .system-live i{width:6px;height:6px;border-radius:50%;background:var(--jade);animation:beacon 2.4s var(--ease) infinite}
  .graph{position:relative;height:clamp(250px,30vw,320px);background:radial-gradient(120% 100% at 78% 15%,color-mix(in srgb,var(--jade) 6%,transparent),transparent 60%)}
  .graph canvas{position:absolute;inset:0;width:100%;height:100%}
  .node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap;transition:transform .3s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
  .node:hover,.node.hot{border-color:var(--jade);color:var(--ink);transform:translate(-50%,-50%) scale(1.06)}
  .node.active{border-color:var(--jade);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--jade) 40%,transparent),0 0 18px -2px color-mix(in srgb,var(--jade) 60%,transparent)}
  .node.store.active{border-color:var(--amber);box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 40%,transparent),0 0 18px -2px color-mix(in srgb,var(--amber) 60%,transparent)}
  .node em{width:6px;height:6px;border-radius:2px;background:var(--jade);font-style:normal;position:relative;flex:0 0 auto}
  .node.store em{background:var(--amber);border-radius:50%}
  .node-ping{position:absolute;inset:-5px;border-radius:inherit;border:1px solid var(--jade);animation:pingRing .7s var(--ease-out) forwards;pointer-events:none}
  .node.store .node-ping{border-color:var(--amber)}
  @keyframes pingRing{0%{opacity:.85;transform:scale(.85)}100%{opacity:0;transform:scale(1.18)}}
  @media (max-width:520px){.node{font-size:9.5px;padding:5px 7px;gap:5px}.system-stats{font-size:10px;gap:8px}}
  @media (max-width:400px){.system-stats span:not(.system-live){display:none}}
  .trace{border-top:1px solid var(--line-soft);padding:10px 14px 13px;font-family:var(--mono);font-size:11.5px;color:var(--muted);min-height:96px}
  .trace-row{display:flex;gap:9px;align-items:baseline;padding:2px 0;animation:traceIn .4s var(--ease) both}
  @keyframes traceIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .trace-row .method{font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:1px 5px;border-radius:4px;color:var(--bg);flex:0 0 auto}
  .trace-row .method.get{background:var(--jade)}
  .trace-row .method.post{background:var(--amber)}
  .trace-row .ok{color:var(--jade)}
  .trace-row .path{color:var(--ink-2)}
  .trace-row .ms{margin-left:auto}

  /* ---------- marquee ---------- */
  /* ---------- dot field ---------- */
  .field{position:absolute;inset:0;z-index:0;pointer-events:none}
  .field canvas{width:100%;height:100%;display:block}
  .sect>.wrap{position:relative}

  /* ---------- projects ---------- */
  .feature{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,40px);border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:clamp(20px,2.6vw,32px);box-shadow:var(--shadow);margin-top:34px}
  @media (max-width:860px){.feature{grid-template-columns:1fr}}
  .feature h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:10px}
  .tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
  .tag{font-family:var(--mono);font-size:10.5px;padding:5px 9px;border-radius:7px;background:var(--jade-soft);color:var(--jade)}
  .feature-side{border-left:1px solid var(--line-soft);padding-left:clamp(0px,2vw,26px);display:flex;flex-direction:column;gap:14px;justify-content:center}
  @media (max-width:860px){.feature-side{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:20px}}
  .kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;border-bottom:1px dashed var(--line-soft);padding-bottom:9px}
  .kv span:first-child{color:var(--muted)}
  .kv span:last-child{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
  .rows{margin-top:18px;border-top:1px solid var(--line-soft)}
  .row{border-bottom:1px solid var(--line-soft);position:relative}
  .row-head{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:19px 4px;text-align:left;transition:padding .35s var(--ease)}
  .row-head:hover{padding-left:12px}
  .row-num{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .row-title{font-family:var(--display);font-size:clamp(17px,1.9vw,21px);font-weight:600;letter-spacing:-.02em}
  .row-hint{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}
  .row-plus{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-content:center;font-family:var(--mono);font-size:13px;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease)}
  .row.open .row-plus{transform:rotate(45deg);background:var(--jade);color:#04150F;border-color:transparent}
  .row-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
  .row.open .row-body{grid-template-rows:1fr}
  .row-body>div{overflow:hidden}
  .row-inner{padding:0 4px 24px 48px;max-width:70ch;color:var(--ink-2);font-size:15px}
  @media (max-width:640px){.row-inner{padding-left:4px}.row-hint span:first-child{display:none}}
  .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .link-pill{font-size:13px;padding:8px 13px;border-radius:9px;border:1px solid var(--line);transition:background .2s var(--ease),color .2s var(--ease)}
  .link-pill:hover{background:var(--ink);color:var(--bg)}

  /* ---------- hover preview ---------- */
  .peek{position:fixed;top:0;left:0;z-index:70;width:260px;pointer-events:none;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .4s var(--ease-out);will-change:transform}
  .peek.on{opacity:1}
  .peek svg{display:block;width:100%;height:auto}

  /* ---------- stack ---------- */
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 22px}
  .tab{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;color:var(--muted);background:transparent;transition:all .22s var(--ease)}
  .tab:hover{color:var(--ink)}
  .tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--ink-2);animation:chipIn .4s var(--ease-out) both}
  @keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  .bars{margin-top:30px;display:grid;gap:14px;max-width:520px}
  .bar-row{display:grid;grid-template-columns:110px 1fr 90px;gap:12px;align-items:center;font-size:13.5px}
  .bar-track{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
  .bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--jade),var(--amber));width:0;transition:width 1.2s var(--ease-out)}
  .bar-row .lvl{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

  /* ---------- journey: sticky stack ---------- */
  .jstack{margin-top:26px}
  .jcard{position:sticky;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow);margin-bottom:30vh;transition:transform .45s var(--ease-out),filter .45s var(--ease-out);will-change:transform,filter;backface-visibility:hidden}
  .jcard:last-child{margin-bottom:10vh}
  .jcard-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .jcard-num{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:3px 7px}
  .jcard-when{font-family:var(--mono);font-size:11.5px;color:var(--amber)}
  .jcard h3{font-size:clamp(18px,2.1vw,24px);margin-bottom:10px}
  .jcard p{margin:0;color:var(--ink-2);font-size:15px;max-width:64ch}
  @media (max-width:700px){
    .jcard{margin-bottom:16vh}
    .jcard:last-child{margin-bottom:6vh}
  }

  /* ---------- awards ---------- */
  .awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:8px}
  .award{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--surface);position:relative;overflow:hidden;transition:transform .45s var(--ease-out)}
  .award::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:var(--amber-soft)}
  .award h3{font-size:19px;position:relative;margin-bottom:8px}
  .award p{margin:0;font-size:14px;color:var(--ink-2);position:relative}
  .award .where{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-top:10px;position:relative}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
  @media (max-width:640px){.stats{grid-template-columns:1fr}}
  .stat{border:1px solid var(--line-soft);border-radius:14px;padding:18px;background:var(--bg-2)}
  .stat b{font-family:var(--display);font-size:34px;font-weight:600;display:block;letter-spacing:-.03em}
  .stat span{font-size:13px;color:var(--muted)}

  /* ---------- contact ---------- */
  .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px)}
  @media (max-width:860px){.contact{grid-template-columns:1fr}}
  .mailto{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
  .mail-val{font-family:var(--mono);font-size:clamp(14px,2vw,17px);border-bottom:1px dashed var(--line);padding-bottom:3px}
  .cfields{display:grid;gap:12px;margin-top:10px}
  .cfield{display:flex;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface);font-size:14px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
  .cfield:hover{border-color:var(--jade);transform:translateX(4px)}
  .cfield span:first-child{color:var(--muted);font-size:12.5px}
  .cfield span:last-child{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

  .avail{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;background:var(--surface)}
  .avail i{width:7px;height:7px;border-radius:50%;background:var(--jade);position:relative;flex:0 0 auto}
  .avail i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--jade);animation:availPulse 2.2s var(--ease) infinite}
  @keyframes availPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

  .compose{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow);position:relative;overflow:hidden}
  .compose::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:var(--jade-soft);pointer-events:none;filter:blur(4px)}
  .compose-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;position:relative}
  .compose-head h4{font-family:var(--display);font-size:16px;font-weight:600;margin:0}
  .compose-head span{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .crow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;position:relative}
  @media (max-width:520px){.crow{grid-template-columns:1fr}}
  .cin{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);padding:12px 14px;font-size:14px;font-family:var(--body);color:var(--ink);outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
  .cin:focus{border-color:var(--jade);box-shadow:0 0 0 3px var(--jade-soft)}
  .cin::placeholder{color:var(--muted)}
  textarea.cin{resize:vertical;min-height:92px;font-family:var(--body);line-height:1.5}
  .compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap;position:relative}
  .compose-note{font-size:12px;color:var(--muted);max-width:26ch}
  .send-btn{position:relative;display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;background:var(--jade);color:#04150F;border:1px solid transparent;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  :root[data-theme="light"] .send-btn{color:#fff}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .send-btn{color:#fff}}
  .send-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .send-btn:disabled{opacity:.55;pointer-events:none}
  .send-btn.sent{background:transparent;border-color:var(--jade);color:var(--jade)}
  .send-check{display:inline-block;animation:popIn .4s var(--ease)}
  @keyframes popIn{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

  .social-row{display:flex;gap:10px;margin-top:20px}
  .social-btn{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);background:var(--surface);display:grid;place-content:center;font-size:18px;position:relative;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
  .social-btn:hover{transform:translateY(-4px) rotate(-4deg);border-color:var(--jade);background:var(--jade-soft)}
  .social-btn .tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:10.5px;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
  .social-btn:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}

  footer{border-top:1px solid var(--line-soft);padding:30px 0 40px;margin-top:20px}
  .foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
  .foot-links{display:flex;gap:16px}
  .foot-links a:hover{color:var(--ink)}

  /* ---------- command palette ---------- */
  .cmd-back{position:fixed;inset:0;z-index:90;background:rgba(3,10,14,.55);backdrop-filter:blur(3px);display:grid;place-items:start center;padding:12vh 16px;animation:fadeIn .2s var(--ease)}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .cmd{width:100%;max-width:520px;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden;animation:cmdIn .28s var(--ease-out)}
  @keyframes cmdIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
  .cmd input{width:100%;padding:16px 18px;background:transparent;border:0;border-bottom:1px solid var(--line-soft);color:var(--ink);font-size:15px;outline:none;font-family:var(--body)}
  .cmd input::placeholder{color:var(--muted)}
  .cmd-list{max-height:min(46vh,360px);overflow:auto;padding:8px}
  .cmd-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;font-size:14.5px;cursor:pointer}
  .cmd-item .k{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto}
  .cmd-item.sel{background:var(--surface)}
  .cmd-item .ic{width:22px;height:22px;border-radius:7px;background:var(--surface-2);display:grid;place-content:center;font-family:var(--mono);font-size:11px;color:var(--jade)}
  .cmd-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}

  /* ---------- all-projects overlay ---------- */
  .all-back{position:fixed;inset:0;z-index:95;background:rgba(3,10,14,.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:6vh 16px;animation:fadeIn .2s var(--ease)}
  .all-modal{width:100%;max-width:980px;max-height:88vh;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 50px 100px -30px rgba(0,0,0,.65);overflow:hidden;animation:cmdIn .3s var(--ease-out)}
  .all-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 14px;border-bottom:1px solid var(--line-soft)}
  .all-head h3{font-family:var(--display);font-size:clamp(19px,2.4vw,24px)}
  .all-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:52ch}
  .all-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:14px 24px 0}
  .all-grid{padding:18px 24px 26px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .repo-card{position:relative;display:block;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);transition:transform .3s var(--ease-out),border-color .3s var(--ease),box-shadow .3s var(--ease-out);animation:chipIn .4s var(--ease-out) both}
  .repo-card:hover,.repo-card.open,.repo-card:focus-visible{transform:translateY(-4px);border-color:var(--jade);box-shadow:var(--shadow)}
  .repo-cat{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--jade);background:var(--jade-soft);border-radius:999px;padding:3px 9px}
  .repo-card h4{font-family:var(--display);font-size:16px;font-weight:600;margin:10px 0 0;letter-spacing:-.01em}
  .repo-preview{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .35s var(--ease-out),opacity .3s var(--ease),margin-top .35s var(--ease-out)}
  .repo-card:hover .repo-preview,.repo-card.open .repo-preview,.repo-card:focus-visible .repo-preview{max-height:120px;opacity:1;margin-top:10px}
  .repo-preview p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5}
  .repo-links{display:flex;gap:8px;margin-top:10px}
  .repo-link{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
  .repo-link.live{color:var(--jade);border-color:var(--jade)}
  @media (max-width:640px){.all-modal{max-height:92vh}.all-grid{grid-template-columns:1fr 1fr}.all-head p{display:none}}
  @media (max-width:420px){.all-grid{grid-template-columns:1fr}}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .reveal.seen{opacity:1;transform:none}
  .stage>*{opacity:0;transform:translateY(14px)}
  .stage.go>*{animation:riseIn .8s var(--ease-out) both}
  .stage.go>*:nth-child(1){animation-delay:.05s}
  .stage.go>*:nth-child(2){animation-delay:.12s}
  .stage.go>*:nth-child(3){animation-delay:.22s}
  .stage.go>*:nth-child(4){animation-delay:.3s}
  .stage.go>*:nth-child(5){animation-delay:.38s}
  @keyframes riseIn{to{opacity:1;transform:none}}

  @media (prefers-reduced-motion: reduce){
    .stage>*,.reveal,.split .ch{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
    .chip,.trace-row{animation:none!important}
    .cur-dot,.cur-ring,.peek,.field{display:none!important}
    .loader{display:none!important}
    .jcard{position:static;margin-bottom:18px}
  }

  /* ---------- dark theme atmosphere: aurora + dot grid + grain + pointer light ---------- */
  :root[data-theme="dark"] body::before,
  :root[data-theme="dark"] body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
  /* slow-drifting aurora (GPU transform only, no repaint) */
  :root[data-theme="dark"] body::before{
    inset:-25%;
    background:
      radial-gradient(38% 34% at 18% 22%, rgba(63,217,164,.26), transparent 70%),
      radial-gradient(34% 40% at 82% 30%, rgba(38,132,170,.30), transparent 72%),
      radial-gradient(40% 36% at 62% 82%, rgba(247,169,75,.13), transparent 70%),
      radial-gradient(30% 30% at 12% 85%, rgba(63,217,164,.10), transparent 70%);
    animation:auroraDrift 48s ease-in-out infinite alternate;
    will-change:transform;
  }
  /* vignette + film grain */
  :root[data-theme="dark"] body::after{
    inset:0;
    background:
      radial-gradient(ellipse at 50% 36%, transparent 50%, rgba(2,8,12,.55) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @keyframes auroraDrift{
    from{transform:translate3d(-3%,2%,0) rotate(-4deg) scale(1)}
    to{transform:translate3d(3%,-2%,0) rotate(5deg) scale(1.12)}
  }
  /* floating light motes + rare shooting star (drawn on a canvas by the Atmosphere component) */
  .bg-motes{display:none}
  :root[data-theme="dark"] .bg-motes{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
  @media (prefers-reduced-motion: reduce){
    :root[data-theme="dark"] body::before{animation:none}
    :root[data-theme="dark"] .bg-motes{display:none}
  }

  /* ---------- stack: interested in / currently learning ---------- */
  .grow{margin-top:26px;padding-top:20px;border-top:1px dashed var(--line);display:grid;gap:12px}
  .grow-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center}
  @media (max-width:560px){.grow-row{grid-template-columns:1fr;gap:8px}}
  .grow-label{font-family:var(--mono);font-size:12px;color:var(--muted)}
  .chip-soft{background:transparent;border-style:dashed;color:var(--muted)}

  /* ---------- invisible scrollbar: scrolling still works (wheel, touch, keys), the bar is just hidden ---------- */
  html,body,*{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}

  /* ---------- scroll rail (bottom): invisible at rest, wakes on scroll, full colour on hover ---------- */
  .srail{position:fixed;left:0;right:0;bottom:0;height:20px;z-index:60;touch-action:none;user-select:none;-webkit-user-select:none}
  .srail.off{display:none}
  .srail-track{position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:99px;opacity:0;background:transparent;
    transition:height .22s var(--ease-out),bottom .22s var(--ease-out),opacity .35s var(--ease),background .25s var(--ease)}
  .srail-thumb{position:absolute;left:0;top:0;height:100%;border-radius:99px;min-width:56px;cursor:grab;
    background:linear-gradient(90deg,var(--jade),var(--amber));will-change:transform,width;transition:box-shadow .25s var(--ease)}
  .srail.awake .srail-track{opacity:.85}
  .srail:hover .srail-track,.srail.drag .srail-track{opacity:1;height:9px;bottom:6px;background:var(--line)}
  .srail:hover .srail-thumb,.srail.drag .srail-thumb{box-shadow:0 0 14px -2px var(--jade)}
  .srail.drag .srail-thumb{cursor:grabbing}
  @media (prefers-reduced-motion: reduce){.srail-track,.srail-thumb{transition:none}}

  /* while the theme wave is running, pause the expensive ambient layers so the wave stays smooth */
  :root.theme-switching body::before{animation-play-state:paused}
  :root.theme-switching header.nav{-webkit-backdrop-filter:none;backdrop-filter:none}