:root{font-family:Arial,Helvetica,sans-serif;color:#f3eee5;background:#121d27;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,.file{border:1px solid #59616a;background:transparent;color:inherit;padding:12px 16px;border-radius:4px;cursor:pointer;min-height:44px}button:hover,.file:hover{background:#ffffff0c;border-color:#edb791}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e8c78e;outline-offset:4px}main{max-width:1700px;margin:auto;padding:30px 4vw}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff26;padding-bottom:22px}.wordmark{font-size:30px;font-weight:700;text-decoration:none;color:inherit}.wordmark span{font-size:10px;letter-spacing:2px;font-weight:400;margin-left:25px}.chip{font-size:10px;letter-spacing:2px;border:1px solid #637b78;border-radius:30px;padding:9px 14px;color:#b1d2c8}.intro{display:flex;justify-content:space-between;align-items:center;padding:42px 0 36px}.eyebrow{font-size:10px;letter-spacing:2px;color:#b4c1c7}h1{font-size:clamp(45px,6vw,88px);line-height:.98;letter-spacing:-4px;margin:22px 0 0;font-weight:500}h1 em{font-family:Georgia,serif;font-weight:400;color:#f4b086}.intro-note{max-width:230px;position:relative;margin-right:4vw}.intro-note p{font-size:23px;line-height:1.3}.intro-note small{line-height:1.7;color:#a9b7bf}.asterisk{font-size:48px;color:#f4b086}.studio{background:#1b2934;border:1px solid #46505a;border-radius:9px;overflow:hidden;box-shadow:0 20px 70px #0002}.toolbar{padding:20px 24px;display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #ffffff20}.variants{display:flex;gap:7px}.variants button{font-size:20px;border:1px solid transparent;color:#a3b3bd;min-width:155px;text-align:left}.variants button[aria-pressed=true]{background:#eed9c0;color:#26313a;border-color:#eed9c0}.variants span{font-size:11px;margin-left:12px}.transport{display:flex;gap:20px;align-items:center}.transport span{font-size:11px;color:#bcc7cb}.play{background:#ecc1a1;color:#1b2934;border-color:#ecc1a1;font-weight:700}.score-heading,.score-foot{display:flex;justify-content:space-between;color:#a7b5bd;font-size:9px;letter-spacing:1.3px;padding:25px 26px 8px}.score{position:relative;height:240px;display:flex;align-items:stretch;padding:0 18px}.baseline{position:absolute;top:148px;left:25px;right:25px;height:1px;background:#78858d55}.tap{position:relative;flex:1;min-width:0;border:0;border-radius:0;padding:0;background:transparent}.tap:hover{background:#ffffff07}.tap.selected{background:#ffffff05;border-bottom:2px solid #f4b086}.stem{position:absolute;left:50%;top:calc(144px - var(--weight) * 100px);width:1px;height:calc(var(--weight) * 100px + 4px);background:var(--tone)}.orb{position:absolute;left:50%;top:calc(140px - var(--weight) * 100px);width:calc(12px + var(--weight) * 17px);height:calc(12px + var(--weight) * 17px);border-radius:50%;background:var(--tone);transform:translate(-50%,-50%);box-shadow:0 calc(var(--tail) * 23px) calc(var(--tail) * 18px) -5px var(--tone);opacity:calc(.28 + var(--weight) * .72)}.tap-number{position:absolute;top:173px;left:0;right:0;font-size:11px;color:#e2dfd8}.tap-time{position:absolute;top:198px;left:0;right:0;font:9px monospace;color:#9caeb8}.score-foot{letter-spacing:0;padding:0 26px 23px;font-size:10px;gap:12px}.editor{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}.editor>label,.selected-label{padding:24px;border-right:1px solid #ffffff16}.selected-label{display:flex;flex-direction:column;gap:7px}.selected-label strong{font:30px Georgia,serif}.selected-label small{color:#f4b086;font-size:10px;letter-spacing:2px}.selected-label span,.editor small{font-size:10px;color:#a8bbc4}.editor label{font-size:12px}.editor output{float:right;color:#efb790;font-size:11px}input[type=range]{width:100%;accent-color:#f0b48a;display:block;margin:22px 0 19px}select{display:block;width:100%;padding:9px;background:#243644;border:1px solid #657681;color:#fff;margin:12px 0;border-radius:3px}.actions{display:flex;align-items:center;gap:10px;padding:15px 20px}.actions button{font-size:11px;padding:8px 12px}.actions span{font-size:10px;color:#a9bec5;margin-left:auto;max-width:380px}.lower{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:35px 0}.lower article{max-width:590px}h2{font:27px Georgia,serif;margin:16px 0}.lower p:not(.eyebrow){font-size:12px;line-height:1.8;color:#adbec7}.lower button{font-size:11px}.exports,.capture{display:flex;flex-wrap:wrap;gap:8px}.capture small{flex-basis:100%;line-height:1.5;color:#afc0c5}.project-bar{padding:20px 0;border-top:1px solid #ffffff25;display:flex;align-items:end;gap:12px}.project-bar>label:first-child{font-size:10px;letter-spacing:1px}.project-bar input:not([type=file]){display:block;margin-top:8px;padding:10px;background:#1b2934;border:1px solid #59616a;color:#fff;min-height:44px}.project-bar button,.file{font-size:11px}.file input{display:block;width:150px;margin-top:8px;font-size:10px}.project-bar>span{font-size:10px;margin-left:auto;color:#9aadb9;max-width:190px;line-height:1.8}footer{display:flex;justify-content:space-between;align-items:start;font-size:9px;color:#a9b8c1;letter-spacing:1px;padding:20px 0}details{max-width:550px;letter-spacing:0;font-size:11px;line-height:1.7}summary{cursor:pointer}details button{font-size:11px}@media(max-width:800px){main{padding:20px}.intro-note{max-width:175px;margin:0}.intro-note p{font-size:18px}h1{letter-spacing:-2px}.toolbar{flex-wrap:wrap;padding:16px}.editor{grid-template-columns:1fr 1fr}.score{padding:0 6px;height:220px}.tap-time{display:none}.tap-number{font-size:9px}.score-heading span:last-child{display:none}.score-foot,.actions{flex-wrap:wrap}.actions span{margin:0;width:100%;max-width:none}.lower{gap:25px}.project-bar{flex-wrap:wrap}.project-bar>span{margin:0}footer{gap:30px}.wordmark span{display:none}}@media(max-width:520px){.intro{gap:20px}.intro-note{max-width:110px}.intro-note small{display:none}.intro-note p{font-size:14px}.asterisk{font-size:30px}.chip{font-size:8px}.variants button{min-width:125px}.transport{width:100%;justify-content:space-between}.editor>label,.selected-label{padding:17px}.lower{grid-template-columns:1fr}.score{overflow-x:auto}.tap{min-width:30px}.baseline{display:none}footer{flex-direction:column}.project-bar>label:first-child{width:100%}.project-bar input:not([type=file]){width:100%}.score-foot{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}