.subtitle-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.65rem .85rem;background:rgba(250,247,239,.94);color:#28251f;font:500 .8rem/1.5 system-ui,sans-serif;text-align:start;position:relative;z-index:1;border-radius:0 0 14px 14px}
video[data-lesson-id]::cue,video[data-lesson-id]::cue(.juku-caption){background-color:rgba(0,0,0,.82)!important;color:#fff!important;text-shadow:0 1px 2px #000!important}
.subtitle-controls[hidden]{display:none}
.subtitle-controls label{display:flex;align-items:center;gap:.5rem}.subtitle-controls select{font:inherit;max-width:180px;padding:.35rem;border:1px solid #ccc3b5;border-radius:7px;background:#fffdf9;color:#28251f}.subtitle-controls a,.subtitle-controls button{font:inherit;color:#b93f27;background:transparent;border:1px solid #d6cbbb;border-radius:7px;padding:.3rem .55rem;text-decoration:none}.subtitle-controls [hidden]{display:none}.subtitle-controls [role=status]{color:#746a5e;font-size:.75rem}.hero-film .subtitle-controls{border-radius:0 0 18px 18px}

/* '準備中…' over the picture while the translated subtitles for the next seconds are on their way (subtitles/client.mjs). Placed in the
   video's own grid cell (the watch pages' players are grids that place the video at 1/1/2/3; the overlay stage at 1/1). */
.subtitle-wait{grid-area:1/1/2/-1;align-self:end;justify-self:center;position:relative;z-index:3;margin:0 0 12%;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);box-sizing:border-box;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:600 14px/1.4 system-ui,-apple-system,"Noto Sans JP",sans-serif;pointer-events:none;white-space:nowrap}
.overlay-stage>.subtitle-wait{grid-area:1/1}
.subtitle-wait::before{content:"";flex:none;width:12px;height:12px;box-sizing:border-box;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:subtitle-wait-spin 1s linear infinite}
.subtitle-wait[hidden]{display:none}
@keyframes subtitle-wait-spin{to{transform:rotate(360deg)}}