/* Canal-lock exhibit: one annotation system, clearly separated from stage controls.
   Scope is limited to scene 15 / data-id 14. */
@media (min-width: 901px){
 #shell #stage .scene[data-id="14"] .canal-picture .canal-tag{
   top:13px;
   padding:7px 10px;
   max-width:31%;
   box-sizing:border-box;
   border:1px solid rgba(237,207,154,.6);
   background:rgba(27,32,27,.86);
   color:#f5e7c8;
   font-size:clamp(10px,.82vw,12px);
   line-height:1.45;
   letter-spacing:.05em;
   white-space:normal;
   text-align:center;
   text-shadow:0 1px 3px rgba(0,0,0,.42);
   pointer-events:none;
 }
 #shell #stage .scene[data-id="14"] .canal-tag.up{left:14px}
 #shell #stage .scene[data-id="14"] .canal-tag.mid{left:50%;transform:translateX(-50%)}
 #shell #stage .scene[data-id="14"] .canal-tag.down{right:14px}
 #shell #stage .scene[data-id="14"] .canal-control{padding:9px 13px 11px}
 #shell #stage .scene[data-id="14"] .canal-current{
   display:grid;
   grid-template-columns:max-content minmax(0,1fr) max-content;
   grid-template-rows:auto auto;
   gap:4px 11px;
   min-height:0;
   align-items:center;
   margin-bottom:9px;
 }
 #shell #stage .scene[data-id="14"] .canal-current .stepno{grid-column:1;grid-row:1;align-self:center}
 #shell #stage .scene[data-id="14"] .canal-current strong{
   grid-column:2;grid-row:1;
   font-size:14px;line-height:1.4;
   white-space:normal;min-width:0;
 }
 #shell #stage .scene[data-id="14"] .canal-current .canal-level{
   grid-column:3;grid-row:1;
   margin-left:0;
   font-size:11px;
   line-height:1.45;
   padding:4px 7px;
 }
 #shell #stage .scene[data-id="14"] .canal-current #canalStepCopy{
   grid-column:1/-1;grid-row:2;
   font-size:12px;line-height:1.5;
   overflow:visible;text-overflow:clip;white-space:normal;
   color:#d4c5a8;
   overflow-wrap:anywhere;
 }
 #shell #stage .scene[data-id="14"] .canal-steps{gap:7px}
 #shell #stage .scene[data-id="14"] .canal-step{min-height:34px;padding:7px 9px;gap:8px}
 #shell #stage .scene[data-id="14"] .canal-step span{
   font-size:11px;line-height:1.35;
   overflow:visible;text-overflow:clip;white-space:normal;
 }
 #shell #stage .scene[data-id="14"] .canal-actions{gap:7px;margin-top:9px}
 #shell #stage .scene[data-id="14"] .canal-actions button{min-height:30px;font-size:11px}
 #shell #stage .scene[data-id="14"] .canal-seek{min-width:54px}
}
/* Low- and medium-height desktop screens previously squeezed the picture to ~100–200px. */
@media (min-width:901px) and (max-width:1365px) and (min-height:650px){
 html[data-device="desktop"][data-layout="landscape"] body #shell #stage .scene[data-id="14"][data-form]{
   height:clamp(460px,65dvh,525px)!important;
   min-height:460px!important;
 }
 html[data-device="desktop"][data-layout="landscape"] body #shell #stage .scene[data-id="14"][data-form] .visual{
   height:100%!important;
   min-height:0!important;
 }
}