@font-face{font-family:"Bree Serif";src:url(/fonts/bree-serif.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{font-family:Arial,Helvetica,sans-serif;color:#40313e;background:#fbf1e5;font-synthesis:none;--ink: #40313e;--muted: #725963;--paper: #fbf1e5;--peach: #f5c9ab;--line: #b5877e;--focus: #71414f;--display: "Bree Serif", Georgia, serif;--wing: #71515a;--bird-eye: #fbd6ae;--radius: 12px}*{box-sizing:border-box}body{margin:0;min-width:375px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{touch-action:manipulation}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{transition:background .18s ease,color .18s ease,transform .18s ease}button:active:not(:disabled){transform:translateY(1px)}::selection{background:#e8ad8e;color:var(--ink)}input{caret-color:var(--focus)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#b58a83;border:3px solid var(--paper);border-radius:8px}::-webkit-scrollbar-track{background:var(--paper)}.wrap{width:min(1184px,calc(100% - 112px));margin-inline:auto}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.bird-art{width:48px;height:48px;display:block;overflow:visible}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddcabb}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:29px;letter-spacing:-1px}.brand .bird-art{width:38px;height:38px;transform:rotate(-7deg);--wing: #74525c}.brand-dot{color:#a85a46}.text-button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;font-size:13px;font-weight:500;border-radius:8px}.text-button:hover:not(:disabled){background:#eacdb959}.help-button{font-size:13px;gap:9px}.help-button .icon{width:19px;height:19px}.intro{display:flex;align-items:center;justify-content:space-between;padding-block:32px 30px}.intro h1{font-family:var(--display);font-size:clamp(38px,4.1vw,58px);font-weight:400;line-height:1.12;letter-spacing:-1.8px;margin:0 0 12px}.intro p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}.intro-note{font-family:var(--display);font-size:18px;line-height:1.5;position:relative;margin-right:51px;transform:rotate(-5deg);color:#785564}.intro-note .icon{position:absolute;right:-42px;bottom:9px;width:30px;height:30px;transform:rotate(16deg)}.composer{background:linear-gradient(#f8e5d2 0% 60%,#f9ecdc);border-top:1px solid #e8d3bf}.song-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:90px;gap:16px}.song-identity{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.song-identity input{font-family:var(--display);font-size:23px;color:var(--ink);border:none;background:transparent;padding:2px 0;width:min(100%,440px);border-radius:2px;text-overflow:ellipsis}.song-identity input:hover{box-shadow:0 1px #b78c82}.song-identity input:focus{outline:none;box-shadow:0 2px var(--focus)}.save-state{font-size:11px;color:#796168;display:flex;align-items:center;gap:4px}.save-state .icon{width:13px;height:13px}.save-state.not-saved{color:var(--ink)}.share-button{background:#f9eddf;border:1px solid #bfa18e;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:9px;padding:0 16px;font-size:12px;font-weight:600}.share-button .icon{width:18px;height:18px}.share-button:hover{background:#fff6e9}.sky{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#f8e5d2,#f6d2b4 32%,#f0b38f 73%,#e5a08b);padding:0 0 16px}.sun{position:absolute;z-index:-1;width:275px;aspect-ratio:1;border-radius:50%;top:44px;right:19%;background:#ffdf9d;box-shadow:0 8px 50px #ffe2a934}.staff-area{position:relative;z-index:2}.staff-guide{height:40px;display:flex;align-items:center;justify-content:space-between;color:#6c535c;font-size:12px;padding:0 0 4px}.staff-guide>span{display:flex;align-items:center;gap:7px}.staff-guide .icon{width:16px;height:16px}.staff-guide .desktop-hint{font-size:11px}.staff{position:relative;padding-top:13px}.wire-row{height:57px;position:relative;display:grid;grid-template-columns:36px repeat(16,minmax(0,1fr));align-items:center}.wire-line{position:absolute;height:1px;top:43px;left:calc(-1*max(56px,(100vw - 1184px) / 2));right:calc(-1*max(56px,(100vw - 1184px) / 2));background:#6f5258;box-shadow:0 1px 1px #79575b24;z-index:-1;pointer-events:none}.pitch-label{font-family:var(--display);font-size:13px;align-self:end;margin-bottom:6px;color:#66505a;line-height:1;position:relative;background:#f3c9ab;justify-self:start;padding:4px 7px;border-radius:5px}.wire-row:first-child .pitch-label{background:#f8dfc7}.wire-row:nth-child(2) .pitch-label{background:#f6d6b9}.wire-row:nth-child(4) .pitch-label{background:#f1b996}.wire-row:nth-child(5) .pitch-label{background:#edae8f}.note-cell{height:57px;min-width:0;position:relative}.note{display:flex;align-items:flex-start;justify-content:center;position:relative;background:transparent;border:none;width:100%;height:57px;padding:0;border-radius:6px;isolation:isolate}.note:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#7b5d612b;top:40px;left:calc(50% - 3.5px);z-index:-1;transition:background .15s ease}.note:hover{background:#fff4d940}.note:hover:before{background:#62465080}.note:focus-visible{outline-offset:0;background:#fff4d940}.note .bird-art{width:49px;height:49px;margin-top:0;transform-origin:center 90%;transition:transform .18s ease-out;color:#42313f}.note .bird-1{transform:scaleX(-1) rotate(-4deg)}.note .bird-2{transform:rotate(4deg) scale(.93)}.note.occupied:hover .bird-art{transform:translateY(-4px) rotate(-6deg)}.note.occupied:before{opacity:0}.note.current{background:#fff0bd65}.note.current .bird-art{transform:translateY(-6px) rotate(-7deg);color:#613b4c;--wing: #a66c68}.beat-row{display:grid;grid-template-columns:36px repeat(16,minmax(0,1fr));height:26px;align-items:center;text-align:center;font-size:11px;color:#75535c}.beat-row>span{line-height:22px}.beat-row .offbeat{color:#8d6367}.beat-row .active{background:#fff0bd80;border-radius:6px;color:var(--ink);font-weight:700}.staff-bottom{display:flex;align-items:center;justify-content:space-between;min-height:41px;font-size:11px;color:#6b4d58}.time-signature span{padding-inline:7px}.bar-switch{display:none}.power-pole{position:absolute;top:61px;height:370px;width:11px;background:#59404c;z-index:1;opacity:.8}.pole-left{left:-4px;transform:rotate(-1deg)}.pole-right{right:-4px;transform:rotate(1deg)}.power-pole:before,.power-pole:after{content:"";position:absolute;width:35px;height:5px;background:#59404c;top:15px;left:-11px;border-radius:2px}.power-pole:after{top:129px}.power-pole i{position:absolute;top:0;width:5px;height:17px;background:#59404c;left:15px;border-radius:2px}.power-pole i+i{left:-9px}.landscape{position:absolute;z-index:-1;pointer-events:none;bottom:-162px;height:200px;width:120%;border-radius:48% 60% 0 0}.landscape-back{background:#b8858470;left:-10%;transform:rotate(-3deg)}.landscape-front{background:#866c7a55;right:-20%;bottom:-180px;transform:rotate(2deg)}.distant-flock{position:absolute;top:42px;left:38%;width:100px;height:40px;opacity:.65;transform:rotate(-7deg)}.distant-flock i{position:absolute;width:15px;height:7px;border-top:2px solid #73505a;transform:rotate(20deg);border-radius:50%;left:0;top:0}.distant-flock i:after{content:"";position:absolute;width:12px;height:6px;border-top:2px solid #73505a;transform:rotate(-35deg);border-radius:50%;left:11px;top:-4px}.distant-flock i:nth-child(2){left:40px;top:-16px;transform:scale(.8) rotate(20deg)}.distant-flock i:nth-child(3){left:68px;top:5px;transform:scale(.6) rotate(20deg)}.control-section{min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:26px;border-bottom:1px solid #e1c7b3}.playback-controls{display:flex;align-items:center;gap:12px}.play-button,.primary-button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#fff3df;background:var(--ink);border:0;border-radius:10px;font-weight:600;font-size:13px;padding:0 22px}.play-button{min-width:199px}.play-button .icon{width:20px;height:20px}.play-button:hover,.primary-button:hover{background:#614152}.play-button kbd{font-size:9px;font-family:inherit;font-weight:400;padding:4px 5px;border:1px solid #ae90968a;border-radius:4px;line-height:1;color:#e5c4bc;margin-left:7px}.icon-button{border:1px solid transparent;background:transparent;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;flex-shrink:0}.icon-button:hover{background:#eacdb97d}.toggle-button[aria-pressed=true]{background:#e9ccba;border-color:#d9b6a4}.toggle-button .icon{width:19px;height:19px}.play-status{font-size:11px;color:var(--muted);margin-left:4px;min-width:128px}.settings{display:flex;align-items:center;gap:24px}.tempo-setting{width:166px}.setting-heading{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;margin-bottom:7px}.setting-heading label,.scale-setting label{color:var(--muted);font-size:11px}.setting-heading output{font-size:12px;font-variant-numeric:tabular-nums}.tempo-setting input{width:100%;display:block;height:25px;accent-color:var(--ink);cursor:pointer;margin:0;background:transparent}.tempo-setting input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:#d3ab96}.tempo-setting input::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6px}.scale-setting{display:flex;flex-direction:column;gap:4px;min-width:126px}.scale-setting select{height:36px;min-width:126px;padding:0 27px 0 0;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;border-radius:4px}.sound-button{align-self:center;margin-top:11px;color:#72505a}.editing-row{display:flex;justify-content:space-between;align-items:center;min-height:64px;gap:10px}.editing-row p{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:0}.editing-row p .icon{width:16px;height:16px}.edit-actions{display:flex;gap:13px}.edit-actions .text-button{font-size:11px;color:#70505a;padding-inline:8px}.edit-actions .icon{width:16px;height:16px}.audio-notice{font-size:13px;padding:0 0 20px;line-height:1.5}.samples{padding-block:35px 37px}.samples-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:17px;gap:10px}.samples h2{font-family:var(--display);font-size:23px;font-weight:400;letter-spacing:-.4px;margin:0}.samples-heading p{font-size:12px;color:var(--muted);margin:0}.sample-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.sample{min-width:0;background:transparent;border:0;border-bottom:1px solid #dcc5b6;display:flex;align-items:center;text-align:left;gap:15px;min-height:88px;padding:8px 6px 13px 0;position:relative;border-radius:0}.sample:hover{border-color:#a87270}.sample.selected{border-color:#8c5c65}.sample .icon{width:17px;height:17px;margin-left:auto;color:#9b7479}.sample-copy{display:flex;flex-direction:column;gap:6px;min-width:0}.sample-copy strong{font-size:14px;font-weight:600}.sample-copy>span{font-size:11px;line-height:1.5;color:var(--muted)}.sample-art{width:64px;height:64px;flex-shrink:0;background:#f5c7a5;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden;color:#654654}.sample-art:before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:#fce2ad;right:6px;top:9px;z-index:-1}.sample-art:after{content:"";position:absolute;bottom:15px;height:1px;left:0;right:0;background:#92707b}.sample-art .bird-art{width:40px;height:40px;margin-top:0;position:relative;z-index:1}.sample-art-1{background:#e6d9c1;color:#52645a;--wing: #849084}.sample-art-1:before{background:#f8efbe}.sample-art-2{background:#d6c7d3;color:#54485f;--wing: #80718c}.sample-art-2:before{background:#f0e4d4}.site-footer{min-height:80px;border-top:1px solid #e3d2c2;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:15px}.site-footer button{font-size:11px}.site-footer .icon{width:13px;height:13px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,15px);background:var(--ink);color:#fff3df;padding:13px 20px;border-radius:10px;font-size:13px;line-height:1.5;box-shadow:0 8px 24px #40313e26;z-index:10;opacity:0;pointer-events:none;max-width:calc(100% - 32px);width:max-content;transition:opacity .2s ease,transform .2s ease}.toast.visible{opacity:1;transform:translate(-50%)}dialog{width:min(500px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:28px 32px 32px;border:0;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 20px 80px #30202f44}dialog::backdrop{background:#33233375;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-bird{display:inline-flex;padding:7px;width:61px;height:61px;border-radius:50%;background:#f6cfaf}.dialog-bird .bird-art{width:45px;height:45px}dialog h2{font-family:var(--display);font-weight:400;font-size:31px;letter-spacing:-.5px;margin:0 0 19px;line-height:1.2}dialog p{font-size:13px;line-height:1.7;color:var(--muted)}.help-steps p{margin:0 0 13px}.help-steps strong{color:var(--ink)}.keyboard-tip{background:#efdfcf;padding:14px 16px;border-radius:8px;margin-block:18px}.about-copy{border-top:1px solid #e1cabb;padding-top:15px;margin-top:22px;margin-bottom:23px}.about-copy h3{font-size:12px;margin:0 0 7px}.about-copy p{font-size:11px;line-height:1.9;margin:0}.primary-button{width:100%;margin-top:4px}.link-label{display:block;font-size:12px;font-weight:600;margin:24px 0 9px}#share-url{width:100%;padding:13px;background:#fff7ec;border:1px solid #ceb09e;border-radius:8px;font-size:12px;color:var(--muted);margin-bottom:15px;min-height:46px}#copy-status{font-size:11px;text-align:center;margin:13px 0 0}dialog .close-dialog{min-width:44px}.is-playing .brand .bird-art{transform:rotate(0)}@media(min-width:1500px){.sky{padding-top:10px;padding-bottom:24px}.wire-row,.note-cell,.note{height:65px}.wire-line{top:49px}.note .bird-art{width:56px;height:56px}.note:before{top:46px}.pitch-label{margin-bottom:8px}}@media(max-width:1100px){.wrap{width:calc(100% - 72px)}.play-status{display:none}.settings{gap:18px}.control-section{gap:14px}.tempo-setting{width:150px}.sample-list{gap:18px}.sample{gap:10px}.sample-art{width:54px;height:54px}.sample-copy>span{font-size:10px}.wire-line{left:-36px;right:-36px}.note .bird-art{width:45px;height:49px}.intro-note{margin-right:38px;font-size:16px}}@media(max-width:800px){.wrap{width:calc(100% - 48px)}.intro-note{display:none}.intro{padding-block:26px}.intro h1{font-size:45px}.settings{gap:12px}.tempo-setting{width:120px}.play-button{min-width:170px;padding-inline:16px}.play-button kbd{display:none}.sample-list{gap:16px}.sample{gap:8px}.sample-art{width:43px;height:43px}.sample-art .bird-art{width:31px;height:31px}.sample-art:after{bottom:9px}.sample-copy strong{font-size:12px}.sample-copy>span{font-size:10px}.sample>.icon{display:none}}@media(max-width:700px){.wrap{width:calc(100% - 40px)}.site-header{height:75px}.brand{font-size:27px}.brand .bird-art{width:34px;height:34px}.help-button{font-size:12px;padding-right:0}.intro{padding-block:25px 26px}.intro h1{font-size:40px;letter-spacing:-1.3px;margin-bottom:9px}.intro p{font-size:12px}.song-toolbar{min-height:88px;gap:10px}.song-identity input{font-size:20px;max-width:205px}.save-state{font-size:9px;gap:3px}.save-state .icon{width:11px;height:11px}.share-button{font-size:11px;padding:0 11px;gap:6px;min-height:44px;flex-shrink:0}.share-button .icon{width:16px;height:16px}.staff-area{width:100%}.staff-guide{height:42px;padding-inline:20px;font-size:10px}.staff-guide>span{gap:5px}.staff-guide .icon{width:14px;height:14px}.staff-guide .desktop-hint{display:none}.staff{padding-top:6px}.wire-row{grid-template-columns:23px repeat(8,minmax(0,1fr));height:49px}.note-cell,.note{height:49px}.note .bird-art{width:43px;height:46px;margin-top:0}.wire-line{top:40px;left:-12px;right:-12px}.note:before{top:37px;width:6px;height:6px;left:calc(50% - 3px)}.pitch-label{font-size:12px;padding:3px 5px;margin-bottom:5px}.second-bar{display:none}.show-second .second-bar{display:block}.show-second .first-bar{display:none}.beat-row{grid-template-columns:23px repeat(8,minmax(0,1fr));height:23px;font-size:10px}.staff-bottom{min-height:51px;padding-inline:20px;font-size:10px;gap:8px}.bar-switch{display:flex;align-items:center;gap:2px;background:#be8a7c35;border-radius:7px;padding:2px}.bar-switch button{background:transparent;border:0;min-height:36px;min-width:44px;padding:5px 9px;font-size:10px;border-radius:5px}.bar-switch button[aria-pressed=true]{background:#ffe3bf;color:#533c49}.time-signature{display:none}.sky{padding-bottom:9px}.sun{width:235px;right:-24px;top:52px}.distant-flock{left:39%;top:35px;transform:scale(.7) rotate(-7deg)}.pole-left{left:-7px}.pole-right{right:-7px}.power-pole{top:53px;opacity:.7}.control-section{padding-block:20px;display:flex;flex-wrap:wrap;gap:23px}.playback-controls{width:100%;gap:12px}.play-button{min-height:52px;flex:1;justify-content:center;font-size:13px;min-width:unset}.play-button kbd{display:none}.toggle-button{width:48px;height:48px}.settings{width:100%;justify-content:space-between;gap:20px}.tempo-setting{flex:1;width:auto;max-width:195px}.setting-heading{margin-bottom:2px}.setting-heading label,.scale-setting label{font-size:10px}.setting-heading output{font-size:11px}.scale-setting{min-width:104px}.scale-setting select{min-width:104px;min-height:36px;font-size:12px}.sound-button{width:38px;min-width:38px;padding:8px;margin-top:7px}.settings{gap:20px}.editing-row{min-height:61px}.editing-row p{font-size:10px;line-height:1.6;max-width:160px;gap:5px}.editing-row p .icon{display:none}.edit-actions{gap:2px;flex-shrink:0}.edit-actions .text-button{font-size:10px;gap:5px;padding-inline:6px}.edit-actions .icon{width:14px;height:14px}.samples{padding-block:28px}.samples-heading{display:block;margin-bottom:9px}.samples h2{font-size:22px}.samples-heading p{font-size:11px;margin-top:7px}.sample-list{display:flex;flex-direction:column;gap:0}.sample{min-height:86px;padding-block:12px;gap:15px}.sample-art{width:54px;height:54px}.sample-art .bird-art{width:36px;height:36px}.sample-art:after{bottom:12px}.sample-copy strong{font-size:13px}.sample-copy>span{font-size:11px}.sample>.icon{display:block}.site-footer{font-size:10px;align-items:flex-start;padding-block:20px;gap:0;flex-direction:column;min-height:105px}.site-footer .text-button{padding:7px 0;font-size:10px}.toast{bottom:15px;font-size:12px}dialog{padding:22px;max-height:calc(100dvh - 28px)}dialog h2{font-size:28px}.help-steps p{font-size:12px}.keyboard-tip{font-size:11px}dialog .about-copy p{font-size:10px}.about-copy{margin-top:18px}.site-footer span{line-height:1.6}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.note.current .bird-art,.intro-note{transform:none}}