:root{font-family:Arial,Helvetica,sans-serif;color:#292c2b;background:#f7f6f0;font-synthesis:none;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #347b6d;outline-offset:4px}button{color:inherit}main{max-width:1560px;padding:0 60px;margin:auto}.masthead{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddded6}.brand{font-weight:800;font-size:23px;text-decoration:none;color:inherit;letter-spacing:-1px}.brand-mark{color:#ff795c;font-size:33px;vertical-align:middle;margin-right:8px}.edition{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1.5px;font-weight:700}.edition i{height:7px;width:7px;background:#93aa77;border-radius:50%}.intro{display:flex;align-items:center;justify-content:space-between;padding:47px 0 35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#797d73;margin-bottom:18px}h1{font-size:clamp(36px,5vw,67px);letter-spacing:-3.3px;line-height:1.12;margin:0;font-weight:750}h1>span{position:relative;display:inline-block}h1 svg{position:absolute;bottom:-10px;width:100%;height:17px;left:0;fill:none;stroke:#ff795c;stroke-width:4;stroke-linecap:round}h1 em{font-style:normal;color:#ff795c;font-size:42px;vertical-align:top;margin-left:18px;display:inline-block;transform:rotate(12deg)}.intro p{font-size:14px;line-height:1.8;color:#72766d;margin:24px 0 0}.intro-note{display:flex;align-items:center;gap:20px;transform:rotate(7deg);padding-right:30px}.intro-note>span{font-size:75px;color:#b8bafa}.intro-note p{font-family:Georgia,serif;font-style:italic;font-size:17px;line-height:1.45;margin:0;color:#66695d}.workspace{background:#fffef9;border:1px solid #d7dad0;border-radius:15px;overflow:hidden;box-shadow:0 5px #e9e9df}.transport{min-height:78px;display:flex;align-items:center;padding:15px 20px;gap:22px;border-bottom:1px solid #dce0d5}.playback{display:flex;align-items:center;gap:12px;flex:1}.play{border:0;background:#2e3530;color:#fff;border-radius:7px;padding:13px 20px;font-size:12px;min-width:92px;font-weight:700}.play.is-playing{background:#447c64}.stop{background:#eeeee6;border:1px solid #dedfd6;border-radius:6px;width:34px;height:36px;font-size:12px}.live-dot{height:6px;width:6px;border-radius:50%;background:#aeb0a5;margin-left:4px}.live-dot.on{background:#65a97d}.transport-label{font-size:8px;font-weight:700;letter-spacing:1px;color:#808477}.tempo,.master{display:flex;align-items:center;font-size:10px;gap:10px;color:#777d70}.tempo input{width:57px;background:transparent;border:1px solid #dbded2;border-radius:5px;padding:8px 5px;text-align:center;font-weight:700;color:#2e3530}.tempo>span{font-size:8px;font-weight:700}.master input{width:78px;accent-color:#343d32}.share{background:#e6edbe;border:1px solid #ced79b;border-radius:7px;padding:12px 16px;font-size:11px;font-weight:700;white-space:nowrap}.share span{padding-left:15px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 277px}.canvas-column{min-width:0}.canvas-heading{display:flex;justify-content:space-between;padding:18px 22px 0;font-size:8px;letter-spacing:1.2px;font-weight:700;color:#858b7c}.canvas-heading i{display:inline-block;width:5px;height:5px;background:#a2aa94;margin-right:6px;border-radius:50%}.canvas-heading>span+span{font-weight:400;letter-spacing:0}.stage{position:relative;height:372px;margin:0 12px;touch-action:none;background-image:radial-gradient(#dce0d3 .8px,transparent .8px);background-size:19px 19px}.axis{position:absolute;top:15px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;color:#acb29f}.axis span{font-size:7px;color:#9ca38d;letter-spacing:1px}.connections{position:absolute;inset:0;width:100%;height:100%;color:#bfc5ae;overflow:visible;pointer-events:none}.connections>path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}.connections>path.lit{stroke:#748b69;stroke-width:2.5}.instrument{position:absolute;transform:translate(-50%,-50%);width:86px;height:100px;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;padding:0;cursor:grab;isolation:isolate}.instrument>svg{overflow:visible;fill:var(--shape-color);stroke:#31372e;stroke-width:1.6;filter:drop-shadow(0 4px 0 #30382f14);transition:transform .1s}.instrument.selected:before{content:"";position:absolute;width:85px;height:85px;top:0;border:1px dashed #9ea68f;border-radius:50%;z-index:-1}.instrument.singing>svg{transform:scale(1.15) rotate(-5deg)}.instrument.singing:after{content:"";position:absolute;width:99px;height:99px;top:-7px;border:1px solid var(--shape-color);border-radius:50%}.instrument:active{cursor:grabbing}.shape-face{position:absolute;top:31px;left:0;right:0;letter-spacing:8px;font-size:26px;font-weight:700;padding-left:7px;line-height:10px;pointer-events:none}.instrument.triangle .shape-face{top:40px}.instrument-label{margin-top:3px;font-size:10px;letter-spacing:.5px;white-space:nowrap;background:#fffef9b8;border-radius:4px;padding:2px 5px}.instrument-label b{font-size:7px;font-weight:400;margin-left:6px;color:#969d8c}.stage-sticker{position:absolute;bottom:10px;left:50%;transform:translate(-50%) rotate(-3deg);font-family:Georgia,serif;font-style:italic;font-size:11px;color:#9ca28f;white-space:nowrap;pointer-events:none}.connecting .instrument{cursor:crosshair}.add-bar{display:flex;align-items:center;gap:9px;padding:15px 19px;border-top:1px solid #e4e6db;border-bottom:1px solid #e4e6db;background:#fafbf5}.add-bar>span{font-size:8px;letter-spacing:1px;color:#8e957f;font-weight:700;margin-right:auto}.add-bar button{display:flex;align-items:center;gap:7px;background:#fffef9;border:1px solid #d9dece;padding:6px 9px;border-radius:6px;font-size:9px}.add-bar svg{fill:var(--shape-color);stroke:#45503a;stroke-width:2}.add-bar b{color:#99a38b;font-size:14px;font-weight:400;margin-left:3px}.sequence{padding:19px 20px 12px}.sequence-top{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#959e84;margin-bottom:15px}.sequence-top>span:first-child{font-size:8px;color:#566249;font-weight:700;letter-spacing:1px}.sequence-top small{font-size:7px;letter-spacing:0;color:#a2a990;margin-left:10px;font-weight:400}.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px}.steps button{height:42px;background:#f1f3e9;border:1px solid #e0e5d6;border-radius:4px;padding:4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative}.steps button:nth-child(4n+1){margin-left:4px}.steps span{font-size:7px;color:#9aa48d}.steps i{height:7px;width:7px;border-radius:2px;background:#dae0ce;margin-bottom:5px}.steps .active{background:color-mix(in srgb,var(--shape-color),#fff 43%);border-color:color-mix(in srgb,var(--shape-color),#333 13%)}.steps .active i{background:#46513c}.steps .active span{color:#586049}.steps .current:after{content:"";height:3px;background:#414c38;bottom:-7px;left:3px;right:3px;position:absolute;border-radius:3px}.beat-labels{display:grid;grid-template-columns:repeat(4,1fr);font-size:6px;letter-spacing:1.3px;color:#a1a992;margin-top:13px;padding-left:5px}.inspector{border-left:1px solid #dde1d3;padding:22px 19px;background:#f8f9f1}.panel-label{font-size:8px;letter-spacing:1px;font-weight:700;color:#929c82;display:flex;justify-content:space-between}.panel-label span{font-size:16px;margin-top:-5px}.selected-glyph{display:flex;align-items:center;gap:8px;margin:22px 0 18px}.selected-glyph svg{fill:var(--shape-color);stroke:#3d4734;stroke-width:1.5;flex-shrink:0}.selected-glyph>div>span{font-size:7px;letter-spacing:1px;color:#9ca58b}.selected-glyph h2{font-size:15px;letter-spacing:-.3px;margin:4px 0 6px;line-height:1.15}.selected-glyph p{font-size:9px;line-height:1.5;color:#8b957c;margin:0}.pitch-readout{display:flex;align-items:center;background:#eef1e3;padding:12px;border-radius:6px;gap:12px;margin-bottom:19px}.pitch-readout>span:first-child{font-size:7px;letter-spacing:.8px;font-weight:700;color:#8b9877}.pitch-readout strong{font-size:24px;font-weight:500;letter-spacing:-1px}.pitch-readout>span:last-child{font-size:7px;color:#99a28d;margin-left:auto;line-height:1.5}.control-label{display:block;font-size:9px;color:#6f7c5c;margin:14px 0}.control-label select{display:block;width:100%;border:1px solid #d5deca;background:#fffef9;border-radius:5px;font-size:10px;padding:10px;margin-top:9px;color:#5c694d}.control-label>span{float:right;font-size:8px;color:#99a28e}.control-label input{display:block;width:100%;margin:12px 0 0;accent-color:#6e8058;height:7px}.connection-panel{border-top:1px solid #dfe5d4;padding-top:15px;margin-top:22px}.connection-panel h3{display:flex;justify-content:space-between;font-size:11px;margin:0 0 9px}.connection-panel h3 span{color:#98a18c}.connection-panel p{font-size:9px;color:#8a957a;line-height:1.65;margin:0 0 13px}.connection-panel p strong{font-weight:600;color:#69775c}.connect-button{width:100%;padding:10px 8px;border:1px solid #bac5a8;background:transparent;border-radius:5px;color:#64764f;font-size:10px;font-weight:700}.connect-button.active{background:#dce8c9}.connect-select{display:flex;gap:4px;margin-top:8px}.connect-select select{width:0;flex:1;min-width:0;background:transparent;border:1px solid #d6dfca;padding:7px 3px;border-radius:4px;font-size:9px;color:#7d8b6c}.connect-select>button{border:1px solid #c9d4bb;background:#e9efdf;border-radius:4px;width:30px}.link-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.link-list button{display:flex;gap:14px;background:#edf0e5;color:#82916d;border:1px solid #d5deca;border-radius:4px;font-size:8px;padding:5px 6px}.remove{display:flex;justify-content:space-between;width:100%;border:0;border-top:1px solid #dfe5d4;background:transparent;font-size:9px;color:#a39b89;padding:15px 0 0;margin-top:20px}.studio-footer{display:flex;gap:12px;align-items:center;min-height:58px;border-top:1px solid #dce1d2;background:#f4f6ed;padding:11px 20px}.studio-footer>div{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.tiny-star{color:#8c9b72;font-size:23px}.studio-footer p{font-size:9px;color:#8a947a;line-height:1.5;margin:0}.studio-footer label{font-size:8px;color:#9ca58d;white-space:nowrap}.studio-footer select{font-size:9px;color:#798967;border:0;background:transparent;margin-left:8px;max-width:120px}.studio-footer>button{border:0;background:transparent;font-size:9px;color:#5b6e47;white-space:nowrap;padding:6px}.share-link{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:15px 20px;border-top:1px solid #dce1d2;font-size:10px;color:#707c60}.share-link input{flex:1;min-width:100px;padding:8px;border:1px solid #d6dfca;border-radius:4px;color:#59694a;background:#fbfcf7;font-size:10px}.share-link>span{width:100%;font-size:9px}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;padding:45px 8px 43px}.how article>span{font-size:8px;color:#9ba18f;letter-spacing:1.3px;font-weight:700}.how h3{font-size:14px;letter-spacing:-.3px;margin:12px 0 10px;font-weight:600}.how p{font-size:10px;line-height:1.8;color:#929783;margin:0}footer{border-top:1px solid #dedfd4;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0 30px;font-size:8px;color:#a0a58f}footer>span:first-child{font-size:8px;letter-spacing:.8px;font-weight:700;color:#79836b}footer b{font-weight:400;font-size:8px;letter-spacing:0;margin-left:8px}footer a{color:inherit;text-decoration:none}@media(min-width:1450px){.stage{height:430px}.instrument{width:100px}.transport{gap:30px}.intro{padding-top:55px;padding-bottom:42px}.how p{font-size:12px}.how h3{font-size:16px}}@media(max-width:1100px){main{padding:0 28px}.transport-label{display:none}.transport{gap:16px}.studio{grid-template-columns:minmax(0,1fr) 250px}.add-bar{gap:5px;padding-left:12px;padding-right:12px}.add-bar>span{font-size:7px}.add-bar button{gap:3px;padding:5px}.add-bar button span{font-size:8px}.add-bar b{display:none}.sequence{padding-left:12px;padding-right:12px}.sequence-top>span:last-child{font-size:7px}.intro-note{padding-right:0}.intro-note>span{font-size:55px}.intro-note p{font-size:14px}.how{gap:30px}.instrument>svg{width:70px;height:70px}.instrument{width:76px;height:90px}.instrument.selected:before{width:77px;height:77px}.shape-face{top:28px}.instrument.triangle .shape-face{top:37px}}@media(max-width:760px){main{padding:0 17px}.masthead{height:70px}.brand{font-size:21px}.edition{font-size:7px;letter-spacing:1px}.intro{padding:33px 0 29px}.eyebrow{font-size:7px;margin-bottom:14px;letter-spacing:1.3px}h1{font-size:44px;letter-spacing:-2.4px}h1 em{font-size:25px;margin-left:6px}.intro p{font-size:11px;margin-top:22px}.intro-note{display:none}.transport{padding:12px;gap:10px;flex-wrap:wrap}.playback{flex:1}.play{padding:11px 14px;min-width:82px}.tempo{gap:5px}.tempo input{width:48px}.tempo>span{font-size:7px}.master{order:4;flex:1;font-size:9px;gap:10px}.master input{width:95px}.share{order:5;padding:9px 13px;font-size:10px}.share span{padding-left:13px}.studio{grid-template-columns:1fr}.stage{height:335px;margin:0 7px}.canvas-heading{padding:15px 14px 0;font-size:7px}.axis{font-size:5px;letter-spacing:.5px;top:14px}.axis span{font-size:5px;letter-spacing:.5px}.instrument>svg{width:60px;height:60px}.instrument{width:67px;height:78px}.instrument.selected:before{height:64px;width:64px}.instrument.singing:after{width:74px;height:74px;top:-4px}.shape-face{font-size:21px;letter-spacing:6px;top:24px}.instrument.triangle .shape-face{top:31px}.instrument-label{font-size:8px;margin-top:3px}.stage-sticker{font-size:9px;bottom:8px}.add-bar{gap:5px;padding:11px 9px;flex-wrap:wrap;justify-content:space-between}.add-bar>span{width:100%;font-size:7px;margin:0 0 3px}.add-bar button{flex:1;justify-content:center;padding:6px 3px;gap:3px}.add-bar svg{width:18px;height:18px}.add-bar button span{font-size:8px}.sequence{padding:17px 9px 13px}.sequence-top{align-items:flex-start;gap:8px;line-height:1.6;margin-bottom:12px}.sequence-top small{display:block;margin-left:0}.sequence-top>span:last-child{max-width:125px;text-align:right;font-size:8px}.steps{gap:3px}.steps button{height:35px;padding:3px 1px}.steps button:nth-child(4n+1){margin-left:2px}.steps span{font-size:6px}.steps i{width:5px;height:5px;margin-bottom:4px}.beat-labels{font-size:5px}.inspector{border-left:0;border-top:1px solid #dce1d2;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.panel-label{grid-column:1/-1}.selected-glyph{grid-column:1/-1;margin:17px 0;gap:15px}.selected-glyph p{font-size:10px}.selected-glyph h2{font-size:17px}.selected-glyph>svg{width:60px;height:60px}.pitch-readout{grid-column:1/-1;padding:10px 14px;margin-bottom:4px}.pitch-readout>span:first-child{font-size:8px}.pitch-readout strong{font-size:26px;margin-left:auto}.pitch-readout>span:last-child{margin-left:10px;font-size:8px}.control-label{font-size:10px;margin:14px 0 4px;min-width:0}.control-label select{font-size:10px;padding:9px 4px}.control-label input{margin-top:19px}.connection-panel{grid-column:1/-1;margin-top:18px;padding-top:17px}.connection-panel h3{font-size:12px}.connection-panel p{font-size:10px}.connect-button{font-size:11px}.connect-select select{font-size:10px;padding:9px}.link-list button{font-size:9px}.remove{grid-column:1/-1;margin-top:17px;font-size:10px}.studio-footer{flex-wrap:wrap;padding:13px 16px;gap:10px}.studio-footer>div{flex-basis:100%;font-size:10px}.studio-footer p{font-size:10px}.studio-footer label{flex:1;font-size:9px}.studio-footer select,.studio-footer>button{font-size:10px}.how{grid-template-columns:1fr;padding:35px 5px;gap:24px}.how article{padding-left:40px;position:relative}.how article>span{font-size:7px;position:absolute;left:0;top:3px;max-width:30px;line-height:1.6}.how h3{font-size:15px;margin:0 0 8px}.how p{font-size:11px;line-height:1.75}footer{flex-wrap:wrap;gap:13px;padding-top:20px;font-size:8px}footer>span:nth-child(2){order:3;flex-basis:100%;line-height:1.7}footer>span:last-child{margin-left:auto;font-size:7px}.share-link{padding:15px;gap:8px}.share-link label{width:100%}.desktop-break{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.instrument.singing>svg{transform:none}.instrument.singing:after{border-width:2px}}