:root {
  color-scheme: light;
  --bg: #9bd9ca;
  --bg-deep: #83c9b7;
  --ink: #123f34;
  --cream: #fff8dc;
  --bamboo-width: clamp(76px, 20vw, 158px);
  --track-shift: 0px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: linear-gradient(145deg, #a9e1d3 0%, var(--bg) 48%, var(--bg-deep) 100%);
  overscroll-behavior: none;
  touch-action: none;
}
button { color: inherit; font: inherit; border: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.app { position: relative; width: 100%; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; }

.brand {
  position: absolute; z-index: 30; top: max(24px, env(safe-area-inset-top)); left: calc(clamp(18px, 5vw, 64px) - 7px);
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; letter-spacing: .12em;
}
.brand svg { width: 22px; height: 22px; fill: none; stroke: #36795f; stroke-width: 3; stroke-linecap: round; }

.readout { position: absolute; z-index: 20; left: clamp(18px, 5vw, 64px); top: 17%; width: min(33vw, 280px); }
.readout p { margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.readout strong {
  display: block; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: clamp(39px, 10vw, 82px);
  font-weight: 700; line-height: .9; letter-spacing: -.065em; font-variant-numeric: tabular-nums;
}
.readout span { display: block; margin-top: 13px; color: rgba(18,63,52,.58); font-size: 11px; font-weight: 800; letter-spacing: .06em; }

.timeline { position: absolute; z-index: 4; inset: 0; }
.bamboo-track {
  position: absolute; z-index: 8; left: 50%; bottom: 0; width: var(--bamboo-width); height: 0;
  transform: translate(-50%, var(--track-shift)); will-change: transform;
  filter: drop-shadow(0 10px 10px rgba(17,73,50,.16));
}
.recentering .bamboo-track { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.bamboo-tail {
  position: absolute; left: 0; top: -1px; width: 100%; height: 70svh;
  background: url("assets/bamboo-body.20260729b.svg") center / 100% 100% no-repeat;
}
.segment { position: absolute; left: 0; width: 100%; cursor: ns-resize; touch-action: none; outline: none; }
.segment-body { position: absolute; inset: 0; background: url("assets/bamboo-body.20260729b.svg") center / 100% 100% no-repeat; }
.segment-node {
  position: absolute; z-index: 3; left: 50%; top: 0; width: 116%; aspect-ratio: 120/34;
  transform: translate(-50%,-50%); background: url("assets/bamboo-node.20260729b.svg") center / contain no-repeat;
}
.segment.inactive .segment-body, .segment.inactive .segment-node { filter: grayscale(1) saturate(.08) brightness(1.18); opacity: .68; }
.segment.complete .segment-body, .segment.complete .segment-node { filter: saturate(.7) brightness(.68); opacity: .72; }
.segment.selected .segment-node { filter: brightness(1.14) saturate(1.12); }
.segment:focus-visible .segment-node { filter: brightness(1.2); }
.segment-time {
  position: absolute; left: calc(100% + clamp(58px, 16vw, 180px)); top: 50%; transform: translateY(-50%);
  color: rgba(18,63,52,.5); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.segment.active .segment-time { color: var(--ink); }

.pan-zone { position: absolute; z-index: 6; inset: 0 0 0 61%; cursor: ns-resize; touch-action: none; }
.running .pan-zone { pointer-events: none; }

.start-button {
  position: absolute; z-index: 30; left: clamp(22px, 6vw, 72px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 22px);
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--cream);
  box-shadow: 0 12px 25px rgba(25,83,63,.2); cursor: pointer; transition: transform .16s, background .2s, color .2s;
}
.start-button:active { transform: scale(.94); }
.play-icon { margin-left: 4px; border-left: 15px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.start-button.running { color: var(--cream); background: var(--ink); }
.start-button.running .play-icon { width: 16px; height: 18px; margin: 0; border: 0; border-left: 5px solid; border-right: 5px solid; }
.credit {
  position:absolute; z-index:30; left:calc(clamp(22px, 6vw, 72px) + 31px); bottom:max(7px,env(safe-area-inset-bottom));
  transform:translateX(-50%); color:rgba(18,63,52,.52); font-size:8px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.reset-button {
  position: absolute; z-index: 30; left: calc(clamp(22px, 6vw, 72px) + 9px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,248,220,.22); cursor: pointer;
}
.reset-button svg { width: 21px; height: 21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.settings-button {
  position: absolute; z-index: 52; left: calc(clamp(22px, 6vw, 72px) + 9px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 200px);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,248,220,.32); cursor: pointer;
}
.settings-button svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.preset-button, .help-button {
  position:absolute; z-index:52; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--ink); background:rgba(255,248,220,.32); font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  font-size:19px; font-weight:900; cursor:pointer;
}
.preset-button { left:calc(clamp(22px, 6vw, 72px) + 9px); bottom:calc(max(8px, env(safe-area-inset-bottom)) + 148px); }
.help-button { left:calc(clamp(22px, 6vw, 72px) + 9px); bottom:calc(max(8px, env(safe-area-inset-bottom)) + 252px); }
.settings-button:active, .preset-button:active, .help-button:active { transform:scale(.93); }
.settings-button[aria-expanded="true"], .preset-button[aria-expanded="true"], .help-button[aria-expanded="true"] { color:var(--cream); background:var(--ink); }

.settings-layer, .modal-layer { position:absolute; z-index:60; inset:0; background:rgba(18,63,52,.14); backdrop-filter:blur(3px); }
.settings-panel {
  position:absolute; left:clamp(78px,20vw,150px); bottom:calc(max(8px,env(safe-area-inset-bottom)) + 176px); width:min(250px,calc(100vw - 94px));
  padding:12px; border-radius:22px; background:var(--cream); box-shadow:0 18px 45px rgba(13,57,43,.24);
}
.tone-options, .length-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.length-options { margin-top:8px; }
.tone-options button, .length-options button {
  display:grid; place-items:center; min-height:55px; border-radius:14px; color:rgba(18,63,52,.62); background:#e7f0dc; font-size:11px; font-weight:900; cursor:pointer;
}
.tone-options button { grid-template-rows:24px auto; gap:3px; }
.tone-options button.selected, .length-options button.selected { color:var(--cream); background:var(--ink); }
.tone-options i { position:relative; display:block; width:24px; height:22px; }
.tone-ding::before { content:""; position:absolute; left:6px; top:2px; width:12px; height:14px; border:2px solid currentColor; border-radius:8px 8px 5px 5px; }
.tone-ding::after { content:""; position:absolute; left:10px; bottom:1px; width:5px; height:5px; border-radius:50%; background:currentColor; }
.tone-wood::before { content:""; position:absolute; left:3px; top:7px; width:18px; height:12px; border-radius:50%; background:currentColor; opacity:.82; }
.tone-wood::after { content:""; position:absolute; left:11px; top:3px; width:2px; height:19px; background:#e7f0dc; transform:rotate(32deg); }
.selected .tone-wood::after { background:var(--cream); }
.tone-hum::before { content:""; position:absolute; inset:4px; border:2px solid currentColor; border-radius:50%; box-shadow:0 0 0 4px currentColor inset; opacity:.82; }
.tone-hum::after { content:""; position:absolute; left:1px; right:1px; top:10px; height:2px; border-radius:2px; background:currentColor; box-shadow:0 -5px currentColor,0 5px currentColor; }
.length-options button { min-height:42px; font-variant-numeric:tabular-nums; font-size:13px; }

.preset-panel, .help-panel {
  position:absolute; left:50%; top:50%; width:min(358px,calc(100vw - 32px)); transform:translate(-50%,-50%);
  border-radius:26px; background:var(--cream); box-shadow:0 22px 60px rgba(13,57,43,.28);
}
.preset-panel { display:grid; gap:9px; padding:12px; }
.preset-panel > button {
  display:grid; grid-template-columns:48px 74px 1fr; align-items:center; min-height:66px; padding:8px 12px;
  border-radius:18px; color:var(--ink); background:#e7f0dc; text-align:left; cursor:pointer;
}
.preset-panel > button:active { transform:scale(.985); }
.preset-panel strong { font-size:15px; font-weight:900; }
.preset-panel span { color:rgba(18,63,52,.62); font-size:10px; font-weight:900; line-height:1.35; text-align:right; }
.preset-panel i, .tomato-icon { display:grid; place-items:center; width:36px; height:36px; }
.preset-default, .preset-hiit { border-radius:12px; color:var(--cream); background:var(--ink); font-style:normal; font-size:12px; font-weight:900; }
.preset-hiit { color:var(--ink); background:#f5c653; }
.tomato-icon { overflow:visible; }
.tomato-icon path:first-child { fill:#e85d4a; }
.tomato-icon path:last-child { fill:none; stroke:#3d8062; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }

.help-panel { padding:25px 24px 23px; }
.help-panel h2 { margin:0 0 17px; font-size:20px; font-weight:900; letter-spacing:.06em; }
.help-panel ol { margin:0; padding-left:24px; }
.help-panel li { margin:0 0 11px; padding-left:4px; font-size:13px; font-weight:800; line-height:1.55; }
.help-panel li:last-child { margin-bottom:0; }

.toast { position:absolute; z-index:40; left:50%; top:max(26px,env(safe-area-inset-top)); transform:translate(-50%,-8px); padding:9px 14px; border-radius:16px; color:var(--cream); background:var(--ink); font-size:11px; font-weight:900; opacity:0; pointer-events:none; transition:.2s; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width:760px) {
  .readout { top:22%; }
}
@media (max-height:680px) {
  .readout { top:15%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}