@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  font-family: 'Outfit', 'Noto Sans SC', system-ui, sans-serif;
  color: #3c2d29;
  background: #f6f1e8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #3c2d29;
  --muted: #93817a;
  --line: #e4d9cc;
  --paper: #fbf8f1;
  --green: #506f5a;
  --green-soft: #e8eee6;
  --brown: #8f543b;
  --brown-deep: #63362b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 74% 9%, #fffaf1 0 16%, transparent 42%),
    linear-gradient(135deg, #f7f3ea 0%, #f4eee4 100%);
}

button, a { font: inherit; }
button { cursor: pointer; }

.page-shell {
  width: min(1160px, calc(100% - 56px));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}

.brand-mark,
.footer-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: var(--brown-deep);
  color: #fff5e7;
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  box-shadow: 0 5px 12px #63362b22;
}

.mode-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .05em;
}

.mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #77a080;
  box-shadow: 0 0 0 4px #e2eee3;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
  gap: 40px;
  align-items: center;
  min-height: 610px;
  padding: 66px 0 72px;
}

.eyebrow {
  margin: 0;
  color: #a97860;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 22px;
  color: var(--ink);
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 600;
  letter-spacing: -.095em;
  line-height: 1.18;
}

h1 em {
  color: var(--brown);
  font-size: .8em;
  font-style: normal;
  letter-spacing: -.08em;
}

.intro {
  max-width: 430px;
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #81716b;
  font-size: 11px;
  font-weight: 600;
}

.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta i { color: var(--brown); font-size: 14px; font-style: normal; }

.hit-summary {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  margin-top: 46px;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf3a8;
  box-shadow: 0 12px 30px #79564708;
}

.hit-summary > div { display: grid; gap: 4px; }
.summary-label { color: #ab9a91; font-size: 10px; letter-spacing: .08em; }
.hit-summary strong { color: var(--ink); font-size: 23px; font-weight: 600; line-height: 1; }
.hit-summary .summary-status { color: var(--green); font-size: 15px; }
.summary-divider { width: 1px; height: 32px; background: var(--line); }

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  isolation: isolate;
}

.hero-art::before {
  position: absolute;
  inset: 58px 25px 33px 25px;
  z-index: -2;
  border-radius: 50%;
  background: #eadcc9;
  content: '';
  opacity: .55;
}

.hero-art::after {
  position: absolute;
  inset: 82px 62px 58px 60px;
  z-index: -1;
  border: 1px solid #cfbba9;
  border-radius: 50%;
  content: '';
  opacity: .7;
}

.art-orbit {
  position: absolute;
  border: 1px solid #b99a86;
  border-radius: 50%;
  opacity: .45;
  transform: rotate(-24deg);
}

.orbit-one { width: 430px; height: 120px; top: 180px; left: 40px; }
.orbit-two { width: 390px; height: 116px; top: 207px; left: 62px; transform: rotate(24deg); }

.art-caption {
  position: absolute;
  top: 66px;
  right: 25px;
  display: grid;
  gap: 4px;
  color: #aa846e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.1;
  transform: rotate(11deg);
}

.muyu-button {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 510px);
  min-height: 455px;
  padding: 30px 10px 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.muyu-button:focus-visible { box-shadow: 0 0 0 5px #9cb49d66; }
.muyu-button:hover .muyu-illustration { transform: translateY(-5px) rotate(-1deg); }
.muyu-button:active .muyu-illustration { transform: translateY(5px) scale(.98) rotate(1deg); }

.muyu-illustration {
  width: min(100%, 470px);
  overflow: visible;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.muyu-button.is-hit .muyu-illustration { animation: knock .45s cubic-bezier(.2,.8,.2,1); }
.muyu-button.is-hit .ripple-one { animation: ripple .65s ease-out; }
.muyu-button.is-hit .ripple-two { animation: ripple .65s .12s ease-out; }

.hit-ripple {
  position: absolute;
  top: 45%;
  left: 53%;
  width: 112px;
  height: 68px;
  border: 1px solid #ab7458;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-11deg);
}

.ripple-two { width: 166px; height: 96px; border-color: #c49a81; }

.hit-hint {
  position: absolute;
  right: 37px;
  bottom: 30px;
  padding: 9px 13px;
  border-radius: 10px;
  background: #fffaf0e8;
  color: var(--brown);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: 0 9px 22px #76503a12;
}

@keyframes knock {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(3px) rotate(1.3deg); }
  55% { transform: translateY(-4px) rotate(-1.2deg); }
}

@keyframes ripple {
  0% { opacity: .75; transform: translate(-50%, -50%) rotate(-11deg) scale(.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1.45); }
}

.footer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 83px;
  border-top: 1px solid var(--line);
  color: #ac9b93;
  font-size: 10px;
}

.footer-mark { width: 23px; height: 23px; border-radius: 7px; font-size: 11px; box-shadow: none; }
.footer-separator { color: #ccb9aa; }

.toast {
  position: fixed;
  right: 26px;
  bottom: 25px;
  z-index: 10;
  max-width: calc(100% - 52px);
  padding: 10px 14px;
  border: 1px solid #dbcbbd;
  border-radius: 10px;
  background: #fffaf3f2;
  color: var(--brown-deep);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 14px 32px #5f3c2a1c;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}

.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 52px; }
  .hero-copy { max-width: 620px; }
  .hero-art { min-height: 440px; margin-top: -12px; }
}

@media (max-width: 560px) {
  .page-shell { width: min(100% - 30px, 500px); }
  .topbar { height: 74px; }
  .mode-note { font-size: 10px; }
  h1 { font-size: 46px; }
  .hero { min-height: auto; padding: 50px 0 38px; }
  .hit-summary { width: 100%; justify-content: space-between; margin-top: 33px; padding-inline: 17px; }
  .hero-art { min-height: 355px; margin-inline: -16px; }
  .hero-art::before { inset: 33px 30px 22px; }
  .hero-art::after { inset: 53px 48px 38px; }
  .orbit-one { width: 320px; height: 94px; top: 145px; left: calc(50% - 160px); }
  .orbit-two { width: 295px; height: 85px; top: 165px; left: calc(50% - 148px); }
  .art-caption { top: 26px; right: 19px; }
  .muyu-button { min-height: 355px; padding-top: 8px; }
  .muyu-illustration { width: 390px; }
  .hit-hint { right: 17px; bottom: 18px; }
  .footer { flex-wrap: wrap; gap: 7px; padding: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}