/* decompwlj 3D — the static pages (seq/, family/, 404): one page per sequence,
   the family lists and the full index, written by tools/seo.py.  Same palette as
   the app: dark by default, light under a light system setting. */

:root {
  --bg: #0b0e14; --bg-2: #11151f; --bg-3: #171c28;
  --line: #232a39; --line-2: #2f394d;
  --fg: #e6ebf5; --fg-2: #9aa6bd; --fg-3: #64708a;
  --accent: #7aa2ff; --c-weight: #4c8dff; --c-level: #ff8c42;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7fa; --bg-2: #ffffff; --bg-3: #eef1f7;
    --line: #dde2ec; --line-2: #c6cfdf;
    --fg: #11151f; --fg-2: #4c5670; --fg-3: #6b768d;
    --accent: #2f5fd0; --c-weight: #2f6fdb; --c-level: #e2661a;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--fg); text-decoration: none; }
.brand-mark { width: 18px; height: 18px; border-radius: 4px; background:
  radial-gradient(circle at 30% 68%, #4c8dff 0 18%, transparent 19%),
  radial-gradient(circle at 58% 42%, #ff8c42 0 18%, transparent 19%),
  radial-gradient(circle at 80% 20%, #ffe45c 0 12%, transparent 13%), #0b0e14; }
.brand-dim { color: var(--fg-3); font-weight: 500; }
.top nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 14px; }
.top nav a { color: var(--fg-2); text-decoration: none; }
.top nav a:hover { color: var(--accent); }

main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }
.crumbs { font-size: 13px; color: var(--fg-3); margin-bottom: 10px; }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 8px; overflow-wrap: anywhere; }
h2 { font-size: 18px; margin: 30px 0 8px; }
.meta { color: var(--fg-2); margin: 0 0 20px; font-size: 14px; }
.meta .an { font-family: var(--mono); }
.lead { color: var(--fg-2); max-width: 760px; }

.seq { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .seq { grid-template-columns: minmax(0, 1fr); } }
figure { margin: 0; }
figcaption { font-size: 12px; color: var(--fg-3); margin-top: 8px; }
.plate { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.plate svg, .plate img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate svg line, .plate svg rect { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plate svg .dg { stroke: var(--fg-3); stroke-dasharray: 4 3; }
.plate svg .ed { stroke-dasharray: 1 3; }
.plate .axl { position: absolute; font: 11px var(--mono); color: var(--fg-3); }
.plate .axl.k { right: 7px; bottom: 4px; } .plate .axl.L { left: 6px; top: 4px; }

.cta { display: inline-block; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; margin: 0 8px 14px 0; }
.cta:hover { filter: brightness(1.08); }
.cta.alt { background: transparent; color: var(--accent); border: 1px solid var(--line-2); }

.stats { border-collapse: collapse; width: 100%; font-size: 14px; }
.stats th, .stats td { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.stats th { font-weight: 500; color: var(--fg-2); padding-right: 12px; }
.stats td { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.lv { color: var(--c-level); } .wt { color: var(--c-weight); }
.note { color: var(--fg-2); margin-top: 14px; }

.pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.pn a { text-decoration: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .next { margin-left: auto; text-align: right; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips a { display: inline-block; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.chips a:hover, .chips a[aria-current] { border-color: var(--accent); color: var(--accent); }

.list { border-collapse: collapse; width: 100%; font-size: 14px; }
.list th { text-align: left; font-weight: 500; color: var(--fg-3); font-size: 12px; border-bottom: 1px solid var(--line-2); padding: 6px 8px 6px 0; }
.list td { border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; vertical-align: top; }
.list td:first-child { font-family: var(--mono); white-space: nowrap; }
.list td.num, .list th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.list .fam { color: var(--fg-3); white-space: nowrap; }
@media (max-width: 640px) { .list .fam { display: none; } }

footer.foot { max-width: 1080px; margin: 0 auto; padding: 18px 16px 30px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); display: flex; gap: 16px; flex-wrap: wrap; }
footer.foot a { color: var(--fg-2); text-decoration: none; }
footer.foot a:hover { color: var(--accent); }
.dim { color: var(--fg-3); }
button.cta { font: inherit; font-weight: 600; cursor: pointer; }
button.cta.alt { background: transparent; }
button.cta:disabled { cursor: progress; opacity: .7; }

/* how it works (learn/) */
.formula { font: 26px/1.3 var(--mono); text-align: center; margin: 18px 0; color: var(--fg); }
.steps { max-width: 780px; padding-left: 22px; color: var(--fg-2); }
.steps li { margin: 8px 0; }
.steps b { color: var(--fg); }
b.wt, span.wt { color: var(--c-weight); } b.lv, span.lv { color: var(--c-level); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.card3 { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-size: 14px; color: var(--fg-2); }
.card3 p { margin: 0 0 8px; }
.card3 .big { font: 700 28px var(--mono); color: var(--fg); }
.card3 .res { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--fg); font-family: var(--mono); font-size: 13px; }
.presets { display: flex; flex-wrap: wrap; gap: 0; }
.presets .cta { padding: 6px 12px; font-size: 14px; margin: 0 8px 8px 0; }
.lab { display: block; font-size: 13px; color: var(--fg-3); margin: 6px 0 4px; }
textarea#terms { width: 100%; font: 14px/1.5 var(--mono); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.err { color: var(--c-level); min-height: 1.2em; margin: 4px 0; font-size: 14px; }
.try { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .try { grid-template-columns: minmax(0, 1fr); } }
.tryplate svg { width: 100%; height: auto; display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.tryplate svg .fr { fill: none; stroke: var(--line-2); }
.tryplate svg .dg { stroke: var(--fg-3); stroke-dasharray: 4 3; }
.tryplate svg text { font: 11px var(--mono); fill: var(--fg-3); }
.tryplate svg circle.wt { fill: var(--c-weight); fill-opacity: .8; }
.tryplate svg circle.lv { fill: var(--c-level); fill-opacity: .8; }
.scroll { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.list.demo th { position: sticky; top: 0; background: var(--bg-2); padding-left: 8px; }
.list.demo td { font-family: var(--mono); padding-left: 8px; white-space: nowrap; }
.list.demo td.no { color: var(--fg-3); }
.list.demo td.wt { color: var(--c-weight); } .list.demo td.lv { color: var(--c-level); }
h3 { font-size: 16px; margin: 22px 0 4px; }
.scroll.narrow { max-width: 640px; max-height: none; margin: 8px 0 12px; }

/* the plate opens the 3-D viewer, which starts on the same picture */
.plate-link { display: block; text-decoration: none; }
.plate-link .plate { transition: border-color .15s, box-shadow .15s; }
.plate-link:hover .plate, .plate-link:focus-visible .plate { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.plate .go3d { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--sans);
  background: var(--accent); color: #fff; opacity: .9; transition: opacity .15s; }
@media (hover: hover) { .plate .go3d { opacity: 0; } .plate-link:hover .go3d, .plate-link:focus-visible .go3d { opacity: .95; } }
/* a soft cross-fade when moving between the pages and the viewer (where supported) */
@view-transition { navigation: auto; }