:root{color-scheme:dark;font-family:Arial,sans-serif;background:#090b0c;color:#e2e5e7}*{box-sizing:border-box}body{margin:0}main{height:100dvh;display:flex;flex-direction:column;padding:10px;gap:8px}button,input{font:inherit;font-size:14px}button{background:#151515;color:#858585;border:1px solid #282828;border-radius:5px;padding:10px 14px;white-space:nowrap;cursor:pointer}button:hover:not(:disabled){background:#202020;color:#a0a0a0}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,video:focus-visible{outline:2px solid #888;outline-offset:2px}#navigation{display:flex;gap:8px;flex-shrink:0}#url{flex:1;min-width:0;border:1px solid #353c42;border-radius:5px;background:#161a1d;color:inherit;padding:11px 13px}#theater{flex:1;min-height:0;position:relative;background:#000;overflow:hidden}#screen{width:100%;height:100%;display:block;object-fit:contain;touch-action:none}.toolbar{display:flex;gap:10px;align-items:center;flex-shrink:0;flex-wrap:wrap}#controller,#status{font-size:12px;color:#9ba5ad}#volume{width:88px;accent-color:#929292}#notice{padding:8px 10px;font-size:13px;color:#d9dfbd;background:#23271d;border-radius:4px;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:650px){main{padding:6px;gap:6px}.toolbar{gap:6px}button{padding:9px;font-size:12px}#controller{display:none}#status{max-width:110px}#volume{width:65px}}

button{width:42px;height:42px;padding:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}button.active{color:#b8b8b8;border-color:#505050;background:#2a2a2a}button.active:hover:not(:disabled){color:#c4c4c4;background:#303030}#notice button{margin-left:8px;vertical-align:middle}

@media(max-width:650px){#navigation{gap:4px}#navigation button{width:34px;height:42px;padding:7px}#url{padding:10px 8px}}

#keyboard{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;border:0;resize:none}


.toolbar{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr) minmax(140px,1fr);gap:10px;align-items:center}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.toolbar-right{justify-content:flex-end}
#messages{min-width:0;text-align:center;font-size:12px;color:#9ba5ad;overflow-wrap:anywhere}#messages #controller,#messages #status{max-width:none}#messages #notice{margin:0;padding:0;background:none;border-radius:0;font-size:12px}
@media(max-width:650px){.toolbar{grid-template-columns:92px minmax(0,1fr) 92px;gap:6px}.toolbar-right{gap:4px}#volume{width:42px}#messages #controller{display:inline}}

#navigation-space{height:42px;flex-shrink:0}#navigation{height:100%}