@font-face{font-family:Space;src:local('Arial')}*{box-sizing:border-box}body{margin:0;background:#090c13;color:#e8eef4;font-family:Space,Arial,sans-serif}a{color:inherit;text-decoration:none}header{padding:24px 5%;border-bottom:1px solid #25313b;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{font-size:24px;font-weight:900;letter-spacing:-1px}.brand span{color:#bcf579}.brand small{font-size:11px;letter-spacing:2px;color:#9ba9b7;margin-left:16px}nav{display:flex;gap:24px;font-size:13px}main{max-width:1500px;margin:auto;padding:0 4%}.intro{display:flex;justify-content:space-between;align-items:center;padding:60px 0 40px;gap:30px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#a1b6b7;font-weight:700}h1{font-size:clamp(56px,7vw,100px);line-height:.95;letter-spacing:-5px;margin:18px 0 22px}em{font-style:normal;color:#c0f989}.intro p:not(.eyebrow),.arrangement p,.export p{color:#94a4b4;line-height:1.7;font-size:14px}.identity{width:260px;display:grid;gap:18px;font:10px monospace;letter-spacing:3px;color:#8bbaa9}.disc{width:170px;height:170px;border-radius:50%;background:repeating-radial-gradient(circle at center,#101d23 0 3px,#2b4946 4px 5px);box-shadow:0 0 70px #79f1b519;position:relative}.disc:after{content:'';position:absolute;inset:55px;border-radius:50%;background:#bdf788;border:22px solid #1e3534}.machine{background:#101720;border:1px solid #31414e;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px #0007}.topline,.transport,.pattern-tools,.arrangement,.export,.project-tools{padding:24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}.topline{justify-content:space-between;background:#15202a}.topline input{font-size:22px;background:transparent;border:none;padding:0;width:min(330px,100%)}.local{font:10px monospace;color:#b9ef82;letter-spacing:1px}button,.file-button,select,input[type=number]{border:1px solid #374653;background:#1b2632;color:inherit;border-radius:7px;padding:11px 13px;font:inherit;font-size:12px}button,.file-button,select{cursor:pointer}button:hover,.file-button:hover{border-color:#b9ef82}button:disabled{opacity:.4;cursor:default}.primary{background:#c0f989;color:#101b11;border-color:#c0f989;font-weight:800}input,select{color:inherit}input[type=range]{accent-color:#b9ef82;width:105px}input[type=number]{width:80px}label{font-size:11px;color:#a5b8c8;display:flex;gap:8px;align-items:center}input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,.grid-scroll:focus-visible{outline:2px solid #c0f989;outline-offset:3px}#position{font:11px monospace;color:#b9ef82;margin-left:auto}.transport{border-bottom:1px solid #293642}.pattern-tools{gap:10px;padding-bottom:4px}#patterns{display:flex;gap:5px}#patterns button[aria-pressed=true]{background:#bcf579;color:#102317}.hint{color:#91a3b4;font-size:12px;padding:0 24px;line-height:1.6}.grid-scroll{overflow:auto;padding:8px 24px 26px}.grid{min-width:1050px}.row{display:grid;grid-template-columns:230px repeat(16,minmax(35px,1fr));gap:5px;align-items:center;margin:7px 0}.track{display:flex;gap:8px;align-items:center;padding-right:8px}.track strong{width:64px;font-size:12px}.track input[type=range]{width:50px}.track input[type=number]{width:46px;padding:5px 0 5px 4px}.track button{padding:7px;font-size:10px}.track button[aria-pressed=true]{background:#9d4252}.step{height:43px;padding:0;border:1px solid #2b3a48;background:#1a2531;border-radius:5px}.step.beat{background:#253443}.step[data-level='1']{background:#74cdb7;border-color:#88e1bd;box-shadow:inset 0 -6px #163c3b4a}.step[data-level='2']{background:#d0f68d;border-color:#e3ffc1;box-shadow:inset 0 -6px #517d2155}.step.current{outline:2px solid white;outline-offset:1px}.numbers{font:10px monospace;color:#8fa9b7;text-align:center}.numbers span:first-child{text-align:left}.arrangement{border-top:1px solid #2a3948;background:#121d28}.arrangement h2,.export h2{margin:8px 0;font-size:23px;letter-spacing:-.6px}.arrangement>label{margin-left:auto}.song{display:flex;gap:8px;flex-wrap:wrap;width:100%}.song label{display:grid;flex:1;min-width:75px;gap:8px}.song select{width:100%;font-size:18px}.song label.active select{border-color:#c0f989;color:#c0f989}.export{justify-content:space-between;border-top:1px solid #293b49}.export-actions{display:grid;gap:12px}.export-actions a{font-size:12px;color:#bef286}.export-actions>span{font:11px monospace;color:#95b0c2}.project-tools{border-top:1px solid #283c4c;padding-bottom:8px}.project-tools span{font-size:11px;color:#94a8b8}.file-button input{display:none}#status{margin:0;padding:20px 24px;color:#b9e293;font-size:13px;line-height:1.6}footer{padding:26px 0 50px;color:#8c9caa;font-size:12px;line-height:1.7}@media(max-width:700px){header{padding:18px;align-items:flex-start;flex-direction:column}nav{gap:18px}.brand small{margin-left:8px}.intro{padding:35px 0 25px}.identity{display:none}h1{letter-spacing:-3px}.topline,.transport,.pattern-tools,.arrangement,.export,.project-tools{padding:18px}.local{font-size:9px}.transport{gap:14px}#position{width:100%;margin:0}.grid-scroll{padding-left:14px}.hint{padding:0 18px}.arrangement>label{margin-left:0}.export-actions{width:100%}.song label{min-width:55px}main{padding:0 12px}.step{height:46px}}
/* Honor hidden panels even though project toolbars normally use flex layout. */
[hidden]{display:none!important}#rendered audio{max-width:100%}#wav-link,#project-link{overflow-wrap:anywhere;line-height:1.6}
/* Extended sound palette and four-page patterns. */
.row{grid-template-columns:370px repeat(16,minmax(35px,1fr))}.grid{min-width:1200px}.track select{width:137px;padding:7px 4px;font-size:10px}.track strong{width:58px}.step[data-level='3']{background:#375966;border:1px dashed #8ce0f0}.step[data-level='4']{background:repeating-linear-gradient(90deg,#c496f8 0 8px,#714c9d 8px 12px);border-color:#e3c8ff}#pages{display:flex;gap:6px;flex-wrap:wrap}#pages button[aria-pressed=true]{border-color:#bdf788;color:#bdf788}.sound-tools{border-top:1px solid #30404b;margin-top:18px}.track{gap:7px}
.grid .row{grid-template-columns:370px repeat(16,minmax(35px,1fr))}.grid-scroll .grid{min-width:1200px}
.grid-scroll .grid .row{grid-template-columns:405px repeat(16,minmax(35px,1fr))}.grid-scroll .grid{min-width:1250px}