/* wyfengliu.lol — sticky header, left rail, indexed card stream. Light only. */

:root {
  --bg: #f7f4ef;
  --surface: #fffdfa;
  --surface-2: #efeae1;
  --surface-3: #e6dfd2;
  --ink: #221a1c;
  --ink-2: #4c4245;
  --ink-3: #7a6f72;
  --line: #e2dbce;
  --line-2: #cfc5b4;
  --wine: #7b2d3b;
  --wine-deep: #5e202c;
  --wine-soft: #f2e6e8;
  --onwine: #fffdfa;
  --ochre: #8a6216;
  --ochre-bg: #fbf2dc;
  --brick: #a8442c;
  --brick-bg: #faece7;
  --ring: #7b2d3b;

  --cta-fill: #7b2d3b;
  --cta-edge: #5e202c;
  --cta-elevation: 0 8px 22px rgba(94, 32, 44, 0.26);
  --cta-rail: #f2e6e8;
  --cta-sheen: #fdf6f7;

  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, sans-serif;
  --mono: "SFMono-Regular", "Consolas", "Menlo", "Courier New", monospace;

  --p1: 4px;
  --p2: 8px;
  --p3: 12px;
  --p4: 16px;
  --p5: 24px;
  --p6: 32px;
  --p7: 48px;
  --p8: 64px;

  --r1: 2px;
  --r2: 4px;
  --r3: 7px;
  --span: 1180px;
  --read: 720px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --fast: 150ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--wine);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.32;
}

h2 {
  font-size: 21px;
  line-height: 1.4;
}

h3 {
  font-size: 17px;
  line-height: 1.5;
}

p {
  margin: 0 0 var(--p3);
}

p:last-child {
  margin-bottom: 0;
}

.span {
  width: 100%;
  max-width: var(--span);
  margin: 0 auto;
  padding: 0 var(--p5);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* sticky header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topline {
  height: 3px;
  background: var(--wine);
}

.barrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p4);
  min-height: 62px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--ink);
}

.mark:hover {
  text-decoration: none;
}

.mark-a {
  color: var(--wine);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}

.mark-b {
  padding: 1px 7px;
  color: var(--onwine);
  background: var(--wine);
  border-radius: var(--r1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.tabrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p1);
  min-width: 0;
}

.tablink {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--p3);
  color: var(--ink-2);
  font-size: 15px;
  border-bottom: 2px solid transparent;
}

.tablink:hover {
  color: var(--wine);
  text-decoration: none;
}

.tablink.is-on {
  color: var(--wine);
  border-bottom-color: var(--wine);
  font-weight: 700;
}

.quickfind {
  display: flex;
  align-items: stretch;
  gap: var(--p2);
  margin-left: auto;
}

.quickfind input {
  width: 190px;
  min-height: 38px;
  padding: 0 var(--p3);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
}

.quickfind button {
  min-height: 38px;
  padding: 0 var(--p3);
  color: var(--onwine);
  background: var(--wine);
  border: 1px solid var(--wine);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}

.quickfind button:hover {
  background: var(--wine-deep);
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 40px;
  margin-left: auto;
  padding: 0 var(--p3);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
}

.steprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p3);
  padding-top: var(--p2);
  padding-bottom: var(--p3);
  border-top: 1px solid var(--line);
}

.steplabel {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.stepchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p2);
}

.stepchip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--p3);
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 999px;
  font-size: 12.5px;
}

.stepchip:hover {
  color: var(--onwine);
  background: var(--wine);
  text-decoration: none;
}

/* layout */

.mainwrap {
  padding-top: var(--p4);
  padding-bottom: var(--p7);
}

.workarea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--p6);
  align-items: start;
  padding-top: var(--p4);
}

.content {
  min-width: 0;
}

.lead {
  padding: var(--p5) 0 0;
}

.lead h1 {
  margin-bottom: var(--p3);
}

.lead p {
  max-width: 860px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.8;
}

/* rail */

.rail {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--p3);
  min-width: 0;
}

.railbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.railcap {
  padding: var(--p2) var(--p3);
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.raillist {
  margin: 0;
  padding: var(--p1) 0;
  list-style: none;
}

.raillist li {
  border-top: 1px solid var(--line);
}

.raillist li:first-child {
  border-top: 0;
}

.raillist a {
  display: flex;
  align-items: center;
  gap: var(--p2);
  min-height: 44px;
  padding: var(--p1) var(--p3);
  color: var(--ink);
  font-size: 14.5px;
}

.raillist a:hover {
  color: var(--wine);
  background: var(--surface-2);
  text-decoration: none;
}

.rnum {
  color: var(--line-2);
  font-family: var(--mono);
  font-size: 11.5px;
}

.rname {
  min-width: 0;
}

.rcnt {
  margin-left: auto;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
}

.railfind {
  display: flex;
  align-items: stretch;
  gap: var(--p2);
  padding: var(--p3);
}

.railfind input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 var(--p2);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  font-family: var(--sans);
  font-size: 14px;
}

.railfind button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 var(--p3);
  color: var(--onwine);
  background: var(--wine);
  border: 1px solid var(--wine);
  border-radius: var(--r2);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}

.railfind button:hover {
  background: var(--wine-deep);
}

.railnote {
  padding: 0 var(--p3) var(--p3);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}

.miniwall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p2);
  padding: var(--p3);
}

.minitag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font-size: 11.5px;
}

.minitag:hover {
  color: var(--wine);
  border-color: var(--line-2);
  text-decoration: none;
}

/* slots (sections) */

.slot {
  margin-top: var(--p6);
}

.slotfirst {
  margin-top: 0;
}

.slotcap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--p2);
  padding-bottom: var(--p2);
  border-bottom: 1px solid var(--line-2);
}

.slotcap span,
.slotcap a {
  color: var(--ink-3);
  font-size: 12.5px;
}

.slotcap a:hover {
  color: var(--wine);
}

.slotkicker {
  display: inline-block;
  margin-bottom: var(--p2);
  color: var(--wine);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.slotnote {
  margin-top: var(--p3);
  color: var(--ink-3);
  font-size: 13px;
}

/* step grid */

.stepgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p2);
  margin: var(--p3) 0 0;
  padding: 0;
  list-style: none;
}

.stepgrid .stepcard:last-child {
  grid-column: 1 / -1;
}

.stepcard {
  display: flex;
  align-items: flex-start;
  gap: var(--p3);
  padding: var(--p3) var(--p4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.stepno {
  color: var(--wine);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
}

.stepcard h3 a {
  color: var(--ink);
}

.stepcard h3 a:hover {
  color: var(--wine);
}

.stepcard p {
  margin: var(--p1) 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.65;
}

/* card stream */

.stream {
  margin: var(--p2) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.card {
  display: flex;
  align-items: flex-start;
  gap: var(--p4);
  padding: var(--p4) var(--p2) var(--p4) 0;
  border-bottom: 1px solid var(--line);
}

.cardnum {
  flex: 0 0 30px;
  color: var(--line-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.9;
}

.cardmain {
  flex: 1 1 auto;
  min-width: 0;
}

.cardmain h3 {
  font-size: 18px;
}

.cardmain h3 a {
  color: var(--ink);
}

.cardmain h3 a:hover {
  color: var(--wine);
}

.cardmain p {
  margin: var(--p1) 0 0;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.7;
}

.cardmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p2);
  margin-top: var(--p2);
}

.cardcol {
  padding: 1px 7px;
  color: var(--onwine);
  background: var(--wine);
  border-radius: var(--r1);
  font-size: 11.5px;
  font-weight: 700;
}

.cardcol:hover {
  color: var(--onwine);
  background: var(--wine-deep);
  text-decoration: none;
}

.cardgo {
  flex: 0 0 auto;
  align-self: center;
  padding: var(--p2) var(--p3);
  color: var(--wine);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  font-size: 13px;
}

.cardgo:hover {
  color: var(--onwine);
  background: var(--wine);
  border-color: var(--wine);
  text-decoration: none;
}

/* filters */

.ftabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p2);
  margin-top: var(--p4);
}

.ftab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--p3);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  cursor: pointer;
}

.ftab span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
}

.ftab:hover {
  color: var(--wine);
  border-color: var(--wine);
}

.ftab.is-on {
  color: var(--onwine);
  background: var(--wine);
  border-color: var(--wine);
}

.ftab.is-on span {
  color: var(--cta-sheen);
}

.ftcount {
  margin-top: var(--p3);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
}

.tablewrap {
  margin-top: var(--p4);
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.idx {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.65;
}

.idx th,
.idx td {
  padding: var(--p3) var(--p4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.idx th {
  color: var(--ink-2);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.idx tbody tr:last-child td {
  border-bottom: 0;
}

.tname a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.tname a:hover {
  color: var(--wine);
}

.tcol a {
  color: var(--ink-2);
  font-size: 12.5px;
}

.ttags {
  color: var(--ink-3);
  font-size: 12.5px;
}

/* route bar */

.routebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p2);
  margin-top: var(--p3);
  padding: var(--p2) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rstep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--p2);
  color: var(--ink-3);
  border-radius: var(--r1);
  font-size: 12.5px;
}

.rstep span {
  font-family: var(--mono);
  font-size: 10.5px;
}

.rstep:hover {
  color: var(--wine);
  background: var(--surface-2);
  text-decoration: none;
}

.rstep.is-here {
  color: var(--onwine);
  background: var(--wine);
}

/* crumbs */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p2);
  padding-top: var(--p3);
  color: var(--ink-3);
  font-size: 12.5px;
}

.crumbs a {
  color: var(--ink-3);
}

.crumbs a:hover {
  color: var(--wine);
}

.csep {
  color: var(--line-2);
}

/* sheet */

.sheet {
  margin-top: var(--p4);
  padding: var(--p5) var(--p6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.sheettop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p2);
  padding-bottom: var(--p3);
  border-bottom: 1px solid var(--line);
}

.sheetcol {
  padding: 1px 7px;
  color: var(--onwine);
  background: var(--wine);
  border-radius: var(--r1);
  font-size: 11.5px;
  font-weight: 700;
}

.sheetcol:hover {
  color: var(--onwine);
  background: var(--wine-deep);
  text-decoration: none;
}

.sheet h1 {
  margin: var(--p4) 0 var(--p3);
}

.sheetlead {
  padding-bottom: var(--p4);
  border-bottom: 1px dashed var(--line-2);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.8;
}

.prose {
  max-width: var(--read);
  padding-top: var(--p4);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.85;
}

.prose p {
  margin: 0 0 var(--p4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.intro {
  padding-top: var(--p3);
  color: var(--ink-2);
}

.sheetfoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p4);
  margin-top: var(--p5);
  padding-top: var(--p3);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.rel {
  margin: var(--p3) 0 0;
  padding: 0;
  list-style: none;
}

.rel li {
  padding: var(--p3) 0;
  border-top: 1px solid var(--line);
}

.rel li:first-child {
  border-top: 0;
}

.rel a {
  display: block;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 700;
}

.rel a:hover {
  color: var(--wine);
}

.rel span {
  display: block;
  margin-top: var(--p1);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.65;
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p2);
  margin-top: var(--p4);
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--p4);
  color: var(--onwine);
  background: var(--wine);
  border-radius: var(--r2);
  font-size: 14px;
}

.btn:hover {
  color: var(--onwine);
  background: var(--wine-deep);
  text-decoration: none;
}

.btnline {
  color: var(--wine);
  background: transparent;
  border: 1px solid var(--line-2);
}

.btnline:hover {
  color: var(--wine);
  background: var(--surface-2);
}

/* footer */

.foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.footrow {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--p6);
  padding: var(--p6) 0 var(--p5);
}

.footabout a {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
}

.footabout p {
  margin-top: var(--p2);
  max-width: 430px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
}

.footnav h2 {
  margin-bottom: var(--p2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.footnav a {
  display: block;
  padding: var(--p1) 0;
  color: var(--ink);
  font-size: 13.5px;
}

.footnav a:hover {
  color: var(--wine);
}

.footend {
  padding: var(--p3) 0 var(--p5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
}

/* responsive */

@media (max-width: 1024px) {
  .workarea {
    grid-template-columns: minmax(0, 1fr) 196px;
    gap: var(--p4);
  }

  .rail {
    top: 138px;
  }

  .quickfind input {
    width: 150px;
  }
}

@media (max-width: 820px) {
  .span {
    padding: 0 var(--p4);
  }

  h1 {
    font-size: 26px;
  }

  .barrow {
    gap: var(--p2);
    padding-top: var(--p2);
    padding-bottom: var(--p2);
  }

  .burger {
    display: inline-flex;
  }

  .tabrow {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--p2);
  }

  .tabrow.is-open {
    display: flex;
  }

  .tablink {
    min-height: 44px;
    padding: 0 var(--p2);
    border-bottom: 1px solid var(--line);
  }

  .tablink.is-on {
    border-bottom-color: var(--line);
  }

  .quickfind {
    display: none;
  }

  .workarea {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--p3);
  }

  .rail {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .stepgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stepgrid .stepcard:last-child {
    grid-column: auto;
  }

  .sheet {
    padding: var(--p4);
  }

  .card {
    gap: var(--p3);
    padding: var(--p3) 0;
  }

  .cardgo {
    display: none;
  }

  .footrow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--p4);
    padding: var(--p5) 0;
  }
}

@media (max-width: 460px) {
  .rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .verb,
  .ftab {
    flex: 1 1 auto;
  }

  .prose {
    font-size: 16px;
  }

  .cardnum {
    flex-basis: 24px;
  }

  .sheet h1 {
    margin-top: var(--p3);
  }
}