/* ============================================================
   cat77.css — 猫七七教程站共享设计系统「绢本花笺 / 复古印花丝绸」
   2026-08-05 by Claude · 与首页(雪白玫粉)/nikki(旧手账)同族
   暖绢纸 #faf6ed · 可可墨 #3e2c2e · 玫粉 #d6427c(情绪) · 旧金 #c9a95c(结构)
   纹样规矩:留白多、纹样少、位置准——印进布纹,不贴在表面。
   页面只需 class 名对齐即可套用,body 无需改动。
   ============================================================ */
@font-face{font-family:"Cormorant VF";
  src:url("/fonts/cormorant-vf-latin.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;}
@font-face{font-family:"Cormorant VF";
  src:url("/fonts/cormorant-italic-latin.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Source Han Serif SC";
  src:url("/fonts/SourceHanSerifSC-Heavy.subset.woff2") format("woff2");
  font-weight:500 900;font-style:normal;font-display:swap;}

:root{
  --paper:#faf6ed; --paper-2:#f3ecdd; --card:#fffdf8;
  --ink:#3e2c2e; --ink-soft:#5f4c49; --muted:#97867d;
  --pink:#d6427c; --pink-deep:#b53063; --pink-soft:#f3d3e0; --pink-wash:#fbf1f5;
  --gold:#c9a95c; --gold-pale:#e6dabf; --gold-deep:#a8894e;
  --line:#e9dfcb;
  --shadow:0 14px 34px rgba(93,64,44,.09);
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,'Courier New',monospace;
  --serif:"Cormorant VF","Cormorant Garamond","Noto Serif SC",Georgia,"Songti SC",serif;
  --display:"Source Han Serif SC","Cormorant VF","Cormorant Garamond","Noto Serif SC",Georgia,"Songti SC",serif;
  --sans:"Noto Serif SC",Georgia,"Songti SC",serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.78;-webkit-font-smoothing:antialiased;
  position:relative;min-height:100vh;overflow-x:hidden;
}
img{max-width:100%;}
::selection{background:var(--pink-soft);}

/* —— 绢底:纸纹 + 两角极淡晕色(粉右上 · 金左下),铺满整卷不随滚动 —— */
body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E") repeat,
    radial-gradient(760px 480px at 96% -4%,rgba(214,66,124,.05),transparent 62%),
    radial-gradient(680px 520px at -6% 104%,rgba(201,169,92,.07),transparent 60%);}

/* —— 印花:右上一枝山茶,墨线,印进布纹 —— */
body::after{content:"";position:absolute;top:22px;right:3vw;width:212px;height:300px;
  z-index:-1;pointer-events:none;opacity:.09;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 300' fill='none' stroke='%233e2c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M96 292 C 105 248 88 212 101 170 C 109 145 103 122 107 98'/%3E%3Cpath d='M98 238 C 72 234 53 216 51 191 C 78 193 97 210 100 234 Z'/%3E%3Cpath d='M59 196 C 72 203 85 214 96 228' stroke-width='1.3'/%3E%3Cpath d='M66 193 L 73 201 M77 200 L 85 209 M88 208 L 94 217' stroke-width='.9'/%3E%3Cpath d='M103 192 C 128 190 147 173 151 149 C 124 151 106 168 102 190 Z'/%3E%3Cpath d='M144 154 C 130 163 116 174 105 186' stroke-width='1.3'/%3E%3Cpath d='M107 98 C 116 90 127 92 131 101 C 135 111 128 120 118 119 C 109 117 103 106 107 98 Z' stroke-width='1.6'/%3E%3Cpath d='M114 119 C 112 126 107 130 100 132' stroke-width='1.3'/%3E%3Cpath d='M95 62 C 83 54 80 38 89 28 C 97 20 111 21 117 30' stroke-width='1.7'/%3E%3Cpath d='M117 30 C 126 22 140 24 145 34 C 150 43 145 55 135 58' stroke-width='1.7'/%3E%3Cpath d='M135 58 C 144 64 145 77 137 84 C 129 91 116 89 111 81' stroke-width='1.7'/%3E%3Cpath d='M111 81 C 108 92 96 96 87 90 C 79 84 78 72 85 66' stroke-width='1.7'/%3E%3Cpath d='M95 62 C 90 52 96 41 106 39 C 115 38 123 44 124 53' stroke-width='1.7'/%3E%3Ccircle cx='112' cy='60' r='7' stroke-width='1.6'/%3E%3Cpath d='M112 53 L112 48 M118 57 L122 53 M118 64 L123 67 M106 64 L101 67 M106 56 L102 52' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;}

.wrap{max-width:760px;margin:0 auto;padding:0 22px;}
a{color:var(--pink);text-decoration-color:var(--pink-soft);text-underline-offset:3px;
  text-decoration-thickness:1px;transition:text-decoration-color .18s;}
a:hover{text-decoration-color:var(--pink);}
*:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---- header:档案标签 + 宋黑标题 + 金短线 ---- */
header{padding:68px 0 36px;text-align:center;position:relative;}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--muted);
  text-transform:uppercase;margin:0 0 18px;}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;width:26px;height:1px;
  background:var(--gold);vertical-align:middle;margin:0 14px;transform:translateY(-1px);}
h1{font-family:var(--display);font-size:clamp(32px,6.6vw,50px);font-weight:600;margin:0;
  line-height:1.22;color:var(--ink);letter-spacing:.01em;}
h1 .en,h1 em{font-family:var(--serif);color:var(--pink);font-style:italic;font-weight:500;}
h1::after{content:"";display:block;width:46px;height:2px;border-radius:2px;
  background:var(--gold);margin:22px auto 0;}
.lead{color:#7b695d;font-size:15.5px;margin:18px auto 0;max-width:44ch;line-height:1.75;text-wrap:balance;}

/* ---- 语言切换 ---- */
.langnav{display:flex;gap:12px;justify-content:center;margin:26px 0 4px;}
.langnav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;
  color:var(--ink-soft);border:1px solid var(--gold-pale);background:var(--card);
  border-radius:999px;padding:7px 16px;transition:border-color .18s,color .18s;}
.langnav a:hover{border-color:var(--pink);color:var(--pink);}
.lang-title{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);
  margin:48px 0 4px;display:flex;align-items:baseline;gap:12px;}

/* ---- 顶部推荐卡(.reco):要事,金双线裱 ---- */
.reco{background:var(--card);border:1px solid var(--gold);outline:1px solid var(--gold-pale);
  outline-offset:3px;border-radius:8px;padding:20px 24px;margin:34px 2px 38px;}
.reco b{color:var(--pink-deep);font-weight:600;}

/* ---- 下载 / 链接卡(.dl) ---- */
.dl{display:grid;gap:10px;margin:14px 0 8px;}
.dl a{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:13px 17px;text-decoration:none;color:var(--ink);font-size:14px;
  word-break:break-all;overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s;}
.dl a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .2s;}
.dl a:hover{border-color:var(--pink-soft);transform:translateY(-2px);box-shadow:var(--shadow);}
.dl a:hover::before{transform:scaleY(1);}
.dl a span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.02em;}

/* ---- 步骤(.step):手绘歪圆步骤号 + 金虚线隔 ---- */
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:30px 0;
  border-top:1px dashed var(--gold-pale);}
.step>div{min-width:0;} /* grid 子项默认 min-width:auto,长命令 pre 会撑爆列(nikki 页同款坑) */
.step .n{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--pink);
  border:1.5px solid var(--ink);background:var(--card);margin-top:1px;
  border-radius:47% 53% 50% 50% / 54% 46% 55% 45%;transform:rotate(-2.5deg);}
.step:nth-of-type(even) .n{transform:rotate(2deg);
  border-radius:52% 48% 55% 45% / 47% 53% 46% 54%;}
.step h3{font-family:var(--display);margin:0 0 10px;font-size:21px;font-weight:600;color:var(--ink);line-height:1.3;}
.step p{margin:0 0 6px;color:var(--ink-soft);}
.step .line{display:block;}
.step b{color:var(--ink);font-weight:600;}
.icon{display:inline-block;min-width:1.4em;text-align:center;color:var(--pink);font-weight:700;}

/* ---- 代码块:深可可 ---- */
pre{background:#2e2519;color:#efe5d0;border-radius:10px;padding:15px 17px;overflow-x:auto;
  font-size:13px;line-height:1.65;margin:12px 0 0;border:1px solid #241c12;}
code{font-family:var(--mono);}
pre code{color:inherit;}

/* ---- 提示条(.tip):手账金虚线框 ---- */
.tip{background:var(--card);border:1.5px dashed var(--gold);
  border-radius:10px;padding:14px 18px;margin:18px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.7;}
.tip b{color:var(--pink-deep);}

/* ---- 截图裱框:金双线 + Fig. 斜体注 ---- */
figure{margin:18px 0 4px;text-align:center;}
figure img{width:100%;height:auto;display:inline-block;background:#fff;padding:6px;
  border:1px solid var(--gold);outline:1px solid var(--gold-pale);outline-offset:3px;border-radius:2px;}
figcaption{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--muted);margin-top:12px;}

/* ---- 占位图(.ph) ---- */
.ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:var(--paper-2);border:1px dashed var(--gold-pale);border-radius:10px;
  font-family:var(--mono);font-size:12px;}

/* ---- 返回目录:浅粉笺条(致 clash-meta 页原版) ---- */
.home{display:inline-block;margin:34px 0 0;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--ink-soft);text-decoration:none;
  background:var(--pink-wash);border:1px solid var(--pink-soft);border-radius:10px;
  padding:10px 18px;transition:color .18s,border-color .18s;}
.home:hover{color:var(--pink);border-color:var(--pink);}

/* ---- 页脚:白蝶落款 + 细线 ---- */
footer{padding:46px 0 64px;text-align:center;color:var(--muted);font-size:14px;
  border-top:1px solid var(--line);margin-top:30px;}
footer::before{content:"";display:block;width:112px;height:76px;margin:0 auto 16px;opacity:.28;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110' fill='none' stroke='%236b5750' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 36 C 78 30 74 24 68 20 M80 36 C 82 30 86 24 92 20'/%3E%3Ccircle cx='68' cy='19' r='1.4'/%3E%3Ccircle cx='92' cy='19' r='1.4'/%3E%3Cpath d='M80 38 C 77 50 77 64 80 76 C 83 64 83 50 80 38 Z'/%3E%3Cpath d='M77 46 C 58 24 28 20 19 36 C 11 51 34 64 74 58'/%3E%3Cpath d='M83 46 C 102 24 132 20 141 36 C 149 51 126 64 86 58'/%3E%3Cpath d='M77 58 C 60 74 42 82 36 72 C 31 63 50 56 76 60'/%3E%3Cpath d='M83 58 C 100 74 118 82 124 72 C 129 63 110 56 84 60'/%3E%3Ccircle cx='44' cy='40' r='4' stroke-width='1.4'/%3E%3Ccircle cx='116' cy='40' r='4' stroke-width='1.4'/%3E%3Cpath d='M56 68 L 54 72 M104 68 L 106 72' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;}
footer a{color:var(--pink);text-decoration:none;}
footer a:hover{text-decoration:underline;text-decoration-color:var(--pink-soft);text-underline-offset:3px;}
footer p{margin:6px 0;}

/* ---- 移动端 ---- */
@media(max-width:560px){
  header{padding:54px 0 30px;}
  body::after{width:132px;height:190px;right:2px;top:10px;opacity:.07;}
  .step{grid-template-columns:38px 1fr;gap:14px;}
  .step .n{width:32px;height:32px;font-size:14px;}
  .eyebrow::before,.eyebrow::after{width:16px;margin:0 9px;}
}