.controls{grid-template-columns:repeat(9,minmax(112px,1fr));margin-bottom:14px}
.custom-panel{max-width:1500px;margin:0 auto 18px;padding:18px;border:1px solid #26344d;border-radius:16px;background:linear-gradient(135deg,#0d1422,#101629);box-shadow:0 12px 40px #0003}
.custom-panel[hidden],label[hidden]{display:none}
.custom-copy{display:flex;justify-content:space-between;gap:14px;margin-bottom:12px}
.custom-copy strong{font-size:1rem}.custom-copy span{color:var(--muted);font-size:.86rem}
.exercise-name{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;font-weight:700;margin-bottom:12px}.exercise-name input{flex:1;min-height:40px;background:#161c2a;color:var(--text);border:1px solid #34435f;border-radius:9px;padding:8px 11px}
.custom-panel textarea{display:block;width:100%;resize:vertical;min-height:170px;border:1px solid #34435f;border-radius:12px;background:#070a11;color:#dce7f6;padding:15px;font:600 1rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:auto}
.custom-panel textarea:focus{outline:2px solid #39e7ff66;border-color:var(--cyan)}
.custom-actions{display:flex;align-items:center;gap:14px;margin-top:12px}.custom-actions span{color:var(--muted);font-size:.86rem}.custom-actions span.error{color:var(--danger)}
.play-along-setup{margin-top:16px;border-top:1px solid #2c3851;padding-top:14px}.play-along-setup summary{cursor:pointer;color:#dce7f6;font-weight:800}.play-along-fields{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(2,minmax(150px,1fr)) auto;gap:10px;align-items:end;margin-top:14px}.play-along-fields label{display:grid;gap:6px;color:var(--muted);font-size:.78rem;font-weight:800}.play-along-fields input{min-height:40px;border:1px solid #34435f;border-radius:9px;background:#161c2a;color:var(--text);padding:7px 10px;font:inherit}.play-along-fields input[type=file]{padding:8px}.play-along-fields .ghost{min-height:40px}.play-along-setup p{margin:11px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45}
.play-along-video{margin:0 auto 18px;max-width:1500px;border:1px solid #28515b;border-radius:16px;overflow:hidden;background:#060b11;box-shadow:0 16px 38px #0008}.play-along-video header{display:flex;align-items:baseline;gap:10px;padding:12px 16px;background:linear-gradient(90deg,#0b2830,#101629);border-bottom:1px solid #28515b}.play-along-video header span{color:#46e7cc;font-size:.7rem;font-weight:900;letter-spacing:.12em}.play-along-video header strong{font-size:.9rem}.play-along-video header small{margin-left:auto;color:var(--muted);font-size:.78rem}.play-along-video video{display:block;width:100%;max-height:560px;background:#000;object-fit:contain}
.recording .custom-panel{display:none}
.tab-viewport{position:relative;min-width:0;flex:1;overflow:hidden;border:1px solid #263b48;border-radius:10px;background:linear-gradient(90deg,#071018,#0b1420 50%,#071018);box-shadow:inset 0 0 28px #0008}.tablature{height:100%;overflow-x:auto;scroll-behavior:smooth;padding:10px 12px}.tab-row{width:max-content;min-width:100%;padding:1px 0}.raw-tab-row{white-space:pre}.raw-tab-token{min-width:0;text-align:inherit}.tab-token{position:relative;border-radius:4px;transition:color .1s,background .1s,box-shadow .1s}.tab-token.active{color:#06120f!important;background:#54f0ae;text-shadow:none!important;box-shadow:0 0 0 2px #c8ffe6,0 0 20px #39e7a1;font-weight:950}.tab-playhead{position:absolute;z-index:2;top:7px;bottom:7px;width:3px;border-radius:4px;background:#5cffaa;box-shadow:0 0 7px #5cffaa,0 0 22px #5cffaa;pointer-events:none;transform:translateX(-50%);transition:left .1s linear}.tab-playhead:before,.tab-playhead:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent}.tab-playhead:before{top:-6px;border-top:7px solid #5cffaa}.tab-playhead:after{bottom:-6px;border-bottom:7px solid #5cffaa}.tablature::-webkit-scrollbar{height:5px}.tablature::-webkit-scrollbar-thumb{background:#33415b;border-radius:10px}
.stage.horizontal{aspect-ratio:auto;min-height:900px}.stage.horizontal .tab-shell{flex:0 0 190px;min-height:190px}.stage.horizontal .tablature{min-height:170px;grid-template-rows:repeat(6,minmax(1.55em,auto));align-content:center;overflow-x:auto;overflow-y:visible}.stage.horizontal .tab-row{line-height:1.55}.recording .stage.horizontal{min-height:0}
@media(max-width:1100px){.controls{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.play-along-fields{grid-template-columns:1fr 1fr}.play-along-fields label:first-child{grid-column:1/-1}.play-along-fields .ghost{grid-column:1/-1}.play-along-video header{align-items:flex-start;flex-wrap:wrap}.play-along-video header small{margin-left:0;width:100%}}
@media(max-width:650px){.controls{grid-template-columns:repeat(2,1fr)}.custom-copy{flex-direction:column}.custom-actions{align-items:flex-start;flex-direction:column}.stage.horizontal{min-height:980px}.stage.horizontal .tab-shell{flex-basis:200px;min-height:200px}.recording .stage.horizontal{min-height:0}}
.copyright-footer{max-width:1500px;margin:34px auto 0;padding:22px clamp(18px,3vw,42px) 30px;border-top:1px solid #273149;color:#7f8ba0;display:flex;justify-content:space-between;gap:18px;font-size:.78rem;line-height:1.55}.copyright-footer strong{color:#b8c3d4}.recording .copyright-footer{display:none}@media(max-width:700px){.copyright-footer{flex-direction:column;gap:5px;text-align:center}}