*{box-sizing:border-box}body{margin:0;background:#062d60;color:#fff;font:14px Arial}#player{height:100vh;display:flex;flex-direction:column}#screen{position:relative;flex:1;min-height:0;container-type:inline-size;overflow:hidden}video{width:100%;height:100%;object-fit:contain;display:block}#opening{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#captions{position:absolute;bottom:0;left:0;right:0;height:10.65%;background:#062d60;display:flex;align-items:center;justify-content:center;gap:1.15cqw;font:600 1.98cqw/1.25 Arial;pointer-events:none}#captions span{white-space:nowrap;padding:0 .156cqw}#captions .active{color:#ffdf70}#controls{height:48px;flex-shrink:0;display:flex;gap:8px;align-items:center;padding:2px 10px}button{min-height:44px;border:0;border-radius:6px;background:transparent;color:white;font:inherit;cursor:pointer;padding:0 10px}button:hover{background:#174b8c}button:focus-visible,input:focus-visible{outline:2px solid #ffdf70;outline-offset:-2px}input{flex:1;min-width:30px;accent-color:#ffdf70}@media(max-width:500px){#fullscreen{display:none}#controls{gap:2px;padding:2px}button{padding:0 7px;font-size:12px}}

#sound-start{position:absolute;top:16px;right:16px;background:#fff;color:#103f7a;box-shadow:0 3px 15px #0004;font-weight:700;z-index:3;padding:0 16px}#sound-start[hidden]{display:none}@media(max-width:500px){#sound-start{top:8px;right:8px;font-size:12px}}
#sound-check{position:absolute;left:10px;top:10px;background:#062d60e6;z-index:4;font-size:12px}dialog{max-width:540px;width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;border:0;border-radius:12px;padding:24px;color:#153453;font:14px/1.5 Arial}dialog::backdrop{background:#00152b99}dialog h2{margin-top:0}dialog button{background:#155fda;color:white;margin:4px 4px 4px 0}dialog li{margin-bottom:8px}#tone-result{font-weight:600}