@font-face {
  font-family: 'rodin';
  src: url('fonts/RodinNTLGPro-DB-Extended.woff2') format('woff2'),
       url('fonts/RodinNTLGPro-DB-Extended.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'rodin';
  src: url('fonts/RodinNTLGPro-B-Extended.woff2') format('woff2'),
       url('fonts/RodinNTLGPro-B-Extended.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

html { font-family: 'rodin', system-ui, sans-serif; margin: 0; padding: 0; }
:root {
  /* the channel's own background: a vertical gradient, blue at the ends and aqua in the middle (sampled from its title screen) */
  --sky-top: #90b8f0; --sky-mid: #9ff1ec;
  --panel: rgba(255, 255, 255, .58); --panel-border: rgba(255, 255, 255, .85);
  --text: #1c2559; --muted: #4a5590; --accent: #4f62ab; --accent-hi: #5f74c4; --line: rgba(79, 98, 171, .28);
  --on-accent: #fff; --link: #34459a; --link-hi: #1c2559;
  --surface: rgba(255, 255, 255, .55); --surface-2: rgba(255, 255, 255, .65); --surface-hi: rgba(255, 255, 255, .9); --field: rgba(255, 255, 255, .85);
  --shadow: 0 8px 28px rgba(28, 37, 89, .10); --logo-shadow: rgba(28, 37, 89, .25); --track: rgba(28, 37, 89, .12); --star-off: rgba(28, 37, 89, .16);
  --swatch-ring: #fff; --swatch-edge: rgba(28, 37, 89, .35); --pill0: rgba(79, 98, 171, .16); --pill1: rgba(22, 144, 127, .18); --pill1-ink: #0b6a5c;
  --gold: #f2a900; --teal: #16907f; --rose: #c2456f;
  --radius: 16px;
  --sans: 'rodin', system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Malgun Gothic", sans-serif;
  --serif: var(--sans);
}
* { box-sizing: border-box; }
html { color-scheme: light dark; background: var(--sky-top); }
body {
  margin: 0; font: 16px/1.55 var(--sans); color: var(--text); min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 50%, var(--sky-top)); background-attachment: fixed;
}
a { color: var(--link); }
a:hover { color: var(--link-hi); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

.hero { text-align: center; padding: 56px 20px 24px; max-width: 760px; margin: 0 auto; }
.logo { margin: 0 auto 10px; width: min(520px, 88vw); }
.logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px var(--logo-shadow)); }
.lede { color: var(--muted); margin: 0 auto; max-width: 56ch; }

main { max-width: 1040px; margin: 0 auto; padding: 8px 16px 40px; }
.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.controls { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; padding: 24px; }
h2 { font: 400 22px/1.2 var(--serif); margin: 0 0 6px; }
.controls .col > h2:not(:first-child) { margin-top: 22px; }
.hint { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }

.people { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.person { display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 8px; align-items: end; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select {
  font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; width: 100%; min-height: 42px;
}
input:invalid, .bad input { border-color: var(--rose); }
select { text-overflow: ellipsis; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer; color: var(--on-accent); background: var(--accent); border: 0;
  border-radius: 999px; padding: 10px 18px; min-height: 42px;
}
.btn:hover { background: var(--accent-hi); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.btn.ghost:hover { background: var(--surface-hi); }
.icon-btn { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; font-size: 18px; }
.icon-btn:hover { color: var(--rose); border-color: var(--rose); }
.linkbtn { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--link-hi); }
.saved { margin-top: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.seg button { font: inherit; font-size: 14px; color: var(--muted); background: transparent; border: 0; padding: 10px 6px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.field + .field { margin-top: 12px; }

.status { min-height: 26px; margin: 14px 4px 4px; color: var(--muted); }
.status.error { color: var(--rose); }
#results { display: grid; gap: 18px; outline: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.card { padding: 22px; }
.card-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head .who { flex: 1 1 200px; min-width: 0; }
.name { font: 400 28px/1.15 var(--serif); margin: 0; overflow-wrap: anywhere; }
.sub { color: var(--muted); margin: 2px 0 0; }
.glyph { font-size: 1.15em; color: var(--accent); }
.chip-colour { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; background: var(--surface); }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--swatch-ring); box-shadow: 0 0 0 1px var(--swatch-edge); flex: none; }

.ring { width: 118px; height: 118px; flex: none; }
.ring .track { stroke: var(--track); }
.ring .value { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1); }
.ring text { fill: var(--text); font-family: var(--serif); text-anchor: middle; }
.ring .num { font-size: 34px; } .ring .of { font-size: 11px; fill: var(--muted); font-family: var(--sans); }

.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.topic { display: grid; grid-template-columns: 168px 1fr; gap: 6px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.topic:first-child { border-top: 0; padding-top: 0; }
.topic h3 { font: 600 12px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 4px; }
.stars { color: var(--gold); letter-spacing: .12em; font-size: 18px; white-space: nowrap; }
.stars .off { color: var(--star-off); }
.pts { display: block; font-size: 13px; color: var(--muted); }
.msg { margin: 0; }
.msg.num { color: var(--muted); }

.badge { display: inline-block; padding: 6px 16px; border-radius: 999px; font: 600 15px var(--sans); }
.badge.r0 { background: var(--pill0); }
.badge.r1 { background: var(--pill1); color: var(--pill1-ink); }
.badge.r2 { background: var(--accent); color: var(--on-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.chip { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.lab { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 8px 0 0; }

.wheel { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: 14px; color: var(--muted); }
.legend b { color: var(--text); font-weight: 600; }

.about { margin-top: 26px; padding: 4px 22px; }
.about summary { cursor: pointer; padding: 16px 0; font: 400 20px var(--serif); }
.about-body { padding-bottom: 14px; color: var(--muted); }
.about-body ol { padding-left: 1.2em; }
footer { max-width: 760px; margin: 0 auto; padding: 8px 20px 60px; color: var(--muted); font-size: 13px; text-align: center; }

.skeleton { height: 220px; border-radius: var(--radius); background: linear-gradient(100deg, rgba(255,255,255,.25) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.25) 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -100% 0; } }
.empty { text-align: center; padding: 42px 20px; color: var(--muted); }
.empty .glyph { font-size: 44px; display: block; margin-bottom: 8px; }

@media (max-width: 800px) {
  .controls { grid-template-columns: 1fr; padding: 18px; gap: 6px; }
  .grid2 { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr 1fr auto; }
  .topic { grid-template-columns: 1fr; }
  .seg { grid-template-columns: repeat(2, 1fr); }
  .seg button:nth-child(3) { border-left: 0; } .seg button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ring .value { transition: none; } .skeleton { animation: none; } }
[hidden] { display: none !important; }

.music { position: fixed; top: 14px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface-hi); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 42px; cursor: pointer; }
.music:hover { border-color: var(--accent); }
.music[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.music[aria-pressed="true"] .slash { display: none; }
@media (max-width: 480px) { .music .music-label { display: none; } .music { padding: 9px 11px; } }

/* the zodiac wheel keeps a night-sky backdrop so the planet colours stay readable */
.night { --text: #ece9fb; --muted: #b3afd6; color: var(--text); background: linear-gradient(180deg, #232052, #14122b); border-color: rgba(255, 255, 255, .18); }
.night .hint, .night .legend { color: var(--muted); }

/* dark theme: for devices that ask for it, a dark, slightly blue version of the same layout */
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #0e111a; --sky-mid: #2a3348;
    --panel: rgba(150, 170, 255, .07); --panel-border: rgba(170, 190, 255, .14);
    --text: #eceef8; --muted: #ffffff; --accent: #f4c95d; --accent-hi: #ffdb85; --line: rgba(170, 190, 255, .2);
    --on-accent: #1a1400; --link: #f4c95d; --link-hi: #ffe08a;
    --surface: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .07); --surface-hi: rgba(30, 36, 56, .92); --field: rgba(6, 8, 20, .4);
    --shadow: 0 8px 28px rgba(0, 0, 0, .3); --logo-shadow: rgba(0, 0, 0, .5); --track: rgba(255, 255, 255, .12); --star-off: rgba(255, 255, 255, .2);
    --swatch-ring: rgba(255, 255, 255, .7); --swatch-edge: rgba(0, 0, 0, .45); --pill0: rgba(255, 255, 255, .11); --pill1: rgba(95, 209, 193, .2); --pill1-ink: #aef1e6;
    --rose: #f08fb0; --teal: #5fd1c1;
  }
  .btn:hover, .seg button[aria-checked="true"]:hover { background: var(--accent-hi); }
  .skeleton { background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%); background-size: 300% 100%; }
  .night { background: linear-gradient(180deg, #232a40, #10131e); --muted: #ffffff; }
}