*{box-sizing:border-box}body{margin:0;background:#100b0d;color:#f9ece8;font:15px system-ui}a{color:#efb7ae}header{display:flex;justify-content:space-between;gap:16px;padding:24px 5%;border-bottom:1px solid #54212c;align-items:center}header>a:first-child{font-size:25px;font-weight:800;text-decoration:none}header span{font-size:11px;letter-spacing:2px}main{max-width:1200px;margin:auto;padding:30px 24px}h1{font-size:40px;margin:0}p{line-height:1.6;color:#c8aeb3}.controls,.transport{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:18px;background:#261318;border-radius:12px;margin:20px 0}label{display:grid;gap:8px;font-size:12px}input,select,button{font:inherit;color:#fff}select,button{padding:9px 12px;background:#721829;border:1px solid #b44e5a;border-radius:7px;cursor:pointer}button:disabled{opacity:.4}#seek{flex:1;accent-color:#dc4c62;min-width:120px}.instrument{display:grid;grid-template-columns:1fr 330px 1fr;gap:24px;margin:30px 0}.instrument>aside,.treble{padding:22px;border:1px solid #54212c;border-radius:14px;background:#1c1015}h2{font-size:16px}#direction{font-size:30px;font-weight:800;padding:14px 0;color:#ffd695}#direction.pull{color:#7fd0ff}.folds{height:100px;background:repeating-linear-gradient(90deg,#711b2b 0 5px,#230c13 6px 10px);border:1px solid #a14254;border-radius:8px;transform-origin:center}.folds.push{animation:close 1.5s infinite alternate}.folds.pull{animation:open 1.5s infinite alternate}@keyframes close{from{transform:scaleX(1)}to{transform:scaleX(.65)}}@keyframes open{from{transform:scaleX(.65)}to{transform:scaleX(1)}}.row-head,#board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;justify-items:center}.row-head{font-size:10px;margin-bottom:18px;color:#d09ba6}#board button{width:66px;height:48px;border-radius:22px;background:#321720;font-size:11px;padding:3px;position:relative}#board button b{font-size:10px;color:#ae808d;display:block}#board button.active{background:#ffd695;color:#331011;box-shadow:0 0 14px #ffc16a88;border-color:#fff}#board button.next{outline:2px solid #f34b68;outline-offset:2px}.muted{font-size:11px}#upcoming>div{padding:10px 0;border-bottom:1px solid #48242c;font-size:13px}#upcoming strong{color:#ffd695}#library{display:flex;flex-wrap:wrap;gap:10px}details{margin-top:30px;padding:20px;border:1px solid #54212c;border-radius:10px}@media(max-width:800px){.instrument{grid-template-columns:1fr}.instrument>aside:first-child{order:0}.treble{order:1}.instrument>aside:last-child{order:2}.folds{height:45px}.row-head,#board{max-width:300px;margin-left:auto;margin-right:auto}header span{display:none}}@media(prefers-reduced-motion:reduce){.folds{animation:none!important}}