/* Anthropic principle lesson. All rules scoped under .anp-* */
.anp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.anp-note { font-size: 13px; color: var(--dim); text-align: center; }
.anp-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 0 24px rgba(111,195,255,.35)) drop-shadow(0 18px 30px rgba(123,92,253,.35)); }

/* ---------- the lake ---------- */
.anp-lake { width: min(100%, 340px); height: auto; display: block; }
.anp-wave { fill: none; stroke: #6fc3ff; stroke-opacity: .5; stroke-width: 1.5; }
.anp-fish .small { fill: #9fd4ff; }
.anp-fish .big { fill: var(--gold); }
.anp-mesh line { stroke: #d8cfbf; stroke-opacity: .55; stroke-width: 1.1; }
.anp-rim { fill: #b98a4a; }
.anp-tag rect { fill: var(--raised); stroke: var(--line-strong); }
.anp-tag text { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }

/* ---------- the planet field ---------- */
.anp-field { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.anp-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 7px; justify-content: center; }
.anp-pl { display: block; width: 22px; height: 22px; border-radius: 50%; position: relative; transition: background .35s, box-shadow .35s, opacity .35s; }
.anp-pl.ice { background: radial-gradient(circle at 35% 30%, #f2f7ff, #a9bfd6 60%, #6b7f96); opacity: .8; }
.anp-pl.lava { background: radial-gradient(circle at 35% 30%, #ffb070, #c2412a 55%, #4a1510); opacity: .8; }
.anp-pl.gas { background: repeating-linear-gradient(170deg, #d9b98a 0 4px, #a8835a 4px 7px); opacity: .8; }
.anp-pl.rock { background: radial-gradient(circle at 35% 30%, #8a8a8a, #555 60%, #2e2e2e); opacity: .8; }
.anp-pl.life { background: radial-gradient(circle at 35% 30%, #bff5dc, #2fa36f 45%, #1d5fa8 80%); box-shadow: 0 0 8px rgba(63,214,154,.6); }
.anp-pl.scan { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.anp-pl.eye { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(252,192,80,.9); }
.anp-pl.eye::after { content: ''; position: absolute; left: 50%; top: -13px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); }
.anp-view { width: min(100%, 260px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.anp-vlab { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.anp-view svg { width: 150px; height: auto; display: block; opacity: .15; transition: opacity .4s; }
.anp-view.on svg { opacity: 1; }
.anp-vsky { fill: #5aa9e6; }
.anp-vsun { fill: #FFE7A3; }
.anp-vsea { fill: #1f6fb8; }
.anp-vland { fill: #3fa86a; }
.anp-vtxt { font-size: 14px; font-weight: 600; color: var(--faint); }
.anp-view.on .anp-vtxt { color: var(--mint); }

/* ---------- timelines ---------- */
.anp-tl { width: 100%; padding: 18px 16px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.anp-tlbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; }
.anp-seg { display: block; height: 100%; }
.anp-seg.e1 { width: 20%; background: #c2412a; }
.anp-seg.e2 { width: 60%; background: linear-gradient(90deg, #2fa36f, #3FD69A); }
.anp-seg.e3 { width: 20%; background: linear-gradient(90deg, #3FD69A, var(--gold)); }
.anp-tlmarks { position: relative; height: 40px; margin-top: 6px; }
.anp-tlmarks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--text); width: 80px; text-align: center; line-height: 1.2; }
.anp-tlmarks span[style="left:0"] { transform: none; text-align: left; }
.anp-tlmarks span.now { transform: translateX(-100%); text-align: right; color: var(--gold); }
.anp-tlmarks span.lo { top: 20px; }
.anp-tlnote { font-size: 13px; color: var(--dim); text-align: center; margin-top: 4px; }

@media (max-height: 700px) {
  .anp-hero img { max-height: 28vh; }
  .anp-grid { grid-template-columns: repeat(10, 18px); gap: 6px; }
  .anp-pl { width: 18px; height: 18px; }
  .anp-view svg { width: 110px; }
  .anp-lake { width: min(100%, 290px); }
}