@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root{color-scheme:dark;--green:#b4d9aa;--dim:#769379;--line:#324339}*{box-sizing:border-box}body{margin:0;background:#030605;color:var(--green);font-family:'Share Tech Mono','Courier New',monospace;overflow:hidden}.wall{height:100dvh;min-height:480px;padding:clamp(10px,2vw,26px);display:grid;grid-template-rows:auto 1fr auto;gap:12px;background:radial-gradient(ellipse at 50% 40%,#101812 0,#050908 70%)}.top,footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:13px}.brand-logo{width:48px;height:48px;display:block;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 5px #ffffff55)}.brand b{display:block;font-size:clamp(12px,1.5vw,18px);letter-spacing:.13em}.brand small{display:block;color:#668069;font-size:10px;margin-top:5px;letter-spacing:.1em}.clock{display:flex;align-items:center;gap:18px}.clock time{font-size:clamp(14px,2vw,23px);letter-spacing:.13em}.live{font-size:10px;color:#89a48b}.live i,.rec i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a6c78f;margin-right:6px;box-shadow:0 0 8px #a6c78f}.clock button{color:var(--green);background:none;border:1px solid var(--line);font-size:22px;width:38px;height:38px;cursor:pointer}.grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.feed{position:relative;overflow:hidden;background:#101710;border:1px solid #344337;min-height:0;isolation:isolate}.feed canvas{width:100%;height:100%;display:block;filter:contrast(1.12) saturate(.55)}.feed:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #acc89b14;box-shadow:inset 0 0 55px #000a, inset 0 0 3px #bad5a522}.grain,.scan{position:absolute;inset:0;pointer-events:none}.grain{opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.scan{opacity:.14;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#c9e3b8 4px,transparent 5px)}.hud{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;text-shadow:0 1px 4px #000;font-size:clamp(10px,1.1vw,14px);letter-spacing:.1em}.rec{color:#bf9a83;font-size:10px}.rec i{background:#bb6853;box-shadow:0 0 6px #bb6853}.place{position:absolute;bottom:32px;left:14px;color:#c4d4b3;font-size:clamp(9px,1vw,12px);letter-spacing:.08em;text-shadow:0 1px 5px #000}.feedtime{position:absolute;bottom:13px;right:14px;font-size:12px;text-shadow:0 1px 5px #000}.signal{position:absolute;top:36px;left:14px;color:#9caf93a8;font-size:9px}footer{border-top:1px solid #26362b;padding-top:9px;color:#67816a;font-size:9px;letter-spacing:.08em}footer b{color:#a1bc91}#status{color:#90ad83}.alert{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px;align-items:center;padding:13px 18px;background:#0d100ee8;border:1px solid #788364;color:#d0c8a0;font-size:12px;letter-spacing:.13em;opacity:0;pointer-events:none;transition:opacity .7s;box-shadow:0 0 30px #000}.alert i{width:7px;height:7px;border-radius:50%;background:#cfb36e;box-shadow:0 0 9px #cfb36e}.alert.show{opacity:1}.hint{position:fixed;right:28px;bottom:35px;color:#54695680;font-size:9px}.feed.glitch{animation:glitch .35s steps(2)}@keyframes glitch{0%{transform:translateX(0);filter:none}25%{transform:translateX(3px);filter:hue-rotate(20deg)}50%{transform:translateX(-2px);filter:brightness(1.7)}100%{transform:none;filter:none}}@media(max-width:650px){.wall{padding:9px;gap:8px}.grid{gap:5px}.brand small{font-size:8px}.brand-logo{width:37px;height:37px}.clock{gap:8px}.live{display:none}footer{font-size:7px}.place{font-size:8px;left:7px}.feedtime{right:7px;font-size:9px}.hud{left:7px;right:7px;top:7px}.signal{left:7px;top:25px;font-size:7px}}@media(max-height:520px){.wall{padding:8px;gap:6px}.brand-logo{height:32px;width:32px}.brand small{margin-top:2px}footer{padding-top:4px}}
/* Monochrome analog surveillance treatment */
.feed canvas{filter:grayscale(1) contrast(1.22) brightness(.82)}.feed:after{box-shadow:inset 0 0 70px #000c,inset 0 0 4px #fff3}.wx{color:#aaa}.camname{color:#dedede}.feedtime{color:#ddd}.signal{color:#bbb9}.place{color:#e2e2e2}.wall{color:#ddd}.brand small,.live,footer{color:#999}.feed{border-color:#656565}.scan{opacity:.19;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,#fff 3px,transparent 4px)}
/* Capturas atmosféricas geradas para o protótipo; recorte de um painel por sinal. */
.feed{background:#111}.feed canvas{display:none}.feed::before{content:"";position:absolute;inset:0;background-image:url("cctv-atmosferas.png");background-size:200% 200%;background-repeat:no-repeat;filter:grayscale(1) contrast(1.22) brightness(.78);transform:scale(1.015);animation:drift 70s ease-in-out infinite alternate;z-index:0}.feed:nth-child(1)::before{background-position:0 0}.feed:nth-child(2)::before{background-position:100% 0}.feed:nth-child(3)::before{background-position:0 100%}.feed:nth-child(4)::before{background-position:100% 100%}@keyframes drift{from{transform:scale(1.015) translate(0,0)}to{transform:scale(1.08) translate(-.6%,.4%)}}

/* Delayed environmental motion layer */
.feed canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:none;pointer-events:none}.grain,.scan{z-index:2}.hud,.place,.feedtime,.signal{z-index:3}.feed.glitch{animation:glitch .42s steps(2,end)}
/* More legible but still distant motion, rendered beneath the CCTV overlay */
.feed canvas{opacity:1!important}.feed.glitch{animation:glitch .55s steps(2,end)}
/* Four distinct analog fault signatures */
.feed.glitch{animation:glitch .32s steps(2,end) 2}.feed.glitch-ghost::before{animation:ghostShift .12s steps(2,end) 5;filter:grayscale(1) contrast(1.4) brightness(1.08)}
@keyframes ghostShift{0%,100%{transform:scale(1.015) translateX(0);opacity:1}35%{transform:scale(1.015) translateX(5px);opacity:.68}70%{transform:scale(1.015) translateX(-3px);opacity:.84}}
.feed.glitch-roll::before{animation:rollFlicker .16s steps(2,end) 4;filter:grayscale(1) contrast(1.55) brightness(.84)}
@keyframes rollFlicker{0%,100%{transform:scale(1.015) translateY(0)}45%{transform:scale(1.015) translateY(3px)}70%{transform:scale(1.015) translateY(-2px)}}