*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#020202;

font-family:Consolas,"Courier New",monospace;

color:#00ff99;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

overflow:hidden;

}

/* CRT */

#crt{

position:fixed;

inset:0;

pointer-events:none;

background:

repeating-linear-gradient(

to bottom,

rgba(255,255,255,.03) 0px,

rgba(255,255,255,.03) 2px,

transparent 2px,

transparent 4px

);

opacity:.15;

animation:flicker .15s infinite;

}

/* Container */

#container{

width:min(900px,92vw);

text-align:center;

}

/* Title */

h1{

font-size:52px;

letter-spacing:6px;

margin-bottom:30px;

text-shadow:

0 0 10px #00ff99,

0 0 30px #00ff99,

0 0 60px #00ff99;

}

/* Panel */

#panel{

padding:30px;

border:2px solid #00ff99;

border-radius:12px;

background:#06110d;

box-shadow:

0 0 20px #00ff99,

inset 0 0 30px rgba(0,255,153,.15);

}

/* Labels */

.label{

font-size:15px;

letter-spacing:3px;

opacity:.8;

}

#frequency{

font-size:48px;

margin:15px 0 30px;

font-weight:bold;

text-shadow:

0 0 15px #00ff99;

}

/* Wave */

#wave{

width:100%;

height:140px;

border:1px solid #00ff99;

background:black;

border-radius:6px;

margin-bottom:30px;

box-shadow:

0 0 12px rgba(0,255,153,.4);

}

/* Slider */

#slider{

width:100%;

margin:10px 0 30px;

accent-color:#00ff99;

cursor:pointer;

}

/* Status */

#status{

font-size:20px;

letter-spacing:2px;

}

#status span{

display:block;

margin-top:10px;

font-size:30px;

font-weight:bold;

color:#55ff55;

text-shadow:

0 0 12px #55ff55;

}

/* Message */

#messageBox{

margin-top:35px;

padding:25px;

border:2px solid #00ff99;

border-radius:10px;

background:black;

box-shadow:

0 0 20px #00ff99;

animation:fade .5s;

}

#messageBox h2{

margin-bottom:20px;

font-size:30px;

text-shadow:

0 0 15px #00ff99;

}

#message{

white-space:pre-wrap;

font-size:24px;

line-height:1.8;

}

/* Hidden */

.hidden{

display:none;

}

/* Flicker */

@keyframes flicker{

0%{opacity:.13;}

50%{opacity:.18;}

100%{opacity:.14;}

}

@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}

/* Mobile */

@media(max-width:700px){

h1{

font-size:34px;

letter-spacing:2px;

}

#frequency{

font-size:32px;

}

#status{

font-size:16px;

}

#status span{

font-size:22px;

}

#message{

font-size:18px;

}

}