/* tsoip.org CRT look (final, v6 with effect levels).  Usage:
   1. inline the <svg> from /crt/crt.svg in the page (filter defs, same-document references work everywhere);
   2. <link rel="stylesheet" href="/crt/crt.css"> and <script src="/crt/crt.js"></script> (level toggle only);
   3. <html class="crt crt-fx"> filters the whole page, or put class="crt-screen" on any element.
   .crt-fx = glow/bleed/scanlines/vignette; html[data-crt-level=1|2|3] = svag/normal/kraftig (default normal).
   A [data-crt-fx-toggle] button cycles fra -> svag -> normal -> kraftig (localStorage 'crt-level'). */
html.crt{background:#000}
html.crt-fx{--crt-filter:url(#crt-fx2);--crt-sp:3px;--crt-sa:0.48;--crt-ga:0.06;--crt-vig:0.55;--crt-r:2.5vmin;--crt-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -.55'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.050'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E")}
html.crt-fx[data-crt-level="1"]{--crt-filter:url(#crt-fx1);--crt-sp:3px;--crt-sa:0.3;--crt-ga:0.0;--crt-vig:0.4;--crt-r:0;--crt-noise:none}
html.crt-fx[data-crt-level="3"]{--crt-filter:url(#crt-fx3);--crt-sp:4px;--crt-sa:0.56;--crt-ga:0.12;--crt-vig:0.68;--crt-r:5vmin;--crt-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -.55'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.088'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E")}
html.crt body{filter:url(#crt-final)}
html.crt.crt-fx body{filter:var(--crt-filter)}
.crt-screen{filter:url(#crt-final)}
html.crt-fx .crt-screen{filter:var(--crt-filter)}
/* overlays: fixed, outside the filtered body, on top of everything, never intercept input */
html.crt.crt-fx::before,html.crt.crt-fx::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483646}
html.crt.crt-fx::before{background:var(--crt-noise),radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,0) 58%,rgba(0,0,0,var(--crt-vig)) 100%);border-radius:var(--crt-r);box-shadow:0 0 0 50vmax #000,inset 0 0 8vmin rgba(0,0,0,calc(var(--crt-vig) * .8))}
html.crt.crt-fx::after{z-index:2147483647;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 calc(var(--crt-sp) / 2),rgba(0,0,0,var(--crt-sa)) calc(var(--crt-sp) / 2) var(--crt-sp)),repeating-linear-gradient(to right,rgba(0,0,0,0) 0 2px,rgba(0,0,0,var(--crt-ga)) 2px 3px)}
/* element mode: scanlines as a mask (applied after the filter, lets the black page through) */
html.crt-fx .crt-screen{-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 calc(var(--crt-sp) / 2),rgba(0,0,0,calc(1 - var(--crt-sa))) calc(var(--crt-sp) / 2) var(--crt-sp));mask-image:repeating-linear-gradient(to bottom,#000 0 calc(var(--crt-sp) / 2),rgba(0,0,0,calc(1 - var(--crt-sa))) calc(var(--crt-sp) / 2) var(--crt-sp))}
@media (prefers-contrast:more){
 html.crt.crt-fx::before,html.crt.crt-fx::after{display:none}
 html.crt-fx .crt-screen{-webkit-mask-image:none;mask-image:none}
}
.crt-toggle{position:fixed;right:10px;bottom:10px;z-index:10;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;background:#000;color:#888;border:1px solid #333;border-radius:3px;padding:3px 8px;cursor:pointer;opacity:.8}
.crt-toggle:hover,.crt-toggle:focus-visible{opacity:1;color:#ddd;border-color:#666}
.crt-toggle[aria-pressed=false]{color:#555}
/* level label on the toggle */
[data-crt-fx-toggle]::after{content:": fra"}
html.crt-fx [data-crt-fx-toggle]::after{content:": normal"}
html.crt-fx[data-crt-level="1"] [data-crt-fx-toggle]::after{content:": svag"}
html.crt-fx[data-crt-level="2"] [data-crt-fx-toggle]::after{content:": normal"}
html.crt-fx[data-crt-level="3"] [data-crt-fx-toggle]::after{content:": kraftig"}