*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body { overscroll-behavior-y: none; }

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}
.scroll {
  flex: 1;
  padding: var(--s-7) var(--s-4) var(--s-9);
  min-width: 0;
}

.muted { color: var(--muted); }

.block + .block { margin-top: var(--s-7); }

.verdict { margin: var(--s-4) 0 0; text-wrap: balance; }
.top { padding-top: var(--s-2); }
.para + .para { margin-top: var(--s-4); }

.rule { margin: var(--s-7) 0 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card-sunken { background: var(--sunken); border-color: transparent; }

.chips { display: grid; grid-template-columns: repeat(3, 1fr);
         border-top: 1px solid var(--rule);
         border-bottom: 1px solid var(--rule); }
.chip {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  min-height: var(--tap-min);
  display: flex; flex-direction: column; gap: var(--s-1);
  align-items: flex-start; justify-content: center;
}
.chip + .chip { border-left: 1px solid var(--rule); padding-left: var(--s-4); }

.mk { width: 1em; height: 1em; vertical-align: -.14em; color: var(--muted); }
.chip .mk { color: var(--ink); }

.chip .lvl { display: flex; align-items: center; gap: var(--s-2);
             color: var(--muted); }
.gauge { width: 44px; height: 12px; flex: none; vertical-align: -.1em; }
.g-track, .g-mid, .g-cut { fill: none; stroke: var(--rule); stroke-width: 3; }
.g-mid { stroke: var(--draw); }
.g-cut { stroke: var(--draw); stroke-width: 2; }
.g-dot { fill: var(--ink); }

details.why { margin-top: var(--s-6); }
details.why > summary {
  list-style: none; cursor: pointer;
  min-height: var(--tap-min);
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
details.why > summary::-webkit-details-marker { display: none; }

details.why > summary .mk { margin-left: auto; width: .85em; height: .85em; }
details.why[open] > summary .mk-more { display: none; }
details.why:not([open]) > summary .mk-less { display: none; }
details.why > .why-body { padding: var(--s-5) 0 var(--s-2); }

details.why { interpolate-size: allow-keywords; }
details.why::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--m-base) var(--m-ease),
              content-visibility var(--m-base) allow-discrete;
}
details.why[open]::details-content { block-size: auto; }

.provwrap { display: flex; gap: var(--s-5); align-items: center;
            margin-bottom: var(--s-5); flex-wrap: wrap; }

.prov { display: grid; grid-template-columns: minmax(0, 1fr);
        gap: var(--s-1); min-width: 0; }
.prov .win { color: var(--muted); }
.prov .term { }
.prov .formula {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--muted);
}
.prov .formula svg { width: 1.15em; height: 1.15em; color: var(--ink); }

.prov .formula .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.prov .formula .fam.w-tense      svg { color: var(--aspect-tense); }
.prov .formula .fam.w-neutral    svg { color: var(--aspect-neutral); }

.wordmark { display: block; height: 22px; width: auto; color: var(--ink);
            align-self: flex-start; }

.offer { margin-top: var(--s-8); }

.offer ul { margin: var(--s-4) 0 0; padding: 0; list-style: none;
            display: grid; gap: var(--s-3); }
.offer li { text-wrap: pretty; }

.offer-price { display: flex; align-items: baseline; gap: var(--s-3);
               margin-top: var(--s-5); flex-wrap: wrap; }

.receipt-lead { margin-top: var(--s-4); padding-bottom: var(--s-4);
                border-bottom: 1px solid var(--rule); }

.field-row { display: flex; align-items: center; justify-content: space-between;
             gap: var(--s-4); }
.field-row > span { margin: 0; flex: none; }
.field-row input { width: auto; flex: 1; max-width: 62%; }

.tiers { display: grid; gap: var(--s-3); margin-top: var(--s-2); }

.tiers.multi { grid-template-columns: 1fr; }

.resolved { margin: var(--s-2) 0 0;            color: var(--muted); }

.tier {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-4);
  width: 100%; min-height: var(--tap-min); text-align: left;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;

}

.tier.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tier .tn { }
.tier .tp {            display: inline-flex; align-items: center; gap: var(--s-1);
            justify-self: end; }
.tier .tr, .tier .td {            color: var(--muted); }
.tier .td { justify-self: end; display: inline-flex; align-items: center;
            gap: var(--s-1); }

.tiers.multi .tier { grid-template-columns: 1fr auto; align-items: baseline; }
.tiers.multi .tier .tp, .tiers.multi .tier .td { justify-self: end;
                                                 text-align: right; }

.pending { margin: var(--s-4) 0 0; padding-left: var(--s-4);
           border-left: 1px solid var(--rule); text-wrap: pretty; }

.receipt { margin-top: var(--s-6); }

.receipt .kv { border-bottom: 0; position: relative; }
.receipt .kv::after { content: ""; position: absolute; left: 0; right: 0;
                      bottom: 0; height: 1px; background: var(--rule);
                      transform-origin: left; }
.receipt-in { animation: receipt-in 260ms cubic-bezier(.2, .9, .2, 1) backwards; }
.receipt-in .kv {
  animation: kv-in 200ms cubic-bezier(.2, 0, 0, 1) calc(var(--i) * 70ms) backwards;
}
.receipt-in .kv::after {
  animation: rule-draw 300ms cubic-bezier(.25, .1, .25, 1)
             calc(var(--i) * 70ms) backwards;
}
@keyframes receipt-in { from { opacity: 0; transform: scale(.97); } }
@keyframes kv-in      { from { opacity: 0; transform: translateY(6px); } }
@keyframes rule-draw  { from { transform: scaleX(0); } }
.receipt .kvs { margin: var(--s-5) 0 0; }
.receipt .kv b { display: inline-flex; align-items: baseline; gap: var(--s-1); }

.receipt-thin {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--sunken); border-radius: var(--r-sm);
}
.receipt-thin .t-caption { flex: 1; min-width: 0; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
.receipt-thin .amt {                     display: inline-flex; align-items: center;
                     gap: var(--s-1); flex: none; }

.docstart { margin-top: var(--s-8); display: block; }
.docstart .band-cover { margin-bottom: var(--s-6); }

.sec { scroll-margin-top: var(--s-5); }
.block.sec { margin-top: var(--s-8); }
.sec .t-mid { margin: 0 0 var(--s-4); }
.sec .para { margin-top: var(--s-4); }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap-min);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--ground);
  cursor: pointer;
  transition: opacity var(--m-fast) var(--m-ease);
}
.btn:active { opacity: .82; }
.btn-quiet { background: transparent; color: var(--ink); }

.btn[aria-disabled="true"] {
  background: var(--sunken); color: var(--muted); border-color: var(--edge);
}
.btn[aria-disabled="true"]:active { opacity: 1; }

.btn-ticket { justify-content: space-between; gap: var(--s-4);
              padding-inline: var(--s-5); }
.btn-ticket i { flex: 1; height: 1px; background: currentColor; opacity: .3; }
.btn-ticket .price {                     display: inline-flex; align-items: center; gap: var(--s-1); }
.mk.star { width: .82em; height: .82em; color: currentColor; }

.btn-danger { background: var(--danger-fill); color: var(--ink);
              border-color: var(--danger-edge); }

.tabs {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  min-height: var(--tap-min);
  display: flex; align-items: stretch; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--muted);
}

.tab-l { display: flex; align-items: center; position: relative; }

.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-l::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--ink);
}

.screen { flex: 1; display: flex; flex-direction: column; min-height: 0;
          animation: enter var(--m-base) var(--m-ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }

.sheet-back {
  position: fixed; inset: 0; background: var(--ink); opacity: .38;
  z-index: 10;
}

.sheet-back-in { animation: fade var(--m-base) var(--m-ease) both; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: var(--s-4) var(--s-4) calc(var(--s-7) + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;

  overscroll-behavior: contain;
}

.sheet-in { animation: rise var(--m-slow) var(--m-ease) both; }
@keyframes rise { from { transform: translateY(100%); } }

.sheet-grip {
  width: 36px; height: 4px; border-radius: var(--r-sm);
  background: var(--rule); margin: 0 auto var(--s-5);
}
.sheet h2 { margin: 0; }
.sheet .close {
  margin-top: var(--s-6); width: 100%; min-height: var(--tap-min);
  background: none; border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink);  cursor: pointer;
}

.w-hit { fill: transparent; cursor: pointer; }
.w-hit:focus-visible { fill: var(--sunken); }

.sk { background: var(--sunken); border-radius: var(--r-sm); }
.sk-line { height: 1em; margin-top: var(--s-2); }
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: pulse 1.6s var(--m-ease) infinite; }
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}

.wheel {
  --w-hair: 1;
  --w-tick: 1.5;
  --w-chord: 1.6;
  display: block; width: 100%; height: auto;
}

.wheel-compact { --w-hair: 2; --w-tick: 3; --w-chord: 3.2; }

.w-ring, .w-div, .w-house, .w-tick { fill: none; stroke: var(--draw); }
.w-ring, .w-ring-inner, .w-div { stroke-width: var(--w-hair); }

.w-house { stroke-width: var(--w-hair); stroke-dasharray: 8 5; }

.w-hnum { fill: var(--muted); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

.w-leader { stroke: var(--draw); stroke-width: calc(var(--w-hair) * 0.7);
            fill: none; opacity: 0.55; }
.w-tick { stroke: var(--muted); stroke-width: var(--w-tick); }

.w-angle { fill: none; stroke: var(--ink); stroke-width: calc(var(--w-hair) * 2.5); }
.w-angle-mc { stroke-width: calc(var(--w-hair) * 1.75); }
.w-body, .w-transit, .w-sign, .w-am { color: var(--ink); }
.w-transit, .w-sign { color: var(--muted); }
.w-knock { fill: var(--ground); }
.w-asp { stroke-width: var(--w-chord); opacity: var(--chord-alpha); fill: none; }
.w-harmonious { color: var(--aspect-harmonious); stroke: var(--aspect-harmonious); }
.w-tense      { color: var(--aspect-tense);      stroke: var(--aspect-tense); }
.w-neutral    { color: var(--aspect-neutral);    stroke: var(--aspect-neutral); }

.w-lc-harmonious { stroke-width: calc(var(--w-chord) * .85); }
.w-lc-tense      { stroke-width: calc(var(--w-chord) * 1.6); }
.w-lc-neutral    { stroke-width: calc(var(--w-chord) * .85);
                   stroke-dasharray: 3 3; }

.w-lc-minor      { stroke-width: calc(var(--w-chord) * .85);
                   stroke-dasharray: 1 3; stroke-linecap: round; }
.w-neutral:not(.w-lc-neutral) { stroke-dasharray: 3 3; }
.w-minor:not(.w-lc-minor) { stroke-dasharray: 1 3; stroke-linecap: round; }

.w-asp.w-hero { opacity: 1; stroke-width: calc(var(--w-chord) * 2.2); }
.w-asp.w-ground { opacity: .2; stroke-width: calc(var(--w-chord) * .7); }
.w-lead { color: var(--ink); }
line.w-tick.w-lead { stroke: var(--ink); stroke-width: calc(var(--w-tick) * 1.5); }

.chartlet { width: 100%; max-width: 168px; height: auto; flex: none; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
          margin-top: var(--s-4); }
.legend span { display: flex; align-items: center; gap: var(--s-2);
               color: var(--muted); }

.legend i.dash { border-top-style: dashed; }
.legend i.dot { border-top-style: dotted; }
.legend i.w-tense { border-top-width: 3px; }
.legend i.w-harmonious, .legend i.w-neutral, .legend i.w-minor {
  border-top-width: 2px; }
.legend i { width: 22px; height: 0; border-top-width: 2px;
            border-top-style: solid; display: inline-block; }

table.bodies { width: 100%; border-collapse: collapse; margin-top: var(--s-5); }
table.bodies td { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule);
                  }
table.bodies td:first-child { width: 1.6em; }
table.bodies svg { width: 1.15em; height: 1.15em; color: var(--ink); }
table.bodies .nm { }
table.bodies .dg { text-align: right; white-space: nowrap; color: var(--muted); }

.note { border-left: 2px solid var(--ink); padding-left: var(--s-5);
        margin-top: var(--s-7); }
.note p { margin: 0; }

.field { display: block; margin-top: var(--s-5); }
.field > span { display: block; color: var(--muted); }
.field input, .field select {
  width: 100%; min-height: var(--tap-min); margin-top: var(--s-1);
  padding: var(--s-3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

svg.wheel { view-transition-name: wheel; }

[data-nav="fwd"]::view-transition-new(root) { animation-name: nav-from-right; }
[data-nav="fwd"]::view-transition-old(root) { animation-name: nav-to-left; }
[data-nav="back"]::view-transition-new(root) { animation-name: nav-from-left; }
[data-nav="back"]::view-transition-old(root) { animation-name: nav-to-right; }
@keyframes nav-from-right { from { opacity: 0; transform: translateX(16px); } }
@keyframes nav-from-left  { from { opacity: 0; transform: translateX(-16px); } }
@keyframes nav-to-left    { to { opacity: 0; transform: translateX(-16px); } }
@keyframes nav-to-right   { to { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  svg.wheel { view-transition-name: none; }
}

.bleed { margin-inline: calc(var(--s-4) * -1); }
.bleed > svg.wheel { width: 100%; }

.stepline { margin-top: var(--s-4); }
.stepline .t-micro { margin-bottom: var(--s-2); }
.steps { display: flex; gap: var(--s-2); }
.steps i { flex: 1; height: 2px; background: var(--rule);
           position: relative; overflow: hidden; }

.steps i::after { content: ""; position: absolute; inset: 0;
                  background: var(--ink);
                  transform: scaleX(0); transform-origin: left; }
.steps i.on::after { transform: scaleX(1); }

.dategroup { display: block; }
.dparts { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.dpart { display: flex; flex-direction: column; gap: var(--s-2); }
.dpart:nth-child(3) { flex: 1; }
.dpart input { width: 100%; min-width: 3.5ch; padding: var(--s-3) 0;
               border: 0; border-bottom: 1px solid var(--rule);
               background: none; color: var(--ink); }
.dpart:nth-child(3) input { min-width: 6ch; }
.dpart input:focus { outline: none; border-bottom-color: var(--ink); }

.footer { margin-top: var(--s-9); padding-top: var(--s-5);
          border-top: 1px solid var(--rule); }

.footer p { margin: 0 0 var(--s-3);
            color: var(--muted); }

.footer .links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.footer a { color: var(--muted); display: inline-flex; align-items: center;
            min-height: var(--tap-min); }

.centered { min-height: 100%; display: grid; place-items: start stretch;
            padding: var(--s-7); text-align: left; }

.has-sky { display: flex; flex-direction: column; position: relative;
           overflow: hidden; }
.has-sky > .centre { position: relative; z-index: 1; flex: 1;
                     display: flex; flex-direction: column;
                     justify-content: center; }

.sheet-head { display: flex; align-items: center; gap: var(--s-4);
              margin-bottom: var(--s-5); }
.sheet-head svg.big { width: 34px; height: 34px; color: var(--ink); }
.kv { display: flex; justify-content: space-between; align-items: baseline;
      gap: var(--s-4); padding: var(--s-3) 0;
      border-bottom: 1px solid var(--rule); }
.kv span {           color: var(--muted); }

.kv b svg, .sheet svg.fam { width: 1.1em; height: 1.1em; vertical-align: -.12em; }
.fam.w-harmonious, .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.fam.w-tense,      .fam.w-tense svg      { color: var(--aspect-tense); }
.fam.w-neutral,    .fam.w-neutral svg    { color: var(--aspect-neutral); }
.screen.still { animation: none; }

.sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; color: var(--ink); pointer-events: none;
  animation: skyin var(--m-slow) var(--m-ease) both;
}

@keyframes skyin { from { opacity: 0; } }

.sky { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky { opacity: .92; }
}
:root[data-theme="dark"] .sky { opacity: .92; }

.night .sky { opacity: .92; }

.sky-horizon { stroke: var(--muted); stroke-width: 1; opacity: 1; }

.sky-ecliptic { fill: none; stroke: currentColor; stroke-width: 1;
                opacity: .55; }
.sky-star { fill: currentColor; }

.sky-name { fill: var(--ink); }

.sky-dots { display: none; }
.sky-lines { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky-dots { display: block; }
  :root:not([data-theme="light"]) .sky-lines { display: none; }
}
:root[data-theme="dark"] .sky-dots { display: block; }
:root[data-theme="dark"] .sky-lines { display: none; }
.night .sky-dots { display: block; }
.night .sky-lines { display: none; }

.night .footer { background: var(--ground); }
.has-sky .btn { background: var(--ink); }

body.has-main .btn-ticket,
body.has-main [data-act="generate"],
body.has-main [data-act="next"] { display: none; }

.chip-none { color: var(--muted); }

.consent { margin-top: var(--s-6); text-align: left; }
.cbox {
  display: flex; align-items: flex-start; gap: var(--s-4);
  width: 100%; min-height: var(--tap-min); padding: var(--s-2) 0;
  border: 0; background: transparent; color: var(--ink);
  text-align: left; cursor: pointer;
}
.cbox .tick {
  flex: none; width: 22px; height: 22px; margin-top: .12em;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.cbox .tick .mk { width: 16px; height: 16px; color: var(--ink); }
.cbox .ctext { text-wrap: pretty; }
.cbox a { color: var(--ink); }

.consent.nagging .cbox .tick { border-color: var(--danger-edge);
                               box-shadow: 0 0 0 2px var(--danger-edge); }
.refund { margin: var(--s-2) 0 0 calc(22px + var(--s-4)); text-wrap: pretty; }

.nag { margin: var(--s-2) 0 0 calc(22px + var(--s-4));
       display: flex; gap: var(--s-3); align-items: baseline; }

.nag-sign { flex: 0 0 auto; color: var(--danger-mark); }

.factlist { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.factlist div { display: grid; gap: var(--s-1); }
.factlist dt, .factlist dd { margin: 0; }
.factlist dt { color: var(--muted); }

.arch { margin-top: var(--s-5); border-top: 1px solid var(--rule); }

.arow-day {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "when go" "verdict go";
  align-items: center;
  column-gap: var(--s-4); row-gap: var(--s-1);
  justify-items: start;
  width: 100%; min-height: var(--tap-min); padding: var(--s-4) 0;
  text-align: left; background: transparent; color: var(--ink);
  border: 0; cursor: pointer;
  transition: opacity var(--m-fast) var(--m-ease);
}
.arow-day:active { opacity: .6; }
.arow-day::after {
  content: ""; position: absolute; left: var(--s-5); right: 0; bottom: 0;
  height: 1px; background: var(--rule);
}
.arow-day:last-child::after { left: 0; }
.ad-when { grid-area: when; color: var(--muted); }
.ad-verdict { grid-area: verdict; text-wrap: pretty; }
.arow-day .mk-go { grid-area: go; width: 16px; height: 16px;
                   color: var(--muted); }

.arch-month {
  display: block; margin: var(--s-6) 0 var(--s-2);
  color: var(--muted);
}

.arch-mo:first-child .arch-month { margin-top: var(--s-4); }

.why-all { margin-top: var(--s-8); }
.why-one + .why-one { margin-top: var(--s-6);
                      padding-top: var(--s-6);
                      border-top: 1px solid var(--rule); }

.topbar-stamp { color: var(--ink); }

.gen { margin-top: var(--s-6); }
.gsteps { list-style: none; margin: var(--s-5) 0 0; padding: 0;
          display: grid; gap: var(--s-4); }
.gstep { display: flex; align-items: baseline; gap: var(--s-3);
         color: var(--muted); }
.gstep.on { color: var(--ink); }
.gstep-mark { flex: 0 0 auto; width: 16px; height: 16px;
              display: inline-flex; align-items: center; justify-content: center; }
.gstep-mark .mk { width: 16px; height: 16px; color: var(--ink); }

.leave { margin-top: var(--s-8); }

.scroll.settled { display: flex; flex-direction: column; }
.settled .settle, .settled .block.settle { margin-top: auto; }

.qrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%; min-height: var(--tap-min);
  margin-top: var(--s-7); padding: var(--s-3) 0;
  border: 0; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--muted);
  text-align: left; cursor: pointer;
}
.qrow .mk { color: var(--muted); }

.danger-foot { margin-top: var(--s-10); padding-top: var(--s-5);
               border-top: 1px solid var(--rule); }
.card.danger { margin-top: var(--s-10); border-color: var(--danger-edge); }

.legal-line p { margin: 0; }
.legal-line .links { margin-top: var(--s-2); }

.chart-head { margin: var(--s-5) 0 0; text-wrap: balance; }

.sec-h { margin: 0 0 var(--s-2); }
.sec-note { margin: 0 0 var(--s-4); text-wrap: pretty; }
.rows { display: grid; }

.prow, .arow, .place {
  display: grid; align-items: center; gap: var(--s-3);
  width: 100%; min-height: var(--tap-min); padding: var(--s-3) 0;
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--ink); text-align: left;
  cursor: pointer;

  transition: box-shadow var(--m-fast) var(--m-ease),
              padding-left var(--m-fast) var(--m-ease);
}

.prow { grid-template-columns: 1.4em auto 1.2em minmax(0, 1fr) auto auto auto; }
.arow { grid-template-columns: 1.2em 1fr auto; }

.place { grid-template-columns: minmax(0, 1fr) auto; }
.place .nm { min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.prow .g, .prow .sg, .arow .g { width: 1.1em; height: 1.1em; color: var(--ink); }
.prow .sg { color: var(--muted); }
.prow .nm { white-space: nowrap; }
.arow .nm { min-width: 0; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.prow .sn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 344px) {
  .prow { grid-template-columns: 1.4em auto 1.2em auto auto auto; }
  .prow .sn { display: none; }
}
.prow .sn, .prow .dg, .prow .hs, .arow .dg, .place .dg {
  color: var(--muted); white-space: nowrap;
}
.prow .hs { min-width: 4.4em; text-align: right; }
.prow .dg { min-width: 4.2em; text-align: right; }
.arow .dg { min-width: 3.6em; text-align: right; }
.arow .fam.w-harmonious { color: var(--aspect-harmonious); }
.arow .fam.w-tense      { color: var(--aspect-tense); }
.arow .fam.w-neutral    { color: var(--aspect-neutral); }

.prow.on, .arow.on { box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--s-3); }

.agroup + .agroup { margin-top: var(--s-8); }
.agroup > .t-micro { padding-bottom: var(--s-2); }
.agroup > .arow:last-child { border-bottom: 0; }

.agroup > details.why { margin-top: 0; }
.agroup > details.why > summary { border-top: 0; }
.asp-tail > .arow:last-child { border-bottom: 0; }

.w-pickring { fill: none; stroke: var(--ink); stroke-width: 1.5; }

.no-time { margin: var(--s-4) 0 0; }
.no-time p { margin: 0; text-wrap: pretty; }
.linkish {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0; border: 0; background: transparent; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.prow.no-house { grid-template-columns: 1.4em auto 1.2em minmax(0, 1fr) auto auto; }
@media (max-width: 344px) {
  .prow.no-house { grid-template-columns: 1.4em auto 1.2em auto auto; }
}

.chosen-none { display: block; }
.chosen-none > span { display: block;                      color: var(--muted); }

.notice, .offline { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
           background: var(--sunken); border-radius: var(--r-sm);
           text-wrap: pretty; }
.nag-wide { margin-left: 0; }

.dayhead { position: relative; }
.band { position: relative; height: 150px; margin-bottom: var(--s-5);
        margin-inline: calc(var(--s-4) * -1);
        overflow: hidden; }
.band .sky { position: absolute; inset: 0; }
.dayhead-body { position: relative; }
.dayhead .verdict { margin: var(--s-3) 0 0; }

.evidence { margin-top: var(--s-6); }

.evidence .provwrap { margin-bottom: 0; flex-wrap: nowrap; align-items: center; }

.evidence .chartlet { width: clamp(104px, 40%, 152px); }
.evidence .prov { flex: 1; min-width: 0; }

.buys { margin-top: var(--s-5); padding-left: var(--s-4);
        border-left: 1px solid var(--rule); }
.buys dl { margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.buys dt { }
.buys dd { margin: var(--s-1) 0 0;           color: var(--muted); text-wrap: pretty; }

.month + .month { margin-top: var(--s-8); }
.wdays, .dgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wdays { gap: var(--s-1); margin-bottom: var(--s-2); }
.wdays span {              color: var(--muted);
              text-align: center; }
.dgrid { gap: var(--s-1); }
.pad { display: block; }

.dcell {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: var(--s-2) 0;
  border: 0; background: transparent; cursor: pointer;
}

.sky .w-nasp, .w-nasp { stroke-width: calc(var(--w-chord) * .7);
                        opacity: var(--chord-alpha); }

.w-config { fill: currentColor; fill-opacity: .07; stroke: currentColor;
            stroke-width: 1; opacity: var(--chord-alpha); }
.w-cfg-grand-trine { color: var(--aspect-harmonious); }
.w-cfg-t-square    { color: var(--aspect-tense); }
.w-cfg-yod         { color: var(--aspect-neutral); }

.theme { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.theme .tsw {
  flex: 1 1 0; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge); border-radius: 2px;
  background: transparent; color: var(--muted); cursor: pointer;
  min-height: var(--tap-min);
}
.theme .tsw.on { border-color: var(--ink); color: var(--ink); }

.prow .rx { color: var(--muted); }
.prow .rx svg { width: 1em; height: 1em; }

.dcell .dn {             color: var(--muted); }

.dcell.shut { cursor: default; }

.dcell.future-paid .dn { color: var(--muted); opacity: .55; }
.dcell.future-paid::after {
  content: ""; display: block; width: 62%; height: 0;
  margin-top: var(--s-2);
  border-top: 1px dotted var(--aspect-neutral); opacity: .7;
}

.dcell .dm { display: block; width: 62%; height: 0;
             border-top-width: calc(1px + var(--w) * 3px);
             border-top-style: solid; }
.dcell .dm.w-harmonious { border-color: var(--aspect-harmonious); }
.dcell .dm.w-tense      { border-color: var(--aspect-tense); }

.fam.w-minor, .w-minor { color: var(--aspect-minor); stroke: var(--aspect-minor);
                         border-color: var(--aspect-minor); }

.formula .deg { color: var(--muted); }
.dcell .dm.w-neutral    { border-color: var(--aspect-neutral);
                          border-top-style: dashed; }

.dcell.paid .dn { color: var(--ink); text-decoration: underline;
                  text-underline-offset: 2px; }

.dcell.owned { position: relative; }
.dcell.owned .dn { color: var(--ink); }
.dcell.owned::after { content: ""; position: absolute; bottom: var(--s-1);
                      width: 3px; height: 3px; border-radius: 50%;
                      background: var(--ink); }

.reading-body .para.lead { }
.reading-body .para.lead + .para { margin-top: var(--s-5); }

.see-in-chart { margin-top: 0; }

.revealing .w-div, .revealing .w-sign, .revealing .w-angle {
  animation: settle 160ms cubic-bezier(.2, 0, 0, 1) calc(var(--i) * 24ms) backwards;
}

.revealing .w-house {
  animation: cusp-draw 380ms cubic-bezier(.25, .1, .25, 1)
             calc(300ms + var(--i) * 30ms) backwards;
  will-change: stroke-dashoffset;
}
.revealing .w-hnum {
  animation: settle 200ms var(--m-ease) calc(520ms + var(--i) * 30ms) backwards;
}

.revealing .w-body, .revealing .w-transit {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: body-land 260ms cubic-bezier(.2, .9, .2, 1)
             calc(700ms + var(--i) * 32ms) backwards;
}
.revealing .w-tick, .revealing .w-leader:not(.w-leader-am) {
  animation: settle 260ms var(--m-ease) calc(700ms + var(--i) * 32ms) backwards;
}

.revealing .w-config, .revealing .w-nasp {
  animation: settle 280ms var(--m-ease) calc(1250ms + var(--i) * 40ms) backwards;
}

.revealing .w-asp {
  animation: settle 380ms cubic-bezier(.25, .1, .25, 1)
             calc(1500ms + var(--i) * 90ms) backwards;
}
.revealing .w-am, .revealing .w-knock, .revealing .w-leader-am {
  animation: settle 240ms var(--m-ease) calc(1690ms + var(--i) * 90ms) backwards;
}

body.revealing .chart-head {
  animation: head-in 240ms cubic-bezier(.2, 0, 0, 1) 3050ms backwards;
}

@keyframes settle    { from { opacity: 0; } }
@keyframes body-land { from { opacity: 0; transform: scale(.86); } }
@keyframes head-in   { from { opacity: 0; transform: translateY(6px); } }
@keyframes cusp-draw {
  from { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
  70%  { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
}

.gen-run .w-hero {
  animation: chord-pulse 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.gen-run .w-neutral.w-hero, .gen-run .w-minor.w-hero {
  animation-name: chord-breathe;
}
@keyframes chord-pulse {
  0%, 100% { stroke-dashoffset: 0; }
  50%      { stroke-dashoffset: var(--len); }
}
@keyframes chord-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.gen-run .w-hero:not(.w-neutral):not(.w-minor) {
  stroke-dasharray: var(--len);
}

.key { margin-top: var(--s-5); padding-top: var(--s-4);
       border-top: 1px solid var(--rule); }
.key .legend { margin: 0; color: var(--ink); }
.key .why { margin-top: var(--s-4); }
.key p { margin: var(--s-3) 0 0; }
.chart-head + .no-time { margin-top: var(--s-3); }

.provline { display: flex; flex-wrap: wrap; align-items: baseline;
            gap: var(--s-2) var(--s-4); }
.provline .formula { display: inline-flex; align-items: center;
                     gap: var(--s-2); flex: 0 0 auto; }
.provline .formula svg { width: 1.15em; height: 1.15em; color: var(--ink); }
.provline .formula .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.provline .formula .fam.w-tense      svg { color: var(--aspect-tense); }
.provline .formula .fam.w-neutral    svg { color: var(--aspect-neutral); }
.provline .term { flex: 0 0 auto; }
.provline .pair { color: var(--muted);
                  flex: 1 1 auto; min-width: 0; }
.provline .orb { color: var(--muted);
                 flex: 0 0 auto; }

.proofline { margin: var(--s-5) 0; padding-left: var(--s-4);
             border-left: 2px solid var(--rule);
             display: grid; gap: var(--s-3); justify-items: start; }

.dayhead { padding-top: var(--s-6); }
.doorline { margin: var(--s-4) 0 0; color: var(--muted); }
.doorline .linkish { color: var(--ink); }

.reading-body + .chips { margin-top: var(--s-8); }
.chips { display: block; border-bottom: none; }

.chip { flex-direction: column; align-items: start;
        justify-content: start; gap: var(--s-2);
        padding: var(--s-4) 0; }
.chip + .chip { border-left: none; padding-left: 0;
                border-top: 1px solid var(--rule); }
.chip .lvl { color: var(--muted); }

.chip b.chip-none { color: var(--muted); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin: 0;
  min-height: var(--tap-min);
}

.topbar + .dayhead { padding-top: var(--s-4); }

.topbar-access { margin-left: auto; white-space: nowrap; }
.topbar-title {
  flex: 1 1 auto; text-align: center;
  color: var(--muted);
}
.icon-btn, .icon-btn-space {
  flex: 0 0 auto;
  width: var(--tap-min); height: var(--tap-min);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn .mk { width: 20px; height: 20px; }
.icon-btn:active { opacity: .55; }
.icon-btn { transition: opacity var(--m-fast) var(--m-ease); }

.mlist { display: block; }
.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label go" "hint go";
  align-items: center;
  column-gap: var(--s-4);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-4) 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.mrow-label { grid-area: label; }
.mrow-hint { grid-area: hint; margin-top: 2px; }
.mrow .mk-go {
  grid-area: go;
  width: 16px; height: 16px;
  color: var(--muted);
}
.mrow:active { opacity: .6; }
.mrow { transition: opacity var(--m-fast) var(--m-ease); }

.mrow-gap { height: var(--s-6); }

.kv {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0;
}
.kv dt { margin: 0; }
.kv dd { margin: 0; text-align: right; }

.hero-wheel {
  display: flex; justify-content: flex-start;
  width: 100%; padding: var(--s-4) 0 var(--s-2);
  background: none; border: 0;
  cursor: pointer;

}

.hero-wheel.hero-wide {
  margin-inline: calc(var(--s-4) * -1);
  width: calc(100% + var(--s-4) * 2);
}

.hero-wheel:not(.hero-wide) { justify-content: center; }
.hero-wheel:not(.hero-wide) .chartlet { max-width: 300px; }
.hero-wheel:active { opacity: .7; }
.hero-wheel { transition: opacity var(--m-fast) var(--m-ease); }

.hero-wheel .wheel-fragment {
  width: 100%; max-width: none;

  --w-hair: 1; --w-tick: 2; --w-chord: 2.2;
}

.proofline.hero-proof { margin-top: var(--s-2); }

.spent { margin-top: var(--s-6); }

.more-tiers { width: 100%; margin-top: var(--s-7); }