:root{color-scheme:dark;--cyan:#6ee8ff;--gold:#e4ba70}*{box-sizing:border-box}body{margin:0;background:#070b12;color:#edf4fa;font:16px system-ui,sans-serif}header{max-width:1200px;margin:auto;display:flex;align-items:center;gap:28px;padding:25px 32px;border-bottom:1px solid #243041}header strong{letter-spacing:5px;color:var(--cyan)}header span{font-size:10px;letter-spacing:2px;color:#9baabe}.badge{margin-left:auto;border:1px solid #826a42;padding:9px;color:var(--gold)}main{max-width:1200px;margin:auto;padding:32px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;margin-bottom:45px}.banner{width:100%;border-radius:18px;box-shadow:0 0 65px #13304670}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold)}h1{font:58px Georgia,serif;margin:22px 0}h1 span{display:block;font:34px Georgia,serif;color:#8596ab;margin-top:15px;line-height:1.2}.intro>p:not(.eyebrow){line-height:1.8;color:#abb8c8;max-width:370px}.agent{display:flex;gap:14px;align-items:center;margin-top:30px}.agent i{width:12px;height:12px;background:var(--cyan);border-radius:50%;box-shadow:0 0 18px var(--cyan)}small{display:block;color:#8999ac;margin-top:6px}.studio{position:relative;overflow:hidden;background:linear-gradient(135deg,#101b2a,#0a101a);border:1px solid #29394d;border-radius:20px;padding:30px}.seal{position:absolute;width:180px;right:20px;top:5px;opacity:.18;pointer-events:none}.studiohead,.transport{display:flex;gap:16px;align-items:center;flex-wrap:wrap;position:relative}.studiohead{justify-content:space-between}.studiohead h2{font:32px Georgia;margin:6px 0 22px}.studiohead>p{font-size:13px;color:var(--cyan);max-width:300px}.transport{margin-bottom:22px}button{cursor:pointer;background:#172332;color:#eaf4fc;border:1px solid #324356;border-radius:8px;padding:12px 18px;font:inherit}button:hover{border-color:var(--cyan)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.primary{background:var(--cyan);color:#04131e;border:0;font-weight:650}.transport span{margin-left:auto;color:#96a8bd;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--cyan)}.settings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin:26px 0}.settings label{font-size:13px;color:#acbace}.settings output{float:right;color:var(--cyan)}select{display:block;width:100%;margin-top:10px;background:#101a28;border:1px solid #334257;color:white;padding:8px;border-radius:6px}#keyboard{height:155px;display:flex;position:relative;overflow:hidden;border-radius:6px}#keyboard button{padding:0;border-radius:0 0 4px 4px;position:relative;flex:1;background:linear-gradient(#fff,#cfd9e2);color:#607080;border:1px solid #8897a5;font-size:10px;display:flex;align-items:end;justify-content:center;padding-bottom:12px;touch-action:manipulation}#keyboard button.black{position:absolute;height:63%;width:2.8%;background:linear-gradient(#172637,#02050a);z-index:2;color:#a9c6dd;border:1px solid #000}#keyboard button.active{background:var(--cyan);box-shadow:0 0 16px var(--cyan)}.hint{color:#7d90a7;font-size:12px;text-align:center;margin-bottom:0}.conversation{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;padding:45px 0}.conversation h2{font:29px Georgia}.conversation p{color:#96a8bd;line-height:1.6}form{display:flex;gap:10px}input[type=text],#command{min-width:0;flex:1;background:#101a28;border:1px solid #304052;border-radius:8px;padding:15px;color:white;font:inherit}.chips{display:flex;gap:8px;margin-top:12px}.chips button{font-size:12px;padding:8px 12px}footer{border-top:1px solid #263345;padding:22px 0;color:#8293aa;font-size:12px;display:flex;justify-content:space-between;gap:30px}details{max-width:500px}a{color:var(--cyan)}@media(max-width:700px){header{padding:20px;gap:10px}header>span:not(.badge){display:none}main{padding:20px}.hero{grid-template-columns:1fr;gap:22px}.banner{max-height:400px;object-fit:contain}h1{font-size:44px}.intro{padding:0 10px}.studio{padding:20px}.settings{gap:15px;grid-template-columns:1fr 1fr}.settings label:last-child{grid-column:1/-1}.conversation{grid-template-columns:1fr;gap:0}.transport span{margin-left:0}#keyboard{height:120px}footer{display:block}.chips{flex-wrap:wrap}}

.hands-legend{display:flex;gap:25px;flex-wrap:wrap;color:#bdcad9;font-size:12px;margin:20px 0 12px}.hands-legend span{display:flex;gap:8px;align-items:center}.hands-legend i{display:inline-block;width:12px;height:12px;border-radius:3px}.left-dot{background:#969fa9}.right-dot{background:#6ee8ff}.piano-scroll{overflow-x:auto;border:1px solid #35465c;border-radius:9px}.piano-visual{min-width:1050px}#roll{display:block;width:100%;height:260px;background:linear-gradient(#080e18,#152234)}#keyboard{height:180px;border-radius:0;display:block}#keyboard button{position:absolute;flex:none;height:100%;font-size:10px;padding-bottom:18px}#keyboard button.black{height:63%;font-size:9px;padding-bottom:12px}#keyboard button.left-hand.active,#keyboard button.left-hand.pressed{background:linear-gradient(#c5cbd0,#8a959f);box-shadow:0 0 18px #a6b0b8;color:#1a2630}#keyboard button.right-hand.active,#keyboard button.right-hand.pressed{background:linear-gradient(#9af2ff,#4dc5de);box-shadow:0 0 18px #6ee8ff;color:#052432}@media(max-width:700px){#roll{height:220px}#keyboard{height:150px}.piano-visual{min-width:1000px}}
/* Adaptación para móviles y tabletas */
html,body{max-width:100%;overflow-x:hidden}main,.studio,.conversation>div{min-width:0}.banner{height:auto}.piano-scroll{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.transport button{min-height:44px}header .badge{letter-spacing:1px;text-align:center}#command{width:100%}.hint{line-height:1.6}canvas{touch-action:pan-x}
@media(max-width:900px){.hero{gap:28px}h1{font-size:46px}.conversation{gap:25px}.settings{gap:20px}}
@media(max-width:700px){header{flex-wrap:wrap}header strong{font-size:14px;letter-spacing:3px}.badge{font-size:10px}.studiohead{align-items:flex-start}.studiohead h2{font-size:26px;line-height:1.25}.studiohead>p{width:100%;margin-top:0}.seal{width:135px}.hands-legend{gap:12px;font-size:11px}.transport{gap:10px}.transport button{flex:1;white-space:nowrap}.transport label,.transport #time{font-size:13px}.conversation h2{font-size:27px}.conversation form{flex-wrap:wrap}.conversation form input{flex-basis:100%}.conversation form button{width:100%;min-height:44px}.settings{gap:18px}.hero{margin-bottom:25px}.intro{padding:0}h1 span{font-size:29px}footer details{margin-top:12px}.piano-scroll{scrollbar-color:#6ee8ff #172332}.hint{font-size:11px}}
@media(max-width:380px){main{padding:12px}.studio{padding:14px}header{padding:14px}.settings{grid-template-columns:1fr}.settings label:last-child{grid-column:auto}}

#roll{height:130px}@media(max-width:700px){#roll{height:110px}}