:root {
  color-scheme: light;
  --color-bg: #f2ecd8;
  --color-surface: #fffaf0;
  --color-surface-soft: #e7e1c9;
  --color-ink: #17372a;
  --color-muted: #50675c;
  --color-primary: #18392b;
  --color-primary-hover: #244d3b;
  --color-accent: #c58d2e;
  --color-border: rgba(24, 57, 43, 0.18);
  --color-danger: #9a3325;
  --shadow-card: 0 20px 60px rgba(39, 55, 37, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --ease-spring: cubic-bezier(0.2, 0.85, 0.25, 1.25);
  --strength: 0;
  --orbit-angle: 0deg;
  --counter-orbit-angle: 0deg;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--color-primary);
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle at 88% 18%, rgba(197, 141, 46, 0.16), transparent 32%),
    linear-gradient(155deg, #f7f1df 0%, var(--color-bg) 55%, #dfe4cb 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { touch-action: manipulation; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 10px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: 50% 50% 50% 14%;
  transform: rotate(-8deg);
}
.brand-mark svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-en { margin-left: auto; color: var(--color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; }

.hero { margin-top: 28px; text-align: center; }
.eyebrow { margin: 0 0 8px; color: #6a5834; font-size: 13px; font-weight: 650; letter-spacing: 0.22em; }
h1 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: clamp(36px, 10vw, 52px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.12; }
.intro { margin: 12px auto 0; color: var(--color-muted); font-size: 16px; line-height: 1.6; }

.playground {
  position: relative;
  display: grid;
  min-height: 348px;
  margin-top: 4px;
  place-items: center;
  isolation: isolate;
}

.cicada {
  position: relative;
  z-index: 2;
  width: 250px;
  height: 304px;
  transform: rotate(var(--orbit-angle)) translateX(38px) rotate(var(--counter-orbit-angle));
  transform-origin: 50% 50%;
  will-change: transform;
}
.toy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.toy-swing { transform-origin: 50% 10%; transform: rotate(calc((var(--strength) * 7deg) - 3.5deg)); transition: transform 90ms ease-out; }
.wing { transform-box: fill-box; transform-origin: center; }
.wing-left { transform: rotate(calc(var(--strength) * -4deg)); }
.wing-right { transform: rotate(calc(var(--strength) * 4deg)); }
.wing-detail { fill: none; stroke: #315f3d; stroke-width: 2.5; stroke-linecap: round; opacity: .5; }
.cord { position: absolute; z-index: -1; top: 5px; left: 50%; width: 2px; height: 76px; background: repeating-linear-gradient(to bottom, #8c6937 0 4px, #caa65d 4px 8px); transform-origin: top; }
.ground-shadow { position: absolute; bottom: 18px; left: 50%; width: calc(120px + var(--strength) * 26px); height: 18px; background: rgba(20, 50, 35, .17); border-radius: 50%; filter: blur(8px); transform: translateX(-50%); }

.orbit-ring {
  position: absolute;
  z-index: 0;
  top: 78px;
  left: 50%;
  width: min(318px, 88vw);
  height: 206px;
  border: 1.5px dashed rgba(91, 119, 79, calc(var(--strength) * .46));
  border-radius: 50%;
  transform: translateX(-50%);
  transition: border-color 180ms ease-out;
}

.orbit-center {
  position: absolute;
  z-index: 1;
  top: 176px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(197, 141, 46, calc(var(--strength) * .7));
  border: 2px solid rgba(255, 250, 240, calc(var(--strength) * .8));
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--strength) * 10px) rgba(197, 141, 46, calc(var(--strength) * .12));
  transform: translate(-50%, -50%) scale(calc(.6 + var(--strength) * .4));
}

.sound-wave { position: absolute; z-index: -1; top: 116px; display: flex; align-items: center; gap: 8px; opacity: calc(.1 + var(--strength) * .9); }
.sound-wave-left { left: 2px; transform: rotate(180deg); }
.sound-wave-right { right: 2px; }
.sound-wave i { display: block; width: 8px; height: 8px; border: 2px solid var(--color-accent); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; transform: rotate(45deg) scale(calc(.55 + var(--strength) * .45)); }
.sound-wave i:nth-child(2) { width: 16px; height: 16px; }
.sound-wave i:nth-child(3) { width: 24px; height: 24px; }

.meter { position: absolute; bottom: 2px; left: 50%; width: min(236px, 70vw); transform: translateX(-50%); }
.meter > span { display: block; margin-bottom: 8px; color: var(--color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-align: center; letter-spacing: .08em; }
.meter-track { height: 8px; overflow: hidden; background: rgba(24, 57, 43, .12); border-radius: 999px; }
.meter-fill { width: calc(var(--strength) * 100%); height: 100%; background: linear-gradient(90deg, #5c8b51, var(--color-accent)); border-radius: inherit; transition: width 80ms ease-out; }

.controls { display: grid; gap: 12px; margin-top: 20px; }
.status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; color: var(--color-muted); font-size: 13px; font-weight: 600; }
.status-dot { width: 8px; height: 8px; background: #8a988f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(80,103,92,.1); }
.status.is-ready .status-dot { background: #2f7a43; box-shadow: 0 0 0 4px rgba(47,122,67,.13); }
.status.is-playing .status-dot { background: var(--color-accent); box-shadow: 0 0 0 5px rgba(197,141,46,.17); }
.status.is-error { color: var(--color-danger); }
.status.is-error .status-dot { background: var(--color-danger); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: transform 160ms var(--ease-spring), background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid rgba(197, 141, 46, .68); outline-offset: 3px; }
.button:active { transform: scale(.975); }
.button-primary { color: #fffdf6; background: var(--color-primary); box-shadow: 0 12px 26px rgba(24,57,43,.22); }
.button-primary:hover { background: var(--color-primary-hover); }
.button-primary.is-active { color: var(--color-primary); background: #dce9d5; border-color: rgba(24,57,43,.18); box-shadow: none; }
.button-secondary { color: var(--color-primary); background: rgba(255,250,240,.7); border-color: var(--color-border); }
.button-secondary:hover { background: var(--color-surface); }
.button-secondary.is-pressed { color: #fffdf6; background: #a97021; }

.settings { margin-top: 16px; overflow: hidden; background: rgba(255,250,240,.52); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.settings summary { display: flex; min-height: 52px; padding: 0 18px; align-items: center; justify-content: space-between; cursor: pointer; color: var(--color-ink); font-size: 14px; font-weight: 650; list-style: none; }
.settings summary::-webkit-details-marker { display: none; }
.settings summary span:last-child { color: var(--color-muted); font-weight: 500; }
.settings-body { padding: 0 18px 18px; border-top: 1px solid var(--color-border); }
.settings-body label { display: block; margin: 15px 0 8px; color: var(--color-muted); font-size: 13px; }
.settings input { width: 100%; min-height: 44px; accent-color: var(--color-primary); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; margin-top: -7px; color: var(--color-muted); font-size: 11px; }

.how-to { margin-top: 28px; padding: 22px; background: rgba(255,250,240,.64); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.how-to h2 { margin: 0 0 18px; font-family: "Songti SC", "STSong", serif; font-size: 22px; }
.how-to ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.how-to li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.how-to li > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; }
.how-to p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.how-to strong { display: block; color: var(--color-ink); font-size: 15px; }

.safety-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; color: #665a44; font-size: 12px; }
.safety-note svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.toast { position: fixed; z-index: 40; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); left: 20px; max-width: 460px; margin: 0 auto; padding: 14px 18px; color: #fff; background: rgba(23,55,42,.96); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.22); font-size: 14px; line-height: 1.5; text-align: center; animation: toast-in 240ms ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 700px) {
  body { padding: 24px; }
  .app-shell { min-height: auto; padding: 28px 40px 40px; background: rgba(247,241,223,.72); border: 1px solid rgba(255,255,255,.62); border-radius: 36px; box-shadow: 0 32px 100px rgba(20,50,35,.18); backdrop-filter: blur(12px); }
}

@media (max-height: 720px) and (orientation: landscape) {
  .app-shell { width: min(100%, 900px); }
  .hero { margin-top: 8px; }
  .playground { min-height: 300px; }
  .cicada { transform: scale(.82); }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --color-bg: #10271e; --color-surface: #183328; --color-surface-soft: #234536; --color-ink: #f5efd9; --color-muted: #b7c8bd; --color-primary: #d9b768; --color-primary-hover: #e6ca83; --color-accent: #e3aa4d; --color-border: rgba(225,236,216,.17); --shadow-card: 0 22px 65px rgba(0,0,0,.24); }
  html { background: #081b13; }
  body { background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.12) 0 1px, transparent 2px) 0 0 / 22px 22px, radial-gradient(circle at 82% 18%, rgba(197,141,46,.13), transparent 32%), linear-gradient(155deg, #10271e, #081b13); }
  .brand-mark { color: #18392b; }
  .eyebrow, .safety-note { color: #dbcda8; }
  .button-primary { color: #17372a; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
  .button-primary.is-active { color: #f5efd9; background: #284d3d; border-color: var(--color-border); }
  .button-secondary, .settings, .how-to { background: rgba(24,51,40,.72); }
  .status.is-ready .status-dot { background: #70c781; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cicada, .toy-swing, .wing { transform: none; }
  .orbit-ring, .orbit-center { display: none; }
}