#piano-viewport{flex:1;min-height:62px;overflow:hidden;touch-action:none;border-radius:9px;position:relative;box-shadow:0 4px 10px #0d0d0d2e}#piano{display:flex;width:100%;height:100%;will-change:transform}.octave-page{display:flex;position:relative;flex:0 0 100%;height:100%}.key{padding:0;position:relative;border-radius:0 0 6px 6px;touch-action:none;flex-shrink:0}.key.white{width:14.285714%;height:100%;background:linear-gradient(180deg,#fcfbfc,#16cf57);border:0;border-right:1px solid #a0a0a0;color:#838383;box-shadow:inset 0 -3px 0 #c5c5c5}.key.black{width:8.5%;margin-left:-4.25%;margin-right:-4.25%;height:63%;background:linear-gradient(100deg,#393939,#171717);border:0;border-bottom:3px solid #0c0c0c;z-index:2;box-shadow:2px 4px 4px #0004}.key.active{background:linear-gradient(#eeeeee,#c6c6c6);box-shadow:inset 0 -2px 0 #a1a1a1}.key.black.active{background:linear-gradient(#bababa,#757575)}.key span{position:absolute;bottom:7px;left:0;right:0;font-size:8px}.keyboard-foot{font-size:8px;color:#b9b9b9;height:10px}#octave-dots{display:flex;gap:4px}#octave-dots i{display:block;width:4px;height:4px;border-radius:4px;background:#ffffff30}#octave-dots i.active{width:12px;background:#d8d8d8}.loop-panel{display:flex;flex-direction:column;gap:8px}#slots{flex:1;min-height:56px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:5px}.slot{min-height:26px;padding:2px;border-radius:9px;border:1px dashed #ffffff30;background:#1a1a1a16;color:#b4b4b4;font-size:13px;position:relative;touch-action:none}.slot.filled{background:linear-gradient(130deg,#ffffff25,#ffffff0b);border:1px solid #e5e5e540;color:#f2f2f2;box-shadow:inset 0 1px 0 #ffffff12}.slot.playing{background:linear-gradient(120deg,#dfdfdf,#cacaca);color:#2e2e2e;border-color:#f2f2f2;box-shadow:0 0 12px #cdcdcd44}.slot.tapped{animation:tap .55s ease-out}.slot.target{outline:2px solid #16cf57;background:#d3d3d333}.slot.editing.filled:after{content:'×';position:absolute;right:4px;top:0;font-size:10px}@keyframes tap{0%{transform:scale(.91);background:#ececec;color:#232323;box-shadow:0 0 0 0 #e9e9e977}45%{transform:scale(1.03);background:#c4c4c4;color:#232323;box-shadow:0 0 0 5px #e9e9e900}100%{transform:scale(1)}}.transport{display:flex;align-items:end;gap:9px}.transport label{display:flex;flex-direction:column;gap:3px;font-size:8px;color:#c9c9c9}.bpm-control{flex:1;min-width:0}.bpm-control>label{margin-bottom:3px}.bpm-field{display:flex;background:#1b1b1b20;border:1px solid #ffffff20;border-radius:9px;height:32px;overflow:hidden}.bpm-field input{width:100%;min-width:0;border:0;border-radius:0;background:transparent;padding:5px 8px;font-size:13px}.bpm-field button{border:0;border-left:1px solid #ffffff12;border-radius:0;padding:0;width:27px;flex-shrink:0;background:transparent}.beats-label{flex:1}select{height:32px;width:100%;padding:4px 7px;font-size:12px;border-radius:9px;background:#1b1b1b20}option{background:#313131}.primary{background:linear-gradient(120deg,#ebebeb,#cdcdcd);border:1px solid #ffffff57;color:#2e2e2e;font-weight:650;box-shadow:inset 0 1px 0 #fff7,0 4px 10px #0f0f0f1a}#loop{flex:1.45;height:32px;padding:4px;font-size:11px;border-radius:10px}#hint{margin:0;color:#b9b9b9;font-size:8px;white-space:nowrap;text-align:center}.chords-panel{display:flex;flex-direction:column;gap:9px}#chords{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,1fr);gap:5px;flex:1;min-height:0}#chords button{padding:3px 0;min-width:0;font-size:11px;font-weight:550;border-radius:9px;background:linear-gradient(135deg,#ffffff13,#ffffff03);border-color:#ffffff1f;touch-action:none}#chords button.selected{background:linear-gradient(120deg,#d1d1d13b,#cccccc25);border-color:#e2e2e25c;color:#f3f3f3}#chords button:nth-child(n+15){color:#cbcbcb}/* Quiet continuous lanes visually group each root and its variations. */
#chords{grid-template-rows:minmax(0,1fr)}
.chord-column{min-width:0;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:0;border-radius:11px;background:linear-gradient(180deg,#dddddd1c,#dddddd09);box-shadow:inset 1px 0 0 #ebebeb1c,inset -1px 0 0 #ebebeb1c;overflow:hidden}
#chords .chord-column button{border:0;border-radius:0;background:transparent;position:relative;color:#fafafa}
#chords .chord-column button:first-child{background:linear-gradient(180deg,#e8e8e814,#e8e8e805)}
#chords .chord-column button+button:before{content:'';position:absolute;top:0;left:22%;right:22%;height:1px;background:#ededed15;pointer-events:none}
#chords .chord-column button.selected{background:linear-gradient(120deg,#d1d1d14d,#cccccc36);box-shadow:inset 0 0 0 1px #e2e2e25c;border-radius:8px;color:#fff}
.slot-play{width:100%;height:100%;min-height:0;border:0;background:none;padding:2px 15px 2px 2px;color:inherit;font-size:inherit;touch-action:none}.slot:not(.filled) .slot-play{padding:2px}.slot-remove{position:absolute;right:-3px;top:-5px;width:23px;height:23px;padding:0;border-radius:50%;font-size:19px;font-weight:400;line-height:20px;color:#f4f4f4;background:linear-gradient(135deg,#6a6a6a,#3c3c3c);border:1px solid #ebebeb66;box-shadow:0 2px 5px #0003;z-index:3}.slot-remove:active{background:#a7a7a7}
#slots{direction:ltr}.key.chord-active{background:linear-gradient(#eeeeee,#c6c6c6);box-shadow:inset 0 -2px 0 #a1a1a1}.key.black.chord-active{background:linear-gradient(#bababa,#757575)}#piano-viewport,.octaves{direction:ltr}

.guitar-panel{gap:5px;padding:9px}.guitar-panel .section-head{flex-shrink:0;min-height:22px;gap:5px}
#current-chord{font-size:10px;color:#16cf57;direction:ltr;margin-inline-start:auto;white-space:nowrap}
#pattern-select{font-size:10px;padding:4px 6px;white-space:nowrap}
#guitar-instruments{display:flex;gap:5px;flex:none;height:27px}
#guitar-instruments button{flex:1;min-width:0;padding:3px;font-size:11px;border-radius:8px;line-height:1.1}
#guitar-instruments .selected,#patterns .selected{color:#eaff98;background:linear-gradient(135deg,#16cf5730,#16cf5714);border-color:#16cf5788}
#strings{flex:1;min-height:60px;display:flex;flex-direction:column;direction:ltr;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0,transparent 23%,#ffffff18 23.2%,#ffffff18 23.8%,transparent 24%),linear-gradient(100deg,#141414aa,#39332788,#161616aa);touch-action:none}
.guitar-string{position:relative;border:0;border-radius:0;flex:1;min-height:0;padding:0 8px;text-align:left;color:#e5e5e5;font-size:9px;line-height:1;touch-action:none;background:transparent;isolation:isolate}
.guitar-string::after{content:'';position:absolute;left:35px;right:0;top:50%;height:var(--thickness);background:linear-gradient(#faf1d8,#8e8069);box-shadow:0 1px 2px #000;z-index:-1}
.guitar-string.vibrating::after{background:#16cf57;animation:vibrate .45s ease-out}.guitar-string:disabled{opacity:.25}
@keyframes vibrate{0%,40%,80%{transform:translateY(-1px)}20%,60%{transform:translateY(1px)}100%{transform:translateY(0)}}
#patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#patterns button{min-height:44px;font-size:13px;padding:8px;overflow-wrap:anywhere}
.guitar-panel .keyboard-foot{flex:none;min-height:10px;line-height:1.1;font-size:8px}
/* Keep all four rhythms and four arpeggios directly below the strings. */
#patterns{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:none}
#patterns button{min-height:26px;padding:4px 2px;font-size:10px;line-height:1.15;border-radius:8px}
#strings{min-height:40px}
#expand-piano{margin-inline-start:auto;font-size:21px;line-height:1;padding:2px 7px;min-height:26px}
#piano-panel .octaves{margin-inline-start:0}
#expanded-piano{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#14141455;overflow:hidden;box-shadow:none}
#expanded-piano::backdrop{background:#05050599;backdrop-filter:blur(8px)}
#expanded-piano-surface{position:absolute;left:50%;top:calc(50% + 20px);width:calc(100dvh - 100px);height:calc(100vw - 24px);transform:translate(-50%,-50%) rotate(90deg)}
#expanded-piano #piano-panel{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:12px;gap:10px;background:linear-gradient(130deg,#ffffff18,#171717b8);border:1px solid #ffffff40;border-radius:20px;box-shadow:0 14px 48px #0008;backdrop-filter:blur(20px)}
#expanded-piano #piano-viewport{flex:1;min-height:0;max-height:none}
#expanded-piano .section-head,#expanded-piano .keyboard-foot{flex:none}
#expanded-piano #expand-piano{display:none}
#close-expanded-piano{position:absolute;top:12px;right:16px;width:42px;height:42px;border-radius:50%;font-size:30px;line-height:1;padding:0;background:#303030bb;border:1px solid #ffffff66;color:white;z-index:2}