@font-face{font-family:Meadow;src:url('fonts/plex.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Meadow;src:url('fonts/plex-medium.woff2') format('woff2');font-weight:500 700;font-display:swap}
:root{--paper:#f5f3e9;--ink:#293e35;--muted:#657264;--line:#dcded0;--low:#c87b55;--middle:#ccac4f;--high:#809aa8;--green:#657e59;--white:#fffdf6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Meadow,'Trebuchet MS',sans-serif;-webkit-tap-highlight-color:transparent}button,input,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #365e82;outline-offset:5px}button:disabled{cursor:default}button svg,svg.icon{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.solid{fill:currentColor;stroke:none}.symbols{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.topbar{max-width:1280px;margin:auto;padding:27px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}.brand>svg{width:38px;height:45px;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round}.brand>span{font-size:24px;font-weight:500;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;margin-top:3px;font-weight:500}.sound-controls{display:flex;align-items:center;gap:12px}.icon-button{width:46px;height:46px;border-radius:50%;background:#e6e9dd;display:grid;place-items:center}.volume-label{font-size:12px}input[type=range]{width:95px;accent-color:var(--green);min-height:44px}.guide-button{background:none;padding:12px 0 12px 20px;font-size:13px}.guide-button span{margin-left:8px;font-size:20px}main{max-width:1280px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:center;padding:38px 7px 28px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:500;margin:0 0 12px;color:#60735e}h1{font-size:46px;line-height:1.1;letter-spacing:-2.2px;font-weight:500;margin:0}h1 em{font-family:Georgia,serif;font-weight:400;color:#697e5e}.intro-note{line-height:1.5;font-size:16px;color:#667363;margin:0 20px 0 0}.intro-note span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.3px;margin-top:15px}.places{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:17px;padding:5px;background:#eeeee3;gap:5px;margin-bottom:22px}.place{display:flex;gap:13px;align-items:center;justify-content:center;min-height:68px;background:transparent;border-radius:12px;font-size:14px;position:relative}.place svg{width:29px;height:29px;stroke-width:1.65}.place.selected{background:var(--white);box-shadow:0 2px 5px #293e3509}.place i{height:5px;width:5px;position:absolute;bottom:8px;background:transparent;border-radius:50%}.place.visited i{background:#a9b795}.place.selected i{background:var(--green)}.playground{background:var(--white);border:1px solid var(--line);border-radius:25px;overflow:hidden}.activity-head{display:flex;align-items:center;justify-content:space-between;padding:29px 35px 12px;gap:20px}h2{font-size:27px;font-weight:500;letter-spacing:-.8px;margin:0 0 7px}.activity-head .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:9px}.activity-head p:last-child{font-size:14px;color:var(--muted);margin:0;line-height:1.5}.demo-controls{display:flex;align-items:center;gap:10px}.listen-button{border:1px solid #d3dac7;background:#edf0e5;border-radius:36px;min-width:130px;min-height:62px;padding:12px 21px;display:flex;align-items:center;gap:12px;font-size:14px;white-space:nowrap}.listen-button svg{width:27px;height:27px}.listen-button.playing{background:#dce7cd}.stop-button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#edf0e5}.meadow{height:310px;position:relative;overflow:hidden}.landscape{position:absolute;bottom:0;width:100%;height:100%;pointer-events:none}.pitch-marker{position:absolute;left:35px;top:30px;height:145px;color:#809078;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:8px;letter-spacing:1.3px}.pitch-marker i{width:1px;background:#d9dfd0;flex:1}.sound-object{position:absolute;width:150px;text-align:center;z-index:2}.sound-object.low{left:24%;top:116px}.sound-object.middle{left:46%;top:77px}.sound-object.high{left:68%;top:37px}.pebble{width:145px;height:140px;background:none;display:grid;place-items:center;position:relative;user-select:none;transition:transform .18s cubic-bezier(.2,.7,.4,1);padding:0}.pebble svg{width:100%;height:100%;stroke:none;fill:var(--ink);overflow:visible;filter:drop-shadow(0 9px 0 #293e3510);transition:filter .25s}.pebble svg path:first-child{fill:var(--low);stroke:#aa6142;stroke-width:1}.pebble-middle svg path:first-child{fill:var(--middle);stroke:#b08e37}.pebble-high svg path:first-child{fill:var(--high);stroke:#648290}.pebble svg .shine{fill:none;stroke:#ffffff45;stroke-width:5;stroke-linecap:round}.pebble svg circle{fill:#513e2e;opacity:.75}.pebble svg .smile{fill:none;stroke:#513e2e;stroke-width:2;opacity:.7}.pebble:hover{transform:translateY(-3px)}.pebble:active,.sound-object.sounding .pebble{transform:translateY(3px) scale(.96)}.object-name{font-size:11px;display:inline-flex;align-items:center;gap:7px;margin-top:9px;color:#64705b}kbd{font-family:inherit;font-size:9px;border:1px solid #bac3ac;border-radius:4px;min-width:15px;line-height:15px;background:#ffffff55}.sprout{position:absolute;width:70px;height:100px;left:45px;top:-73px;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s}.sprout i{position:absolute;height:70px;width:2px;background:#779266;left:34px;top:29px;transform:rotate(7deg)}.sprout b{position:absolute;background:#9bb384;border-radius:80% 0 80% 0;height:13px;width:23px;left:12px;top:58px;transform:rotate(8deg)}.sprout b+ b{left:35px;top:45px;transform:rotate(98deg)}.sprout span{font-size:52px;color:#e4b672;position:absolute;line-height:1;left:13px;top:0}.middle .sprout span{color:#f0cc69}.high .sprout span{color:#aac2c3}.sound-object.grown .sprout{opacity:1;transform:translateY(0)}.sound-object.sounding .sprout{transform:translateY(-3px)}.meadow-footer{min-height:55px;padding:13px 27px;display:flex;align-items:center;gap:18px;border-top:1px solid #d8dfcc;background:#f0f1e7}.meadow-footer p{margin:0;font-size:12px;flex:1}.meadow-footer>span{font-size:10px;color:#6f7b66}.page-footer{display:flex;justify-content:space-between;gap:15px;padding:17px 7px 28px;color:#77826f;font-size:10px;align-items:center}.page-footer button{background:none;text-decoration:underline;text-underline-offset:3px;font-size:10px;padding:8px}.small-button{background:#eceee2;border:1px solid #d8ddcb;border-radius:22px;min-height:44px;padding:8px 15px;font-size:11px}.pattern{display:flex;justify-content:center;align-items:center;gap:13px;min-height:70px;padding:6px 20px}.pattern-slot{height:61px;width:74px;border-radius:14px;border:1px dashed #b7c4a9;background:#f4f6ed;display:grid;place-items:center;position:relative;cursor:default}.pattern-slot.editable{cursor:pointer}.pattern-slot.selected{outline:2px solid #617c52;outline-offset:3px}.pattern-slot.active{background:#dce8d1}.pattern-slot:after{content:attr(data-order);position:absolute;font-size:8px;color:#778367;bottom:5px}.pattern-dot{width:22px;height:22px;border-radius:46% 54% 58% 42%;background:var(--low);position:absolute;left:calc(50% - 11px);bottom:14px}.pattern-dot[data-note="1"]{background:var(--middle);bottom:25px;border-radius:4px 12px 4px 12px}.pattern-dot[data-note="2"]{background:var(--high);bottom:35px;border-radius:6px}.pattern-slot.blank:before{content:'·';font-size:30px;color:#b9c5ad}.pitch-choices{display:flex;gap:14px;justify-content:center;padding:9px 20px 0}.pitch-choices button{width:85px;height:83px;border-radius:19px;border:1px solid #d7decb;background:#f2f4e9;display:grid;place-content:center;gap:2px}.pitch-choices span{font-size:40px;line-height:1}.pitch-choices small{font-size:10px}.pitch-choices button.chosen{outline:2px solid #7b9568;outline-offset:3px}.make-controls,.echo-controls{display:flex;gap:12px;align-items:center;justify-content:center;font-size:11px;padding:1px 20px 8px;color:#62715a}.pulse-object{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:210px;text-align:center}.pulse-object button{position:relative;background:none;width:180px;height:160px;padding:0;z-index:1;user-select:none}.pulse-object button svg{width:100%;height:100%;filter:drop-shadow(0 8px 0 #293e3510);stroke:none;fill:none}.pulse-object span{display:block;font-size:11px;margin-top:18px;color:#5d7056;white-space:nowrap}.pulse-halo{width:160px;height:160px;position:absolute;top:0;left:25px;border-radius:50%;border:1px solid #a4b394;opacity:0}.pulse-object.beat .pulse-halo{animation:ring .7s ease-out}.pulse-object.beat button{animation:beat .5s ease-out}.mode-pitch .meadow,.mode-make .meadow,.mode-echo .meadow{height:270px}.mode-pitch .sound-object.low,.mode-make .sound-object.low,.mode-echo .sound-object.low{top:100px}.mode-pitch .sound-object.middle,.mode-make .sound-object.middle,.mode-echo .sound-object.middle{top:60px}.mode-pitch .sound-object.high,.mode-make .sound-object.high,.mode-echo .sound-object.high{top:20px}.mode-pulse .sound-object,.mode-pulse .pitch-marker{display:none}.mode-pulse .meadow{height:310px}@keyframes ring{from{transform:scale(.8);opacity:.6}to{transform:scale(1.6);opacity:0}}@keyframes beat{0%{transform:scale(.96)}40%{transform:scale(1.015)}100%{transform:scale(1)}}dialog{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:24px;width:min(680px,calc(100% - 28px));max-height:88vh;padding:37px;box-shadow:0 30px 120px #20382735}dialog::backdrop{background:#263c3555;backdrop-filter:blur(4px)}dialog p{font-size:14px;line-height:1.7}dialog h2{font-size:32px}dialog h3{font-size:16px;font-weight:500;margin:29px 0 0}.close-button{position:absolute;right:14px;top:12px;background:#edf0e4;border-radius:50%;width:44px;height:44px;font-size:27px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 26px;margin-top:20px}.guide-grid p{font-size:12px}.guide-grid b{display:block;font-size:14px;font-weight:500}.guide-candid,.privacy{padding-top:15px;border-top:1px solid var(--line);font-size:12px!important;color:#697562}.guide-settings{display:flex;gap:10px;flex-wrap:wrap}.sources{font-size:12px!important}a{color:#466854;text-underline-offset:3px}.is-muted #sound-status{color:#805936}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reduce-motion .pulse-object.beat button{outline:3px solid #80976b;outline-offset:4px}.reduce-motion .sound-object.sounding .pebble{transform:none;outline:3px solid #80976b;outline-offset:4px;border-radius:35px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.pulse-object.beat button{outline:3px solid #80976b}.sound-object.sounding .pebble{transform:none;outline:3px solid #80976b;border-radius:35px}}@media(max-width:800px){.topbar{padding:20px 24px}main{padding:0 24px}.brand>span{font-size:20px}.brand small{font-size:7px;letter-spacing:1.2px}.guide-button{font-size:0;padding-left:4px}.guide-button span{font-size:23px}.volume-label{display:none}.intro{padding:30px 0 25px}h1{font-size:38px}.intro-note{font-size:13px;margin-right:0}.place{gap:7px;min-height:70px;flex-direction:column;font-size:11px}.place svg{width:25px;height:25px}.place i{bottom:5px}.activity-head{padding:25px 24px 14px}h2{font-size:23px}.activity-head p:last-child{font-size:12px}.listen-button{min-width:110px;min-height:59px;padding:12px 15px;font-size:12px}.sound-object.low{left:16%}.sound-object.middle{left:44%}.sound-object.high{left:71%}.sound-object{width:120px}.pebble{width:115px;height:116px}.sprout{left:30px}.meadow-footer{padding:13px 20px}.meadow-footer>span{max-width:150px}.pitch-marker{left:20px}.meadow{height:295px}.mode-echo .meadow,.mode-make .meadow,.mode-pitch .meadow{height:250px}}@media(max-width:540px){.topbar{padding:16px 18px;gap:10px}.brand{gap:8px}.brand>svg{width:28px;height:35px}.brand>span{font-size:18px;letter-spacing:-.6px}.brand small{font-size:6px;letter-spacing:.9px}.sound-controls{gap:6px}.icon-button{width:40px;height:40px}.icon-button svg{width:25px;height:25px}input[type=range]{width:60px}.guide-button{padding:6px 0;width:30px;min-height:44px}.guide-button span{margin-left:0;font-size:24px}main{padding:0 14px}.intro{padding:25px 6px 22px;align-items:flex-end}.intro .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:10px}h1{font-size:30px;letter-spacing:-1.3px}.intro-note{font-size:0;max-width:84px}.intro-note span{font-size:8px;letter-spacing:.7px;line-height:1.6;margin:0 0 2px}.places{border-radius:14px;margin-bottom:15px;padding:4px;gap:1px}.place{font-size:8px;gap:6px;min-height:68px;padding:5px 1px 10px;white-space:nowrap}.place svg{width:23px;height:23px}.playground{border-radius:19px}.activity-head{padding:22px 18px 14px;gap:7px;align-items:flex-start}.activity-head .eyebrow{font-size:7px;letter-spacing:1.1px;margin-bottom:9px}h2{font-size:20px;letter-spacing:-.6px;max-width:210px;line-height:1.15}.activity-head p:last-child{font-size:11px;max-width:200px}.listen-button{min-width:66px;min-height:68px;flex-direction:column;gap:4px;font-size:9px;padding:8px 9px;border-radius:19px}.listen-button svg{width:25px;height:25px}.demo-controls{gap:4px;flex-direction:column}.stop-button{width:36px;height:36px}.stop-button svg{width:21px;height:21px}.meadow{height:280px}.pitch-marker{left:9px;top:30px;font-size:6px;height:105px;gap:7px}.sound-object{width:92px}.pebble{width:92px;height:99px}.sound-object.low{left:8%;top:145px}.sound-object.middle{left:37%;top:102px}.sound-object.high{left:67%;top:60px}.object-name{font-size:9px;margin-top:6px;gap:4px}kbd{display:none}.sprout{left:15px;top:-67px;transform:scale(.85) translateY(10px);transform-origin:bottom center}.sound-object.grown .sprout{transform:scale(.85) translateY(0)}.sound-object.sounding .sprout{transform:scale(.85) translateY(-3px)}.meadow-footer{padding:13px 15px;min-height:67px;gap:9px;flex-wrap:wrap}.meadow-footer p{font-size:10px;min-width:170px}.meadow-footer>span{font-size:8px;max-width:none}.meadow-footer .small-button{font-size:9px}.page-footer{font-size:8px;gap:6px;padding:15px 5px 25px}.page-footer button{font-size:8px;min-height:35px}.pattern{gap:10px;min-height:76px;padding:6px 12px}.pattern-slot{height:65px;width:66px}.pitch-choices{gap:12px;padding:4px 16px 0}.pitch-choices button{width:82px;height:80px}.mode-pitch .meadow,.mode-echo .meadow,.mode-make .meadow{height:260px}.mode-pitch .sound-object.low,.mode-make .sound-object.low,.mode-echo .sound-object.low{top:141px}.mode-pitch .sound-object.middle,.mode-make .sound-object.middle,.mode-echo .sound-object.middle{top:98px}.mode-pitch .sound-object.high,.mode-make .sound-object.high,.mode-echo .sound-object.high{top:55px}.echo-controls,.make-controls{font-size:9px;gap:7px;padding:2px 12px 8px}.echo-controls .small-button,.make-controls .small-button{font-size:9px;padding:7px 10px}.pulse-object{top:65px}.mode-pulse .meadow{height:285px}.guide-grid{grid-template-columns:1fr;gap:0}dialog{padding:30px 25px}dialog h2{font-size:26px}dialog p{font-size:12px}}@media(max-width:360px){.sound-object{width:83px}.pebble{width:83px;height:94px}.sound-object.high{left:66%}.brand small{display:none}.volume-label{display:none}h1{font-size:28px}.intro-note{max-width:75px}}
.visual-controls{display:flex;justify-content:center;padding:0 15px 5px}.visual-controls .small-button{font-size:11px;display:flex;align-items:center;gap:8px;background:transparent;border-color:#dee4d4;min-height:44px}.visual-controls span{font-size:17px;color:#72876b}
/* Four time spaces remain in one row; larger height keeps them easy to tap. */
.pattern{gap:10px;min-height:94px}.pattern-slot{width:82px;height:82px}.pattern-dot[data-note="1"]{bottom:32px}.pattern-dot[data-note="2"]{bottom:50px}
@media(max-width:540px){.pattern{padding:6px 10px;gap:6px}.pattern-slot{width:80px;max-width:80px;height:82px;flex:1}.guide-button{font-size:0}.guide-button span{display:inline-grid;place-items:center;width:27px;height:27px;border:1px solid #b9c3ad;border-radius:50%;font-family:Georgia,serif;font-size:19px}}
/* Keep bounded flowers inside the stage, beside rather than above each pebble. */
.sprout{left:100px;top:-39px;transform:scale(.75) translateY(10px);transform-origin:bottom center}.sound-object.grown .sprout{transform:scale(.75) translateY(0)}.sound-object.sounding .sprout{transform:scale(.75) translateY(-3px)}
@media(max-width:800px){.sprout{left:75px}}
@media(max-width:540px){.sprout{left:45px;top:-39px}}
.topbar{position:sticky;top:0;z-index:20;background:var(--paper)}html{scroll-padding-top:95px}button{scroll-margin-top:95px}