@property --g1 { syntax: '<color>'; inherits: true; initial-value: #5b6cff; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #1a1f3a; }

:root {
  --bg: #06070b;
  --ink: #eef0f6;
  --mut: #8a8fa3;
  --line: rgba(255, 255, 255, .09);
  --g1: #5b6cff; --g2: #1a1f3a;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Unbounded', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; overflow-x: clip; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: --g1 1.2s ease, --g2 1.2s ease;
}
a { color: inherit; text-decoration: none; }

/* ---------- fundo vivo ---------- */
.amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 70% 20%, color-mix(in oklab, var(--g1) 34%, transparent), transparent 70%),
    radial-gradient(50% 45% at 15% 85%, color-mix(in oklab, var(--g2) 70%, transparent), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--g1) 10%, transparent), transparent 80%);
  filter: blur(20px);
  animation: drift 24s ease-in-out infinite alternate;
}
.amb::after { /* grade de blueprint */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}
@keyframes drift { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.spot { position: fixed; left: 0; top: 0; width: 700px; height: 700px; margin: -350px 0 0 -350px; z-index: 1;
  pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, color-mix(in oklab, var(--g1) 18%, transparent), transparent 62%); }
.has-mouse .spot { opacity: 1; }

/* ---------- HUD topo ---------- */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 44px); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut);
  background: linear-gradient(var(--bg), transparent); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.logo i { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.logo i b { background: var(--g1); border-radius: 2px; transition: background 1.2s; }
.logo i b:nth-child(2), .logo i b:nth-child(3) { background: var(--ink); opacity: .85; }
.hud .mid { display: flex; gap: 22px; }
.hud .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c8ff2e; box-shadow: 0 0 10px #c8ff2e; margin-right: 8px; vertical-align: 1px; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (max-width: 720px) { .hud .mid { display: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; z-index: 2; height: 210vh; }
.hero-in { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; perspective: 1100px; overflow: hidden; }
.hero-stage { position: relative; width: min(1100px, 92vw); text-align: center; transform-style: preserve-3d; }
.kicker { font: 500 clamp(10px, 1.1vw, 12px)/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--mut); margin-bottom: clamp(18px, 3vh, 34px); display: inline-flex; gap: 14px; align-items: center; }
.kicker::before, .kicker::after { content: ''; width: 34px; height: 1px; background: var(--mut); opacity: .5; }
.htitle { font: 900 clamp(40px, 14.5vw, 158px)/.86 var(--disp); letter-spacing: -.045em; text-transform: uppercase; transform-style: preserve-3d; }
.htitle .w { display: block; white-space: nowrap; transform-style: preserve-3d; }
.htitle .w2 { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.htitle .w2 .acc { color: var(--g1); -webkit-text-stroke: 0; transition: color 1.2s; }
.ch { display: inline-block; will-change: transform; transform-style: preserve-3d; }
.hsub { margin: clamp(22px, 4vh, 40px) auto 0; max-width: 560px; color: var(--mut); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.55; }
.hsub b { color: var(--ink); font-weight: 600; }
.chips { margin: clamp(26px, 5vh, 48px) auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 760px; transform-style: preserve-3d; }
.chip { font: 600 10px/1 var(--mono); letter-spacing: .1em; padding: 8px 9px; border-radius: 7px; color: #0a0a0f; background: var(--c); cursor: pointer;
  box-shadow: 0 6px 24px -6px color-mix(in oklab, var(--c) 70%, transparent); }
.hint { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 clamp(16px, 4vw, 44px);
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.hint .bar { display: inline-block; width: 120px; height: 2px; background: var(--line); margin-left: 12px; vertical-align: middle; position: relative; overflow: hidden; }
.hint .bar i { position: absolute; inset: 0; background: var(--g1); transform-origin: left; transform: scaleX(var(--hp, 0)); }
.hint .m-only { display: none; }
@media (max-width: 600px) { .hint { font-size: 10px; letter-spacing: .1em; } .hint .bar { width: 50px; } }
.hud > span { white-space: nowrap; }
.touch .hint .d-only { display: none; } .touch .hint .m-only { display: inline; }

/* ---------- catálogo ---------- */
.sec { position: relative; z-index: 3; padding: 40px clamp(16px, 4vw, 44px) 120px; max-width: 1500px; margin: 0 auto; }
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-h h2 { font: 800 clamp(30px, 5vw, 64px)/.95 var(--disp); letter-spacing: -.04em; text-transform: uppercase; }
.sec-h h2 em { font-style: normal; color: var(--g1); transition: color 1.2s; }
.sec-h p { max-width: 380px; color: var(--mut); font-size: 14px; line-height: 1.6; }
.sec-h .ct { font: 500 11px/1.6 var(--mono); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; gap: 26px; } }

.card { --p: 0; position: relative; display: block; border-radius: 22px; padding: 12px 12px 22px; perspective: 900px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,calc(.015 + var(--p) * .03)), rgba(255,255,255,.008));
  border: 1px solid color-mix(in oklab, var(--c) calc(var(--p) * 55%), rgba(255,255,255,.07));
  box-shadow: 0 30px 80px -40px color-mix(in oklab, var(--c) calc(var(--p) * 60%), transparent);
  transition: border-color .3s; outline: none; }
.card:focus-visible { box-shadow: 0 0 0 2px var(--c); }
.card .cn { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--c); opacity: calc(.25 + var(--p) * .75); }
.card .cn.a { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 22px 0 0 0; }
.card .cn.b { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-radius: 0 22px 0 0; }
.card .cn.c { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-radius: 0 0 0 22px; }
.card .cn.d { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 22px 0; }

.stage-w { position: relative; border-radius: 14px; aspect-ratio: 4 / 3; transform-style: preserve-3d; z-index: 2;
  background:
    radial-gradient(80% 80% at 50% 0%, color-mix(in oklab, var(--c) calc(6% + var(--p) * 14%), transparent), transparent 70%),
    rgba(255,255,255,.02); }
.stage-w::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: calc(1 - var(--p));
  background-image: linear-gradient(color-mix(in oklab, var(--c) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--c) 18%, transparent) 1px, transparent 1px);
  background-size: 8.333% 11.11%; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 85%); }
.stage { position: absolute; inset: 0; container-type: inline-size; transform-style: preserve-3d; pointer-events: none; }

.meta { position: relative; padding: 18px 8px 0; z-index: 1; }
.meta .row1 { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.meta .idx { color: var(--c); }
.meta .path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta .st { padding: 5px 8px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.meta .st.live { color: #0a0a0f; background: var(--c); border-color: transparent; }
.meta .nm { margin-top: 14px; font-size: calc(clamp(30px, 3.2vw, 44px) * var(--sz, 1)); line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
  min-height: 1.1em; }
.meta .nm .tx { background: linear-gradient(90deg, var(--ink), color-mix(in oklab, var(--c) calc(var(--p) * 100%), var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.meta .tg { margin-top: 6px; font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.meta .ds { margin-top: 12px; color: var(--mut); font-size: 14.5px; line-height: 1.55; max-width: 44ch; }
.meta .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); opacity: calc(.45 + var(--p) * .55); }
.meta .go i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--c) calc(var(--p) * 100%), rgba(255,255,255,.08));
  color: #0a0a0f; font-style: normal; transition: transform .3s; }
.card:hover .go i { transform: rotate(-45deg); }

/* ---------- manifesto / rodapé ---------- */
.mani { position: relative; z-index: 3; max-width: 1500px; margin: 0 auto; padding: 60px clamp(16px, 4vw, 44px) 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--line); }
.mani div b { display: block; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g1); margin-bottom: 14px; transition: color 1.2s; }
.mani div p { color: var(--mut); line-height: 1.6; font-size: 15px; }
@media (max-width: 800px) { .mani { grid-template-columns: 1fr; } }
.foot { position: relative; z-index: 3; padding: 30px clamp(16px, 4vw, 44px) 40px; max-width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.big { position: relative; z-index: 2; font: 900 clamp(48px, 15vw, 260px)/.8 var(--disp); letter-spacing: -.06em; text-transform: uppercase; text-align: center; padding: 20px 0 0;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); white-space: nowrap; overflow: hidden; }

/* ================= PEÇAS (fragmentos) ================= */
.fr { position: absolute; border-radius: 1.8cqw; will-change: transform, opacity; transform-style: preserve-3d; color: #fff; overflow: hidden; }
.fr.pn { background: linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 2.4cqw 6cqw -1cqw rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.fr.ac { background: var(--c); color: #0a0a0f; box-shadow: 0 2cqw 6cqw -1.5cqw color-mix(in oklab, var(--c) 80%, transparent); }
.fr.at { background: color-mix(in oklab, var(--c) 16%, rgba(12,12,18,.6)); border: 1px solid color-mix(in oklab, var(--c) 55%, transparent); }
.fr.paper { background: #f2eee5; box-shadow: 0 3cqw 8cqw -2cqw rgba(0,0,0,.7); }
.fr.rd { border-radius: 50%; }
.fr.ctr { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: .6cqw; }
.fr.pd { padding: 2.2cqw; display: flex; flex-direction: column; gap: 1.2cqw; justify-content: center; }
.fr.pd0 { display: flex; align-items: center; }
.fr.row { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw; padding: 0 2.2cqw; }
.fr .t { font: 700 2.5cqw/1.1 var(--body); color: inherit; white-space: nowrap; }
.fr .t.s { font-size: 1.9cqw; font-weight: 600; opacity: .75; }
.fr .t.b { font-size: 4.6cqw; font-weight: 800; letter-spacing: -.03em; }
.fr .t.b2 { font-size: 3.2cqw; font-weight: 800; }
.fr .t.mono, .fr .mono { font-family: var(--mono); letter-spacing: .08em; }
.fr .t.dk, .fr .dk { color: #0a0a0f; }
.fr .t.dkt { color: #15151c; }
.fr .t.g { color: #19d38a; } .fr .t.rdn { color: #ff6b6b; }
.fr .ln { display: block; height: 1.15cqw; border-radius: 1cqw; background: rgba(255,255,255,.7); flex: none; }
.fr .ln.dk { background: #1a1a22; } .fr .ln.c { background: var(--c); }
.fr .sq { display: block; height: 7cqw; border-radius: 1.2cqw; background: rgba(255,255,255,.12); flex: none; }
.fr .sq.c { background: var(--c); }
.fr.grad { background: linear-gradient(135deg, var(--c), #ffb36b 60%, #ffd6a5); }
.fr .bars { position: absolute; inset: 14% 10% 10%; display: flex; align-items: flex-end; gap: 8%; }
.fr .bars i { flex: 1; border-radius: .8cqw .8cqw .3cqw .3cqw; background: rgba(255,255,255,.28); }

/* radar */
.fr.radar { background: repeating-radial-gradient(circle, transparent 0 15%, color-mix(in oklab, var(--c) 35%, transparent) 15% calc(15% + 1px)), color-mix(in oklab, var(--c) 10%, #0b0d10); }
.fr.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in oklab, var(--c) 70%, transparent), transparent 22%); animation: spin 3.2s linear infinite; }
.fr.radar .blip { position: absolute; width: 4%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 2cqw var(--c); animation: blink 1.6s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* assinatura */
.fr.sig { color: var(--c); border-bottom: 2px dashed rgba(0,0,0,.25); border-radius: 0; }
.fr.sig svg { width: 100%; height: 100%; }
.fr.seal { border: .6cqw double rgba(0,0,0,.35); rotate: -12deg; }
.fr .av { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--c); flex: none; }
.fr .av.s { width: 3.6cqw; height: 3.6cqw; margin-top: auto; }
.fr .ok { font-style: normal; width: 4cqw; height: 4cqw; border-radius: 50%; display: grid; place-items: center; background: #19d38a; color: #0a0a0f; font: 800 2.2cqw/1 var(--body); }
.fr .ok.wait { background: rgba(255,255,255,.15); color: #fff; }
.fr.row .t:first-of-type { flex: 1; }

/* console */
.fr.gbb { background: linear-gradient(160deg, color-mix(in oklab, var(--c) 92%, #fff), color-mix(in oklab, var(--c) 70%, #000)); box-shadow: inset 0 -1.2cqw 0 rgba(0,0,0,.25), 0 4cqw 8cqw -2cqw rgba(0,0,0,.6); }
.fr.gbb.l { border-radius: 14cqw 0 0 14cqw; } .fr.gbb.r { border-radius: 0 14cqw 14cqw 0; }
.fr.shoulder { background: color-mix(in oklab, var(--c) 55%, #222); border-radius: 3cqw 3cqw .5cqw .5cqw; }
.fr.bezel { background: #17151f; border-radius: 2cqw; box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.06); }
.fr.lcd { background: #a4b98a; border-radius: .6cqw; box-shadow: inset 0 0 3cqw rgba(0,0,0,.35); }
.fr .lcdg { position: absolute; inset: 6% 8% 16%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(9, 1fr); gap: 3%; }
.fr .lcdg i { border-radius: 8%; }
.fr .lcdg i.a { background: #2f3b25; } .fr .lcdg i.b { background: #4d5e3c; }
.fr .lcds { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font: 400 1.5cqw/1 'Press Start 2P', monospace; color: #2f3b25; }
.fr.dpad i { position: absolute; background: #1a1822; border-radius: .8cqw; box-shadow: inset 0 -.5cqw 0 rgba(255,255,255,.08); }
.fr.dpad { overflow: visible; }
.fr.dpad i:first-child { left: 33%; right: 33%; top: 0; bottom: 0; }
.fr.dpad i:last-child { top: 33%; bottom: 33%; left: 0; right: 0; }
.fr.btn { background: #1a1822; color: #fff; box-shadow: inset 0 -.6cqw 0 rgba(255,255,255,.1); }
.fr.btn .t { color: color-mix(in oklab, var(--c) 60%, #fff); }
.fr.pill-s { background: rgba(0,0,0,.35); border-radius: 3cqw; }

/* finanças */
.fr.donut { background: conic-gradient(var(--c) 0 42%, #5b7bff 0 64%, #ffb524 0 82%, #ff2e88 0); }
.fr.donut::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: #0c0f12; }
.fr.avs { display: flex; align-items: center; padding-left: 1cqw; }
.fr.avs i { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--c); border: .6cqw solid #0c0f12; margin-left: -2cqw; }
.fr.avs i:first-child { margin-left: 0; }

/* links */
.fr.phone { border-radius: 5cqw; }

/* agenda */
.fr .calg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 3%; font: 600 1.7cqw/1 var(--mono); }
.fr .calg b { display: grid; place-items: center; color: var(--mut); font-weight: 600; }
.fr .calg i { display: grid; place-items: center; border-radius: .8cqw; background: rgba(255,255,255,.05); font-style: normal; color: rgba(255,255,255,.8); }
.fr .calg i.off { background: none; } .fr .calg i.busy { background: rgba(255,255,255,.02); color: rgba(255,255,255,.25); text-decoration: line-through; }
.fr .calg i.sel { background: var(--c); color: #0a0a0f; }

/* forms */
.fr.prog { background: rgba(255,255,255,.1); border-radius: 2cqw; }
.fr.prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 2cqw; }
.fr.qst { font: italic 400 6cqw/1.02 'Instrument Serif', serif; color: #fff; overflow: visible; }
.fr.opt { display: flex; align-items: center; gap: 2cqw; padding: 0 2cqw; }
.fr.opt b { width: 4.4cqw; height: 4.4cqw; display: grid; place-items: center; border: 1px solid currentColor; border-radius: .7cqw; font: 700 2cqw/1 var(--mono); }

/* cardápio */
.fr.qr { background: #fff; padding: 2.4cqw; border-radius: 2cqw; }
.fr .qrg { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); }
.fr .qrg i.on { background: #111; }
.fr.dish { display: flex; align-items: center; gap: 2.4cqw; padding: 0 2cqw; }
.fr.dish .ph { width: 12cqw; height: 12cqw; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--c); }
.fr.dish .dd { display: flex; flex-direction: column; gap: 1cqw; }

/* proposta */
.fr.rowd { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.12); border-radius: 0; }

/* kanban */
.fr.col { padding: 2cqw; }
.fr.col .t { color: var(--mut); }
.fr.kc { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); padding: 1.8cqw; display: flex; flex-direction: column; gap: 1cqw; }
.fr.kc.done { opacity: .55; }
.fr.kc.drag { rotate: 5deg; box-shadow: 0 4cqw 8cqw -2cqw rgba(0,0,0,.7); }
.fr.kc.ac { background: var(--c); }

/* convite */
.fr.invite { background: linear-gradient(170deg, #fff4f9, #ffd7ea 60%, #ffc2df); border-radius: 2.4cqw; box-shadow: 0 3cqw 8cqw -2cqw rgba(0,0,0,.6); }
.fr.datebox { color: #0a0a0f; }
.fr .dn { font: 900 12cqw/.9 var(--disp); color: #ff3d8b; letter-spacing: -.04em; }
.fr .pf { font: 400 4.4cqw/1.1 'Pacifico', cursive; color: #3a1d2c; }
.fr.cf { border-radius: .4cqw; }
.fr.at .t.dk { color: #3a1d2c; }

/* currículo */
.fr.skills { display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 0 2.2cqw; }
.fr.skills i { height: 1.4cqw; border-radius: 1cqw; background: rgba(0,0,0,.1); position: relative; }
.fr.skills i::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--c); border-radius: inherit; filter: brightness(.75); }
.fr.tpl i { position: absolute; inset: 14% 22%; background: #f2eee5; border-radius: .6cqw;
  background-image: linear-gradient(#bbb 0 0), linear-gradient(#ddd 0 0), linear-gradient(#ddd 0 0); background-size: 50% 8%, 80% 5%, 70% 5%; background-position: 20% 18%, 20% 40%, 20% 55%; background-repeat: no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .amb::before, .fr.radar .sweep { animation: none; }
}

.fr.nv { background: #fff; border: 1px solid #f3b6d1; }