.curve-atlas { --curve-line: #dce5f1; }
.curve-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.curve-kicker { color: var(--blue); font-size: 12px; font-weight: 650; letter-spacing: 2px; }
.curve-heading h2 { margin: 10px 0; font-size: 28px; letter-spacing: -1px; }
.curve-heading h2 span { display: inline-block; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; margin-left: 8px; }
.curve-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.curve-heading-mark { color: var(--blue); background: var(--blue-surface); border: 1px solid var(--blue-border); border-radius: 18px; font-size: 46px; padding: 4px 22px; }
.curve-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 24px; align-items: start; }
.curve-directory { padding: 4px 12px 12px 0; }
.curve-directory-group + .curve-directory-group { border-top: 1px solid var(--curve-line); margin-top: 16px; padding-top: 12px; }
.curve-directory h3 { font-size: 11px; letter-spacing: 1px; color: var(--muted); margin: 10px 12px 7px; }
.curve-directory button { width: 100%; text-align: left; padding: 11px 12px; color: var(--ink-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 13px; line-height: 1.6; transition: all 0.15s ease; }
.curve-directory button:hover { background: #edf2fa; color: var(--ink); }
.curve-directory button.active { color: var(--blue); background: #eff6ff; font-weight: 600; border-color: #bfdbfe; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05); }
#curve-detail { min-width: 0; }
.curve-detail { background: white; border: 1px solid var(--curve-line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-card); }
.curve-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.curve-chapter { color: var(--blue); font-size: 12px; font-weight: 600; }
.curve-demo-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 5px; }
.curve-detail h3 { margin: 16px 0 7px; font-size: 23px; letter-spacing: -.6px; }
.curve-subtitle { font-size: 14px; color: var(--muted); margin: 0 0 22px; line-height: 1.7; }
.curve-scenes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.curve-scenes button { min-height: 38px; padding: 8px 12px; font-size: 12px; background: #f4f7fb; color: var(--muted); border: 1px solid #e7edf5; border-radius: 7px; }
.curve-scenes button.active { color: white; background: var(--blue); border-color: var(--blue); }
.curve-scenes button:hover { border-color: var(--blue); }
.curve-figure { margin: 0; padding: 18px 12px 14px; background: #fafcfe; border: 1px solid #e7edf5; border-radius: 10px; }
.curve-figure + .curve-figure { margin-top: 14px; }
.curve-figure figcaption { margin: 0 6px 10px; color: var(--ink-secondary); font-size: 13px; font-weight: 600; line-height: 1.6; }
.curve-svg { display: block; width: 100%; max-width: 680px; margin: 0 auto; overflow: visible; }
.curve-axis { fill: none; stroke: #63758b; stroke-width: 1.5; }
.curve-axis-title { font-size: 16px; fill: #35465f; }
.curve-tick { font-size: 14px; fill: #63758b; }
.curve-grid { stroke: #e6edf5; stroke-width: 1; }
.curve-zero { stroke: #94a3b8; stroke-width: 1; }
.curve-line { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.curve-guide { fill: none; stroke: #a4b2c4; stroke-width: 1; stroke-dasharray: 4 4; }
.curve-point-label { font-size: 15px; font-weight: 600; paint-order: stroke; stroke: #fafcfe; stroke-width: 4px; stroke-linejoin: round; }
.curve-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 8px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.curve-legend span { display: inline-flex; align-items: center; gap: 7px; }
.curve-legend i { width: 19px; border-top: 3px solid var(--curve-color); }
.curve-legend i.dashed { border-top-style: dashed; }
.curve-explanation { border: 1px solid rgba(37, 99, 235, 0.18); padding: 14px 18px; margin: 18px 0 24px; background: var(--blue-surface); border-radius: 10px; color: var(--blue-deep); font-size: 14px; line-height: 1.85; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.03); }
.curve-explanation strong { font-size: 13px; }
.curve-explanation p { margin: 4px 0 0; }
.curve-study h4 { font-size: 13px; margin: 0 0 10px; }
.curve-study ul { padding-left: 19px; margin: 0 0 20px; }
.curve-study li, .curve-study p { font-size: 13px; line-height: 1.9; color: var(--ink-secondary); margin: 0; }
.curve-study li + li { margin-top: 5px; }
.curve-trap { padding: 14px 16px; border: 1px solid #f3e6cc; border-radius: 8px; background: #fffcf5; }
.curve-trap h4 { color: #9a620a; }
.curve-reference { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line-light); color: var(--muted); font-size: 11px; line-height: 1.8; }
.curve-mobile-picker { display: none; }
@media (max-width: 760px) {
  .curve-layout { display: block; }
  .curve-directory { display: none; }
  .curve-heading { margin-bottom: 20px; }
  .curve-heading h2 { font-size: 25px; }
  .curve-heading-mark { display: none; }
  .curve-mobile-picker { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 16px; }
  .curve-mobile-picker select { width: 100%; min-height: 46px; background: white; color: var(--ink); border: 1px solid var(--curve-line); border-radius: 8px; padding: 10px 12px; font-size: 15px; }
  .curve-detail { padding: 18px 14px; }
  .curve-detail h3 { font-size: 21px; }
  .curve-scenes { gap: 7px; }
  .curve-scenes button { min-height: 44px; font-size: 13px; padding: 9px 11px; }
  .curve-figure { padding: 13px 2px; }
  .curve-figure figcaption { margin-left: 10px; }
  .curve-point-label { font-size: 17px; }
  .curve-axis-title { font-size: 18px; }
  .curve-explanation { padding: 10px 12px; }
}