:root { --bg: #190e48; --bg2: #2a1565; --card: #241258; --ink: #f4f0ff; --soft: #c9bff0; --gold: #ffc93c; --gold2: #ffe27a; --line: #4a3490; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg) radial-gradient(ellipse at 50% -10%, #5a2a9a 0%, var(--bg) 60%) no-repeat; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--gold2); text-underline-offset: 3px; }
a:hover { color: #fff; }
header, main, footer { width: 100%; max-width: 46rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
header { display: flex; align-items: center; gap: .7rem; padding-top: 1.1rem; padding-bottom: .6rem; }
header .brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
header img { width: 36px; height: 36px; border-radius: 22.37%; }
header nav { margin-left: auto; display: flex; gap: 1rem; font-size: .95rem; }
header nav a { color: var(--soft); text-decoration: none; }
header nav a:hover, header nav a[aria-current] { color: var(--gold2); }
main { flex: 1; padding-top: 1rem; padding-bottom: 2.5rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: .4rem 0 .6rem; }
h1 .sub { display: block; font-size: 1.05rem; font-weight: 500; color: var(--gold2); margin-top: .25rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .4rem; color: var(--gold2); }
p, ul, ol { margin: .5rem 0 .9rem; } li { margin: .3rem 0; }
.hero { text-align: center; padding: 1.2rem 0 .4rem; }
.hero img { width: 148px; height: 148px; border-radius: 22.37%; box-shadow: 0 10px 40px #0007, 0 0 0 1px #ffffff22; }
.hero p { max-width: 34rem; margin: .8rem auto; color: var(--soft); font-size: 1.1rem; }
.note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; margin: 1.2rem 0; }
.note strong { color: var(--gold2); }
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.2rem 0; }
.grid div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.grid b { color: var(--gold2); display: block; margin-bottom: .15rem; }
.updated { color: var(--soft); font-size: .9rem; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .6rem 1rem; margin: .6rem 0; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .3rem; color: var(--gold2); }
footer { padding-top: 1rem; padding-bottom: 1.6rem; color: var(--soft); font-size: .9rem; border-top: 1px solid var(--line); }
footer a { color: var(--soft); }
@media (max-width: 30rem) { h1 { font-size: 1.65rem; } header nav { gap: .7rem; font-size: .88rem; } }

/* the family: four icons, the shared world, the editions */
.family { display: flex; justify-content: center; gap: .5rem; margin: 0 0 .6rem; padding: .4rem 0 .2rem; }
.family img { width: 5.4rem; height: 5.4rem; border-radius: 22.37%; box-shadow: 0 8px 26px #0008, 0 0 0 1px #ffffff2a; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.family img:nth-child(1) { transform: rotate(-9deg) translateY(.3rem); } .family img:nth-child(2) { transform: rotate(5deg) translateY(-.3rem); } .family img:nth-child(3) { transform: rotate(-4deg) translateY(.3rem); } .family img:nth-child(4) { transform: rotate(8deg) translateY(-.2rem); }
.family img:hover { transform: rotate(0) scale(1.1) translateY(-.2rem); }
@media (max-width: 30rem) { .family img { width: 4.2rem; height: 4.2rem; } }
.pill { display: inline-block; font: 600 .78rem ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--gold2); background: #ffc93c1c; border: 1px solid #ffc93c55; border-radius: 999px; padding: .25rem .8rem; margin-bottom: .6rem; }
.lead2 { color: var(--soft); max-width: 36rem; margin: .4rem auto 0; font-size: 1.08rem; }
.editions { display: grid; gap: .9rem; margin: 1.2rem 0; }
.edition { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; }
.edition img { width: 5.5rem; height: 5.5rem; border-radius: 22.37%; box-shadow: 0 6px 20px #0007, 0 0 0 1px #ffffff22; }
.edition h3 { margin: 0; font-size: 1.15rem; color: var(--ink); } .edition .genre { color: var(--gold2); font-size: .95rem; margin: .1rem 0 .4rem; }
.edition p { margin: .3rem 0; color: var(--soft); font-size: .97rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .chips span { font: 600 .72rem ui-monospace, Menlo, monospace; letter-spacing: .05em; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); background: #ffffff0a; } .chips .hot { color: var(--gold2); border-color: #ffc93c66; background: #ffc93c14; }
@media (max-width: 30rem) { .edition { grid-template-columns: 1fr; } .edition img { width: 4.5rem; height: 4.5rem; } }
footer .from { display: block; margin-bottom: .3rem; }
@media (prefers-reduced-motion: reduce) { .family img { transition: none; } }

/* the Lotvale wordmark (Cinzel Decorative Black, drawn as outlines, as on the apps' home screens) */
h1 .wm-hero { display: block; margin: 0 auto .15rem; border-radius: 0; box-shadow: none; height: clamp(3.2rem, 11vw, 5rem); width: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 210, 60, .4)) drop-shadow(0 2px 2px rgba(20, 10, 0, .6)); }