/* ============================================================
   如何学习 · 心灯星图主题
   视觉关键词：星图（深夜底色 + 微光）、灯芯（琥珀主色）、罗盘（导航）、生长（模块色）
   ============================================================ */

:root {
  --amber: #e8a33d;        /* 灯芯琥珀 · 主强调（02 方法） */
  --teal: #3ecfb2;         /* 01 基础 */
  --violet: #a78bfa;       /* 03 进阶 */
  --rose: #fb7185;         /* 04 前沿 */

  --radius: 14px;
  --radius-sm: 9px;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .9, .3, 1);
}

/* ---- 暗色（默认 / 跟随系统优先） ---- */
:root, html[data-theme="dark"] {
  --bg: #0b1020;
  --bg-soft: #101731;
  --card: rgba(255, 255, 255, .035);
  --card-hover: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .1);
  --border-soft: rgba(255, 255, 255, .07);
  --ink: #e9ecf5;
  --ink-soft: #a7adc2;
  --ink-faint: #6d7490;
  --code-bg: rgba(255, 255, 255, .07);
  --glow-1: rgba(232, 163, 61, .07);
  --glow-2: rgba(62, 207, 178, .06);
  --glow-3: rgba(167, 139, 250, .05);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---- 亮色（暖纸） ---- */
html[data-theme="light"] {
  --bg: #f7f4ec;
  --bg-soft: #efeadd;
  --card: rgba(255, 255, 255, .72);
  --card-hover: #ffffff;
  --border: rgba(43, 36, 20, .14);
  --border-soft: rgba(43, 36, 20, .08);
  --ink: #2b2414;
  --ink-soft: #5d5642;
  --ink-faint: #8d8670;
  --code-bg: rgba(43, 36, 20, .07);
  --glow-1: rgba(232, 163, 61, .12);
  --glow-2: rgba(62, 207, 178, .1);
  --glow-3: rgba(167, 139, 250, .09);
  --shadow: 0 8px 24px rgba(60, 50, 20, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
}

/* 星图底光 */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 420px at 12% -8%, var(--glow-1), transparent 70%),
    radial-gradient(640px 420px at 88% 12%, var(--glow-2), transparent 70%),
    radial-gradient(720px 560px at 50% 110%, var(--glow-3), transparent 70%);
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 20px; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.35; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ 头部 ============ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border-soft);
}
.head-in { display: flex; align-items: center; gap: 18px; height: 58px; }
.brand {
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  color: var(--ink); display: inline-flex; align-items: center; gap: 9px;
}
.brand:hover { text-decoration: none; }
.brand-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffd98a, var(--amber) 62%, #9c6414);
  box-shadow: 0 0 12px rgba(232, 163, 61, .55);
}
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--ink-soft); font-size: 14px; padding: 6px 11px; border-radius: 8px;
}
.site-nav a:hover { color: var(--ink); background: var(--card); text-decoration: none; }
.site-nav a.active { color: var(--amber); }
.head-tools { display: flex; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); color: var(--ink-soft); font-size: 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--amber); transform: translateY(-1px); }

/* ============ 首页 ============ */
.hero { padding: 58px 0 30px; text-align: center; }
.hero-kicker {
  letter-spacing: .32em; text-transform: uppercase; font-size: 12px;
  color: var(--amber); font-weight: 600;
}
.hero h1 { font-size: clamp(34px, 6vw, 54px); margin: 12px 0 16px; }
.hero-sub { max-width: 620px; margin: 0 auto; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 12px; justify-content: center; margin: 26px 0 34px; flex-wrap: wrap; }
.btn {
  padding: 11px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  transition: all .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, #f2b556, var(--amber) 55%, #c47f18);
  color: #211502; box-shadow: 0 6px 20px rgba(232, 163, 61, .35);
}
.btn-ghost { border: 1px solid var(--border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--amber); }

.progress-wrap { max-width: 460px; margin: 0 auto; text-align: left; }
.progress-label {
  display: flex; justify-content: space-between; font-size: 13px;
  color: var(--ink-faint); margin-bottom: 6px;
}
.progress-track {
  height: 8px; border-radius: 99px; background: var(--code-bg); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--rose));
  transition: width .6s var(--ease);
}

.quick-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin: 8px 0 40px;
}
.quick-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--card); padding: 18px 20px; color: var(--ink);
  transition: all .25s var(--ease);
}
.quick-card:hover { transform: translateY(-3px); background: var(--card-hover);
  border-color: var(--border); text-decoration: none; box-shadow: var(--shadow); }
.quick-card h3 { margin: 0 0 6px; font-size: 17px; }
.quick-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* ============ 模块卡片 ============ */
.module-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--card); padding: 22px 24px; margin: 0 0 22px;
  scroll-margin-top: 80px;
}
.mod-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mod-head h2 { margin: 0; font-size: 21px; }
.mod-num {
  font-family: var(--serif); font-size: 30px; font-weight: 700; opacity: .9;
}
.mod-desc { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); max-width: 640px; }
.mod-count {
  margin-left: auto; font-size: 12.5px; color: var(--ink-faint);
  border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 10px;
}
.mod-teal .mod-num { color: var(--teal); }
.mod-amber .mod-num { color: var(--amber); }
.mod-violet .mod-num { color: var(--violet); }
.mod-rose .mod-num { color: var(--rose); }

.kp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kp-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--ink); border: 1px solid transparent;
  transition: all .18s var(--ease);
}
.kp-link:hover {
  background: var(--card-hover); border-color: var(--border-soft);
  text-decoration: none; transform: translateX(3px);
}
.kp-num {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  min-width: 26px;
}
.mod-teal .kp-link:hover .kp-num { color: var(--teal); }
.mod-amber .kp-link:hover .kp-num { color: var(--amber); }
.mod-violet .kp-link:hover .kp-num { color: var(--violet); }
.mod-rose .kp-link:hover .kp-num { color: var(--rose); }
.kp-t { flex: 1; font-size: 15px; }
.checkpoint {
  margin: 16px 0 0; font-size: 13.5px; color: var(--ink-soft);
  border-top: 1px dashed var(--border-soft); padding-top: 12px;
}
.chain { font-size: 14.5px; line-height: 2.1; }

.dep-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dep-list li { font-size: 14px; }
.dep-pre { color: var(--ink-faint); font-size: 13px; }

/* ============ 页头（二级页） ============ */
.page-head { padding: 42px 0 22px; }
.page-head h1 { font-size: clamp(28px, 4.5vw, 38px); margin: 0 0 12px; }
.page-head p { color: var(--ink-soft); max-width: 720px; margin: 0; }

/* ============ 知识点页 ============ */
.kp-page .wrap { max-width: 1120px; }
.crumbs { font-size: 13px; color: var(--ink-faint); padding: 26px 0 4px; }
.crumbs a { color: var(--ink-soft); }
.kp-head { padding: 10px 0 18px; border-bottom: 1px solid var(--border-soft); }
.kp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp-id { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.kp-head h1 { font-size: clamp(26px, 4.5vw, 36px); margin: 12px 0 4px; }
.kp-actions { margin-top: 10px; }
.done-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 16px; font-size: 13.5px; cursor: pointer;
  transition: all .2s var(--ease);
}
.done-btn:hover { border-color: var(--amber); color: var(--ink); }
.done-btn.is-done {
  background: linear-gradient(135deg, rgba(62, 207, 178, .18), rgba(62, 207, 178, .08));
  border-color: var(--teal); color: var(--teal);
}

.kp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 40px; padding: 26px 0 8px; }
.toc {
  position: sticky; top: 82px; align-self: start;
  font-size: 13px; max-height: calc(100vh - 110px); overflow: auto;
}
.toc-title { color: var(--ink-faint); letter-spacing: .12em; font-size: 11.5px; margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-soft); }
.toc li a {
  display: block; padding: 4px 0 4px 12px; color: var(--ink-soft);
  border-left: 2px solid transparent; margin-left: -1.5px;
}
.toc li a:hover { color: var(--amber); text-decoration: none; }
.toc-l3 { padding-left: 14px; font-size: 12.5px; }

/* 正文排版 */
.kp-content h2 { font-size: 22px; margin: 34px 0 12px; scroll-margin-top: 84px; }
.kp-content h3 { font-size: 17.5px; margin: 26px 0 10px; scroll-margin-top: 84px; }
.kp-content h4 { font-size: 15.5px; margin: 20px 0 8px; }
.kp-content p { margin: 10px 0; color: var(--ink); }
.kp-content li { margin: 4px 0; }
.kp-content ul, .kp-content ol { padding-left: 24px; }
.kp-content ul.sub { margin: 4px 0; }
blockquote {
  margin: 14px 0; padding: 10px 18px; border-left: 3px solid var(--amber);
  background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft); font-size: 14.5px;
}
blockquote p { margin: 4px 0; color: var(--ink-soft); }
code {
  font-family: var(--mono); font-size: .88em; background: var(--code-bg);
  padding: 2px 6px; border-radius: 6px;
}
pre {
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto;
  line-height: 1.6; margin: 16px 0;
}
pre code { background: none; padding: 0; font-size: 13.5px; color: var(--ink-soft); }
hr { border: none; border-top: 1px solid var(--border-soft); margin: 28px 0; }

.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th { background: var(--card); font-weight: 600; font-size: 13.5px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card); }

/* chips */
.chip {
  display: inline-block; font-size: 12px; font-weight: 600; border-radius: 99px;
  padding: 2.5px 10px; border: 1px solid transparent; line-height: 1.6;
}
.chip.mod-teal { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.chip.mod-amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.chip.mod-violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.chip.mod-rose { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 45%, transparent); background: color-mix(in srgb, var(--rose) 10%, transparent); }
.level-0 { color: var(--ink-soft); border-color: var(--border); }
.level-1 { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.level-2 { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.level-3 { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, transparent); }

/* meta rows / prev-next */
.meta-rows { border-top: 1px solid var(--border-soft); padding: 16px 0 6px; }
.meta-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.meta-label { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .1em; }
.rel-link {
  display: inline-block; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 12px;
  transition: all .18s var(--ease);
}
a.rel-link:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
span.rel-link { cursor: default; }

.pn-nav { display: flex; gap: 14px; padding: 20px 0 50px; }
.pn {
  flex: 1; border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
  transition: all .2s var(--ease); min-height: 58px;
}
a.pn:hover { border-color: var(--amber); text-decoration: none; transform: translateY(-2px); }
.pn.next { text-align: right; }
.pn-label { font-size: 12px; color: var(--ink-faint); }
.pn-title { font-size: 14.5px; color: var(--ink); font-weight: 600; }

/* ============ 搜索 ============ */
.search-overlay[hidden] { display: none; }
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 55%, rgba(0, 0, 0, .5));
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 0;
}
.search-box {
  width: min(620px, 100%); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
#search-input {
  width: 100%; border: none; outline: none; background: transparent;
  color: var(--ink); font-size: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft); font-family: var(--sans);
}
.search-results { max-height: 46vh; overflow: auto; }
.search-item {
  display: block; padding: 11px 20px; color: var(--ink); border-bottom: 1px solid var(--border-soft);
}
.search-item:hover, .search-item.is-active { background: var(--card-hover); text-decoration: none; }
.search-item .si-title { font-weight: 600; font-size: 14.5px; }
.search-item .si-meta { font-size: 12px; color: var(--ink-faint); margin-right: 8px; }
.search-item .si-x { font-size: 12.5px; color: var(--ink-soft); display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 22px 20px; color: var(--ink-faint); font-size: 14px; }
.search-hint {
  padding: 9px 20px; font-size: 12px; color: var(--ink-faint);
  border-top: 1px solid var(--border-soft);
}

/* ============ 页脚 ============ */
.site-foot {
  border-top: 1px solid var(--border-soft); padding: 22px 0 34px;
  color: var(--ink-faint); font-size: 13px; margin-top: 30px;
}
.site-foot .wrap { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ 动效 / 响应式 ============ */
/* ============ 移动端菜单 ============ */
#menu-btn { display: none; }
.mobile-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  flex-direction: column; padding: 6px 18px 12px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 11px 6px; color: var(--ink); border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.mobile-nav a:last-child { border-bottom: none; }

/* ============ 完成标记 ============ */
.kp-link.is-done .kp-num { color: var(--teal); }
.kp-link.is-done .kp-t::after { content: " ✓"; color: var(--teal); font-weight: 700; }

/* ============ 自测题参考答案（折叠） ============ */
.answers {
  margin: 18px 0; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--card); overflow: hidden;
}
.answers summary {
  cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: 14.5px;
  color: var(--teal); list-style: none; user-select: none;
}
.answers summary::-webkit-details-marker { display: none; }
.answers summary::before { content: "▸ "; }
.answers[open] summary::before { content: "▾ "; }
.answers summary:hover { background: var(--card-hover); }
.answers-body { padding: 6px 20px 14px; border-top: 1px dashed var(--border-soft); }
.answers-body p { color: var(--ink-soft); font-size: 14.5px; margin: 8px 0; }

/* ============ SVG 图示 ============ */
.fig {
  margin: 18px 0; padding: 16px 14px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--card); overflow-x: auto;
}
.fig svg { display: block; width: 100%; height: auto; color: var(--ink); max-width: 640px; margin: 0 auto; }

/* ============ 闪卡复习页 ============ */
.review-page .module-card { max-width: 720px; margin-left: auto; margin-right: auto; }
.review-stats { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 12px; }
.review-stats b { color: var(--amber); font-size: 15px; }
.review-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.review-filters button {
  border: 1px solid var(--border-soft); background: var(--card); color: var(--ink-soft);
  border-radius: 99px; padding: 4px 13px; font-size: 12.5px; cursor: pointer;
  transition: all .18s var(--ease);
}
.review-filters button:hover { color: var(--ink); }
.review-filters button.active { border-color: var(--amber); color: var(--amber); }
.flashcard {
  min-height: 250px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-hover); display: flex; align-items: center; justify-content: center;
  padding: 30px 26px; cursor: pointer; transition: border-color .2s var(--ease);
}
.flashcard:hover { border-color: var(--amber); }
.fc-face { text-align: center; max-width: 560px; }
.fc-front .fc-chips { margin-bottom: 10px; }
.fc-front h2 { margin: 6px 0 10px; font-size: 21px; }
.fc-prompt { color: var(--ink-soft); font-size: 14.5px; }
.fc-back p { color: var(--ink); font-size: 15px; }
.deck-points { text-align: left; display: inline-block; margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; }
.fc-link { display: inline-block; margin-top: 14px; font-size: 13px; }
.grade-btns { display: flex; gap: 10px; margin-top: 16px; }
.grade {
  flex: 1; border-radius: var(--radius-sm); border: 1px solid var(--border);
  padding: 11px 8px; cursor: pointer; background: var(--card); color: var(--ink);
  font-size: 14.5px; font-weight: 600; transition: all .18s var(--ease);
}
.grade span { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-top: 3px; }
.grade.g0:hover { border-color: var(--rose); color: var(--rose); }
.grade.g1:hover { border-color: var(--amber); color: var(--amber); }
.grade.g2:hover { border-color: var(--teal); color: var(--teal); }
.review-hint { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; }
.review-done { text-align: center; padding: 34px 10px; color: var(--ink-soft); }
.review-done .big { font-size: 30px; display: block; margin-bottom: 8px; }

/* ============ 页脚导航 ============ */
.site-foot { position: relative; }
.foot-nav { display: inline-flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.foot-nav a { color: var(--ink-faint); font-size: 12.5px; }
.foot-nav a:hover { color: var(--ink-soft); }
.site-foot .wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ============ 打印样式 ============ */
@media print {
  .site-head, .site-foot, .toc, .pn-nav, .kp-actions, .search-overlay, .bg-glow,
  .review-filters, .grade-btns, .review-hint { display: none !important; }
  body { background: #fff; color: #111; }
  .bg-glow { background: none; }
  .kp-layout { grid-template-columns: 1fr; }
  .module-card, .fig, .answers, .table-wrap { break-inside: avoid; }
  .answers summary { color: #0a7a63; }
  a { color: #7a5a10; }
}

/* ============ 响应式 ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
main > * { animation: fade-up .5s var(--ease) both; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .1s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .kp-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 640px) {
  .site-nav { display: none; }
  #menu-btn { display: inline-flex; }
  .head-in { justify-content: space-between; }
  .hero { padding-top: 40px; }
  .module-card { padding: 18px 16px; }
  .pn-nav { flex-direction: column; }
  .pn.next { text-align: left; }
  .grade-btns { flex-direction: column; }
}
