:root { color-scheme: dark; font-family: "Courier New", monospace; background: #030303; color: #c6c3bc; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; background: #030303; }
[hidden] { display: none !important; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 1px solid #aa7771; outline-offset: 7px; }
#screen { position: relative; z-index: 3; width: 100%; height: 100%; display: grid; place-items: center; padding: max(56px, env(safe-area-inset-top)) max(28px, calc(env(safe-area-inset-right) + 16px)) max(56px, env(safe-area-inset-bottom)) max(28px, calc(env(safe-area-inset-left) + 16px)); }
#noise, .scanlines, .tear { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#noise { z-index: 1; opacity: .027; image-rendering: pixelated; }
.scanlines { z-index: 4; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 2px, #000 2px 4px); }
.tear { z-index: 5; display: none; background: #bbb; height: 2px; opacity: .12; }
#signature { position: fixed; z-index: 3; top: calc(30px + env(safe-area-inset-top)); left: max(28px, calc(env(safe-area-inset-left) + 16px)); color: #393432; font-size: 9px; letter-spacing: .25em; }
.sound { position: fixed; z-index: 6; top: calc(14px + env(safe-area-inset-top)); right: max(16px, calc(env(safe-area-inset-right) + 8px)); min-width: 44px; min-height: 44px; padding: 12px; border: 0; background: transparent; color: #625651; font-size: 9px; letter-spacing: .15em; cursor: pointer; touch-action: manipulation; }
.sound:hover { color: #b7998c; }
.sound:disabled { pointer-events: none; opacity: .4; }
.receive { position: relative; width: min(530px, 100%); min-height: 100px; padding: 30px 28px; border: 1px solid #551b1b; border-radius: 1px; background: #350d0e; color: #d5b9af; font-size: clamp(12px, 1.35vw, 16px); line-height: 1.65; letter-spacing: .16em; cursor: pointer; box-shadow: 0 0 65px #40000018, inset 0 0 32px #16000055; transition: background .25s, border-color .25s, color .25s; }
.receive::before { content: ""; position: absolute; inset: 3px; pointer-events: none; border: 1px solid #ffffff03; }
.receive:hover { background: #481113; border-color: #7c2928; color: #ecd5cd; }
.receive:active { background: #260809; transform: translateY(1px); }
.receive { touch-action: manipulation; }
.receive span { display: inline-block; }
.mobile-break { display: none; }
.message { width: 100%; min-width: 0; max-width: 780px; margin: 0; white-space: pre-line; overflow-wrap: anywhere; text-align: center; font-size: clamp(20px, 3vw, 33px); font-weight: 400; letter-spacing: .035em; line-height: 1.65; text-wrap: balance; text-shadow: 0 0 20px #b6a89b14; }
.recovery { text-align: center; color: #766f65; font-size: clamp(10px, 2vw, 12px); letter-spacing: .18em; }
.recovery p { margin: 0 0 22px; }
.recovery output { font-size: 24px; letter-spacing: .08em; color: #9c8a7d; }
.recovery .whisper { min-height: 16px; margin: 28px 0 0; color: #61433e; font-size: 10px; letter-spacing: .04em; }
body.button-wound .receive span { animation: button-wound 4.7s steps(1) infinite; }
body.scarred .scanlines { opacity: .2; }
body.scarred .receive { border-color: #46201a; box-shadow: inset 0 0 40px #0007; }
body[data-state="INTERFERENCE"] #noise { opacity: .7; }
body[data-state="INTERFERENCE"] #screen { animation: instability .17s steps(2) infinite; }
body[data-state="INTERFERENCE"] .tear { display: block; animation: tracking .21s steps(2) infinite; }
body[data-state="INTERFERENCE"] .message { animation: lost-text .23s steps(1) infinite; }
body[data-state="INTERFERENCE"] .message::before,
body[data-state="INTERFERENCE"] .message::after { content: attr(data-echo); position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; pointer-events: none; color: #ab6860; opacity: .6; clip-path: inset(40% 0 48%); transform: translateX(-7px); }
body[data-state="INTERFERENCE"] .message::after { color: #7d9292; clip-path: inset(52% 0 38%); transform: translateX(9px); }
body[data-state="INTERFERENCE"].strong #noise { opacity: .85; }
body.tv-only #screen { visibility: hidden; }
body.collapsing #noise { animation: shutdown .55s ease-in forwards; }
body.collapsing .scanlines, body.collapsing .tear { display: none; }
body[data-state="DEAD"] { background: #000; }
body[data-state="DEAD"] #noise,
body[data-state="DEAD"] .scanlines,
body[data-state="DEAD"] .tear { display: none; }
@keyframes button-wound { 0%, 94%, 98%, 100% { transform: none; } 95% { transform: translateX(2px) skewX(3deg); } 97% { transform: translateX(-2px); opacity: .7; } }
@keyframes instability { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(3px); opacity: .82; } 100% { transform: translateX(-2px); opacity: .94; } }
@keyframes tracking { 0% { top: 13%; height: 2px; } 25% { top: 78%; height: 13px; } 50% { top: 45%; height: 3px; } 75% { top: 90%; height: 6px; } }
@keyframes lost-text { 0%, 65% { opacity: .9; } 30% { opacity: .1; transform: skewX(6deg); } 75% { opacity: .65; transform: translateX(-5px); } }
@keyframes shutdown { 0% { transform: scaleY(1); opacity: .8; } 55% { transform: scaleY(.008); opacity: .55; } 80% { transform: scale(.04, .004); opacity: .3; } 100% { transform: scale(0); opacity: 0; } }
@media (max-width: 560px) {
  #signature { left: max(20px, calc(env(safe-area-inset-left) + 16px)); font-size: 8px; letter-spacing: .15em; }
  .sound { right: max(8px, calc(env(safe-area-inset-right) + 8px)); font-size: 10px; }
  #screen { padding-right: max(24px, calc(env(safe-area-inset-right) + 16px)); padding-left: max(24px, calc(env(safe-area-inset-left) + 16px)); }
  .receive { max-width: 360px; min-height: 110px; padding: 28px 16px; font-size: 14px; letter-spacing: .12em; }
  .mobile-break { display: initial; }
  .message { font-size: clamp(20px, 5vw, 28px); }
  .recovery { font-size: 12px; letter-spacing: .12em; }
}
@media (max-height: 480px) and (orientation: landscape) {
  #screen { padding-top: max(56px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .receive { min-height: 80px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; }
  .message { max-width: 680px; font-size: clamp(16px, 3vw, 22px); line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body[data-state="INTERFERENCE"] #noise { opacity: .14; }
  body[data-state="INTERFERENCE"].strong #noise { opacity: .18; }
  body[data-state="INTERFERENCE"] .tear { display: none; }
  body.collapsing #noise { opacity: 0; }
}