/* ============ Sun Wash tokens（设计定稿 3c/3e，1440×900 基准，1:1 值） ============ */
  :root{
    --g1:#FFFBEF; --g2:#F0EFE9;
    --blob-y:rgba(255,190,40,.42); --blob-w:rgba(255,255,255,.9);
    --glass:linear-gradient(155deg,rgba(255,255,255,.68),rgba(255,213,102,.5));
    --glass-tab:rgba(255,255,255,.55);
    --edge:rgba(255,255,255,.85);
    --paper:#F8F5EA; --card:#FDFBF2;
    --ink:#191710; --body:#3A382E; --soft:#7A776A; --rule:#DCD7C6;
    --cink:#3B3117; --csoft:rgba(59,49,23,.6);
    --yellow:#FFD75E; --onyellow:#40320A; --tagchip:rgba(255,215,94,.45);
    --lchip:#DCE8DA; --lchipink:#3F513D;
    --shadow:rgba(110,96,50,.36);
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --jost:'Jost',sans-serif;
    --openease:cubic-bezier(.2,.7,.2,1);
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{
    font-family:var(--jost);
    color:var(--ink);
    background:linear-gradient(150deg,var(--g1),var(--g2));
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; cursor:pointer; }
  button{ font:inherit; border:none; background:none; cursor:pointer; color:inherit; }
  .mono{ font-family:var(--mono); }

  /* ============ 桌面背景光斑 ============ */
  .blob{ position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
  .blob-y{ width:640px; height:640px; background:var(--blob-y); filter:blur(130px); left:50%; margin-left:-320px; bottom:-200px; }
  .blob-w{ width:540px; height:540px; background:var(--blob-w); filter:blur(110px); left:-100px; top:0; }

  /* ============ 关闭态：玻璃封面（四角留白，只有玻璃和提示） ============
     打开/合上动画 = 定稿 8a「掀盖 Lid」放慢版：打开 1050ms、合上 820ms。
     原则：盖先行，纸随后；只动 transform 和 opacity。 */
  .coverwrap{
    position:fixed; inset:0; z-index:7;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
  }
  .lidwrap{ perspective:1600px; }
  .glass{
    width:400px; height:520px; border-radius:16px;
    background:var(--glass);
    -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
    border:1px solid var(--edge);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 34px 70px -28px var(--shadow);
    padding:34px 32px;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
    text-align:left; color:var(--cink);
    position:relative;
    transform-origin:left center;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    /* 合上：盖 @250–850 合拢、@450–670 淡入 */
    transition:transform .6s cubic-bezier(.3,.6,.25,1) .25s, opacity .22s linear .45s, box-shadow .2s ease;
  }
  /* hover 微掀 6°：只在关闭态、且真正有鼠标的设备上生效，
     否则 :hover 的高优先级会盖掉打开动画的 rotateY(-108deg) */
  /* 施工锁：一张贴纸横跨文件夹开口边（右缘），把口封住的感觉 */
  .wipbadge{
    display:none; position:absolute; right:-38px; top:44%;
    transform:rotate(-8deg);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
    color:var(--onyellow); background:rgba(255,215,94,.95);
    border:2px solid rgba(255,255,255,.92); border-radius:6px;
    padding:10px 18px;
    box-shadow:0 12px 26px -10px var(--shadow);
  }
  body.locked .wipbadge{ display:inline-block; }
  body.locked .glass{ cursor:default; }
  body.locked .hint{ display:none; }

  @media (hover:hover){
    body:not(.open):not(.locked) .coverwrap:hover .glass{
      transform:rotateY(-6deg);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 42px 80px -28px var(--shadow);
      transition:transform .2s ease, box-shadow .2s ease;
    }
  }
  /* 动画期间与打开后：烘焙玻璃（关掉 backdrop-filter，避免逐帧重采样卡顿） */
  body.animating .glass, body.open .glass{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  body.animating .glass, body.animating .sheet{ will-change:transform; }
  .glass .name{ font-size:37px; letter-spacing:.04em; line-height:1.08; margin-bottom:14px; }
  .glass .tagline{ font-weight:300; font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; line-height:1.9; color:var(--csoft); }
  .hint{ font-weight:300; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--csoft); }

  @media (max-height:760px){
    .glass{ width:330px; height:429px; padding:28px 26px; }
    .glass .name{ font-size:31px; }
    .coverwrap{ gap:26px; }
  }

  /* 打开：盖 rotateY 0→-108° @0–600，opacity→0 @250–550 */
  body.open .glass{
    transform:rotateY(-108deg); opacity:0;
    transition:transform .6s cubic-bezier(.3,.6,.25,1), opacity .3s linear .25s;
  }
  body.open .coverwrap{ pointer-events:none; visibility:hidden; transition:visibility 0s linear 1.06s; }
  body.open .hint{ opacity:0; transition:opacity .15s; }

  /* ============ 打开态：纸面 sheet ============
     关闭姿态 = 缩在玻璃正后方（--pdx/--pdy/--psx/--psy 由 JS 按视口实测），
     打开时从封面矩形长成整张 @350–1050，内容 @620–970 淡入。 */
  .sheet{
    position:fixed; left:56px; top:64px; right:120px; bottom:44px; z-index:6;
    background:var(--paper); border-radius:12px;
    box-shadow:0 34px 70px -30px var(--shadow);
    overflow:hidden;
    opacity:0; visibility:hidden;
    transform:translate(var(--pdx,0px),var(--pdy,0px)) scale(var(--psx,.3),var(--psy,.6));
    /* 合上：纸 @0–600 缩回封面矩形后隐藏 */
    transition:transform .6s cubic-bezier(.25,.7,.25,1), opacity .01s linear .6s, visibility 0s linear .62s;
  }
  body.open .sheet{
    opacity:1; visibility:visible; transform:none;
    transition:transform .7s cubic-bezier(.25,.6,.25,1) .35s, opacity .01s linear;
  }
  .sheethead, .sheetmain{ opacity:0; transition:opacity .18s linear; }
  body.open .sheethead, body.open .sheetmain{ opacity:1; transition:opacity .35s linear .62s; }

  /* ============ Tab 切换 = 定稿 9a「换纸 Re-file」420ms ============ */
  .sheet-clone{ z-index:5; pointer-events:none; animation:refileOut .26s cubic-bezier(.4,.2,.6,1) forwards; }
  @keyframes refileOut{
    0%{ transform:none; opacity:1; }
    23%{ opacity:1; }
    100%{ transform:translateY(16px) scale(.992); opacity:0; }
  }
  body.open .sheet.refile-in{
    animation:refileInT .3s cubic-bezier(.2,.7,.2,1) .12s both, refileInO .22s linear .12s both;
  }
  @keyframes refileInT{ from{ transform:translateY(16px) scale(.992); } to{ transform:none; } }
  @keyframes refileInO{ from{ opacity:0; } to{ opacity:1; } }

  .sheethead{
    position:absolute; left:64px; right:64px; top:40px; z-index:2;
    display:flex; justify-content:space-between; align-items:baseline;
    padding-bottom:14px; border-bottom:1px solid var(--rule);
    background:var(--paper);
  }
  .sheethead .lft{ display:flex; gap:24px; align-items:baseline; min-width:0; }
  .sheethead .wordmark{ font-size:17px; letter-spacing:.06em; color:var(--ink); white-space:nowrap; }
  .sheethead .crumb{ font-size:11px; letter-spacing:.05em; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .sheetmain{
    position:absolute; left:0; right:0; top:77px; bottom:0;
    overflow-y:auto; overscroll-behavior:contain;
    padding:27px 64px 44px;
  }
  .sheetmain::-webkit-scrollbar{ width:8px; }
  .sheetmain::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:9px; }

  /* ============ 右侧玻璃标签列 ============ */
  .rail{
    position:fixed; right:120px; top:100px; z-index:7;
    display:flex; flex-direction:column; gap:10px;
    transform:translateX(100%);
    opacity:0; visibility:hidden;
    transition:opacity .25s var(--openease), visibility 0s linear .25s;
  }
  body.open .rail{ opacity:1; visibility:visible; transition:opacity .4s var(--openease) .5s, visibility 0s linear .5s; }
  .tab{
    width:44px; height:124px; border-radius:0 9px 9px 0;
    background:var(--glass-tab);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--edge); border-left:none;
    color:var(--csoft);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    writing-mode:vertical-rl;
    display:flex; align-items:flex-start; justify-content:center; padding-top:14px;
    transition:transform .18s ease, width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1);
  }
  .tab:hover{ transform:translateX(4px); }
  .tab.active{
    width:52px; height:134px;
    background:var(--yellow); border-color:rgba(255,255,255,.9);
    color:var(--onyellow);
    box-shadow:6px 6px 16px -8px var(--shadow);
    transform:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  @media (max-height:800px){
    .rail{ top:84px; gap:8px; }
    .tab{ height:104px; }
    .tab.active{ height:112px; }
  }

  .closebtn{
    position:fixed; right:36px; top:26px; z-index:8;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--csoft);
    opacity:0; visibility:hidden; transition:opacity .4s .3s;
  }
  body.open .closebtn{ opacity:1; visibility:visible; }
  .closebtn:hover{ color:var(--cink); }

  /* ============ 页面通用 ============ */
  .page{ display:none; }
  .page.active{ display:block; animation:fadein .22s var(--openease); }
  @keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

  .pagetitlerow{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .pagetitle{ font-size:28px; letter-spacing:.03em; color:var(--ink); }
  .pagesub{ font-weight:300; font-size:13.5px; line-height:1.65; color:var(--soft); max-width:620px; }

  .pills{ display:flex; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; flex-wrap:wrap; }
  .pill{
    padding:7px 16px; border-radius:99px;
    border:1px solid var(--rule); color:var(--soft); background:var(--card);
    transition:background .15s, color .15s;
  }
  .pill:hover{ color:var(--ink); }
  .pill.active{ background:var(--yellow); color:var(--onyellow); border-color:var(--yellow); box-shadow:0 8px 18px -8px var(--shadow); }
  .pill.big{ padding:8px 18px; }

  /* 板块的施工中状态 */
  .wip{
    margin-top:26px; display:inline-flex; align-items:center; gap:10px;
    border:1px dashed var(--rule); border-radius:10px; padding:16px 22px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--soft);
  }
  .wip .mark{ color:var(--onyellow); font-family:var(--jost); }

  /* ============ Learning AI：左目录 + 书签卡 ============ */
  .lai-wrap{ display:flex; gap:52px; align-items:flex-start; margin-top:26px; }
  .lai-idx{ flex:none; width:226px; position:sticky; top:0;
            max-height:calc(100vh - 190px); overflow-y:auto; overscroll-behavior:contain; }
  .lai-idx::-webkit-scrollbar{ width:5px; }
  .lai-idx::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:9px; }
  .lai-idx .gh{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
                color:var(--soft); margin:0 0 9px; }
  .lai-idx .gh.g2{ margin-top:22px; }
  .lai-idx a{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
              padding:5px 9px; border-radius:6px; font-size:13.5px; font-weight:300; color:var(--soft); }
  .lai-idx a:hover{ background:var(--card); color:var(--ink); }
  .lai-idx a.has{ color:var(--ink); font-weight:400; }
  .lai-idx a.cur{ background:var(--yellow); color:var(--onyellow); }
  .lai-idx .n{ font-family:var(--mono); font-size:9.5px; }

  .lai-body{ flex:1; min-width:0; }
  .lai-gh{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--soft); padding-bottom:9px; border-bottom:1px solid var(--rule); margin:0 0 24px; }
  .lai-gh.g2{ margin-top:44px; }
  .lai-sec{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--rule); scroll-margin-top:12px; }
  .lai-sec:last-child{ border-bottom:none; }
  .lai-sec .t{ display:flex; align-items:baseline; gap:11px; }
  .lai-sec h3{ font-size:19px; font-weight:400; letter-spacing:.02em; }
  .lai-sec .d{ font-weight:300; font-size:13px; color:var(--soft); margin:2px 0 14px; }
  .lai-sec .n{ font-family:var(--mono); font-size:9.5px; color:var(--soft); }
  .lai-soon{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
             color:var(--soft); opacity:.6; }

  .bm{ display:flex; align-items:center; gap:18px; margin-bottom:10px; padding:14px;
       background:var(--card); border:1px solid var(--rule); border-radius:10px;
       transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .bm:hover{ transform:translateY(-2px); border-color:#C9C2AB; box-shadow:0 12px 26px -16px var(--shadow); }
  /* 独立类名：Projects 卡片的 .thumb 带 min-height:196px 和投影，撞名会把 16:9 顶成正方形 */
  .bm .bmthumb{ flex:none; width:208px; aspect-ratio:16/9; border-radius:7px; overflow:hidden;
                background:#EDE8DA; border:1px solid rgba(255,255,255,.9); }
  .bm .bmthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .bm .txt{ flex:1; min-width:0; }
  .bm .bt{ font-size:15.5px; letter-spacing:.01em; line-height:1.3; margin-bottom:5px; }
  .bm .bd{ font-weight:300; font-size:12.5px; line-height:1.55; color:var(--soft);
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .bm .bu{ display:flex; align-items:center; gap:7px; margin-top:10px;
           font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--soft); }
  .bm .bu img{ width:14px; height:14px; border-radius:3px; flex:none; }
  .bm .bu span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bm .bu .meta{ margin-left:auto; padding-left:14px; flex:none; overflow:visible; }
  .bm .why{ font-weight:300; font-size:12.5px; line-height:1.55; color:var(--body); margin-top:10px;
            padding-top:10px; border-top:1px solid rgba(220,215,198,.75); }

  /* ============ Projects grid（6a） ============ */
  .projgrid{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  /* min-width:0 —— 不加的话封面的 min-height:196px 配 1400/500 比例会把列撑到 549px，窄屏上整页横向溢出 */
  .projcard{ display:flex; flex-direction:column; gap:12px; text-align:left; min-width:0; transition:transform .2s ease; }
  .projcard:hover{ transform:translateY(-4px); }
  .thumb{
    /* 跟随卡片宽度按动画画布比例（1400×500）放大，宽屏上封面更大且不裁上下；
       窄屏兜底 196px 高、居中裁两侧（动图安全区为正中 800×500） */
    position:relative; aspect-ratio:1400/500; min-height:196px; border-radius:10px; overflow:hidden;
    border:1px solid rgba(255,255,255,.9); box-shadow:0 14px 30px -16px var(--shadow);
  }
  .projcard .trow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .projcard .tname{ font-size:20px; letter-spacing:.03em; color:var(--ink); }
  .catchip{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; white-space:nowrap; }
  .catchip.productivity{ background:var(--yellow); color:var(--onyellow); }
  .catchip.learning{ background:var(--lchip); color:var(--lchipink); }
  .projcard .tdesc{ font-weight:300; font-size:14px; line-height:1.55; color:var(--soft); margin-top:-4px; }

  /* 名字旁边的状态角标：用量写实数，未上线写 Coming soon（虚线，跟 .wip 一个语汇） */
  .projcard .tleft{ display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; }
  .pbadge{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 9px; border-radius:99px; white-space:nowrap;
    color:var(--body); background:var(--card); border:1px solid var(--rule);
  }
  .pbadge.soon{ color:var(--soft); background:none; border-style:dashed; }

  /* ── 最早的 vibe coding 项目：同一页，折起来，点了才看 ── */
  .earlier{ margin-top:52px; padding-top:30px; border-top:1px solid var(--rule); }
  .earlytoggle{
    display:flex; align-items:center; gap:11px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--soft); transition:color .15s;
  }
  .earlytoggle:hover{ color:var(--ink); }
  .earlytoggle .chev{
    width:7px; height:7px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg) translate(-1px,-1px); transition:transform .2s var(--openease);
  }
  .earlytoggle.open .chev{ transform:rotate(45deg) translate(-1px,-1px); }
  .earlytoggle .cnt{
    font-size:9.5px; padding:2px 8px; border-radius:99px;
    border:1px solid var(--rule); background:var(--card);
  }
  .earlier.solo{ margin-top:36px; padding-top:0; border-top:none; }
  .earlygrid{ margin-top:30px; }
  .earlygrid[hidden]{ display:none; }

  /* ── Page2Task 动图封面（Core Design 交付：6s 无缝循环，1400×500 舞台，cover 缩放）── */
  .th-p2t-anim{ background:linear-gradient(148deg,#FAFCFF 0%,#F2F6FE 26%,#DDE9FD 62%,#C8DDFB 100%); }
  .tfit{ position:absolute; left:50%; top:50%; width:1400px; height:500px; transform:translate(-50%,-50%) scale(.392); }
  .a{ animation-duration:6s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.4,0,.2,1); }
  .lg{ background-repeat:no-repeat; background-position:center; background-size:contain; flex:none; }
  .lg-tasks{ background-image:url('/p2t-tasks.png'); }
  .lg-cal{ background-image:url('/p2t-cal.png'); }
  @keyframes camera{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.008) } }
  @keyframes popup{
    0%, 10%      { opacity:1; transform:translateY(0) scaleY(1) }
    20%, 30%     { opacity:0; transform:translateY(-18px) scaleY(.88); animation-timing-function:cubic-bezier(.16,.9,.25,1) }
    41.67%, 100% { opacity:1; transform:translateY(0) scaleY(1) }
  }
  @keyframes iconBg{ 0%,15%{ opacity:1 } 22%,28%{ opacity:0 } 31%,100%{ opacity:1 } }
  @keyframes iconPop{ 0%,25%,31%,100%{ transform:scale(1) } 28%{ transform:scale(1.15) } }
  @keyframes iconRing{ 0%,26%,34%,100%{ opacity:0 } 26.5%{ opacity:.55; transform:scale(1) } 34%,100%{ transform:scale(2.4) } }
  @keyframes cursor{
    0%, 16.67%   { transform:translate(1046px, 296px) }
    30%          { transform:translate(1012px, 6px) }
    41.67%       { transform:translate(1000px, 120px) }
    68.33%, 80%  { transform:translate(894px, 298px) }
    93.33%, 100% { transform:translate(1046px, 296px) }
  }
  @keyframes hl{
    0%            { opacity:1; clip-path:inset(0 0 0 0) }
    16.67%        { opacity:0; clip-path:inset(0 0 0 0) }
    16.8%, 41.67% { opacity:1; clip-path:inset(0 100% 0 0) }
    55%, 100%     { opacity:1; clip-path:inset(0 0 0 0) }
  }
  @keyframes arrow{
    0%, 55%      { opacity:0; stroke-dashoffset:320 }
    57%          { opacity:1 }
    62%, 65%     { opacity:1; stroke-dashoffset:0 }
    68.33%, 100% { opacity:0; stroke-dashoffset:0 }
  }
  @keyframes head{ 0%, 61%{ opacity:0 } 63%, 65%{ opacity:1 } 68.33%, 100%{ opacity:0 } }
  @keyframes txt1{ 0%{ opacity:1 } 16.67%, 58.33%{ opacity:0 } 63.33%, 100%{ opacity:1 } }
  @keyframes txt2{ 0%{ opacity:1 } 16.67%, 63.33%{ opacity:0 } 68.33%, 100%{ opacity:1 } }
  @keyframes skl1{ 0%{ opacity:0 } 16.67%, 58.33%{ opacity:1 } 63.33%, 100%{ opacity:0 } }
  @keyframes skl2{ 0%{ opacity:0 } 16.67%, 63.33%{ opacity:1 } 68.33%, 100%{ opacity:0 } }
  @keyframes cta{ 0%,68.33%,80%,100%{ transform:scale(1) } 71%{ transform:scale(.97) } 75.5%{ transform:scale(1.024) } }
  @keyframes ctaR{ 0%,69%{ opacity:0; transform:scale(.15) } 71.5%{ opacity:.35 } 79%,100%{ opacity:0; transform:scale(1) } }
  @keyframes res{
    0%           { opacity:1; transform:translateY(0) scale(1) }
    16.67%       { opacity:0; transform:translateY(8px) scale(1) }
    80%          { opacity:0; transform:translateY(32px) scale(1) }
    88.33%       { opacity:1; transform:translateY(0) scale(1) }
    90.5%        { opacity:1; transform:translateY(0) scale(1.045) }
    93.33%, 100% { opacity:1; transform:translateY(0) scale(1) }
  }
  /* 减弱动态 → 停在第 0 帧（完成态） */
  @media (prefers-reduced-motion: reduce){ .a{ animation:none !important; } }
  .th-tp{ background:#EDF3FD; }
  .th-raise{ background:#F5EFE2; }
  .th-lrn{ background:#FDF4EB; }
  .th-blank{ background:linear-gradient(140deg,#F2EEE3,#E8E2D3); }
  /* Meow: the stage from the product (cream wall, deeper floor, soft horizon, glow) with the cat's idle loop on it */
  .th-meow{ background:linear-gradient(to bottom,#F6EFE3 0%,#EEE4D3 60%,#D9CBB3 65%,#D1C1A6 100%); }
  .th-meow .tfit{ background:radial-gradient(ellipse 340px 210px at 700px 300px,rgba(255,252,245,.6) 0%,rgba(255,252,245,0) 70%); }
  .meow-idle{ position:absolute; left:420px; top:-39px; width:560px; height:560px; object-fit:contain; display:block; }
  .catchip.play{ background:#F3DCCF; color:#7A3E2B; }

  /* ============ Project detail（5b） ============ */
  .detail{ display:flex; gap:80px; align-items:flex-start; margin-top:6px; }
  .dside{ flex:none; width:250px; position:sticky; top:0; }
  .dside .slabel{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-bottom:14px; }
  .dside .srow{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; color:var(--ink); border-bottom:1px solid var(--rule); text-align:left;
  }
  .dside .srow span:first-child{ font-weight:300; font-size:15px; letter-spacing:.03em; }
  .dside .srow span:last-child{ font-family:var(--mono); font-size:9.5px; color:var(--soft); }
  .dside .srow.active{
    background:var(--yellow); color:var(--onyellow); border-radius:8px; border-bottom-color:transparent;
    box-shadow:0 8px 18px -8px var(--shadow);
  }
  .dside .srow.active span:first-child{ font-weight:400; }
  .dside .srow.active span:last-child{ color:var(--onyellow); }
  .dbody{ flex:1; min-width:0; color:var(--ink); }
  .dtoprow{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
  .dmeta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--soft); margin-bottom:8px; }
  .dtitle{ font-size:32px; letter-spacing:.03em; line-height:1.05; }
  .dbtns{ display:flex; gap:10px; }
  .dbtn{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
    border:1px solid var(--rule); border-radius:6px; padding:7px 13px; background:var(--card); color:var(--ink);
    transition:transform .15s ease;
  }
  .dbtn:hover{ transform:translateY(-2px); }
  .dbtn.primary{ background:var(--yellow); color:var(--onyellow); border-color:rgba(64,50,10,.25); }
  .dvideo{
    position:relative; width:100%; height:320px; border-radius:10px; overflow:hidden;
    background:linear-gradient(140deg,#2E2B22,#1B1915);
    box-shadow:0 18px 40px -18px var(--shadow); margin-bottom:24px;
  }
  .dvideo .glow{ position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,215,94,.22); filter:blur(80px); right:-90px; top:-90px; }
  .dvideo .play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3);
  }
  .dvideo .play i{ width:0; height:0; border-left:19px solid #191710; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
  .dvideo .dur{ position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:5px 10px; border-radius:5px; }
  .dcols{ display:flex; gap:44px; }
  .dcols>div{ flex:1; min-width:0; }
  .dcollabel{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-bottom:7px; }
  .dcoltext{ font-weight:300; font-size:15px; line-height:1.7; color:var(--body); }
  .pageno{ font-family:var(--mono); font-size:10px; color:var(--soft); margin-top:34px; }

  /* ============ Experience ============ */
  .exwrap{ display:flex; gap:80px; align-items:flex-start; margin-top:6px; }
  .exside{ flex:none; width:250px; }
  .exside .photo{
    width:250px; height:300px; border-radius:10px;
    background-color:#EBE7DA; background-image:url('/photo.jpg');
    background-size:cover; background-position:center 18%; background-repeat:no-repeat;
    border:1px solid rgba(255,255,255,.9); box-shadow:0 14px 30px -16px var(--shadow);
    margin-bottom:18px;
  }
  .exside .xbio{ font-weight:300; font-size:14px; line-height:1.65; color:var(--body); margin-bottom:16px; }
  .exside .xbio p{ margin-bottom:10px; }
  .exside .xbio p:last-child{ margin-bottom:0; }
  .exside .xlinks{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--soft); border-top:1px solid var(--rule); padding-top:14px; }
  .exside .xlinks a{ text-decoration:underline; text-underline-offset:3px; }
  .exside .xlinks a:hover{ color:var(--ink); }
  .exbody{ flex:1; min-width:0; }
  .exgroup{
    font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--soft); margin:28px 0 2px;
  }
  .exgroup:first-of-type{ margin-top:12px; }
  .exrow{ padding:18px 0; border-bottom:1px solid var(--rule); }
  .exrow:last-child{ border-bottom:none; }
  .exrow .xdate{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--soft); margin-bottom:5px; }
  .exrow .xorg{ font-size:18px; letter-spacing:.02em; color:var(--ink); margin-bottom:4px; }
  .exrow .xdesc{ font-weight:300; font-size:14px; line-height:1.6; color:var(--soft); }

  /* ============ 移动端（设计稿未定，按同一语言收窄） ============ */
  @media (max-width:880px){
    .glass{ width:min(80vw,340px); height:calc(min(80vw,340px) * 1.3); padding:26px 24px; }
    .glass .name{ font-size:30px; }
    .glass .tagline{ font-size:11.5px; }
    /* 手机不做 3D：盖左滑 40px 淡出（定稿 8a 手机注记） */
    .glass{ transition:transform .3s ease .2s, opacity .25s linear .3s, box-shadow .2s ease; }
    body.open .glass{ transform:translateX(-40px); transition:transform .35s ease, opacity .28s linear .1s; }

    .sheet{ left:10px; right:10px; top:12px; bottom:0; border-radius:12px 12px 0 0; }
    .sheethead{ left:20px; right:20px; top:18px; }
    .sheethead .crumb{ display:none; }
    .sheetmain{ top:55px; padding:16px 20px 40px; }

    .rail{
      position:fixed; left:10px; right:10px; top:auto; bottom:0; z-index:9;
      flex-direction:row; gap:6px; transform:none;
      background:var(--paper); border-top:1px solid var(--rule);
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      overflow-x:auto;
    }
    .tab{
      writing-mode:horizontal-tb; width:auto; height:34px; padding:0 13px;
      border-radius:99px; border:1px solid var(--rule); font-size:9.5px; letter-spacing:.08em;
      align-items:center; flex:none;
    }
    .tab:hover{ transform:none; }
    .tab.active{ width:auto; height:34px; }
    .sheetmain{ bottom:56px; }
    .closebtn{
      right:18px; top:24px; z-index:10;
      width:30px; height:30px; border-radius:99px;
      background:var(--card); border:1px solid var(--rule);
      display:flex; align-items:center; justify-content:center;
      font-size:12px; letter-spacing:0; color:var(--soft);
    }
    .closebtn .cword{ display:none; }

    .projgrid{ grid-template-columns:1fr; gap:26px; margin-top:26px; }
    .detail{ flex-direction:column; gap:26px; }
    .dside{ width:100%; position:static; }
    .dvideo{ height:210px; }
    .dcols{ flex-direction:column; gap:22px; }
    .exwrap{ flex-direction:column; gap:26px; }
    .exside{ width:100%; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
    .exside .photo{ width:130px; height:156px; margin-bottom:0; flex:none; }
    .exside .xmeta{ flex:1; min-width:200px; }
    /* align-items:flex-start 在竖排时是横向的，会让子元素按内容宽度撑开，必须改回 stretch */
    .lai-wrap{ flex-direction:column; align-items:stretch; gap:0; margin-top:18px; }
    .lai-body{ min-width:0; }
    /* 手机上目录会占满首屏，而正文本身就是同一份列表，直接隐藏 */
    .lai-idx{ display:none; }
    .bm{ flex-direction:column; align-items:stretch; }
    .bm .bmthumb{ width:100%; }
  }

  /* 不执行 JS 时看到的静态版本 */
  .nojs{ max-width:760px; margin:0 auto; padding:56px 24px 80px; color:var(--ink); }
  .nojs h1{ font-size:32px; font-weight:400; letter-spacing:.03em; margin-bottom:10px; }
  .nojs h2{ font-size:22px; font-weight:400; letter-spacing:.02em; margin:36px 0 10px;
            padding-bottom:8px; border-bottom:1px solid var(--rule); }
  .nojs h3{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--soft); font-weight:400; margin:24px 0 8px; }
  .nojs h4{ font-size:16px; font-weight:400; letter-spacing:.02em; margin:18px 0 2px; }
  .nojs p{ font-weight:300; font-size:14px; line-height:1.7; color:var(--body); margin-bottom:8px; }
  .nojs ul{ margin:0 0 12px 18px; }
  .nojs li{ font-weight:300; font-size:14px; line-height:1.7; color:var(--body); margin-bottom:5px; }
  .nojs a{ text-decoration:underline; text-underline-offset:2px; }

  /* hash 直链无动画直达 */
  body.no-anim, body.no-anim *{ transition:none !important; animation:none !important; }

  @media (prefers-reduced-motion:reduce){
    .glass, .sheet, .sheethead, .sheetmain, .rail, .hint, .coverwrap{ transition-duration:.2s !important; transition-delay:0s !important; }
    body.open .glass{ transform:none; }
    .sheet{ transform:none !important; }
    .sheet-clone, body.open .sheet.refile-in{ animation:none !important; }
  }