#protection{grid-column:1/-1;color-scheme:light}
#protection .protection-help{--word-ink:#273021;--word-paper:#f6f0e6;--word-control:#fffaf0;--word-hover:#e9e3d5;--word-line:#718067;--word-focus:#984826;box-sizing:border-box;width:100%;max-width:38rem;padding:.7rem 1rem;border:1px dashed var(--word-line);border-radius:.6rem;background:var(--word-paper);color:var(--word-ink);font-size:.85rem}
#protection .protection-help :is(summary,p,label){color:var(--word-ink)}
#protection .protection-help summary{cursor:pointer;font-weight:700;min-height:44px;display:list-item;align-content:center}
#protection .protection-help label{display:grid;gap:.4rem}
#protection .protection-help :is(select,input,button){box-sizing:border-box;max-width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;padding:.5rem;background:var(--word-control);color:var(--word-ink);border:1px solid var(--word-line);border-radius:.4rem}
#protection .protection-help select{width:100%}
#protection .protection-help option{background:var(--word-control);color:var(--word-ink)}
#protection .protection-help p{line-height:1.5}
#protection .protection-help button{touch-action:manipulation}
#protection .protection-help button:hover:enabled{background:var(--word-hover)}
#protection .protection-help :focus-visible{outline:3px solid var(--word-focus);outline-offset:3px}
html[data-theme="dark"] #protection{color-scheme:dark}
html[data-theme="dark"] #protection .protection-help{--word-ink:#edf1e7;--word-paper:#263226;--word-control:#344331;--word-hover:#43553f;--word-line:#9eae8c;--word-focus:#d2dba1}
/* Keep the original prompt readable while its manual helper is open. */
#player:is(.expanded,:fullscreen):has(.protection-help[open]){display:flex;flex-direction:column;overflow:auto}
#player:is(.expanded,:fullscreen):has(.protection-help[open])>.screen{flex:0 0 auto;width:100%;height:auto;aspect-ratio:auto}
#player:is(.expanded,:fullscreen):has(.protection-help[open]) .screen>canvas{position:static;width:100%;height:auto;max-height:none;aspect-ratio:4/3}
#player:is(.expanded,:fullscreen):has(.protection-help[open])>#controls:not([hidden]){display:block;flex:0 0 auto}
#player:is(.expanded,:fullscreen):has(.protection-help[open]) .touch-controls{position:static;display:grid;pointer-events:auto}
#player:is(.expanded,:fullscreen):has(.protection-help[open]) .touch-controls>*{grid-area:auto;opacity:1}
@media(max-height:550px) and (orientation:landscape){#player:is(.expanded,:fullscreen):has(.protection-help[open]) .screen>canvas{height:75dvh;max-height:75dvh;aspect-ratio:auto;object-fit:contain}}