*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1e293b; background: #f1f5f9; line-height: 1.72; font-size: 15px; }
a { color: #0f766e; text-decoration: none; }
a:hover { text-decoration: underline; }
.container-wide { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
header { position: sticky; top: 0; z-index: 50; background: rgba(15, 23, 42, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; gap: 1rem; }
.brand { color: #fff; }
.brand strong { display: block; font-size: 1rem; }
.brand span { display: block; font-size: 0.75rem; color: #94a3b8; }
nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
nav a { color: #cbd5e1; font-size: 0.8125rem; white-space: nowrap; }
nav a:hover { color: #fff; text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; background: #0d9488; color: #fff; font-weight: 700; border: none; border-radius: 0.5rem; padding: 0.5625rem 1rem; cursor: pointer; font-size: 0.8125rem; }
.btn:hover { background: #14b8a6; color: #fff; text-decoration: none; }
.note-hero { background: linear-gradient(145deg, #0a0f1a 0%, #0f172a 48%, #115e59 100%); color: #e2e8f0; padding: 3rem 0 2.5rem; }
.breadcrumb { color: #94a3b8; font-size: 0.8125rem; margin-bottom: 1.25rem; }
.breadcrumb a { color: #99f6e4; }
.section-label { font-size: 0.75rem; font-weight: 800; color: #5eead4; letter-spacing: 0.08em; }
h1 { margin-top: 0.5rem; color: #fff; font-size: 2rem; line-height: 1.25; }
.meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.meta-row span { display: inline-flex; border: 1px solid rgba(153,246,228,0.35); background: rgba(15,118,110,0.22); color: #ccfbf1; border-radius: 999px; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 700; }
.summary { margin-top: 1rem; max-width: 46rem; color: #e2e8f0; font-size: 1rem; }
.note-body { padding: 2rem 0 3rem; }
.note-layout { display: grid; gap: 1rem; }
.content-card, .cta-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.625rem; box-shadow: 0 8px 24px rgba(15,23,42,0.04); }
.content-card { padding: 1.25rem; }
.content-card section + section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.content-card h2 { color: #0f172a; font-size: 1rem; line-height: 1.4; }
.content-card p { margin-top: 0.5rem; color: #475569; font-size: 0.9375rem; }
.shot-grid { display: grid; gap: 0.75rem; margin-top: 0.875rem; }
figure { border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; background: #f8fafc; }
figure img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; background: #e2e8f0; }
figcaption { padding: 0.5rem 0.625rem; color: #64748b; font-size: 0.75rem; }
.cta-card { padding: 1.125rem; align-self: start; border-left: 4px solid #0d9488; }
.cta-card strong { display: block; color: #0f172a; font-size: 1rem; line-height: 1.4; }
.cta-card p { margin-top: 0.5rem; color: #475569; font-size: 0.875rem; }
.cta-card .btn { margin-top: 0.875rem; width: 100%; }
@media (min-width: 780px) {
  h1 { font-size: 2.375rem; }
  .note-layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
  .content-card { padding: 1.5rem; }
  .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 779px) {
  nav { display: none; }
  .note-hero { padding: 2.5rem 0 2rem; }
}