/* Single-weight display faces are registered across the whole weight range so
   the browser never fakes a bold on top of them. */
@font-face { font-family: "Anton"; src: url(fonts/anton.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Archivo Black"; src: url(fonts/archivo-black.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-800.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-900i.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: block; }

:root {
  --impact: "Anton", Impact, Haettenschweiler, sans-serif;
  --sans: "Archivo Black", "Arial Black", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif: "Playfair Display", Didot, Georgia, serif;
  --sysmono: ui-monospace, "SF Mono", Menlo, monospace;
  --script: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  --win: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--sans); }

#stage {
  position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: 50% 50%; overflow: hidden; background: #000;
}
#stage > canvas, #ui { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
#ui { pointer-events: none; }
#ui > * { position: absolute; }

/* ---------- start screen ---------- */
#start {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 40%, #2a0b3a, #000 70%);
}
#start .t { font: italic 600 34px var(--serif); opacity: 0.85; }
#start .logo, .fx-end .logo {
  font: 400 140px/1 var(--impact); letter-spacing: 0.04em;
  background: linear-gradient(90deg, #ff2bd6, #00f0ff, #fff200, #7cff00, #ff2bd6) 0 0 / 600px 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#start button {
  font: 700 22px var(--sans); padding: 14px 34px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: #000;
}
#start button:disabled { cursor: progress; opacity: 0.75; font-variant-numeric: tabular-nums; }
#start p { font: 13px var(--sysmono); opacity: 0.5; }

/* ---------- preview chrome ---------- */
.chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85) 40%); font: 12px var(--sysmono);
  transition: opacity 0.3s; user-select: none;
}
.chrome.hidden { opacity: 0; pointer-events: none; }
.chrome .row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.chrome .play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 13px; cursor: pointer; }
.chrome .time { font-size: 15px; font-variant-numeric: tabular-nums; }
.chrome .shot { opacity: 0.8; flex: 1; }
.chrome .counts { opacity: 0.7; }
.chrome .strip { position: relative; height: 26px; background: #111; border-radius: 4px; cursor: pointer; overflow: hidden; }
.chrome .cell { position: absolute; top: 0; bottom: 0; border-right: 1px solid #000; background: #3a3a3a; }
.chrome .cell[data-status="frame"] { background: #c99a00; }
.chrome .cell[data-status="partial"] { background: #7a6420; }
.chrome .cell[data-status="clip"] { background: #22c55e; }
.chrome .cell[data-status="na"] { background: #1c1c1c; }
.chrome .cell.roulette { top: 5px; }
.chrome .cell.cur { box-shadow: inset 0 0 0 2px #fff; }
.chrome .cell:hover { filter: brightness(1.35); }
.chrome .needle { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ff2bd6; box-shadow: 0 0 6px #ff2bd6; pointer-events: none; }
.chrome .keys { margin-top: 7px; opacity: 0.45; font-size: 11px; }
.info {
  position: fixed; left: 14px; top: 12px; z-index: 21; padding: 10px 12px; border-radius: 6px;
  background: rgba(0,0,0,0.7); font: 12px/1.5 var(--sysmono); max-width: 520px;
}
.toast {
  position: fixed; left: 50%; top: 24px; z-index: 30; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px;
  background: rgba(0,0,0,0.75); font: 600 14px var(--sans); opacity: 0; pointer-events: none;
}
.toast.show { animation: toast 1.4s ease-out; }
@keyframes toast { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- kinetic type ---------- */
.fx-slam { inset: 0; font-family: var(--impact); text-transform: uppercase; }
.fx-slam span { position: absolute; left: 50%; top: 50%; white-space: nowrap; line-height: 1; letter-spacing: 0.02em; }
.fx-slam .main { -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-shadow: 0 12px 0 rgba(0,0,0,0.45); }
.fx-slam .echo { color: transparent; -webkit-text-stroke: 4px #fff; }

.fx-tunnel { inset: 0; font: 400 220px/1 var(--impact); }
.fx-tunnel span { position: absolute; left: 50%; top: 50%; white-space: nowrap; will-change: transform; }
.fx-tunnel .out { -webkit-text-stroke: 5px #fff; }
.fx-tunnel .fill { -webkit-text-stroke: 4px #000; paint-order: stroke fill; }

.fx-type {
  left: 50%; top: 50%; width: 1500px; text-align: center; font: 800 76px/1.25 var(--mono);
  color: #fff; text-shadow: 0 0 18px rgba(0,0,0,0.9), 0 0 2px #000;
}
.fx-type i { font-style: normal; color: #ff2bd6; }

.fx-lyric {
  left: 90px; right: 90px; bottom: 110px; text-align: center; font: 400 59px/1.12 var(--sans); letter-spacing: -0.01em; text-wrap: balance;
  text-shadow: 0 6px 0 #000, 0 0 28px rgba(0,0,0,0.8); -webkit-text-stroke: 4px #000; paint-order: stroke fill;
}
.fx-lyric span { display: inline-block; }
.fx-lyric .hi { color: #fff200; }
.fx-lyric.chorus { font: 400 90px/1 var(--impact); text-transform: uppercase; letter-spacing: 0.01em; -webkit-text-stroke: 6px #000; text-shadow: 0 6px 0 #000, 0 0 30px rgba(0,0,0,0.7); }
.fx-lyric.whisper { font: italic 900 64px/1.2 var(--serif); letter-spacing: 0.02em; text-transform: lowercase; -webkit-text-stroke: 0; text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,0.95); }
.fx-lyric.whisper .hi { color: #cfe8ff; }

.fx-flashword { inset: 0; font: 400 300px/1 var(--impact); text-transform: uppercase; }
.fx-flashword span { position: absolute; left: 50%; top: 50%; white-space: nowrap; -webkit-text-stroke: 7px #000; paint-order: stroke fill; }

.fx-title { left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; font: 400 150px/0.95 var(--impact); text-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.fx-title span { display: block; }
.fx-marquee { inset: 0; }
.fx-marquee .band { position: absolute; left: -10%; width: 120%; height: 120px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.fx-marquee .band.a { top: 90px; }
.fx-marquee .band.b { bottom: 90px; }
.fx-marquee .band div { white-space: nowrap; font: 400 100px/120px var(--impact); color: #000; letter-spacing: 0.04em; }

/* ---------- stickers & stamps ---------- */
.fx-stamp { right: 170px; bottom: 210px; }
.fx-stamp span {
  display: block; padding: 14px 34px; border: 9px double #e8112d; color: #e8112d; font: 900 76px var(--sans); letter-spacing: 0.06em;
  -webkit-mask: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0,0,0,0.65) 3px 5px);
  mask: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0,0,0,0.65) 3px 5px);
}
.fx-sticker {
  left: 130px; top: 120px; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; background: #ffe600;
  clip-path: polygon(50% 0%, 57% 14%, 71% 5%, 72% 21%, 88% 18%, 82% 33%, 98% 37%, 86% 49%, 98% 61%, 82% 66%, 88% 82%, 72% 79%, 71% 95%, 57% 86%, 50% 100%, 43% 86%, 29% 95%, 28% 79%, 12% 82%, 18% 66%, 2% 61%, 14% 49%, 2% 37%, 18% 33%, 12% 18%, 28% 21%, 29% 5%, 43% 14%);
}
.fx-sticker span { font: 400 96px var(--impact); color: #e8112d; }

.fx-refresh { left: 79%; top: 70px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-refresh svg { width: 110px; height: 110px; }
.fx-refresh circle { fill: rgba(0,0,0,0.35); stroke: #fff; stroke-width: 9; stroke-dasharray: 170 80; stroke-linecap: round; }
.fx-refresh b { font: 400 92px var(--impact); letter-spacing: 0.06em; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }

.fx-news { inset: 0; }
.fx-news .bug { position: absolute; left: 80px; top: 70px; display: flex; align-items: stretch; font: 400 46px/1 var(--impact); letter-spacing: 0.04em; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.fx-news .bug b { font-weight: 400; padding: 10px 14px 8px; background: #ff2bd6; color: #fff; }
.fx-news .bug span { padding: 10px 14px 8px; background: #fff; color: #111; }
.fx-news .strap { position: absolute; left: 110px; right: 110px; bottom: 110px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
.fx-news .label { grid-row: 1; grid-column: 1; display: flex; align-items: center; padding: 0 26px; background: #ff2bd6; color: #fff; font: 400 34px var(--sans); letter-spacing: 0.08em; transform-origin: 100% 50%; }
.fx-news .bar { grid-row: 1; grid-column: 2; background: rgba(255,255,255,0.96); overflow: hidden; }
.fx-news .h { padding: 16px 30px 14px; color: #111; font: 400 40px/1.15 var(--sans); text-transform: uppercase; text-wrap: balance; }
.fx-news .sub { grid-row: 2; grid-column: 1 / span 2; justify-self: start; padding: 8px 26px; background: rgba(10,10,20,0.88); color: #fff; font: 800 22px var(--mono); letter-spacing: 0.2em; }
.fx-lower { left: 110px; bottom: 150px; }
.fx-lower .rule { width: 620px; height: 4px; background: #f3d36b; transform-origin: 0 50%; margin-bottom: 14px; }
.fx-lower .t { font: italic 600 64px var(--serif); text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.fx-lower .s { font: 600 26px var(--sans); letter-spacing: 0.4em; text-transform: uppercase; color: #f3d36b; margin-top: 6px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

.fx-riser { inset: 0; font-family: var(--impact); }
.fx-riser span { position: absolute; white-space: nowrap; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.fx-riser .buffer { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.fx-riser .buffer svg { width: 100%; height: 100%; }
.fx-riser .buffer circle { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 60 200; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }

.fx-speed { inset: 0; mix-blend-mode: screen; }
.fx-speed svg { width: 100%; height: 100%; }
.fx-speed path { fill: #fff; }

/* ---------- camera & tape ---------- */
.fx-vhs { inset: 0; font: 700 58px/1.15 "VCR OSD Mono", var(--mono); color: #fff; text-shadow: 3px 0 #f0f, -3px 0 #0ff, 0 0 10px rgba(0,0,0,0.6); }
.fx-vhs .play { position: absolute; left: 90px; top: 70px; }
.fx-vhs .date { position: absolute; left: 90px; bottom: 80px; font-size: 48px; }

.fx-viewfinder { inset: 0; font: 600 30px var(--mono); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.fx-viewfinder .c { position: absolute; width: 90px; height: 90px; border: 0 solid #fff; }
.fx-viewfinder .tl { left: 70px; top: 60px; border-left-width: 5px; border-top-width: 5px; }
.fx-viewfinder .tr { right: 70px; top: 60px; border-right-width: 5px; border-top-width: 5px; }
.fx-viewfinder .bl { left: 70px; bottom: 60px; border-left-width: 5px; border-bottom-width: 5px; }
.fx-viewfinder .br { right: 70px; bottom: 60px; border-right-width: 5px; border-bottom-width: 5px; }
.fx-viewfinder .rec { position: absolute; left: 190px; top: 80px; }
.fx-viewfinder .rec b { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #ff2020; margin-right: 12px; vertical-align: -2px; }
.fx-viewfinder .fmt { position: absolute; right: 190px; top: 80px; }
.fx-viewfinder .tc { position: absolute; left: 190px; bottom: 80px; }
.fx-viewfinder .af { position: absolute; left: 50%; top: 50%; width: 220px; height: 160px; border: 4px solid #fff; }
.fx-viewfinder .batt { position: absolute; right: 190px; bottom: 82px; width: 70px; height: 30px; border: 4px solid #fff; border-radius: 4px; }
.fx-viewfinder .batt i { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 70%; background: #fff; }

/* ---------- fake UIs ---------- */
.fx-feed { inset: 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.fx-feed .tabs { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font: 600 34px var(--sans); }
.fx-feed .tabs span { opacity: 0.6; margin-right: 40px; }
.fx-feed .tabs b { border-bottom: 4px solid #fff; padding-bottom: 6px; }
.fx-feed .side { position: absolute; right: 60px; bottom: 210px; display: flex; flex-direction: column; gap: 36px; align-items: center; font: 700 26px var(--sans); }
.fx-feed .side div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-feed .side i { font-style: normal; font-size: 70px; }
.fx-feed .cap { position: absolute; left: 60px; bottom: 80px; width: 1150px; font: 500 32px/1.35 var(--sans); }
.fx-feed .cap b { font-size: 36px; }
.fx-feed .cap p { margin: 8px 0 0; }
.fx-feed .music { opacity: 0.85; font-size: 28px; }
.fx-feed .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,0.25); }
.fx-feed .bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; }

.fx-dialog { inset: 0; }
.fx-dialog .win {
  position: absolute; left: 50%; top: 50%; width: 640px; background: #c0c0c0; color: #000; font: 26px var(--win);
  border: 3px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 6px 6px 0 rgba(0,0,0,0.35);
}
.fx-dialog .titlebar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; }
.fx-dialog .titlebar b { display: inline-block; width: 30px; height: 26px; background: #c0c0c0; color: #000; text-align: center; font-size: 18px; line-height: 26px; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.fx-dialog .body { display: flex; gap: 24px; align-items: center; padding: 30px 30px 16px; }
.fx-dialog .icon { font-size: 64px; }
.fx-dialog .btns { display: flex; justify-content: center; gap: 30px; padding: 10px 0 28px; }
.fx-dialog button {
  width: 150px; padding: 10px 0; font: 26px var(--win); background: #c0c0c0; color: #000;
  border: 3px solid; border-color: #fff #404040 #404040 #fff;
}
.fx-dialog button.hover { outline: 2px dotted #000; outline-offset: -8px; }
.fx-dialog button.down { border-color: #404040 #fff #fff #404040; transform: translate(2px, 2px); }
.fx-dialog .cursor { position: absolute; left: 0; top: 0; width: 46px; height: 46px; }
.fx-dialog .cursor path { fill: #fff; stroke: #000; stroke-width: 1.4; }

.fx-shop { inset: 0; font-family: var(--sans); }
.fx-shop .live { position: absolute; left: 60px; top: 50px; padding: 8px 18px; background: rgba(0,0,0,0.6); font: 800 34px var(--sans); }
.fx-shop .live b { color: #ff2020; }
.fx-shop .price {
  position: absolute; right: 90px; top: 90px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, #fff200, #ffb800);
  color: #c00; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fx-shop .price s { font: 700 40px var(--sans); color: #333; }
.fx-shop .price b { font: 400 110px/1 var(--impact); }
.fx-shop .price small { font: 700 24px var(--sans); color: #333; }
.fx-shop .call { position: absolute; left: 0; right: 0; bottom: 70px; height: 110px; display: flex; align-items: center; justify-content: center; gap: 30px; font: 400 76px var(--impact); letter-spacing: 0.03em; }
.fx-shop .call span { font-style: italic; }
.fx-shop .orders { position: absolute; left: 60px; bottom: 210px; padding: 6px 16px; background: #0033aa; font: 800 34px var(--mono); }
.fx-shop .crawl { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: #001a66; overflow: hidden; }
.fx-shop .crawl div { white-space: nowrap; font: 800 44px/70px var(--sans); color: #fff200; }

.fx-quote { inset: 0; display: flex; align-items: center; justify-content: center; }
.fx-quote .card {
  width: 1100px; padding: 50px 60px 36px; border-radius: 28px; background: rgba(255, 240, 230, 0.55); backdrop-filter: blur(10px) saturate(1.4);
  color: #4a2a3a; box-shadow: 0 20px 60px rgba(80, 30, 50, 0.35);
}
.fx-quote .scroll { height: 330px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 15%, #000 80%, transparent); mask: linear-gradient(transparent, #000 15%, #000 80%, transparent); }
.fx-quote p { margin: 40px 0 0; font: 64px/1.3 var(--script); text-align: center; }
.fx-quote .who { margin-top: 18px; text-align: center; font: italic 30px var(--serif); }
.fx-quote .stats { margin-top: 12px; text-align: center; font: 600 26px var(--sans); opacity: 0.75; }

.fx-end { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle, rgba(0,0,0,0.25), rgba(0,0,0,0.65)); }
.fx-end .t { font: italic 600 54px var(--serif); text-shadow: 0 2px 20px #000; }
.fx-end .logo { font-size: 230px; }
.fx-end .cr { font: 500 26px/1.6 var(--mono); text-align: center; opacity: 0.85; }
.fx-end .cr p { margin: 0; }
.fx-end .cr p + p { margin-top: 26px; }
.fx-end .cr .by { font: 400 30px/1.4 var(--sans); letter-spacing: 0.02em; }
.fx-end .cr .nh { margin-top: 14px; font-size: 22px; opacity: 0.6; }
.fx-end .again { margin-top: 10px; padding: 16px 40px; border-radius: 999px; border: 0; background: #fff; color: #000; font: 700 30px var(--sans); cursor: pointer; }

/* ---------- roulette HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; font: 600 22px var(--mono); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.85); z-index: 4; }
.hud-top { position: absolute; left: 60px; top: 46px; display: flex; gap: 26px; align-items: baseline; }
.hud-top b { font: 800 28px var(--sans); letter-spacing: 0.2em; padding: 6px 14px; background: #ff2bd6; color: #000; text-shadow: none; }
.hud-top .count { font-size: 40px; font-weight: 800; }
.hud .wheel { position: absolute; left: 60px; bottom: 210px; width: 190px; height: 190px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.hud .wheel path { fill: rgba(255,255,255,0.12); stroke: rgba(255,255,255,0.55); stroke-width: 1.5; }
.hud .wheel path.on { fill: #ff2bd6; }
.hud .wheel .pin { fill: #fff200; stroke: #000; }
.hud-name { position: absolute; left: 280px; bottom: 230px; max-width: 1000px; }
.hud-name .name { font: 400 96px/1 var(--impact); letter-spacing: 0.03em; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.hud-name .prompt { margin-top: 10px; font: 500 22px/1.35 var(--mono); opacity: 0.9; max-width: 900px; }
.hud-specs { position: absolute; right: 60px; bottom: 210px; padding: 16px 20px; background: rgba(0,0,0,0.45); border-left: 4px solid #00f0ff; font-size: 20px; line-height: 1.6; }
.hud-specs div { display: flex; gap: 18px; }
.hud-specs b { width: 100px; color: #00f0ff; }
.fx-gpu { right: 60px; top: 60px; padding: 16px 22px; background: rgba(0,0,0,0.5); border-left: 4px solid #00f0ff; font: 800 24px/1.6 var(--mono); text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
.fx-gpu div { display: flex; gap: 18px; }
.fx-gpu b { width: 100px; color: #00f0ff; }
.fx-gpu .warn { margin-top: 6px; color: #ff2020; }
.hud-track { position: absolute; left: 50%; top: 46%; }
.hud-track .c { position: absolute; width: 50px; height: 50px; border: 0 solid #5dff7a; }
.hud-track .tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; }
.hud-track .tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; }
.hud-track .bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; }
.hud-track .br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; }
.hud-track span { position: absolute; left: 0; top: -38px; padding: 2px 8px; background: #5dff7a; color: #000; text-shadow: none; font-size: 18px; white-space: nowrap; }
.hud-track.locked .c { border-color: #fff200; }
.fx-detect .c { position: absolute; width: 30px; height: 30px; border: 0 solid #ff2020; }
.fx-detect .tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; }
.fx-detect .tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; }
.fx-detect .bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; }
.fx-detect .br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; }
.fx-detect span { position: absolute; left: 0; top: -36px; padding: 2px 8px; background: #ff2020; color: #fff; font: 800 18px var(--mono); white-space: nowrap; }
.fx-detect.locked .c { border-color: #fff200; }