:root{--primary:#2478ff;--accent:#8feaff;color-scheme:dark;font-family:'Segoe UI',sans-serif;color:#e5f5ff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}header,nav,footer{position:fixed;left:10px;right:10px;background:linear-gradient(120deg,#071425fa,#07101bf5);border:1px solid color-mix(in srgb,var(--primary),#ffffff 25%);box-shadow:inset 0 1px #ffffff15}header{top:8px;height:40px;border-radius:12px 12px 0 0;display:flex;align-items:center;gap:12px;padding:0 10px;-webkit-app-region:drag}.title{display:flex;align-items:center;gap:8px;flex:1;font-size:10px;letter-spacing:2px;white-space:nowrap}.title strong{color:var(--accent);font-weight:500}.title small{font-size:9px;letter-spacing:0;color:#a8bdd0;overflow:hidden;text-overflow:ellipsis;max-width:160px}.beacon{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--primary)}nav{top:48px;height:40px;border-top:0;display:flex;align-items:center;gap:6px;padding:0 8px}button{font:11px 'Segoe UI',sans-serif;padding:5px 9px;border:1px solid #3c5c77;border-radius:7px;background:#102437;color:#d7e9f7;cursor:pointer;-webkit-app-region:no-drag}button:hover,button:focus-visible{border-color:var(--accent);outline:0;box-shadow:0 0 10px color-mix(in srgb,var(--primary) 35%,transparent)}button.primary{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 30%,#07101b)}button:disabled{opacity:.45;cursor:wait}#close{border:0;background:transparent;font-size:20px;padding:0 7px}#view{position:fixed;top:88px;bottom:34px;left:10px;right:10px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:transparent}#frozen{width:100%;height:100%;object-fit:contain;background:#030a14}#paused{height:100%;display:grid;place-content:center;text-align:center;background:#061221f5;color:var(--accent);font-size:12px;letter-spacing:2px}#paused small{margin-top:12px;color:#b0c3d3;letter-spacing:0}.corner{position:absolute;width:22px;height:22px;border-color:var(--accent);border-style:solid;filter:drop-shadow(0 0 4px var(--primary));pointer-events:none}.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}footer{height:26px;bottom:8px;border-radius:0 0 10px 10px;border-top:0;display:flex;align-items:center;padding:0 10px;font-size:10px;color:#afcbdc}#status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.error #status{color:#ffc28f}.handle{position:fixed;background:#76caff03;z-index:10;-webkit-app-region:no-drag;touch-action:none}.handle:hover{background:#76caff55}.n,.s{left:20px;right:20px;height:8px;cursor:ns-resize}.n{top:0}.s{bottom:0}.e,.w{top:20px;bottom:20px;width:8px;cursor:ew-resize}.e{right:0}.w{left:0}.ne,.nw,.se,.sw{width:20px;height:20px}.ne{right:0;top:0;cursor:nesw-resize}.nw{left:0;top:0;cursor:nwse-resize}.se{right:0;bottom:0;cursor:nwse-resize}.sw{left:0;bottom:0;cursor:nesw-resize}[hidden]{display:none!important}
#compactControls{display:none}
@media(max-width:459px),(max-height:219px){
 header{height:24px;padding:0 2px;gap:0;border-radius:7px 7px 0 0}.title{font-size:0;letter-spacing:0;gap:0;min-width:8px;overflow:hidden}.title strong,.title small{display:none}.beacon{width:5px;height:5px;margin-left:3px;flex-shrink:0}#close{width:17px;height:22px;flex-shrink:0;font-size:15px;padding:0}nav{display:none}#view{top:32px}.corner{width:8px;height:8px}footer{padding:0;border-radius:0 0 7px 7px}#status{display:none}#compactControls{display:flex;width:100%;height:24px}#compactControls button{flex:1;min-width:0;width:50%;padding:0;font-size:13px;border:0;border-radius:4px;background:transparent}#paused{font-size:0;letter-spacing:0}#paused small{display:none}#paused::after{content:'Ⅱ';font-size:16px;color:var(--accent)}body.error footer{border-color:#ffc28f}
}
@media(max-width:140px){.ne,.nw,.se,.sw{width:10px;height:10px}.n,.s{left:10px;right:10px;height:6px}.e,.w{top:10px;bottom:10px;width:6px}}

nav{gap:4px}nav button{padding:5px 7px}#status{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}

@media(min-width:460px) and (max-width:620px){nav{overflow-x:auto;scrollbar-width:none}nav button{flex-shrink:0}#save{font-size:10px;padding:5px}}
