:root {
  --night: #0b1020;
  --panel: #151b2f;
  --panel-2: #1c243c;
  --line: #2a3454;
  --ink: #1c1424;
  --paper: #f4efe4;
  --paper-ink: #24182c;
  --muted: #9aa6c4;
  --sakura: #ff6b8a;
  --sakura-deep: #c81e4a;
  --periwinkle: #7c9cff;
  --text: #f4f7ff;
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Hiragino Mincho ProN",
    "Yu Mincho", "Songti SC", "Songti TC", "Noto Serif CJK JP", "Noto Serif CJK SC",
    "Noto Serif CJK TC", "Noto Serif CJK KR", Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "PingFang SC",
    "PingFang TC", "PingFang HK", "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans SC",
    "Noto Sans TC", "Noto Sans Thai", "Sukhumvit Set", "Thonburi", "Leelawadee UI",
    "Geeza Pro", "Noto Naskh Arabic", "Nirmala UI", "Noto Sans Devanagari", "Segoe UI",
    sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(920px 520px at 108% -8%, rgba(255, 107, 138, 0.24), transparent 58%),
    radial-gradient(760px 480px at -12% 108%, rgba(124, 156, 255, 0.2), transparent 56%),
    var(--night);
  color: var(--text);
  font: 17px/1.7 var(--sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(244, 247, 255, 0.11) 1px, transparent 1.2px);
  background-size: 15px 15px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.speed {
  position: absolute;
  inset: -30% -20% auto;
  height: 78%;
  background: repeating-linear-gradient(
    -16deg,
    transparent 0 18px,
    rgba(244, 247, 255, 0.035) 18px 20px
  );
  mask-image: radial-gradient(ellipse at 72% 18%, #000 0%, transparent 68%);
}

.petal {
  position: absolute;
  width: 14px;
  height: 18px;
  background: var(--sakura);
  border-radius: 80% 0 80% 0;
  opacity: 0.55;
}

.petal:nth-child(2) { top: 92px; right: 6%; transform: rotate(18deg); }
.petal:nth-child(3) { top: 118px; right: 3%; width: 10px; height: 13px; background: #ffd0dc; transform: rotate(-24deg); }
.petal:nth-child(4) { top: 78px; right: 2%; width: 8px; height: 11px; background: var(--periwinkle); opacity: 0.45; transform: rotate(40deg); }
.petal:nth-child(5),
.petal:nth-child(6) { display: none; }

.topbar,
main { position: relative; z-index: 1; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.15rem;
  position: sticky;
  top: 0;
  background: var(--night);
  border-bottom: 3px solid var(--sakura);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--sakura);
  color: #1a0f16;
  border: 2px solid var(--text);
  box-shadow: 3px 3px 0 var(--periwinkle);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.brand small {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.lang-pick {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: min(100%, 15rem);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.select-wrap { position: relative; display: block; }

.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.85rem;
  top: 50%;
  transform: translateY(-20%);
  border: 5px solid transparent;
  border-top-color: var(--sakura);
  pointer-events: none;
}

.lang-pick select {
  width: 100%;
  appearance: none;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  padding-block: 0.55rem;
  padding-inline: 0.75rem 2.1rem;
  font: 600 0.95rem/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  min-height: 44px;
  cursor: pointer;
}

.wrap {
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
}

main { padding-bottom: 4.5rem; }

.hero { padding: clamp(1.6rem, 4vw, 3.4rem) 0 0.4rem; }

.hero-copy {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
}

.seal {
  margin: 0.15rem 0 0;
  writing-mode: vertical-rl;
  letter-spacing: 0.34em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.78rem;
  color: #1a0f16;
  background: var(--sakura);
  border: 2px solid var(--text);
  box-shadow: 4px 4px 0 var(--periwinkle);
  padding: 0.75rem 0.4rem;
}

.kicker {
  margin: 0;
  color: var(--sakura);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0.15rem 0 0.55rem;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 5.6vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: break-word;
  color: var(--text);
}

.lede {
  margin: 0;
  max-width: 38rem;
  color: #d5def3;
  font-size: 1.08rem;
  line-height: 1.55;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1.45rem 0 0;
}

.facts div {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.65rem 0.75rem 0.75rem;
  min-width: 0;
}

.facts dt {
  margin: 0 0 0.18rem;
  color: var(--sakura);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.facts dd {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.package {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.chapters {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 1.15rem 0 1.05rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 138, 0.85) transparent;
}

.chapters::-webkit-scrollbar { height: 6px; }
.chapters::-webkit-scrollbar-thumb { background: rgba(255, 107, 138, 0.85); border-radius: 99px; }

.chapters a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  flex: 0 0 auto;
  width: 13rem;
  padding: 0.55rem 0.7rem 0.65rem;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
}

.chapters a span:first-child {
  color: var(--sakura);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.chapter-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
}

.chapters a:hover { border-color: var(--sakura); background: var(--panel-2); }

.sheet {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border: 3px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -9px;
  box-shadow: 8px 8px 0 var(--sakura);
  padding: clamp(1.35rem, 3vw, 2.15rem);
}

.translation-note {
  margin: 0 0 1.15rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px dashed var(--sakura-deep);
  background: rgba(255, 107, 138, 0.1);
  color: #6d3144;
  font-size: 0.95rem;
}

.sheet p { margin: 0 0 0.85rem; }

.sheet h2 {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.sheet section {
  margin-top: 1.8rem;
  scroll-margin-top: 5.4rem;
}

.sheet h2 .num {
  flex: none;
  color: var(--sakura-deep);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.sheet ul {
  margin: 0.35rem 0 0.4rem;
  padding-inline-start: 1.15rem;
}

.sheet li { margin: 0.4rem 0; padding-inline-start: 0.2rem; }

.sheet li::marker { color: var(--sakura-deep); }

.sheet a {
  color: var(--sakura-deep);
  font-weight: 600;
}

.sheet strong,
.sheet a,
.package,
.kicker {
  unicode-bidi: isolate;
}

.sheet strong { font-weight: 700; }

.colophon {
  margin-top: 1.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(28, 20, 36, 0.16);
  color: #5c5164;
  font-size: 0.95rem;
}

.colophon p:last-child { margin-bottom: 0; }

.missing {
  padding: 4.5rem 0 2rem;
}

.missing h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); }

.missing p { color: #d5def3; max-width: 36rem; }

.missing a {
  color: var(--sakura);
  font-weight: 700;
}

a:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sakura);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .petal { display: none; }
  .topbar { align-items: stretch; flex-direction: column; }
  .facts { grid-template-columns: 1fr; }
  .seal { letter-spacing: 0.18em; padding: 0.55rem 0.28rem; }
  .sheet { box-shadow: 5px 5px 0 var(--sakura); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petal:nth-child(2) { top: 18px; }
  .petal:nth-child(3) { top: 36px; }
  .petal:nth-child(4) { top: 12px; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before, .fx, .lang-pick { display: none; }
  .topbar { position: static; border: 0; background: #fff; color: #000; }
  .brand small, .lede { color: #222; }
  h1, .facts dd { color: #000; }
  .facts div, .chapters a { background: #fff; color: #000; border-color: #bbb; }
  .sheet { box-shadow: none; }
  .sheet a, .missing a { color: #000; }
}