:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;color:#111;--ink:#111;--paper:#fff9ea;--cream:#e9e1d0;--acid:#b9f35b;--yellow:#ffd84f;--coral:#ff735e;--blue:#7ad8ff;--on:#b9f35b;--off:#ff735e;background:#e9e1d0;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{background:var(--cream);min-width:320px}body{min-width:320px;min-height:100vh;color:var(--ink);background:var(--cream);margin:0;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;opacity:.28;background-image:radial-gradient(var(--ink) 1px, transparent 1px);background-size:14px 14px;position:fixed;inset:0}button{font:inherit;cursor:pointer}.viewer-shell{min-height:100vh}.viewer-header{z-index:20;border-bottom:3px solid var(--ink);background:var(--acid);height:82px;box-shadow:0 5px 0 var(--ink);align-items:center;padding:0 clamp(18px,4vw,70px);display:flex;position:sticky;top:0}.brand{color:var(--ink);letter-spacing:-.08em;text-transform:lowercase;align-items:center;gap:12px;font-size:24px;font-weight:900;display:inline-flex}.brand-symbol{border:3px solid var(--ink);background:var(--paper);width:34px;height:31px;box-shadow:4px 4px 0 var(--ink);align-items:end;gap:3px;padding:5px 6px;display:flex;transform:rotate(-3deg)}.brand-symbol i{background:var(--ink);width:4px;display:block}.brand-symbol i:first-child{height:7px}.brand-symbol i:nth-child(2){height:13px}.brand-symbol i:nth-child(3){height:19px}.viewer-layout{grid-template-columns:minmax(270px,320px) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,70px);max-width:1480px;margin:0 auto;padding:48px clamp(18px,4vw,70px) 70px;display:grid}.signal-list{border:3px solid var(--ink);background:var(--paper);min-width:0;box-shadow:9px 9px 0 var(--ink);padding:22px;position:sticky;top:115px}.list-title{justify-content:space-between;align-items:end;margin-bottom:18px;display:flex}.overline{color:var(--paper);background:var(--ink);letter-spacing:.12em;text-transform:uppercase;padding:4px 6px;font-size:10px;font-weight:900;line-height:1;display:inline-block}.list-title h1{color:var(--ink);letter-spacing:-.06em;text-transform:uppercase;margin:12px 0 0;font-size:22px;font-weight:900;line-height:.95}.legend{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);color:var(--ink);letter-spacing:.08em;align-items:center;gap:16px;padding:13px 0 15px;font-size:10px;font-weight:900;display:flex}.legend span{align-items:center;gap:8px;display:inline-flex}.dot{border:2px solid var(--ink);background:var(--yellow);flex:none;width:11px;height:11px;display:inline-block}.dot.online{background:var(--on)}.dot.warning,.dot.offline{background:var(--off)}.dot.checking{background:var(--yellow)}.signals{gap:9px;padding-top:16px;display:grid}.signal-card{border:3px solid var(--ink);width:100%;min-height:64px;color:var(--ink);text-align:left;box-shadow:3px 3px 0 var(--ink);background:#f4ecda;align-items:center;gap:12px;padding:10px;transition:transform .12s,box-shadow .12s,background .12s;display:flex}.signal-card:hover{background:var(--blue);box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.signal-card:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.signal-card.selected{background:var(--acid);box-shadow:7px 7px 0 var(--ink);transform:translate(-3px,-3px)}.signal-icon{border:3px solid var(--ink);flex:none;place-items:center;width:36px;height:36px;font-size:11px;font-weight:900;display:grid;color:var(--ink)!important;background:var(--yellow)!important}.signal-info{flex:1;min-width:0}.signal-info strong{letter-spacing:-.02em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:12px;font-weight:900;display:block;overflow:hidden}.signal-status{color:var(--ink);letter-spacing:.05em;align-items:center;gap:7px;font-size:10px;font-weight:900;display:inline-flex}.signal-status.online,.signal-status.offline{color:var(--ink)}.signal-status .dot{width:10px;height:10px;box-shadow:none}.signal-status.online .dot{background:var(--on)}.signal-status.offline .dot{background:var(--off)}.list-footer{border-top:3px solid var(--ink);color:#4d493e;align-items:center;gap:9px;margin-top:20px;padding:15px 3px 1px;font-size:9px;font-weight:700;line-height:1.35;display:flex}.footer-mark{color:var(--ink);font-size:19px;font-weight:900}.player-column{min-width:0}.player-heading{justify-content:space-between;align-items:start;gap:20px;margin:0 0 22px;display:flex}.player-heading h2{color:var(--ink);letter-spacing:-.085em;text-transform:uppercase;margin:13px 0 0;font-size:clamp(34px,5vw,64px);font-weight:900;line-height:.88}.player-heading h2 em{border:3px solid var(--ink);color:var(--ink);background:var(--coral);letter-spacing:.06em;vertical-align:middle;align-items:center;margin-left:12px;padding:7px 8px;font-size:10px;font-style:normal;font-weight:900;display:inline-flex;transform:translateY(-8px)rotate(2deg)}.player-frame{aspect-ratio:16/9;border:4px solid var(--ink);min-height:300px;box-shadow:11px 11px 0 var(--ink);background:#050505;position:relative;overflow:hidden}.player-frame:after{content:"";z-index:1;pointer-events:none;border:2px solid #ffffff2e;position:absolute;inset:0}.player-frame video{object-fit:contain;background:#050505;width:100%;height:100%;display:block}.player-idle{z-index:2;pointer-events:none;color:#fff;background:#000000b8;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.player-idle strong{letter-spacing:-.03em;text-transform:uppercase;margin-bottom:7px;font-size:14px;font-weight:900}.player-idle>span:last-child{color:#ddd;font-size:10px;font-weight:700}.play-ring{width:72px;height:62px;color:var(--acid);background:var(--coral);box-shadow:7px 7px 0 var(--acid);border:4px solid #fff;place-items:center;margin-bottom:18px;padding-left:4px;font-size:20px;display:grid}.player-message{z-index:3;border:3px solid var(--ink);color:var(--ink);background:var(--coral);box-shadow:5px 5px 0 var(--ink);text-align:center;padding:12px 14px;font-size:10px;font-weight:900;position:absolute;bottom:18px;left:18px;right:18px}.player-toolbar{border:3px solid var(--ink);background:var(--yellow);min-height:76px;box-shadow:7px 7px 0 var(--ink);border-top:0;justify-content:space-between;align-items:center;gap:16px;padding:13px 14px;display:flex}.source-label span{color:var(--ink);letter-spacing:.15em;font-size:9px;font-weight:900;display:block}.source-label strong{color:var(--ink);margin-top:5px;font-size:11px;font-weight:900;display:block}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.toolbar-actions button{border:3px solid var(--ink);color:var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);padding:10px 12px;font-size:10px;font-weight:900;transition:transform .1s,box-shadow .1s,background .1s}.toolbar-actions button:hover{background:var(--blue)}.toolbar-actions button:active{box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}.toolbar-actions button span{color:var(--ink);margin-right:4px;font-size:13px}.health-summary{align-items:center;gap:24px;min-height:80px;display:flex}.health-summary>div{color:var(--ink);letter-spacing:.08em;align-items:center;gap:8px;font-size:10px;font-weight:900;display:inline-flex}.health-summary>div strong{font-size:18px;font-weight:900}.health-summary .dot{width:11px;height:11px}@media (width<=1040px){.viewer-layout{grid-template-columns:1fr;gap:38px}.player-column{order:1}.signal-list{order:2;position:static}.signals{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=720px){.viewer-header{height:70px;padding:0 16px}.viewer-layout{gap:31px;padding:37px 16px 50px}.player-heading{margin-bottom:20px}.player-heading h2{font-size:39px}.player-frame{min-height:210px;box-shadow:7px 7px 0 var(--ink)}.signal-list{box-shadow:7px 7px 0 var(--ink);padding:18px}.signals{grid-template-columns:repeat(2,minmax(0,1fr))}.player-toolbar{flex-direction:column;align-items:flex-start;padding:14px}.toolbar-actions{justify-content:stretch;width:100%}.toolbar-actions button{flex:1;min-width:0;padding-left:5px;padding-right:5px}}@media (width<=470px){.viewer-layout{padding:29px 12px 42px}.player-heading h2{font-size:33px}.player-frame{min-height:185px}.signal-list{padding:15px}.signals{grid-template-columns:1fr}.signal-card{min-height:58px}.toolbar-actions{grid-template-columns:repeat(3,1fr);display:grid}.toolbar-actions button{font-size:8px}.health-summary{min-height:66px}}