@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@500;600;700;800&display=swap');

:root{font-family:'Nunito',system-ui,sans-serif;color:#314d40;background:#fff9ed;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% -10%,#e6f2d8 0,transparent 35%),radial-gradient(circle at 90% 95%,#fde9cc 0,transparent 32%),#fff9ed}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid #db8b3e;outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app-shell{width:min(100%,520px);min-height:100svh;margin:auto;padding:clamp(12px,2.4vh,22px) 16px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:clamp(9px,1.6vh,15px)}
.site-header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 3px}
.brand{display:flex;align-items:center;font-family:'Fredoka',system-ui,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.5px;color:#314d40;white-space:nowrap}
.brand-green{color:#6a9e55}
.brand-flower{display:inline-block;width:20px;height:20px;margin-right:7px;background:radial-gradient(circle at 50% 15%,#f3bf61 0 4px,transparent 5px),radial-gradient(circle at 85% 50%,#f3bf61 0 4px,transparent 5px),radial-gradient(circle at 50% 85%,#f3bf61 0 4px,transparent 5px),radial-gradient(circle at 15% 50%,#f3bf61 0 4px,transparent 5px),radial-gradient(circle,#895d3d 0 3px,transparent 4px)}
.tagline{font-size:12px;color:#596b61;font-weight:800}
.surface{background:#fff;border-radius:19px;padding:14px 16px;box-shadow:0 4px 18px #53664b0b}
h1,h2{font-family:'Fredoka',system-ui,sans-serif;font-size:19px;line-height:1.2;font-weight:500;margin:0;color:#314d40}
.tempo-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bpm-display{display:flex;align-items:baseline;gap:7px;min-height:67px}
.bpm-display input{width:116px;border:0;padding:0;background:transparent;color:#245945;font-family:'Fredoka',system-ui,sans-serif;font-size:68px;font-weight:500;line-height:1;letter-spacing:-2px;appearance:textfield}
.bpm-display input::-webkit-inner-spin-button,.bpm-display input::-webkit-outer-spin-button{appearance:none}
.bpm-display span{font-size:17px;font-weight:800;color:#596b61}
.bpm-display input.changed{animation:bpm-pop .27s ease}
.tempo-steps{display:flex;gap:8px;align-self:center}
.tempo-steps button{width:49px;height:49px;border:0;border-radius:15px;background:#e6f1dc;color:#22533d;font:500 30px 'Fredoka',system-ui,sans-serif;transition:transform .16s,background .16s}
.tempo-steps button:active{transform:scale(.88);background:#cfe4c1}
#bpm-slider{display:block;width:100%;height:30px;margin:5px 0 0;appearance:none;background:transparent;cursor:pointer}
#bpm-slider::-webkit-slider-runnable-track{height:9px;border-radius:20px;background:linear-gradient(to right,#79a968 var(--range-percent,24%),#e5ecdF var(--range-percent,24%))}
#bpm-slider::-moz-range-track{height:9px;border-radius:20px;background:linear-gradient(to right,#79a968 var(--range-percent,24%),#e5ecdf var(--range-percent,24%))}
#bpm-slider::-webkit-slider-thumb{appearance:none;width:25px;height:25px;margin-top:-8px;border:6px solid #6d9c60;border-radius:50%;background:#fff;box-shadow:0 2px 6px #53664b30}
#bpm-slider::-moz-range-thumb{width:13px;height:13px;border:6px solid #6d9c60;border-radius:50%;background:#fff;box-shadow:0 2px 6px #53664b30}
.rhythm-card{padding-top:13px;padding-bottom:14px}
.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.pattern-option{min-height:49px;border:1px solid #d9e6d1;border-radius:13px;background:#f8fbf5;color:#314d40;font:500 20px 'Fredoka',system-ui,sans-serif;transition:background .2s,transform .2s,border-color .2s}
.pattern-option.selected{background:#dff2d2;border-color:#6f9f60;color:#22533d}
.pattern-option:active{transform:scale(.95)}
.beat-card{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:82px}
.flower{position:relative;width:60px;height:64px;flex:none;transform-origin:bottom center}
.stem{position:absolute;width:5px;height:36px;left:28px;bottom:2px;border-radius:5px;background:#5b9c63}
.leaf{position:absolute;width:18px;height:10px;background:#81bb6c;border-radius:16px 2px 16px 2px;transition:transform .3s}
.leaf-left{left:11px;bottom:17px;transform:rotate(28deg)}
.leaf-right{left:32px;bottom:27px;transform:rotate(-28deg) scaleX(-1)}
.bud{position:absolute;width:20px;height:20px;left:21px;top:13px;border-radius:50%;background:#e9a655;z-index:2;transition:transform .3s,background .3s}
.petal{position:absolute;width:17px;height:23px;left:22px;top:0;background:#f7c65d;border-radius:70% 70% 50% 50%;opacity:0;transform-origin:8px 24px;transition:opacity .25s,background .3s}
.p2{transform:rotate(72deg)}.p3{transform:rotate(144deg)}.p4{transform:rotate(216deg)}.p5{transform:rotate(288deg)}
.growth-1 .leaf-left,.growth-2 .leaf-left,.growth-3 .leaf-left{transform:rotate(28deg) scale(1.25)}
.growth-2 .petal,.growth-3 .petal{opacity:1}
.growth-2 .petal{background:#fae2a6}
.growth-3 .petal{background:#f7c65d}
.flower.beat-pop{animation:flower-beat .22s ease}
.flower.downbeat-pop{animation:flower-downbeat .34s ease}
.flower.grow-pop{animation:flower-grow .55s cubic-bezier(.2,1.5,.5,1)}
.water-drop{position:absolute;left:44px;top:2px;width:12px;height:17px;background:#7bbbd0;border-radius:65% 65% 65% 4%;transform:rotate(-35deg);opacity:0}
.flower.watered .water-drop{animation:water-fall .8s ease}
.spark{position:absolute;width:9px;height:9px;background:#f4b65f;border-radius:2px 8px 2px 8px;opacity:0;z-index:3}
.s1{left:4px;top:4px;--dx:-17px;--dy:-19px}.s2{left:51px;top:8px;--dx:18px;--dy:-17px}.s3{left:6px;top:36px;--dx:-20px;--dy:10px}.s4{left:49px;top:34px;--dx:20px;--dy:10px}
.flower.celebrate .spark{animation:spark-burst .75s ease-out}
.flower.celebrate{animation:flower-party .75s ease}
.beats{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.beat-track{display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.3vw,7px);width:100%;min-height:20px}
.beat-dot{width:clamp(6px,2vw,11px);height:clamp(6px,2vw,11px);border-radius:50%;background:#bed4b2;transition:transform .1s,background .1s}
.beat-dot.downbeat{width:clamp(9px,2.7vw,15px);height:clamp(9px,2.7vw,15px);background:#81b472}
.beat-dot.active{transform:scale(1.35);background:#e9a655}
.beat-dot.downbeat.active{background:#477e58}
.beat-caption{font-size:12px;font-weight:700;color:#596b61;white-space:nowrap}
.play-button{min-width:124px;min-height:54px;padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;background:#245945;color:#fff;font-size:17px;font-weight:800;transition:transform .18s,background .18s}
.play-button:active{transform:scale(.95)}
.play-button.is-playing{background:#36745b}
.play-symbol{display:inline-block;width:12px;height:15px;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.play-button.is-playing .play-symbol{border:0;background:linear-gradient(to right,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px);height:14px}
.feedback-card{padding:13px 14px}
.feedback-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.streak-seeds{display:flex;gap:5px}
.seed{width:21px;height:9px;border-radius:10px;background:#dce8d4;transition:background .22s,transform .22s}
.seed.pass{background:#78ae64}.seed.retry{background:#e8aa72}
.seed.new{animation:seed-pop .4s ease}
.feedback-buttons,.choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.feedback-button{min-width:0;min-height:64px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;font-size:17px;font-weight:800;line-height:1.12;text-align:center;transition:transform .18s,filter .18s}
.feedback-button:active{transform:scale(.95)}
.feedback-button.tap-pop{animation:button-spring .4s cubic-bezier(.2,1.5,.5,1)}
.feedback-button small{display:block;margin-top:4px;font-size:12px;font-weight:700;opacity:.9}
.pass-button,.faster-button{background:#dff2d2;color:#22533d}
.retry-button,.move-button{background:#fce8d6;color:#68442d}
.leaf-icon{display:inline-block;width:14px;height:18px;flex:none;background:#4c985f;border-radius:85% 5% 85% 5%;transform:rotate(-26deg)}
.drop-icon{display:inline-block;width:13px;height:18px;flex:none;background:#cf8d59;border-radius:65% 65% 65% 4%;transform:rotate(-35deg)}
.choice-area{animation:choices-in .35s ease}
.feedback-card.choice-swap{animation:card-swoop .45s ease}
.choice-buttons button{flex-direction:column;gap:0}
.choice-buttons button:disabled{opacity:.5;cursor:not-allowed}
.keep-button{display:block;margin:7px auto 0;padding:4px 8px;border:0;background:transparent;color:#39674c;font-size:13px;font-weight:800;text-decoration:underline}
.message{min-height:21px;margin:9px 0 0;text-align:center;color:#596b61;font-size:15px;font-weight:700;line-height:1.35}
.message.changed{animation:message-in .4s ease}
.footer-note{margin:auto 0 0;text-align:center;font-size:12px;color:#596b61}
@keyframes flower-beat{50%{transform:rotate(5deg) scale(1.04)}}
@keyframes flower-downbeat{50%{transform:translateY(-7px) rotate(-7deg) scale(1.1)}}
@keyframes flower-grow{50%{transform:translateY(-10px) scale(1.2)}}
@keyframes flower-party{25%{transform:translateY(-13px) rotate(-11deg) scale(1.16)}55%{transform:translateY(-8px) rotate(10deg) scale(1.2)}80%{transform:rotate(-5deg)}}
@keyframes water-fall{0%{opacity:0;transform:translateY(-14px) rotate(-35deg)}30%{opacity:1}100%{opacity:0;transform:translate(-8px,28px) rotate(-35deg)}}
@keyframes spark-burst{10%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(100deg)}}
@keyframes seed-pop{50%{transform:scale(1.25)}}
@keyframes bpm-pop{50%{transform:scale(1.09)}}
@keyframes button-spring{50%{transform:scale(1.075);filter:brightness(1.08)}}
@keyframes card-swoop{50%{transform:translateY(-4px);box-shadow:0 9px 25px #78ae6430}}
@keyframes message-in{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes choices-in{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:370px){.app-shell{padding-inline:11px;gap:8px}.surface{padding-inline:11px}.tagline{display:none}.pattern-option{font-size:18px}.feedback-button{font-size:15px}.feedback-button small{font-size:11px}.play-button{min-width:108px;font-size:15px}.flower{width:54px}.beat-caption{font-size:11px}}
@media(max-height:700px){.app-shell{gap:8px;padding-top:9px}.surface{padding-top:9px;padding-bottom:9px}.beat-card{min-height:72px}.flower{transform:scale(.88);margin:-5px}.pattern-option{min-height:44px}.feedback-button{min-height:58px}.footer-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}