:root {
  --bg: #faf7ff;
  --bg2: #f4eeff;
  --bg3: #e8dcff;
  --ink: #2a1838;
  --ink2: #645374;
  --line: #ece4f7;
  --mogu: #9b6bf2;
  --mogu-deep: #6d3fd1;
  --snout: #ffe9c7;
  --cheek: #ff8f8f;
  --soil: #1f1229;
  --card: #ffffff;
  --f: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --hand: "Klee One", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic", var(--f);
  --r: 22px;
  --shadow: 0 18px 50px rgba(42, 24, 56, 0.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.75;
  line-break: strict;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--bg3); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mogu-deep); text-underline-offset: 0.18em; }

a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mogu) 70%, #2a1838);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  transform: translateY(-160%);
  background: var(--soil);
  color: var(--bg);
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
}

.skip:focus { transform: none; }

.bar, .wrap, .foot-in { width: min(1040px, 100%); margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }
h1, h2, h3, p, li, dd, figcaption, th, td { overflow-wrap: anywhere; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
}

.brand::before {
  content: "";
  width: 0.78em;
  height: 0.78em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, var(--snout) 0 18%, transparent 19%),
    var(--mogu);
}

.tools { display: flex; align-items: center; }

.tools a {
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.2rem;
  font-size: 0.95rem;
}

.hero, .band, .doc { padding-bottom: 4.5rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 36px;
  align-items: center;
  padding-top: 1.5rem;
}

h1, h2, h3 {
  font-feature-settings: "palt" 1;
  line-height: 1.3;
  font-weight: 800;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); letter-spacing: 0; }

.lead { font-size: 1.125rem; margin: 1rem 0 0; max-width: 38rem; }

.store {
  margin: 1.4rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--ink2) 45%, var(--line));
  border-radius: 16px;
  color: var(--ink2);
  max-width: 28rem;
}

.age { color: var(--ink2); margin-top: 1rem; }

.portrait {
  background: var(--card);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1rem;
  justify-self: end;
  width: min(100%, 360px);
}

.portrait img { width: 100%; height: auto; }

.mogu-name { margin: 0.4rem 0 0; text-align: center; color: var(--ink2); font-size: 0.95rem; }

.band { padding-top: 0.5rem; }

.shots {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.device {
  width: 250px;
  background: var(--soil);
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.screen {
  background: var(--bg);
  border-radius: 26px;
  padding: 22px 16px 18px;
}

.screen-kicker { margin: 0; color: var(--ink2); font-size: 0.85rem; }

.mini {
  margin-top: 14px;
  background: var(--card);
  border-radius: 22px;
  padding: 18px 16px 16px;
  box-shadow: 0 10px 30px rgba(42, 24, 56, 0.06);
}

.mini-title { margin: 0; font-size: 1.45rem; font-weight: 800; }

.mini-meta { margin: 0.2rem 0 0; color: var(--ink2); }

.listen {
  margin: 1.1rem 0 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: 16px;
  min-height: 52px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.mini-note { margin: 0.8rem 0 0; color: var(--ink2); font-size: 0.92rem; }

figcaption { margin: 0; color: var(--ink2); max-width: 36rem; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 2.2rem;
}

.facts article, .notice, .doc-body section, .card {
  background: var(--card);
  border-radius: 30px;
  padding: 1.35rem 1.3rem 1.2rem;
  box-shadow: var(--shadow);
}

.facts > h2 { grid-column: 1 / -1; }
.facts h2, .doc h2 { font-size: 1.25rem; margin-bottom: 0.45rem; }

.facts p, .doc p, .doc li, .doc dd { margin: 0.4rem 0 0; }

.foot { background: var(--soil); color: var(--bg); padding: 2rem 0 2.4rem; }

.foot a { color: var(--bg); text-decoration: none; }

.foot a:hover { color: var(--snout); }

.foot-in { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }

.links, .toc ol { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; margin: 0; padding: 0; }
.toc ol { flex-direction: column; gap: 0.15rem; }

.links a, .toc a { display: inline-flex; align-items: center; min-height: 44px; }

.copy { margin: 0; color: color-mix(in srgb, var(--bg) 72%, var(--mogu)); }

.doc { padding-top: 0.5rem; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }

.doc-head { grid-column: 1 / -1; }

.doc h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.meta { color: var(--ink2); margin-top: 0.6rem; }

.toc { position: sticky; top: 16px; }

.toc a { color: var(--ink); text-decoration: none; }

.doc-body { display: grid; gap: 14px; min-width: 0; }

.doc-body section h2 { margin-top: 0; }

.doc-body ul, .doc-body ol { margin: 0.5rem 0 0; padding-left: 1.2rem; }

.doc-body li + li { margin-top: 0.35rem; }

table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; font-size: 0.98rem; }

caption { text-align: left; font-weight: 700; margin-bottom: 0.4rem; }

th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.4rem; border-top: 1px solid var(--line); }

.spec { margin: 0.4rem 0 0; }

.spec dt { font-weight: 800; margin-top: 0.9rem; }

.spec dd { margin: 0.2rem 0 0; }

.doc-body section.notice { background: var(--snout); box-shadow: none; }

.mail {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 16px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-weight: 700;
}

.mail:hover { color: var(--snout); }

@media (max-width: 860px) {
  .hero, .shots, .facts, .doc { grid-template-columns: 1fr; }
  .hero > *, .shots > * { min-width: 0; }
  .portrait { justify-self: start; width: 100%; }
  .device { width: min(250px, 100%); }
  .toc { position: static; }
  .toc ol { flex-direction: row; }
  .store { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .bar, .foot, .toc, .skip { display: none; }
  body { background: #fff; color: #000; }
  .facts article, .doc-body section, .notice, .card, .portrait, .mini { box-shadow: none; }
  a { color: #000; }
}