/* V3: 定位校准。以个人积累为主体，教程作为其中一条分支。 */
:root{--accent-soft:#e8ded0}

/* ---------- 首页：笔记碎片代替工具连接图 ---------- */
.personal-hero{padding-top:34px}
.personal-hero .hero-grid{grid-template-columns:1.24fr .94fr;gap:64px;align-items:center}
.note-fragment{display:block;position:relative;background:var(--surface);border:1px solid var(--line);padding:30px 32px 24px;transform:rotate(-1.4deg);box-shadow:14px 18px 0 var(--paper-deep),0 20px 46px #21221f10;transition:transform .25s,box-shadow .25s}
.note-fragment:hover{transform:rotate(0) translateY(-4px);box-shadow:18px 22px 0 var(--paper-deep),0 26px 50px #21221f16}
.note-fragment:before{content:"";position:absolute;left:50%;top:-9px;width:86px;height:18px;margin-left:-43px;background:#e6ddc9aa;transform:rotate(-2deg);border-left:1px solid #ffffff66;border-right:1px solid #ffffff66}
.note-fragment-top{display:block;font:9px/1.6 var(--mono);letter-spacing:.14em;color:var(--accent-dark)}
.note-fragment-date{display:block;font:9px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted);margin-top:4px}
.note-fragment blockquote{margin:18px 0 20px;font-family:var(--serif);font-size:21px;line-height:1.85;color:var(--ink);letter-spacing:-.01em}
.note-fragment-lines{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.note-fragment-lines i{display:block;height:1px;background:var(--line)}
.note-fragment-lines i:nth-child(2){width:88%}
.note-fragment-lines i:nth-child(3){width:62%}
.note-fragment-link{display:inline-block;font-size:11px;color:var(--accent-dark);border-bottom:1px solid #d8b3a3;padding-bottom:3px}
.note-fragment:hover .note-fragment-link{color:var(--accent-dark);border-color:var(--accent)}
.personal-hero .hero-note{margin-top:16px;border-top:0;padding-top:0}
.hero-side{min-width:0}

/* ---------- 首页：一次具体尝试 ---------- */
.case-section{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.case-section .section-heading{margin-bottom:26px;align-items:flex-end}
.case-status{font:10px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:5px 9px;white-space:nowrap;align-self:flex-end}
.case-layout{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
.case-intro{border-left:2px solid var(--accent);padding-left:20px;max-width:780px}
.case-intro h3{font-size:25px;line-height:1.5;margin:12px 0 10px}
.case-intro>p{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:18px}
.case-intro .primary-link{margin-top:0;padding:11px 16px;font-size:11px;gap:18px}
.case-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
.case-steps article{padding:20px 20px 0 0;border-right:1px solid var(--line)}
.case-steps article:last-child{border-right:0;padding-right:0}
.case-steps article:not(:first-child){padding-left:20px}
.case-steps span{font:10px/1.6 var(--mono);letter-spacing:.05em;color:var(--accent-dark)}
.case-steps h3{font-size:18px;line-height:1.55;margin:11px 0 8px}
.case-steps p{font-size:12px;line-height:1.85;color:var(--muted);margin:0}

/* ---------- 首页：三条主线 ---------- */
.three-topics{grid-template-columns:repeat(3,minmax(0,1fr))}
.three-topics .topic-card{min-height:238px;padding:24px 22px}
.three-topics .topic-card h3{font-size:24px}
.three-topics .topic-card p{font-size:13px;line-height:1.9}

/* ---------- 从这里开始 ---------- */
.start-head{padding-bottom:12px;border-bottom:0}
.start-head h1{font-size:44px}
.start-route{position:relative;display:flex;flex-direction:column;gap:0;max-width:860px;margin:0 auto}
.start-step{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--line);position:relative}
.start-step:first-child{border-top:0;padding-top:0}
.start-step-index{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px}
.start-step-index span{font:11px var(--mono);color:var(--accent-dark);letter-spacing:.08em}
.start-step-index i{flex:1;width:1px;background:linear-gradient(var(--line-dark),transparent);min-height:40px}
.start-step:last-child .start-step-index i{display:none}
.start-step h2{font-size:29px;line-height:1.45;margin:8px 0 12px}
.start-step p{font-family:var(--sans);font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 14px;max-width:620px}
.start-step .text-link{font-size:12px}
.start-action{margin-top:46px;padding:34px 38px;background:var(--ink);color:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:0}
.start-action .eyebrow{color:#a9aca2}
.start-action h2{font-size:27px;line-height:1.5;margin:12px 0 12px;color:var(--surface)}
.start-action p{font-size:13px;line-height:1.95;color:#b8bbb2;margin:0 0 22px;max-width:640px}
.start-action .primary-link{background:var(--surface);color:var(--ink);margin-top:0}
.start-action .primary-link:hover{background:var(--accent);color:var(--surface)}

/* ---------- 全部内容：文章类型筛选 ---------- */
.type-filters{margin:-4px 0 0;align-items:center;gap:8px}
.filter-label{font:10px/1.6 var(--mono);letter-spacing:.1em;color:var(--muted);margin-right:4px}
.type-filters .filter-chip{border-style:dashed;font-size:11px;min-height:36px;padding:6px 12px}
.type-filters .filter-chip.active{border-style:solid}

/* ---------- 关于我 ---------- */
.about-head h1{font-size:42px}
.personal-about{padding-top:46px;align-items:start}
.personal-about blockquote{margin:26px 0 0;padding:20px 24px;border-left:2px solid var(--accent);background:var(--paper-deep);font-family:var(--serif);font-size:16px;line-height:1.95;color:var(--ink-soft)}
.about-facts{margin-bottom:22px}
.about-facts ul{list-style:none;padding:0;margin:14px 0 0}
.about-facts li{font-size:13px;line-height:1.9;color:var(--muted);padding:11px 0 11px 20px;border-top:1px solid var(--line);position:relative}
.about-facts li:last-child{border-bottom:1px solid var(--line)}
.about-facts li:before{content:"";position:absolute;left:2px;top:19px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- 响应式 ---------- */
@media(max-width:1050px){
  .personal-hero .hero-grid{gap:34px;grid-template-columns:1.15fr .95fr}
  .note-fragment{padding:24px 24px 20px}
  .note-fragment blockquote{font-size:18px}
  .case-steps h3{font-size:18px}
  .start-head h1{font-size:38px}
}
@media(max-width:900px){
  .case-layout{grid-template-columns:1fr;gap:26px}
  .case-intro{border-left:2px solid var(--accent)}
  .case-steps{grid-template-columns:1fr;border-top:0}
  .case-steps article{border-right:0;border-top:1px solid var(--line);padding:16px 0 0 0!important;margin-top:16px}
  .case-steps article:first-child{margin-top:0}
}
@media(max-width:760px){
  .personal-hero{padding-top:26px}
  .personal-hero .hero-grid{display:block}
  .hero-side{margin-top:30px}
  .note-fragment{transform:none;padding:22px 22px 18px;box-shadow:8px 10px 0 var(--paper-deep)}
  .note-fragment:hover{transform:none;box-shadow:8px 10px 0 var(--paper-deep)}
  .note-fragment blockquote{font-size:18px;line-height:1.8;margin:14px 0 16px}
  .personal-hero .hero-note{margin-top:14px}
  .case-section{padding:36px 0}
  .case-section .section-heading{margin-bottom:20px}
  .case-status{align-self:flex-start;margin-top:10px;white-space:normal}
  .case-intro h3{font-size:22px}
  .case-steps{grid-template-columns:1fr;border-top:0}
  .case-steps article{border-right:0;border-top:1px solid var(--line);padding:16px 0 0 0!important;margin-top:16px}
  .case-steps article:first-child{margin-top:0}
  .case-steps h3{font-size:18px}
  .three-topics{grid-template-columns:1fr}
  .three-topics .topic-card{min-height:0;display:block;padding:20px 0}
  .three-topics .topic-number{display:block;margin:0 0 8px;font-size:10px}
  .three-topics .topic-card h3{font-size:23px;margin:0 0 8px}
  .three-topics .topic-card p{font-size:13px;line-height:1.85;margin:0 0 12px;padding-right:0}
  .three-topics .topic-bottom{flex-direction:row;justify-content:space-between;align-items:center;padding:0 0 2px;gap:10px}
  .three-topics .topic-bottom span:first-child{white-space:nowrap}
  .three-topics .topic-arrow{font-size:19px}
  .start-head h1{font-size:30px;line-height:1.45}
  .start-step{grid-template-columns:34px 1fr;gap:14px;padding:26px 0}
  .start-step h2{font-size:22px;line-height:1.5}
  .start-step p{font-size:13px}
  .start-step-index span{font-size:10px}
  .start-action{margin-top:32px;padding:26px 22px}
  .start-action h2{font-size:23px;line-height:1.5}
  .start-action p{font-size:12px}
  .type-filters{margin:-4px 0 0;gap:7px}
  .filter-label{width:100%;margin:0 0 2px}
  .type-filters .filter-chip{min-height:36px;font-size:11px}
  .about-head h1{font-size:29px;line-height:1.45}
  .personal-about{padding-top:32px}
  .personal-about blockquote{font-size:15px;padding:16px 18px}
  .about-facts li{font-size:12px;padding:10px 0 10px 18px}
  .recent-section .article-row{align-items:start}
  .recent-section .row-index{padding-top:8px}
  .recent-section .row-arrow{padding-top:1px}
}
@media(prefers-reduced-motion:reduce){
  .note-fragment,.note-fragment:hover{transform:none;transition:none}
}