/* ASTRA: an antique star atlas. Warm ink sheets, engraved hairlines, double notched plate frames, gold for what is lit.
   Cormorant Garamond for the engraving, JetBrains Mono for coordinates and figures. No blue, no neon, no pure white. */
:root {
  --ink: #14110f; --plate: #1b1714; --raised: #231e19; --cream: #ede6d6; --gold: #d9a441; --gold-d: #a87a2c;
  --muted: #9c9384; --hair: #3a332b; --hair-l: #4d443a; --green: #8fbf6a; --red: #c9694f;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --k: 12px; /* notch size */
  --w: 1380px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 18px/1.5 var(--serif); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
code, .mono { font-family: var(--mono); font-size: .78em; letter-spacing: .02em; }
.muted { color: var(--muted); }
::selection { background: rgba(217, 164, 65, .35); color: var(--cream); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: .01em; line-height: 1.1; }
#view { outline: none; }
.page-in { animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-fade] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
[data-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-fade] { opacity: 1; transform: none; } .page-in { animation: none; } }

/* ---------- sparkles and magnitude glyphs */
.spk { color: var(--gold); flex: none; }
.spk.off { color: var(--hair-l); }
.spk.mg1 { color: #b8a27a; } .spk.mg2 { color: #c7a466; } .spk.mg3 { color: #d3a552; }
.spk.mg4 { color: var(--gold); } .spk.mg5 { color: var(--gold); filter: drop-shadow(0 0 4px rgba(217, 164, 65, .55)); }
i.mg0 { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted); flex: none; margin: 0 2px; }
.lightrow { display: inline-flex; gap: 3px; align-items: center; }
svg.thumb { overflow: visible; }
svg.thumb line { stroke: rgba(237, 230, 214, .55); stroke-width: .8; }
svg.thumb circle.l { fill: var(--gold); }
svg.thumb circle.u { fill: var(--muted); opacity: .7; }

/* ---------- plate: double hairline with notched corners */
.plate {
  position: relative; background: var(--plate); padding: 22px 24px;
  clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k));
  background-image:
    linear-gradient(var(--hair), var(--hair)), linear-gradient(var(--hair), var(--hair)), linear-gradient(var(--hair), var(--hair)), linear-gradient(var(--hair), var(--hair));
  background-size: calc(100% - 2 * var(--k)) 1px, calc(100% - 2 * var(--k)) 1px, 1px calc(100% - 2 * var(--k)), 1px calc(100% - 2 * var(--k));
  background-position: var(--k) 0, var(--k) 100%, 0 var(--k), 100% var(--k);
  background-repeat: no-repeat;
}
.plate::before, .plate::after { content: ""; position: absolute; pointer-events: none; }
/* the cut corners, drawn as diagonals */
.plate::before {
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--hair) 50%, transparent calc(50% + .6px)) 0 0 / var(--k) var(--k) no-repeat,
    linear-gradient(to top left, transparent calc(50% - .6px), var(--hair) 50%, transparent calc(50% + .6px)) 100% 0 / var(--k) var(--k) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--hair) 50%, transparent calc(50% + .6px)) 0 100% / var(--k) var(--k) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .6px), var(--hair) 50%, transparent calc(50% + .6px)) 100% 100% / var(--k) var(--k) no-repeat;
}
/* the inner rule */
.plate::after {
  inset: 5px; border: 1px solid rgba(58, 51, 43, .75);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.plate > * { position: relative; z-index: 1; }
.plate-t { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 13px/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); }
.plate-t .grow { flex: 1; }
.plate-t .mono { letter-spacing: .04em; text-transform: none; color: var(--muted); font-weight: 400; }
.sec-t { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.fine { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.fine code { color: var(--cream); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 12px; color: var(--muted); }
.empty b { color: var(--cream); font-weight: 600; font-size: 19px; }
.empty .btn { margin-top: 8px; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  font: 600 15px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
  border: 1px solid var(--hair-l); background: transparent; transition: border-color .2s, color .2s, background .2s; white-space: nowrap;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; letter-spacing: .12em; }
.btn.block { width: 100%; }
.btn.hair { border-color: var(--hair-l); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--cream); border-color: var(--hair-l); }
.btn.dbl { border: 1px solid var(--cream); outline: 1px solid var(--hair-l); outline-offset: 3px; margin: 4px; }
.btn.dbl:hover { border-color: var(--gold); outline-color: var(--gold-d); }
.btn.dbl.block { width: calc(100% - 8px); min-height: 50px; font-size: 16px; }
.btn:disabled, .btn.is-off { opacity: .45; cursor: not-allowed; border-color: var(--hair); color: var(--muted); }
.btn:disabled:hover, .btn.is-off:hover { color: var(--muted); border-color: var(--hair); }
.btn img { width: 14px; height: 14px; }
.btn.on { border-color: var(--gold); color: var(--gold); }
.ib { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hair); color: var(--cream); transition: border-color .2s, color .2s; }
.ib:hover { border-color: var(--gold); color: var(--gold); }
.pump-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 9px; border-radius: 99px; background: #1f2a19; border: 1px solid #3f5a2c; color: #cfe6b8; font: 500 12px/1 var(--mono); letter-spacing: .04em; }
.pump-pill:hover { border-color: var(--green); }
.pump-pill img { width: 18px; height: 18px; }

/* ---------- header */
.bar { position: sticky; top: 0; z-index: 30; background: var(--ink); padding-bottom: 2px; }
.bar-in { max-width: var(--w); margin: 0 auto; padding: 14px 28px 12px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 38px; height: 38px; }
.brand span { font: 600 23px/1 var(--serif); letter-spacing: .42em; margin-right: -.42em; }
.nav { display: flex; gap: 26px; }
.nav a { position: relative; padding: 8px 0; font: 600 13.5px/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); transition: color .2s; white-space: nowrap; }
.nav a:hover { color: var(--cream); }
.nav a.on { color: var(--cream); }
.nav a.on::after { content: ""; position: absolute; left: 0; right: .22em; bottom: -3px; height: 1px; background: var(--gold); }
.nav a.on::before {
  content: ""; position: absolute; left: calc(50% - 5px); bottom: -8px; width: 10px; height: 10px; background: var(--gold);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.find { flex: 1; max-width: 340px; margin-left: auto; display: flex; align-items: center; border: 1px solid var(--hair-l); height: 38px; background: var(--ink); }
.find:focus-within { border-color: var(--gold); }
.find input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; outline: none; font: 13px var(--mono); color: var(--cream); }
.find input::placeholder { color: var(--muted); }
.find input::-webkit-search-cancel-button { display: none; }
.find button { width: 38px; height: 100%; display: grid; place-items: center; color: var(--muted); }
.find button:hover { color: var(--gold); }
.bar-end { display: flex; align-items: center; gap: 10px; flex: none; }
.socials { display: inline-flex; align-items: center; gap: 8px; }
.wallet.on { border-color: var(--gold); color: var(--gold); }
.burger { display: none; }
.bar-rule { position: relative; max-width: var(--w); margin: 0 auto; height: 12px; color: var(--gold); }
.bar-rule::before, .bar-rule::after { content: ""; position: absolute; left: 28px; right: 28px; height: 1px; background: var(--hair); }
.bar-rule::before { top: 3px; } .bar-rule::after { top: 7px; }
.bar-rule svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--ink); padding: 0 6px; box-sizing: content-box; z-index: 1; }

/* ---------- page frames */
main > .page-in { max-width: var(--w); margin: 0 auto; padding: 22px 28px 0; }
.doc { max-width: 980px; margin: 0 auto; padding: 18px 0 40px; }
.crumb { margin: 0 0 10px; font: 12px var(--mono); color: var(--muted); letter-spacing: .04em; }
.crumb a:hover { color: var(--gold); }
.lede { color: var(--muted); font-size: 20px; max-width: 720px; margin: 12px 0 0; }
.doc h1, .doc-h h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 500; }
.status { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--hair-l); font-size: 16px; background: var(--plate); }
.status.err { border-color: rgba(201, 105, 79, .6); color: #e6b3a3; }
.status.ok { border-color: rgba(143, 191, 106, .55); color: #cfe6b8; }
.status.hide { display: none; }
.status a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the stage */
.sky-wrap { position: relative; }
.stage-plate { position: relative; padding: 26px 14px 14px 46px; background: var(--plate);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
.stage-plate::before, .stage-plate::after { content: ""; position: absolute; pointer-events: none; z-index: 2; border: 1px solid var(--hair-l); }
.stage-plate::before { inset: 0; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  background:
    linear-gradient(to top right, transparent calc(50% - .7px), var(--hair-l) 50%, transparent calc(50% + .7px)) 0 0 / 16px 16px no-repeat,
    linear-gradient(to top left, transparent calc(50% - .7px), var(--hair-l) 50%, transparent calc(50% + .7px)) 100% 0 / 16px 16px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--hair-l) 50%, transparent calc(50% + .7px)) 0 100% / 16px 16px no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .7px), var(--hair-l) 50%, transparent calc(50% + .7px)) 100% 100% / 16px 16px no-repeat; }
.stage-plate::after { inset: 6px; border-color: var(--hair);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); }
.deg-top { position: absolute; left: 46px; right: 14px; top: 8px; height: 14px; font: 10.5px/1 var(--mono); color: var(--muted); }
.deg-top span { position: absolute; top: 0; transform: translateX(-50%); }
.deg-top span:first-child { transform: none; } .deg-top span:last-child { transform: translateX(-100%); }
.deg-left { position: absolute; left: 10px; top: 26px; bottom: 14px; width: 32px; font: 10.5px/1 var(--mono); color: var(--muted); }
.deg-left span { position: absolute; left: 0; transform: translateY(-50%); }
.deg-left span:first-child { transform: none; } .deg-left span:last-child { transform: translateY(-100%); }
.stage { position: relative; height: clamp(460px, 64vh, 640px); background: var(--ink); overflow: hidden; border: 1px solid var(--hair); }
.stage::before { /* tick ruler along the inner edge */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(90deg, var(--hair-l) 0 1px, transparent 1px 2.5%) top / 100% 6px no-repeat,
    repeating-linear-gradient(180deg, var(--hair-l) 0 1px, transparent 1px 3.33%) left / 6px 100% no-repeat;
}
canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
canvas.sky:active { cursor: grabbing; }
.sky-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.sky-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 12px/1 var(--serif); letter-spacing: .2em; color: rgba(237, 230, 214, .82); text-shadow: 0 0 6px var(--ink), 0 0 2px var(--ink); }
.sky-label.is-sel { color: var(--gold); font-size: 14px; }
.sky-label.is-dim { color: rgba(156, 147, 132, .6); }
.reticle { position: absolute; left: 0; top: 0; color: var(--gold); pointer-events: none; z-index: 2; transition: width .25s, height .25s; }
.reticle > svg:not(.spk) { width: 100%; height: 100%; overflow: visible; }
.reticle .spk { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); }
.sky-tools { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; background: rgba(27, 23, 20, .92); border: 1px solid var(--hair-l); }
.sky-tools button { height: 32px; padding: 0 13px; font: 600 12px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sky-tools button[data-zoom] { font: 16px/1 var(--mono); width: 34px; padding: 0; }
.sky-tools button:hover { color: var(--cream); }
.sky-tools button.on { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); }
.sky-tools .sep { width: 1px; height: 18px; background: var(--hair-l); }
.sky-hint { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: 3; margin: 0; font: 11px var(--mono); color: var(--muted); white-space: nowrap; pointer-events: none; text-shadow: 0 0 6px var(--ink); }
.sky-cap { margin: 10px 2px 0; font: 12px var(--mono); color: var(--muted); text-align: right; }

/* overlay plates on the stage (home and constellation page) */
.mags-plate { padding: 18px 20px; }
.sky-wrap > .mags-plate { position: absolute; left: 66px; top: 50px; width: 250px; z-index: 4; background-color: rgba(27, 23, 20, .93); }
.info-slot { position: absolute; right: 34px; top: 50px; width: 340px; z-index: 4; }
.info-slot .plate { background-color: rgba(27, 23, 20, .95); }
.magcount { list-style: none; margin: 0; padding: 0; }
.magcount li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair); font: 12.5px var(--mono); color: var(--muted); }
.magcount li:first-child { border-top: 0; }
.magcount li .spk, .magcount li .mg0 { justify-self: center; }
.magcount li b { font: 600 17px/1 var(--serif); color: var(--cream); }
.magcount li.unread { color: rgba(156, 147, 132, .7); }

/* ---------- info plate */
.info { padding: 22px 24px 20px; }
.info-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.info-h h2 { font-size: 40px; font-weight: 600; letter-spacing: .03em; word-break: break-all; }
.coords { margin: 6px 0 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.coords .desig { color: var(--cream); opacity: .7; }
button.ca { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); font-size: 15px; }
button.ca span { font-style: italic; }
button.ca code { color: var(--cream); font-size: 13px; }
button.ca:hover, button.ca:hover code { color: var(--gold); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.trio > div { padding: 11px 0 11px 12px; border-left: 1px solid var(--hair); }
.trio > div:first-child { border-left: 0; padding-left: 0; }
.trio small { display: block; font: 600 11px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.trio b { font: 600 22px/1 var(--serif); white-space: nowrap; }
.mag-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; color: var(--gold); }
.mag-line .cond { width: 100%; font: italic 14px var(--serif); color: var(--muted); }
.mag-line .cond.dust { color: #b9907a; }
.light { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.light span { font-style: italic; color: var(--muted); }
.light b { font: 600 20px/1 var(--serif); }
.game { margin: 4px 0 14px; font: 11px var(--mono); color: var(--muted); }
.info-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.info-btns .btn { flex: 1 1 auto; }
.info-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 13px/1 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.info-open:hover { color: var(--cream); }
.empty-info p.muted { margin: 0; font-size: 16px; }

/* ---------- observatory log */
.log { display: grid; grid-template-columns: 230px 1fr; align-items: stretch; margin: 26px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.log .sec-t { padding: 16px 0; }
.log-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.log-cell { display: flex; gap: 12px; align-items: baseline; padding: 16px 18px; border-left: 1px solid var(--hair); font: 12px/1.4 var(--mono); color: var(--cream); min-width: 0; }
.log-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-cell time { color: var(--gold); flex: none; }
a.log-cell:hover { background: var(--plate); }
.log-cell.muted { color: var(--muted); grid-column: 1 / -1; }
.log-cell.fresh { animation: logIn 1.2s ease; }
@keyframes logIn { from { background: rgba(217, 164, 65, .12); } to { background: transparent; } }

/* ---------- atlas */
.atlas { padding: 24px 26px 18px; }
.sec-h { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.sec-h .rule { flex: 1; height: 1px; background: var(--hair); }
.seg { display: inline-flex; border: 1px solid var(--hair-l); }
.seg button { height: 30px; padding: 0 14px; font: 600 12px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--hair-l); }
.seg button.on { color: var(--gold); background: var(--raised); }
.atlas-scroll { overflow-x: auto; max-height: 640px; overflow-y: auto; }
.atlas-t { width: 100%; border-collapse: collapse; }
.atlas-t th { position: sticky; top: 0; background: var(--plate); text-align: left; padding: 10px 12px; font: 600 12px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair-l); z-index: 1; }
.atlas-t td { padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.atlas-t tbody tr[data-go] { cursor: pointer; transition: background .15s; }
.atlas-t tbody tr[data-go]:hover, .atlas-t tbody tr[data-go]:focus-visible { background: var(--raised); outline: none; }
.atlas-t tbody tr.first { background: rgba(35, 30, 25, .85); }
.atlas-t td:first-child { width: 58px; }
.atlas-t .tk { font: 600 17px/1 var(--serif); letter-spacing: .14em; }
.atlas-t .gen { margin-left: 6px; font: 10px var(--mono); letter-spacing: .04em; color: var(--gold); border: 1px solid var(--gold-d); padding: 2px 5px; vertical-align: 2px; }
.atlas-t .mono { color: var(--muted); }
.atlas-t .mag { white-space: nowrap; }
.atlas-t .mag > * { display: inline-block; vertical-align: middle; }
.atlas-t .mag span { margin-left: 8px; font-size: 16px; }
.atlas-t .chev { width: 30px; color: var(--muted); }
.atlas-t tr:hover .chev { color: var(--gold); }
.atlas-foot { margin: 12px 0 0; color: var(--muted); }

/* ---------- how it works */
.how { margin: 56px 0 30px; }
.how-h { text-align: center; margin-bottom: 30px; }
.how-h .sec-t { justify-content: center; margin-bottom: 18px; }
.how-h h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 500; }
.how-h em { color: var(--gold); font-weight: 400; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps .plate { padding: 26px 26px 24px; }
.steps .n { display: block; font: italic 500 34px/1 var(--serif); color: var(--gold); margin-bottom: 12px; }
.steps h3 { font-size: 25px; margin-bottom: 10px; }
.steps p { margin: 0; color: var(--muted); font-size: 17px; }
.how-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 18px; }
.mags { list-style: none; margin: 0; padding: 0; }
.mags li { display: grid; grid-template-columns: 26px 150px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); }
.mags li:first-child { border-top: 0; }
.mags li > :first-child { grid-row: 1 / 3; justify-self: center; }
.mags b { font-size: 18px; font-weight: 600; }
.mags span { font: 12px var(--mono); color: var(--muted); }
.mags em { grid-column: 2 / 4; font-size: 14px; color: var(--muted); }
.mags li.here b { color: var(--gold); }
.mags li.here { box-shadow: inset 2px 0 0 var(--gold); padding-left: 8px; }
.mags li.locked { opacity: .55; }
.mags li.done b { color: var(--cream); }
.marks { list-style: none; margin: 0; padding: 0; }
.marks li { display: grid; grid-template-columns: 26px 170px 1fr; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.marks li:first-child { border-top: 0; }
.marks li > :first-child { justify-self: center; }
.marks b { font-size: 18px; font-weight: 600; }
.marks span { font: 12px var(--mono); color: var(--muted); }

/* mark glyphs, engraved */
i.mk { display: inline-block; width: 18px; height: 18px; position: relative; flex: none; }
i.mk.comet { background: radial-gradient(circle at 78% 22%, var(--gold) 0 2.6px, transparent 3px), linear-gradient(225deg, transparent 30%, rgba(217, 164, 65, .7) 31% 36%, transparent 37%); }
i.mk.nebula { border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(237, 230, 214, .55), rgba(217, 164, 65, .2) 45%, transparent 70%); }
i.mk.moon { border-radius: 50%; border: 1px solid var(--cream); background: radial-gradient(circle at 70% 40%, var(--plate) 0 6px, transparent 6.5px), var(--cream); transform: scale(.85); }
i.mk.beacon { background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 2px 12px no-repeat, radial-gradient(circle at 50% 22%, var(--gold) 0 3px, transparent 3.5px); }
i.mk.star { background: var(--gold); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }

/* ---------- constellation page */
.w-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 4px 0 18px; }
.w-title { font-size: clamp(40px, 5.4vw, 66px); font-weight: 500; letter-spacing: .04em; word-break: break-all; }
.w-sub { margin: 8px 0 0; color: var(--muted); }
.w-acts { display: flex; gap: 10px; flex: none; }
.w-sky .stage { height: clamp(420px, 58vh, 580px); }
.w-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0 30px; }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); }
.figs > div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); }
.figs > div:not(:nth-child(3n+1)) { padding-left: 14px; border-left: 1px solid var(--hair); }
.figs small { display: block; font: 600 11px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.figs b { display: block; font: 600 26px/1.1 var(--serif); margin: 7px 0 4px; }
.figs p { margin: 0; font: 10.5px/1.4 var(--mono); color: var(--muted); }
.state-note { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--hair-l); color: var(--muted); font-size: 16px; }
.state-note b { display: block; color: var(--gold); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.kinds button { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--hair-l); background: var(--ink); transition: border-color .2s; }
.kinds button i.mk { grid-row: 1 / 3; }
.kinds button b { font-size: 16px; font-weight: 600; }
.kinds button span { font: 10.5px var(--mono); color: var(--muted); }
.kinds button:hover:not(:disabled) { border-color: var(--cream); }
.kinds button[aria-checked="true"] { border-color: var(--gold); background: var(--raised); }
.kinds button[aria-checked="true"] b { color: var(--gold); }
.kinds button:disabled { opacity: .4; cursor: not-allowed; }
.name-in { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.name-in[hidden] { display: none; }
.name-in input, .field input, .field textarea, .card input {
  width: 100%; padding: 10px 12px; background: var(--ink); border: 1px solid var(--hair-l); outline: none; color: var(--cream); font: 15px var(--mono);
}
.name-in input:focus, .field input:focus, .field textarea:focus { border-color: var(--gold); }
.pick-msg { min-height: 20px; margin: 12px 0 6px; font-size: 15px; color: var(--muted); }
.pick-msg.ok { color: #cfe6b8; } .pick-msg.err { color: #e6b3a3; }
.mark-plate .btn.dbl { width: calc(100% - 8px); min-height: 46px; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hair); }
.feed li:first-child { border-top: 0; }
.feed li b { font-weight: 600; }
.feed li small { display: block; font: 11px var(--mono); color: var(--muted); }
.feed li time { font: 11px var(--mono); color: var(--muted); }
.feed li.new { animation: logIn 1.4s ease; }
.feed li.none { display: block; }

/* ---------- launch */
.pub { max-width: none; }
.doc-h { margin-bottom: 26px; }
.pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; align-items: start; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--hair); }
.step:first-child { border-top: 0; padding-top: 4px; }
.step-n { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--hair-l); outline: 1px solid var(--hair); outline-offset: 3px; font: italic 500 22px/1 var(--serif); color: var(--gold); margin: 4px; }
.step-b h2 { font-size: 28px; font-weight: 500; margin-bottom: 6px; }
.sub { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.drop { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px dashed var(--hair-l); cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--gold); background: var(--plate); }
.drop.has { border-style: solid; }
.drop .th { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border: 1px solid var(--hair-l); font: 26px var(--mono); color: var(--muted); overflow: hidden; }
.drop .th img { width: 100%; height: 100%; object-fit: cover; }
.drop b { display: block; font-weight: 600; font-size: 18px; }
.drop small { display: block; font: 11.5px var(--mono); color: var(--muted); margin-top: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 15px; color: var(--cream); }
.field > span:first-child em { font-style: italic; color: var(--muted); font-size: 13.5px; margin-left: 4px; }
.field textarea { resize: vertical; min-height: 64px; }
.tick-in { display: flex; align-items: stretch; border: 1px solid var(--hair-l); background: var(--ink); }
.tick-in:focus-within { border-color: var(--gold); }
.tick-in i { display: grid; place-items: center; padding: 0 0 0 12px; font: 15px var(--mono); color: var(--gold); font-style: normal; }
.tick-in input { border: 0; text-transform: uppercase; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.cats button { text-align: left; padding: 12px 14px; border: 1px solid var(--hair-l); background: var(--ink); transition: border-color .2s; }
.cats button b { display: block; font-size: 18px; font-weight: 600; }
.cats button span { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.cats button:hover { border-color: var(--cream); }
.cats button.on { border-color: var(--gold); background: var(--raised); }
.cats button.on b { color: var(--gold); }
.lbl { font-size: 15px; margin-bottom: 8px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border: 1px solid var(--hair-l); outline: 1px solid transparent; outline-offset: 3px; }
.swatches button.on { outline-color: var(--gold); }
.devbuy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { height: 34px; padding: 0 14px; border: 1px solid var(--hair-l); font: 12.5px var(--mono); color: var(--muted); }
.chip:hover { color: var(--cream); }
.chip.on { border-color: var(--gold); color: var(--gold); }
.devbuy input { width: 110px; height: 34px; padding: 0 10px; }
.check { display: grid; gap: 4px; margin: 6px 0 4px; font-size: 15px; color: var(--muted); }
.check > * { display: flex; align-items: center; gap: 8px; }
.check .ok { color: var(--cream); }
.check i { width: 8px; height: 8px; flex: none; border: 1px solid var(--muted); border-radius: 50%; }
.check .ok i { background: var(--gold); border-color: var(--gold); }
.pub-side .sticky { position: sticky; top: 96px; display: grid; gap: 16px; }
.charter { padding: 20px 22px 22px; }
.charter-art { position: relative; aspect-ratio: 1 / 1; background: var(--ink); border: 1px solid var(--hair); overflow: hidden; }
.charter-art svg { width: 100%; height: 100%; }
.charter-art .grid { stroke: rgba(237, 230, 214, .14); fill: none; }
.charter-art .fig line, .charter-art .fig path { stroke: rgba(237, 230, 214, .6); }
.charter-art circle.u { fill: var(--muted); }
.charter-art .seal { position: absolute; right: 12px; top: 12px; width: 54px; height: 54px; border: 1px solid var(--hair-l); overflow: hidden; background: var(--plate); }
.charter-art .seal:empty { display: none; }
.charter-art .seal img { width: 100%; height: 100%; object-fit: cover; }
.art-note { position: absolute; left: 10px; bottom: 8px; font-size: 10.5px; color: var(--muted); }
.charter-b { padding-top: 16px; }
.charter-b h3 { font-size: 30px; font-weight: 600; word-break: break-word; }
.charter-b .tg { margin: 4px 0 12px; font-style: italic; color: var(--muted); }
.charter-meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.charter-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.charter-meta > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--hair); }
.charter-meta small { width: 100%; font: 600 10.5px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.charter-meta i { width: 12px; height: 12px; border: 1px solid var(--hair-l); }
.market-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- admin */
.card { background: var(--plate); border: 1px solid var(--hair-l); padding: 22px 24px; margin-top: 20px; }
.card .field input { font-size: 14px; }

/* ---------- footer */
.foot { margin-top: 50px; border-top: 1px solid var(--hair); }
.foot::before { content: ""; display: block; height: 3px; border-bottom: 1px solid var(--hair); }
.foot-in { max-width: var(--w); margin: 0 auto; padding: 22px 28px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
.foot-in .brand img { width: 30px; height: 30px; }
.foot-in .brand span { font-size: 18px; }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 20px; flex: 1; }
.foot-in nav a { font: 600 13px/1 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.foot-in nav a:hover { color: var(--cream); }
.foot .ca { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--hair-l); font-size: 14px; }
.foot .ca b { font-weight: 600; letter-spacing: .08em; }
.foot .ca code { color: var(--muted); }
.foot .ca em { font: 11px var(--mono); color: var(--gold); font-style: normal; }
.foot .ca.off { color: var(--muted); }
.foot-note { max-width: var(--w); margin: 0 auto; padding: 0 28px 34px; font-size: 14px; color: var(--muted); }

/* ---------- toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; }
.toast { max-width: 360px; padding: 11px 16px; background: var(--raised); border: 1px solid var(--hair-l); color: var(--cream); font-size: 16px; animation: toastIn .3s ease; transition: opacity .4s, transform .4s; }
.toast.ok { border-color: var(--gold-d); } .toast.err { border-color: rgba(201, 105, 79, .7); }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- responsive */
@media (max-width: 1180px) {
  .nav { gap: 18px; }
  .find { max-width: 240px; }
  .sky-wrap > .mags-plate { display: none; }
}
@media (max-width: 1020px) {
  .bar-in { flex-wrap: wrap; gap: 12px 18px; }
  .burger { display: inline-grid; }
  .nav { display: none; order: 9; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--hair); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .nav a.on::before, .nav a.on::after { display: none; }
  .nav a.on { color: var(--gold); }
  .find { order: 8; max-width: none; width: 100%; flex-basis: 100%; }
  .bar-end { margin-left: auto; }
  .info-slot { position: static; width: auto; margin-top: 16px; }
  .sky-wrap > .mags-plate { display: block; position: static; width: auto; margin-top: 16px; }
  .magcount { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
  .magcount li:nth-child(-n+3) { border-top: 0; }
  .log { grid-template-columns: 1fr; }
  .log .sec-t { padding-bottom: 6px; }
  .log-cells { grid-template-columns: 1fr 1fr; }
  .log-cell { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; }
  .steps, .how-cols, .w-grid { grid-template-columns: 1fr; }
  .pub-grid { grid-template-columns: 1fr; }
  .pub-side .sticky { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .bar-in { padding: 10px 16px; }
  .sky-tools button { padding: 0 10px; white-space: nowrap; letter-spacing: .1em; }
  .bar-rule::before, .bar-rule::after { left: 16px; right: 16px; }
  .brand span { font-size: 19px; letter-spacing: .3em; }
  .brand img { width: 32px; height: 32px; }
  .socials .pump-pill span { display: none; }
  .socials .pump-pill { padding: 0 8px; }
  .wallet { padding: 0 10px; }
  main > .page-in { padding: 14px 14px 0; }
  .stage-plate { padding: 20px 8px 8px 30px; }
  .deg-top { left: 30px; right: 8px; top: 5px; font-size: 9px; }
  .deg-left { left: 4px; top: 20px; bottom: 8px; font-size: 9px; }
  .deg-top span:nth-child(even) { display: none; }
  .stage { height: 62vh; min-height: 380px; }
  .sky-hint { display: none; }
  .magcount { grid-template-columns: 1fr 1fr; }
  .magcount li:nth-child(3) { border-top: 1px solid var(--hair); }
  .log-cells { grid-template-columns: 1fr; }
  .hide-s { display: none; }
  .atlas { padding: 18px 14px 14px; }
  .sec-h { flex-wrap: wrap; }
  .sec-h .rule { display: none; }
  .seg { margin-left: auto; }
  .atlas-t td, .atlas-t th { padding: 8px 6px; }
  .w-head { flex-direction: column; align-items: flex-start; }
  .figs { grid-template-columns: 1fr 1fr; }
  .figs > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .figs > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--hair); }
  .fields { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .mags li { grid-template-columns: 26px 1fr; }
  .mags span, .mags em { grid-column: 2; }
  .marks li { grid-template-columns: 26px 1fr; }
  .marks span { grid-column: 2; }
  .info-h h2 { font-size: 34px; }
  .foot-in { padding: 18px 16px 10px; }
  .foot-note { padding: 0 16px 28px; }
}

#atlas, #how, #mark, .w-grid { scroll-margin-top: 96px; }