:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #304337; background: #dce5da; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
::selection { background: #c8d8b4; color: #243a2d; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; color: inherit; background: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #375c40; outline-offset: 5px; }
button:disabled { opacity: .45; cursor: not-allowed; }
main, #stage { position: absolute; inset: 0; }
#stage { touch-action: none; }
#stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#stage canvas.grabbing { cursor: grabbing; }
header { position: absolute; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: 36px; right: 32px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
header > * { pointer-events: auto; }
a.series-home { color: #354e3d; }
.header-actions { display: flex; gap: 12px; align-items: center; }
#sound { width: 44px; height: 44px; display: grid; place-items: center; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sound-waves, #sound[aria-pressed=true] .sound-off { display: none; }
#sound[aria-pressed=true] .sound-waves { display: block; }
#reset { min-height: 44px; padding: 0 12px; font-size: 13px; }
#reset:hover, #sound:hover { color: #162b1e; background: #f4f6ed80; border-radius: 8px; }
.intro { position: absolute; z-index: 1; top: 72px; left: 0; right: 0; text-align: center; pointer-events: none; transition: opacity .35s; }
h1 { margin: 0; font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', serif; font-size: clamp(44px, 4.8vw, 66px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
h1 span { color: #6f865e; }
.intro p { margin: 12px 0 0; font-size: 13px; color: #53634f; letter-spacing: .04em; }
.play-hint { position: absolute; pointer-events: none; top: 65%; left: 0; right: 0; text-align: center; display: grid; gap: 8px; transition: opacity .3s; }
#hint { font-size: 17px; font-weight: 500; }
#subhint { font-size: 12px; color: #53634f; }
body.playing .play-hint { opacity: 0; }
body.playing .intro { opacity: 0; }
#status { position: absolute; bottom: 143px; left: 0; right: 0; text-align: center; font-size: 13px; color: #53634f; pointer-events: none; }
footer { position: absolute; z-index: 2; bottom: max(23px, env(safe-area-inset-bottom)); left: 24px; right: 24px; display: grid; justify-items: center; gap: 13px; pointer-events: none; }
.controls { display: flex; align-items: center; gap: 25px; background: #f3f4eb; border-radius: 14px; padding: 12px 14px 12px 20px; box-shadow: 0 8px 30px #364e3715; pointer-events: auto; }
.colors { border: 0; margin: 0; padding: 0; display: flex; gap: 2px; }
.swatch { width: 40px; height: 44px; position: relative; display: grid; place-items: center; }
.swatch::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 -2px 2px #00000015; transition: transform .18s; }
.swatch::after { content: ''; position: absolute; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; }
.swatch.selected::after { border-color: #52614d; }
.swatch:hover::before { transform: scale(1.12); }
.stickiness { display: grid; grid-template-columns: auto 86px; align-items: center; gap: 6px 12px; font-size: 12px; }
.stickiness label { white-space: nowrap; }
.stickiness > output { grid-column: 2; font-size: 10px; color: #64705b; text-align: center; height: 10px; }
input[type=range] { width: 86px; accent-color: #62764e; cursor: pointer; margin: 0; height: 22px; }
#throw { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; min-height: 46px; border-radius: 9px; background: #344e3c; color: #f3f4eb; font-size: 13px; transition: background .16s, transform .16s; }
#throw:hover { background: #253e2d; transform: translateY(-1px); }
#throw:active { transform: translateY(1px); }
#throw svg { width: 16px; height: 16px; }
.keyboard-hint { margin: 0; color: #53604c; font-size: 11px; }
#error { position: absolute; inset: 40% 24px auto; text-align: center; padding: 20px; background: #f3f4eb; line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 620px) {
  header { top: max(13px, env(safe-area-inset-top)); left: 20px; right: 12px; }
  .header-actions { gap: 1px; }
  .intro { top: 82px; }
  .intro p { font-size: 12px; }
  #status { bottom: 174px; font-size: 12px; }
  footer { left: 14px; right: 14px; bottom: max(18px, env(safe-area-inset-bottom)); gap: 10px; }
  .controls { width: min(100%, 390px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 15px; padding: 10px 14px; }
  .colors { justify-content: space-between; }
  .stickiness { justify-self: end; grid-template-columns: auto 70px; gap: 3px 8px; }
  input[type=range] { width: 70px; }
  #throw { grid-column: 1 / -1; min-height: 43px; }
  .keyboard-hint { font-size: 10px; }
  .play-hint { top: 61%; }
  #hint { font-size: 15px; }
}
@media (max-width: 360px) {
  .controls { grid-template-columns: auto 1fr; column-gap: 8px; padding-inline: 10px; }
  .swatch { width: 32px; }
  .colors { gap: 0; }
  .stickiness { grid-template-columns: auto 62px; gap: 3px 6px; }
  input[type=range] { width: 62px; }
}
@media (max-width: 620px) and (max-height: 700px) {
  .intro p { display: none; }
  #status { top: 100px; bottom: auto; visibility: hidden; }
  body.playing #status { visibility: visible; }
}
@media (max-height: 530px) and (min-width: 621px) {
  .intro { top: 24px; }
  h1 { font-size: 38px; }
  .intro p { margin-top: 5px; }
  #status { bottom: 112px; }
  footer { bottom: 12px; gap: 6px; }
  .play-hint { top: 62%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }