/* content.css — the reading pages (guides, about, contact, privacy, terms, 404).
   Loads after shared.css and reuses its tokens. The landing page keeps its own
   section styles; these are the same shapes at reading widths. */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem 5rem;
}
.page-head { max-width: 720px; margin-bottom: 2.5rem; }
.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}
.page-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.page-head h1 .accent {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(105deg, #d9a521 0%, #e2b33c 38%, #fff4c8 50%, #e2b33c 62%, #d9a521 100%);
  background-size: 260% .085em; background-repeat: no-repeat; background-position: 100% 100%;
  animation: accent-shine 2.5s ease-in-out infinite;
  letter-spacing: -0.01em;
}
.page-head .lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.page-meta {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.breadcrumb { font-size: 0.78rem; color: var(--text-tertiary); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { margin: 0 0.4rem; }

/* Two-column: prose + sticky aside on wide screens */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 4rem; align-items: start; }
.aside { position: sticky; top: 80px; }
.aside .box {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.4rem;
}
.aside .box + .box { margin-top: 1rem; }
.aside .aside-title { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.7rem; }
.aside ol, .aside ul { padding-left: 1.1rem; margin: 0; }
.aside li { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.4rem; }
.aside a { color: var(--text-secondary); text-decoration: none; }
.aside a:hover { color: var(--text); }

/* Prose */
.prose { max-width: 68ch; font-size: 1rem; line-height: 1.7; color: var(--text); }
.prose h2 {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  margin: 3rem 0 1rem; scroll-margin-top: 80px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .accent { font-family: inherit; font-style: normal; font-weight: 400; color: var(--accent); text-decoration: none; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;   background-image: linear-gradient(105deg, #d9a521 0%, #e2b33c 38%, #fff4c8 50%, #e2b33c 62%, #d9a521 100%);   background-size: 260% .085em; background-repeat: no-repeat; background-position: 100% 100%;   animation: accent-shine 2.5s ease-in-out infinite; }
.prose h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; margin: 2rem 0 0.6rem; scroll-margin-top: 80px; }
.prose p { margin: 0 0 1.1rem; }
.prose p.lead { font-size: 1.1rem; color: var(--text-secondary); }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-hover); }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--text-tertiary); }
.prose strong { font-weight: 600; }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--accent);
  color: var(--text-secondary); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--border-light); margin: 2.5rem 0; }
.prose .callout {
  background: var(--accent-light); border: 1px solid #dbe6ff; border-radius: 10px;
  padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.95rem;
}
.prose .callout strong { color: var(--accent-deep); }
.prose .note { font-size: 0.85rem; color: var(--text-tertiary); }

/* Data tables */
.prose table, .tbl {
  width: 100%; border-collapse: collapse; margin: 0;
  font-size: 0.9rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.prose th, .prose td, .tbl th, .tbl td { padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-light); }
.prose th, .tbl th { background: var(--bg); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.prose tr:last-child td, .tbl tr:last-child td { border-bottom: 0; }
.prose td.num, .tbl td.num, .prose th.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl-wrap { margin: 1.25rem 0 1.75rem; }
.tbl-wrap table { min-width: 560px; }
@media (max-width: 600px) { .tbl-wrap table { min-width: 480px; } }
.tbl .yes { color: var(--success-deep); font-weight: 600; }
.tbl .no { color: var(--text-tertiary); }
.tbl .hl { background: var(--accent-light); }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.5rem 0 2rem; }
.stats .stat { background: var(--card); padding: 1.2rem 1.3rem; }
.stats .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.35rem; font-variant-numeric: tabular-nums; }
.stats .l { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

/* Cards (guides index) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.card-link {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.4rem 1.5rem; text-decoration: none; color: var(--text);
  transition: transform 180ms var(--ease-out), border-color 180ms ease;
}
.card-link:hover { transform: translateY(-2px); border-color: #d6d3cc; }
.card-link .k { font-family: "JetBrains Mono", monospace; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.card-link h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; line-height: 1.3; }
.card-link p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* FAQ (same shape as the landing page) */
.faq { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0 2rem; }
.faq details { background: var(--card); }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary h3 { font-size: 0.98rem; font-weight: 600; margin: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-tertiary); font-weight: 400; font-size: 1.2rem; flex-shrink: 0; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.2rem; margin: 0; font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); max-width: 68ch; }

/* Forms (contact) */
.form { max-width: 560px; }
.form label { display: block; font-size: 0.82rem; font-weight: 600; margin: 1rem 0 0.35rem; }
.form input, .form textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.95rem; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form textarea { min-height: 160px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form button { margin-top: 1.25rem; }
.form .status { margin-top: 1rem; font-size: 0.9rem; }
.form .status.ok { color: var(--success-deep); }
.form .status.err { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* CTA box (top of every sidebar) and one-line CTA */
.aside .cta-box { background: var(--text); color: #fff; border-color: var(--text); }
.aside .cta-box .aside-title { color: rgba(255,255,255,0.7); }
.aside .cta-box p { font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.9rem; }
.aside .cta-box p.note { margin: 0.7rem 0 0; font-size: 0.74rem; color: rgba(255,255,255,0.6); }
.aside .cta-box .btn-primary, .aside .cta-box .btn-primary:hover { width: 100%; justify-content: center; color: #fff; }
.cta-line { margin: 0 0 2rem; font-size: 0.95rem; color: var(--text-secondary); }
.cta-line a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 0 0 2rem; }
.why div { background: var(--card); padding: 1rem 1.1rem; font-size: 0.88rem; line-height: 1.45; }
.why div b { display: block; color: var(--success-deep); font-size: 1.3rem; margin-bottom: 0.25rem; }
@media (max-width: 900px) { .why { grid-template-columns: repeat(2, 1fr); } .aside .box:not(.cta-box) { display: none; } .cta-line { display: none; } }
@media (max-width: 520px) { .why { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band {
  margin-top: 3.5rem; padding: 2rem 2.25rem; border-radius: 12px;
  background: var(--text); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cta-band h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.3rem; }
.cta-band p { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.cta-band .btn-primary { background: #fff; color: var(--text); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; background: var(--accent); color: #fff; font-size: 0.92rem; font-weight: 600;
  border: 0; border-radius: 9px; cursor: pointer; text-decoration: none; letter-spacing: -0.01em;
  transition: transform 180ms var(--ease-out), background 180ms ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.site-footer {
  max-width: 1120px; margin: 0 auto; padding: 2rem 2.5rem 3rem; border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--text-tertiary);
}
.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .layout > * { min-width: 0; }
  .aside { position: static; order: -1; }
  .aside .box.toc { display: none; }
  .cards { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page { padding: 2.25rem 1.25rem 3.5rem; }
  .site-footer { padding: 1.5rem 1.25rem 2.5rem; }
  .cards { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .prose { font-size: 0.97rem; }
}

/* Pricing. Three cards in solid colours, no gradients: emerald for free,
   royal blue for the small pack, and ink with gold for the pack we want
   people to buy. The only moving light is the hover shine on the buttons. */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; align-items: stretch; }
.price-card {
  --tone: #2348b8;
  position: relative; display: flex; flex-direction: column;
  background: var(--card);
  border: 2.5px solid var(--tone); border-radius: 14px; padding: 1.6rem 1.5rem 1.4rem;
  overflow: hidden; isolation: isolate;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.price-card.tone-free { --tone: #146c43; }
.price-card.tone-pack { --tone: #2348b8; }
.price-card.best {
  --tone: #b8892b;
  border: 2.5px solid #c9a14a;
  box-shadow: 0 18px 40px -24px rgba(21, 19, 26, .55);
}
/* Hover only: a band of light crosses the whole card, border included. */
.price-card::after {
  content: ""; position: absolute; inset: -3px; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%,
                              rgba(255, 255, 255, .18) 53%, transparent 64%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  .price-card:hover::after { transform: translateX(120%); transition: transform 900ms var(--ease-out); }
  .price-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(26, 26, 26, .4); }
  .price-card.best:hover { box-shadow: 0 26px 48px -24px rgba(21, 19, 26, .6); }
}
.price-card .k { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone); margin: 0 0 0.55rem; font-weight: 600; }
.price-card.best .k { color: #8a6418; }
.price-card .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 0 0 0.45rem; }
.price-card .cur { font-size: 1.4rem; font-weight: 700; color: var(--tone); margin-right: 0.05rem; }
.price-card.best .cur { color: #b8892b; }
.price-card .per { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem; }
.price-card ul { margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); flex: 1; }
.price-card li { position: relative; padding-left: 1.5rem; margin-bottom: 0.45rem; }
.price-card li::before {     /* a tick in the card's colour */
  content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--tone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.price-card .btn-primary, .price-card .btn-secondary { justify-content: center; text-align: center; width: 100%; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.price-card.tone-pack .btn-primary { background: #2348b8; }
.price-card.best .btn-primary { background: #15131a; color: #f3dfaf; }
@media (hover: hover) and (pointer: fine) {
  .price-card.tone-pack .btn-primary:hover { background: #1d3d9e; }
  .price-card.best .btn-primary:hover { background: #000; box-shadow: 0 14px 28px -14px rgba(21, 19, 26, .8); }
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: 0.92rem; text-decoration: none;
  transition: transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 200ms ease;
}
.price-card.tone-free .btn-secondary { border-color: #146c43; color: #146c43; }
.btn-secondary:hover { border-color: #d6d3cc; }
.price-note { margin: 1.25rem 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--text-tertiary); max-width: 80ch; }
.aside .merchant p { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 0.5rem; }
.aside .merchant p:last-child { margin-bottom: 0; }
.aside .merchant strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .price-card, .price-card::after { transition: none !important; }
  .price-card:hover::after { transform: translateX(-120%); }
  .price-card:hover { transform: none; }
}
/* Razorpay's review looks for the business details on every policy page, on
   phones too, so this box is exempt from the rule that hides side boxes. */
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  .aside .box.merchant { display: block; }
}

/* The gold underline glints like the pricing cards' shine (13 Oct). */
@keyframes accent-shine { 0%, 20% { background-position: 100% 100%; } 80%, 100% { background-position: 0% 100%; } }
@media (prefers-reduced-motion: reduce) { .page-head .accent, .prose .accent { animation: none !important; background-position: 50% 100% !important; } }

/* Prelims PYQ pages (/upsc-prelims-pyq): one card per question, drawn like
   /prelims draws its stem (statements, Statement-I/II, match tables). */
.pq { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1rem 1.15rem 0.9rem; margin: 0 0 1rem; }
.pq-meta { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 0.6rem; }
.pq-meta a { color: inherit; }
.prose .pq .stem p { margin: 0 0 0.55rem; }
.stem { line-height: 1.6; overflow-wrap: anywhere; }
.stem .plain { white-space: pre-line; }
.stem .ask { font-weight: 600; }
.stem .dim { color: var(--text-tertiary); font-size: 0.875rem; }
.prose .stem ol { list-style: none; margin: 0 0 0.65rem; padding: 0; }
.prose .stem li { position: relative; padding-left: 2.1rem; margin: 0 0 0.4rem; }
.pq-mk { position: absolute; left: 0; top: 0; font-weight: 600; }
.stmt { display: block; margin: 0 0 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg); }
.stmt b { display: block; font-size: 0.8rem; }
.pq-tbl { max-width: 100%; overflow-x: auto; margin: 0 0 0.7rem; }
.prose .pq-tbl table { font-size: 0.9rem; }
.prose .pq-tbl th, .prose .pq-tbl td { text-transform: none; letter-spacing: 0; font-size: 0.88rem; }
.prose ol.pq-opts { list-style: none; padding: 0; margin: 0.4rem 0 0.7rem; }
.prose ol.pq-opts li { margin: 0 0 0.35rem; padding-left: 2rem; position: relative; }
.pq-l { position: absolute; left: 0; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.pq-ans { margin: 0; font-size: 0.92rem; }
.pq-ans summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; }
.pq-ans p { margin: 0.45rem 0 0; }
.pq-none { color: var(--text-tertiary); }
.pq-prov { font-size: 0.72rem; color: var(--warning); border: 1px solid currentColor; border-radius: 99px; padding: 0 0.45rem; margin-left: 0.3rem; white-space: nowrap; }
.pq-note { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--warning-light); }
.pq-bar { display: block; height: 8px; border-radius: 4px; background: var(--accent); opacity: 0.55; min-width: 2px; }
.prose table.pq-years td:last-child { width: 45%; vertical-align: middle; }
.pq-grid table { min-width: 860px; }
.pq-grid th, .pq-grid td { padding: 0.45rem 0.4rem; }
.pq-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.pq-page .cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .pq { padding: 0.85rem 0.9rem 0.8rem; } .pq-page .cards { grid-template-columns: 1fr; } }
.mq .stem p { margin: 0 0 0.5rem; }
.mq-links { margin: 0.2rem 0 0; font-size: 0.88rem; }
.prose pre.prompt { white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; line-height: 1.6; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; margin: 0.8rem 0 1.4rem; overflow-wrap: anywhere; }
.prose .bot-cta { margin: 1rem 0 1.6rem; }
.prose .steps-list li { margin-bottom: 0.55rem; }

/* Telegram calls to action at the foot of every reading page (18 Oct). */
.tg-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 2.5rem 0 0.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.tg-cta-text { flex: 1 1 320px; font-size: 0.95rem; line-height: 1.55; color: var(--text-secondary); }
.tg-cta-text b { display: block; color: var(--text); font-size: 1.02rem; margin-bottom: 0.15rem; }
.tg-cta-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tg-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; color: var(--text); text-decoration: none; background: var(--bg); }
.tg-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tg-btn-bot { background: #229ED9; border-color: #229ED9; color: #fff; }
.tg-btn:hover { filter: brightness(0.97); }
@media (max-width: 600px) { .tg-cta-btns, .tg-btn { width: 100%; } .tg-btn { justify-content: center; } }
.prose ul.tp-list { padding-left: 1.1rem; }
.prose ul.tp-list li { margin-bottom: 0.7rem; line-height: 1.5; }
.tp-meta { font-size: 0.78rem; color: var(--text-tertiary); white-space: nowrap; }
.tp-note { font-size: 0.86rem; color: var(--text-secondary); }
.pyq-box { padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); margin: 1rem 0; }
.passage { border-left: 3px solid var(--accent); background: var(--bg); padding: 0.8rem 1rem; margin: 1.2rem 0 0.8rem; border-radius: 0 10px 10px 0; font-size: 0.95rem; line-height: 1.65; }
.prose .passage p { margin: 0 0 0.6rem; }
.prose .op-stem { margin: 1.2rem 0 0.5rem; }
.imap { margin: 1rem 0 1.5rem; }
.imap svg { width: 100%; height: auto; max-height: 720px; background: #f3f6f8; border: 1px solid var(--border); border-radius: 12px; }
.imap figcaption { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 0.4rem; }
.mp-area { fill: rgba(34, 139, 87, 0.35); stroke: #1f7a4d; stroke-width: 0.6; }
.mp-river { fill: none; stroke: #2a6fb5; stroke-width: 1.8; stroke-linecap: round; }
.mp-pt { fill: #c2410c; stroke: #fff; stroke-width: 0.8; }