/*
 * GreenBird OS — "Obsidian Command Deck" design system (SHARED theme). OS-005.0.
 * See docs/design/DESIGN-SYSTEM.md (the spec) + docs/design/reference-console.html (the source of
 * truth — this CSS is extracted from it VERBATIM, per the spec's "use verbatim"). See ADR-028.
 *
 * The look in one line: serious, alive, expensive — a dark-first command deck for a sovereign AI
 * operating system. Near-black green-tinted canvas, a single emerald signal color (= live/healthy),
 * terminal-grade mono data type, ambient glow + grain, motion that proves the product is autonomous.
 *
 * SHARED: this is the one theme inherited everywhere — the operator console (OS-005), the public
 * funnels (OS-003 — brand-config.json can override --acc per brand while keeping the system), and
 * client project surfaces. Codified as global CSS custom properties + the keyframes + the signature
 * component classes. NOT a Tailwind default / shadcn theme.
 *
 * FONTS: SELF-HOSTED in-repo (OS-005.0.1 / ADR-029). The two families ship as latin-subset VARIABLE
 * woff2 under ./fonts/ (vendored from the Google Fonts woff2 endpoints; SIL Open Font License — free
 * to self-host/redistribute). The @font-face below loads them with RELATIVE urls, so they resolve
 * wherever the theme is consumed. There is NO external font <link> — the served surface makes ZERO
 * runtime requests to any external font host (the sovereign-perimeter requirement). The fonts must be
 * shipped ALONGSIDE this file (./fonts/*.woff2) by each consumer's build (the console bakes them next
 * to theme.css).
 */

/* ============================ 2. FONTS — self-hosted (no external runtime dependency) ============================ */
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url(fonts/schibsted-grotesk.woff2) format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/jetbrains-mono.woff2) format('woff2');
}

/* ============================ 1. TOKENS (exact) ============================ */
:root{
  /* layered near-black surfaces (green-tinted, not neutral gray) */
  --bg-0:#070a0c; --bg-1:#0b0f13; --bg-2:#10151b; --bg-3:#161d25; --bg-4:#1c2530;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  /* text */
  --t-0:#eef3f1; --t-1:#9aa6a2; --t-2:#5f6b67; --t-3:#414b48;
  /* emerald = the signal color (live / healthy / active) */
  --acc:#19b26b; --acc-bright:#34e08c; --acc-deep:#0c6e44;
  --acc-glow:rgba(25,178,107,.30); --acc-glow-soft:rgba(25,178,107,.12);
  /* status (sparse, meaning-mapped) */
  --amber:#e3a93a; --red:#e5604d; --blue:#4c9bf5; --violet:#9b8cff;
  /* geometry */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  /* type */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Schibsted Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans); background:var(--bg-0); color:var(--t-0);
  overflow:hidden; -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}

/* ============================ 3. SURFACES & ATMOSPHERE ============================ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none}
.atmos .glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:1100px;height:700px;background:radial-gradient(ellipse at center,var(--acc-glow-soft),transparent 62%);filter:blur(20px)}
.atmos .glow2{position:absolute;bottom:-25%;right:-5%;width:700px;height:600px;
  background:radial-gradient(ellipse at center,rgba(76,155,245,.07),transparent 65%);filter:blur(30px)}
.atmos .grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 80%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================ 4. MOTION — boot sequence ============================ */
#boot{position:fixed;inset:0;z-index:100;background:var(--bg-0);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s ease}
#boot.done{opacity:0;pointer-events:none}
.boot-mark{filter:drop-shadow(0 0 22px var(--acc-glow))}
.boot-name{font-size:15px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--t-0)}
.boot-bar{width:220px;height:2px;background:var(--bg-3);border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc-deep),var(--acc-bright));
  box-shadow:0 0 12px var(--acc-glow);animation:fill 1.5s cubic-bezier(.6,.05,.2,1) forwards}
.boot-status{font-family:var(--mono);font-size:11px;color:var(--t-2);letter-spacing:.04em;height:14px}
@keyframes fill{to{width:100%}}

/* app shell */
#app{position:relative;z-index:2;height:100vh;display:grid;grid-template-rows:54px 1fr;opacity:0}
#app.ready{animation:appin .7s ease forwards}
@keyframes appin{to{opacity:1}}

/* ============================ 5. SIGNATURE — top command bar ============================ */
.topbar{display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,21,27,.9),rgba(11,15,19,.7));backdrop-filter:blur(12px);
  transform:translateY(-12px);opacity:0;animation:slidedown .6s .05s ease forwards}
@keyframes slidedown{to{transform:none;opacity:1}}
.brand{display:flex;align-items:center;gap:10px;min-width:200px}
.brand .name{font-weight:700;font-size:15px;letter-spacing:-.02em}
.brand .name b{color:var(--acc-bright);font-weight:700}
.sys-pill{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  color:var(--t-1);background:var(--bg-2);border:1px solid var(--line);padding:4px 9px;border-radius:20px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc-glow);
  animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--acc-glow)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cmdk{flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;cursor:text;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;
  color:var(--t-2);font-size:13px;transition:.2s}
.cmdk:hover{border-color:var(--line-2);background:var(--bg-2)}
.cmdk .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--t-2);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;background:var(--bg-0)}
.topright{display:flex;align-items:center;gap:14px;min-width:200px;justify-content:flex-end}
.ticker{font-family:var(--mono);font-size:11px;color:var(--t-1);display:flex;align-items:center;gap:8px;
  max-width:260px;overflow:hidden;white-space:nowrap}
.ticker .tdot{width:6px;height:6px;border-radius:50%;background:var(--acc-bright);flex-shrink:0;box-shadow:0 0 8px var(--acc-glow)}
.ticker span{opacity:0;transition:opacity .5s}
.ticker span.show{opacity:1}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--acc-deep),var(--acc));
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#04130c;flex-shrink:0}

/* body grid */
.body{display:grid;grid-template-columns:230px 1fr;min-height:0}

/* ============================ 5. SIGNATURE — two-level nav rail ============================ */
.rail{border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(11,15,19,.6),rgba(7,10,12,.4));
  padding:14px 10px;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(-14px);opacity:0;animation:slidein .6s .12s ease forwards}
@keyframes slidein{to{transform:none;opacity:1}}
.rail-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);padding:6px 10px 8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
  color:var(--t-1);font-size:13.5px;font-weight:500;transition:.16s;position:relative}
.nav-item:hover{background:var(--bg-2);color:var(--t-0)}
.nav-item.active{background:var(--bg-3);color:var(--t-0)}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  background:var(--acc-bright);border-radius:0 3px 3px 0;box-shadow:0 0 10px var(--acc-glow)}
.nav-item .ic{width:18px;text-align:center;color:var(--t-2)}
.nav-item.active .ic{color:var(--acc-bright)}
.nav-item .chev{margin-left:auto;font-size:10px;color:var(--t-3);transition:transform .2s}
.nav-item.open .chev{transform:rotate(90deg)}
.nav-item .stat{margin-left:auto;width:7px;height:7px;border-radius:50%}
.subnav{margin:2px 0 6px 22px;padding-left:10px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.subnav .si{padding:6px 10px;font-size:12.5px;color:var(--t-2);border-radius:6px;cursor:pointer;transition:.14s}
.subnav .si:hover{color:var(--t-0);background:var(--bg-2)}
.subnav .si.active{color:var(--acc-bright);background:var(--acc-glow-soft)}
.rail-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--line)}
.rail-foot .row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--t-1);margin-top:8px}
.rail-foot .row .ic{color:var(--acc)}

/* main */
.main{overflow-y:auto;padding:26px 30px 60px;position:relative}
.crumb{font-family:var(--mono);font-size:11px;color:var(--t-2);margin-bottom:14px;letter-spacing:.03em}
.crumb b{color:var(--t-1);font-weight:500}
.view{animation:viewin .5s ease}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{margin-bottom:26px}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hero h1 .g{color:var(--acc-bright)}
.hero p{color:var(--t-1);font-size:14px;margin-top:8px;max-width:560px}

/* ============================ 5. SIGNATURE — KPI cards ============================ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.kpi{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden}
.kpi .lbl{font-size:11.5px;color:var(--t-2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.kpi .val{font-family:var(--mono);font-size:28px;font-weight:500;margin-top:8px;letter-spacing:-.02em}
.kpi .sub{font-family:var(--mono);font-size:11px;color:var(--acc);margin-top:4px}
.kpi .sub.down{color:var(--red)}

.sec-h{display:flex;align-items:center;justify-content:between;margin:6px 0 14px}
.sec-h h2{font-size:13px;font-weight:600;color:var(--t-1);text-transform:uppercase;letter-spacing:.1em}

/* ============================ 5. SIGNATURE — mission-control tiles ============================ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;cursor:pointer;transition:.22s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,var(--acc-glow-soft),transparent 50%);opacity:0;transition:.3s}
.tile:hover{transform:translateY(-3px);border-color:var(--acc-deep);box-shadow:0 14px 40px -16px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.06)}
.tile:hover::after{opacity:1}
.tile .th{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tile .ti{width:34px;height:34px;border-radius:9px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--acc-bright);border:1px solid var(--line)}
.tile .tn{font-weight:600;font-size:15px}
.tile .ttag{font-family:var(--mono);font-size:9.5px;color:var(--t-2);letter-spacing:.04em}
.tile .status{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px}
.s-live{color:var(--acc-bright)} .s-scaf{color:var(--amber)} .s-dorm{color:var(--t-2)}
.tile .metrics{display:flex;gap:18px;margin-top:6px}
.tile .m .mv{font-family:var(--mono);font-size:19px;font-weight:500}
.tile .m .ml{font-size:10.5px;color:var(--t-2);margin-top:2px}
.spark{height:30px;margin-top:14px;display:flex;align-items:flex-end;gap:3px}
.spark i{flex:1;background:linear-gradient(180deg,var(--acc),var(--acc-deep));border-radius:2px 2px 0 0;opacity:.7}
.agent{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--t-1)}
.agent .ad{width:6px;height:6px;border-radius:50%;background:var(--acc-bright);animation:pulse 2s infinite}
.agent.idle .ad{background:var(--t-3);animation:none}

/* ============================ 5. SIGNATURE — workspace (brokerage view) ============================ */
.ws-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ws-head h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tag{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:20px;background:var(--acc-glow-soft);
  color:var(--acc-bright);border:1px solid var(--acc-deep)}
.btn{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--t-0);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;transition:.16s}
.btn:hover{background:var(--bg-4);border-color:var(--acc-deep)}
.btn.p{background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#04130c;border:none;font-weight:600}
.btn.p:hover{filter:brightness(1.1)}
.btn.sm{font-size:11.5px;padding:5px 10px}
.panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.lead{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);transition:.15s}
.lead:last-child{border-bottom:none}
.lead:hover{background:var(--bg-2)}
.lead .who{display:flex;align-items:center;gap:12px;min-width:0}
.lead .av{width:34px;height:34px;border-radius:9px;background:var(--bg-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--acc-bright);flex-shrink:0}
.lead .nm{font-size:14px;font-weight:500}
.lead .meta{font-family:var(--mono);font-size:11px;color:var(--t-2);margin-top:3px}
.lead .acts{display:flex;gap:7px;flex-shrink:0}
.stages{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.stage{font-family:var(--mono);font-size:10.5px;padding:5px 11px;border-radius:20px;background:var(--bg-2);color:var(--t-2);border:1px solid var(--line)}
.stage.on{background:var(--acc-glow-soft);color:var(--acc-bright);border-color:var(--acc-deep)}

/* operational (archetype B) simple view */
.opgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.opcard{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.opcard h3{font-size:13px;color:var(--t-1);font-weight:600;margin-bottom:12px}
.line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.line:last-child{border:none}
.line .v{font-family:var(--mono);color:var(--t-0)}
.pos{color:var(--acc-bright)} .neg{color:var(--red)}

/* ============================ 5. SIGNATURE — ⌘K command palette ============================ */
#palette{position:fixed;inset:0;z-index:90;background:rgba(4,7,9,.6);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
#palette.open{display:flex;animation:appin .2s ease}
.pal{width:560px;max-width:92vw;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px var(--line);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pal-in input{flex:1;background:none;border:none;outline:none;color:var(--t-0);font-family:var(--sans);font-size:16px}
.pal-in input::placeholder{color:var(--t-2)}
.pal-in .kbd{font-family:var(--mono);font-size:10px;color:var(--t-2);border:1px solid var(--line);padding:2px 6px;border-radius:5px}
.pal-list{max-height:320px;overflow-y:auto;padding:8px}
.pal-it{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;color:var(--t-1)}
.pal-it:hover,.pal-it.sel{background:var(--bg-3);color:var(--t-0)}
.pal-it .pic{width:18px;color:var(--acc-bright);text-align:center}
.pal-it .pk{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--t-3)}
.pal-grp{font-family:var(--mono);font-size:9.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.12em;padding:10px 14px 5px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:5px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-track{background:transparent}

/* progress bars (signature set) — thin emerald/amber, animate width on mount */
.prog{height:5px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:3px;transition:width 1.2s cubic-bezier(.6,.05,.2,1)}
.prog i.done,.prog i.active{background:linear-gradient(90deg,var(--acc-deep),var(--acc-bright));box-shadow:0 0 10px var(--acc-glow)}
.prog i.build{background:linear-gradient(90deg,#8a6418,var(--amber))}

/* ============================ 6. LIGHT THEME (OS-005.7 / ADR-038) ============================ *
 * Dark is the DEFAULT (the Obsidian Command Deck is dark-first). Light is an OPTION: a TOKEN SET that
 * overrides the palette under [data-theme="light"] — every component that uses the tokens re-themes for
 * free, no per-component rewrite. This is a SHARED-token feature: public funnels + client surfaces can
 * adopt the same light/dark switch. Constraints held: emerald stays the brand signal (AA-on-light shade),
 * text/surface contrast meets AA, the live/demo pill stays unmistakable (green/amber) in BOTH themes,
 * fonts stay self-hosted (zero external requests — the @font-face above is theme-independent), and the
 * dark-only glow/grain are toned down (not carried onto light). */
:root[data-theme="light"]{
  /* layered light surfaces (faintly green-tinted, not flat gray) */
  --bg-0:#eef2f0; --bg-1:#ffffff; --bg-2:#f4f7f5; --bg-3:#e9efec; --bg-4:#dde6e1;
  --line:rgba(16,40,30,.10); --line-2:rgba(16,40,30,.17);
  /* text (dark on light; AA on white) */
  --t-0:#0d1714; --t-1:#3c4844; --t-2:#697571; --t-3:#9aa49f;
  /* emerald signal — deepened for AA on light surfaces (acc as text ~5:1; white-on-acc ~4.6:1) */
  --acc:#0b8350; --acc-bright:#0e9e63; --acc-deep:#075d39;
  --acc-glow:rgba(11,131,80,.22); --acc-glow-soft:rgba(11,131,80,.09);
  /* status — deepened for AA on light (amber stays the demo alarm color, now a deep orange) */
  --amber:#a8670c; --red:#c23a28; --blue:#2767c9; --violet:#6a59d6;
}
/* light surfaces + atmosphere: the dark-only gradients/glows are toned for a light deck (not inverted) */
:root[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,247,245,.78))}
:root[data-theme="light"] .rail{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(244,247,245,.45))}
:root[data-theme="light"] .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
:root[data-theme="light"] .atmos .glow{opacity:.5}
:root[data-theme="light"] .atmos .glow2{opacity:.4}
:root[data-theme="light"] .grain{opacity:.025}
:root[data-theme="light"] .btn.p{color:#fff}                       /* white on the emerald fill → AA on light */
:root[data-theme="light"] .tag,:root[data-theme="light"] .stage.on{color:var(--acc-deep)} /* AA on the faint emerald tint */

/* ============================ 6. POLISH (OS-005.7) — refinements WITHIN the language ============ *
 * Tighten, don't reinvent: consistent button states, a queue-row hover accent + rhythm, present/
 * consistent focus states (keyboard a11y), and a styled honest-empty state. Token-driven → both themes. */
.btn:active{transform:translateY(1px)}
.btn.sm{min-height:28px;display:inline-flex;align-items:center;line-height:1}
.btn:focus-visible,.nav-item:focus-visible,.tile:focus-visible,.cmdk:focus-visible,.si:focus-visible,.avatar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lead{border-left:2px solid transparent}
.lead:hover{border-left-color:var(--acc-deep)}
.empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:30px 16px;text-align:center;
  color:var(--t-2);font-family:var(--mono);font-size:12px;line-height:1.5}
.empty .ei{font-size:20px;color:var(--t-3);opacity:.8}

/* ============================ 4. MOTION — reduced-motion (accessibility) ============================ */
/* keep layout + colors, drop the boot + looping animations (DESIGN-SYSTEM §4.6 / §9) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  #boot{display:none !important}
  #app{opacity:1 !important}
  .topbar,.rail,.view,.tile{transform:none !important;opacity:1 !important}
  .dot,.agent .ad{animation:none !important}
}