/* Homepage: phone and Mac agents. One command fanned out across a fleet of Android X phones and Macs, each drawn as the
   real device with the real app on screen (scripts/build_agents_home.py writes it, js/agents-home.js plays it) */
.ag-army { --ag-bg: #0b1014; --ag-sur: #121a20; --ag-sur2: #19232a; --ag-line: rgba(255, 255, 255, .08); --ag-text: #e6edf1; --ag-mute: #8b9aa3; --ag-cyan: #22d3ee; --ag-amber: #f5b942; --ag-green: #4fd1a1;
  margin-top: 8px; padding: 14px; border-radius: 24px; background: radial-gradient(70% 50% at 80% 0%, rgba(34, 211, 238, .10), transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(124, 58, 237, .08), transparent 60%), var(--ag-bg); color: var(--ag-text); box-shadow: 0 50px 90px -50px rgba(4, 30, 38, .95); font-family: "Source Sans 3", system-ui, sans-serif; }

/* ---------- tabs */
.ag-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ag-tabs [role="tab"] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 16px 8px; border-radius: 12px; border: 1px solid var(--ag-line); background: transparent; color: var(--ag-mute); cursor: pointer; font: inherit; text-align: left; transition: background .2s, color .2s, border-color .2s; }
.ag-tabs [role="tab"] b { font-size: 15px; font-weight: 600; color: #cfd9de; }
.ag-tabs [role="tab"] span { font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.ag-tabs [role="tab"]:hover { border-color: rgba(255, 255, 255, .18); }
.ag-tabs [role="tab"][aria-selected="true"] { background: var(--ag-sur2); border-color: rgba(34, 211, 238, .45); color: var(--ag-cyan); }
.ag-tabs [role="tab"][aria-selected="true"] b { color: #fff; }
.ag-tabs button:focus-visible { outline: 2px solid var(--ag-cyan); outline-offset: 2px; }
.ag-replay { margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ag-line); background: transparent; color: var(--ag-mute); font: 500 13px/1 "Source Sans 3", sans-serif; cursor: pointer; }
.ag-replay:hover { color: #fff; }

/* ---------- layout */
.ag-grid { display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ag-console, .ag-fleet { border-radius: 18px; background: var(--ag-sur); border: 1px solid var(--ag-line); padding: 16px; min-width: 0; }

/* ---------- your phone: the command and the log */
.ag-console { display: flex; flex-direction: column; gap: 12px; }
.ag-me { display: flex; align-items: center; gap: 10px; }
.ag-me b { display: block; font-size: 15px; color: #fff; line-height: 1.15; }
.ag-me small { font: 500 11.5px/1.3 "IBM Plex Mono", monospace; color: var(--ag-mute); }
.ag-orb { width: 32px; height: 32px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #d9f6fb 0 8%, #22d3ee 34%, #0e7490 100%); box-shadow: 0 0 20px rgba(34, 211, 238, .45); }
.ag-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--ag-green); }
.ag-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ag-live.is-on { color: var(--ag-cyan); } .ag-live.is-on i { animation: agBlink 1s ease-in-out infinite; }
@keyframes agBlink { 50% { opacity: .25; } }
.ag-cmd { margin: 0; align-self: flex-end; max-width: 94%; padding: 10px 13px; border-radius: 14px 14px 4px 14px; background: #0f4c57; color: #e2fbff; font-size: 15px; line-height: 1.45; }
.ag-army.is-typing .ag-cmd { animation: agIn .5s ease-out; }
@keyframes agIn { from { opacity: 0; transform: translateY(8px); } }
.ag-plan { margin: 0; font-size: 13.5px; color: var(--ag-mute); }
.ag-plan b { color: #cfe7ec; font-weight: 600; }
.ag-log { list-style: none; margin: 0; flex: 1 1 0; min-height: 150px; overflow-y: auto; display: grid; align-content: start; gap: 7px; border-top: 1px solid var(--ag-line); padding: 12px 4px 4px 0; scrollbar-width: thin; scrollbar-color: #2a363e transparent; }
.ag-log { -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px); }
.ag-log li { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 8px; font-size: 13px; line-height: 1.4; animation: agIn .3s ease-out; }
.ag-log time { grid-row: span 2; font: 500 11px/1.6 "IBM Plex Mono", monospace; color: #62727b; }
.ag-log b { font-weight: 600; color: #cfd9de; font-size: 12.5px; }
.ag-log span { color: var(--ag-mute); }
.ag-log .k-need span { color: var(--ag-amber); } .ag-log .k-done span { color: var(--ag-green); } .ag-log .k-hand span, .ag-log .k-ok span { color: var(--ag-cyan); }
.ag-log .k-hand b::after { content: " → your phone"; color: var(--ag-cyan); font-weight: 500; }
.ag-sum { padding: 12px 13px; border-radius: 12px; background: var(--ag-sur2); border: 1px solid rgba(79, 209, 161, .35); opacity: .4; transition: opacity .4s; }
.ag-army.is-end .ag-sum { opacity: 1; }
.ag-sum b { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ag-green); }
.ag-sum p { margin: 6px 0 9px; font-size: 14.5px; line-height: 1.45; color: #e6edf1; }
.ag-next:empty { display: none; }
.ag-next { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff; color: #0c1115; font-size: 13px; font-weight: 600; }

/* ---------- the fleet */
.ag-fleet { display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--ag-sur); }
.ag-fleet__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-fleet__h b { font-size: 15px; color: #fff; }
.ag-fleet__h span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ag-mute); }
.ag-fleet__h i { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-green); box-shadow: 0 0 8px var(--ag-green); }
.ag-devs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; align-items: start; }
.ag-dev { display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: opacity .35s; }
.ag-dev--mac { grid-column: span 2; }
.ag-dev.is-idle .ag-meta { opacity: .55; }
.ag-device { position: relative; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.ag-body { position: relative; flex: 1; overflow: hidden; }
.ag-note { margin: auto 0 0; font-size: 13px; line-height: 1.5; color: var(--ag-mute); }
.ag-note b { color: #cfd9de; font-weight: 600; }

/* ---------- devices: every screen is laid out at real size (Android 360 x 800, Mac 1280 x 800) and scaled to fit;
   js/agents-home.js sets --k from the device's width (the defaults below are for the desktop layout without JS) */
.ag-nat { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k)); -webkit-font-smoothing: antialiased; }
.ag-natp { --k: .456; width: 360px; height: 800px; display: flex; flex-direction: column; background: #fff; color: #1d1b20; font: 400 15px/1.35 Roboto, "Source Sans 3", system-ui, sans-serif; }
.ag-natm { --k: .305; width: 1280px; height: 800px; color: #fff; font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Source Sans 3", system-ui, sans-serif;
  background: radial-gradient(55% 75% at 12% 92%, #f472b6 0, transparent 62%), radial-gradient(55% 70% at 88% 12%, #22d3ee 0, transparent 60%), radial-gradient(70% 80% at 55% 105%, #6366f1 0, transparent 70%), linear-gradient(155deg, #172033, #2e2a6b 55%, #3b1f4a); }
.ag-nat svg { display: block; }

/* ---------- Android phone */
.ag-phone { position: relative; width: 100%; max-width: 176px; margin: 0 auto; padding: 6px; border-radius: 32px; background: linear-gradient(145deg, #2c3238, #0c0e11 30%, #0c0e11 70%, #262b31); box-shadow: inset 0 0 0 1.5px #59616a, inset 0 0 0 3px #15181c; transition: box-shadow .3s; }
.ag-phone::before, .ag-phone::after { content: ""; position: absolute; right: -2.5px; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #3d444b, #6b737b); }
.ag-phone::before { top: 21%; height: 9%; }
.ag-phone::after { top: 34%; height: 15%; }
.ag-pscr { position: relative; aspect-ratio: 360 / 800; border-radius: 26px; overflow: hidden; background: #fff; }
.ag-natp::before { content: ""; position: absolute; z-index: 7; top: 10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #050607; box-shadow: 0 0 0 2px #16191d; }
.ag-ps { position: relative; z-index: 5; flex: none; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 30px 0 34px; background: #f4f6fa; color: #1d1b20; font: 600 14px/1 Roboto, "Source Sans 3", sans-serif; transition: background .3s; }
.ag-ps span { display: flex; align-items: center; gap: 6px; }
.ag-ps svg { height: 12px; width: auto; }
[data-tpl="chats"] .ag-ps { background: #fff; }
[data-tpl="conv"] .ag-ps { background: var(--app); color: #fff; }
[data-tpl="cam"] .ag-ps { background: #000; color: #fff; }
[data-tpl="home"] .ag-ps, [data-tpl="map"] .ag-ps { position: absolute; left: 0; right: 0; top: 0; background: transparent; }
[data-tpl="home"] .ag-ps { color: #fff; }
.ag-natp .ag-body { position: relative; flex: 1; overflow: hidden; }
[data-tpl="home"] .ag-natp .ag-body, [data-tpl="map"] .ag-natp .ag-body { position: absolute; inset: 0; }
.ag-gest { position: absolute; z-index: 6; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: rgba(0, 0, 0, .4); }
[data-tpl="home"] .ag-gest, [data-tpl="cam"] .ag-gest { background: rgba(255, 255, 255, .75); }

/* Autowhat's sticky pad, as the apps draw it: a dark pill stuck to the right edge with Stop, two lines (the step;
   the app and the time on it, in the accent) and the live coin at the edge. Android X: AssistantBubble.kt; the Mac:
   AWStickyPad (docs/SPACE_UI.md "The sticky pad"). */
.ag-coin { --s: 52px; position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #0c1a20 0 56%, transparent 57%), conic-gradient(from 200deg, #1a8fb0, #3ec7e6, #9bf0ff, #3ec7e6, #1a8fb0); box-shadow: 0 0 14px rgba(62, 199, 230, .45); }
.ag-coin svg { width: 52%; height: 52%; }
.ag-coin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid transparent; }
.ag-dev.is-work .ag-coin::after { border-top-color: #9bf0ff; border-right-color: rgba(155, 240, 255, .35); animation: agSpin 1.2s linear infinite; }
.ag-dev.is-need .ag-coin::before { content: ""; position: absolute; z-index: 1; top: 2%; right: 2%; width: 26%; height: 26%; border-radius: 50%; background: var(--ag-amber); box-shadow: 0 0 0 2px #22272c; }
.ag-dev.is-idle .ag-coin { animation: agBob 3s ease-in-out infinite; }
@keyframes agBob { 50% { transform: translateY(-2px); } }
@keyframes agSpin { to { transform: rotate(360deg); } }
.ag-stopb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.ag-stopb i { width: 13px; height: 13px; border-radius: 2px; background: #e9eef0; }
.ag-dev.is-idle .ag-stopb, .ag-dev.is-done .ag-stopb { display: none; }
.ag-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-pt b { font: 500 15.5px/1.25 "Source Sans 3", Roboto, -apple-system, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-pt small { display: none; align-items: center; gap: 6px; min-width: 0; font: 600 13.5px/1.2 "Source Sans 3", Roboto, -apple-system, sans-serif; color: #3ec7e6; white-space: nowrap; overflow: hidden; }
.ag-pt .ag-el { font-variant-numeric: tabular-nums; }
.ag-dev.is-work .ag-run, .ag-dev.is-done .ag-run { display: flex; }
.ag-dev.is-idle .ag-rest { display: flex; color: #9aa7ad; font-weight: 500; }
.ag-dev.is-need .ag-wait { display: flex; color: var(--ag-amber); }
.ag-appic { flex: none; width: 15px; height: 15px; border-radius: 4px; background: var(--app, #0b8fa8); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }

/* Android X: the floating bubble */
.ag-pill { position: absolute; z-index: 4; right: 8px; bottom: 150px; display: flex; align-items: center; gap: 10px; max-width: 320px; height: 64px; padding: 6px 6px 6px 10px; border-radius: 32px; background: #22272c; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); transition: opacity .3s, transform .3s; }
.ag-dev.is-idle .ag-pill { padding-left: 18px; }
[data-tpl="cam"] .ag-pill, [data-tpl="map"] .ag-pill { bottom: 300px; }
[data-tpl="map"] .ag-sheet { bottom: 376px; }
.ag-dev--phone.is-need .ag-pill { box-shadow: 0 0 0 2px var(--ag-amber), 0 10px 28px rgba(0, 0, 0, .4); }
.ag-sheet { position: absolute; z-index: 5; right: 8px; bottom: 226px; width: 300px; display: none; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: #22272c; color: #fff; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.ag-sheet__h { display: flex; align-items: center; gap: 10px; }
.ag-sheet__h .ag-coin { --s: 34px; }
.ag-sheet__h b { display: flex; flex-direction: column; gap: 2px; font: 600 16px/1.15 "Source Sans 3", Roboto, sans-serif; }
.ag-sheet__h small { font-size: 13px; font-weight: 600; color: var(--ag-amber); }
.ag-need-t { font: 500 15.5px/1.4 "Source Sans 3", Roboto, -apple-system, sans-serif; color: #f1f4f5; }
.ag-sheet__b { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ag-sheet__b i { font-style: normal; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px; background: rgba(255, 255, 255, .1); font: 600 14.5px/1 "Source Sans 3", -apple-system, sans-serif; color: #e9eef0; }
.ag-allow { height: 40px; padding: 0 22px; border-radius: 20px; border: 0; background: #fff; color: #111; font: 700 14.5px/1 "Source Sans 3", -apple-system, sans-serif; cursor: pointer; }
.ag-allow:hover { background: #dff8fd; }
.ag-allow:focus-visible { outline: 3px solid var(--ag-cyan); outline-offset: 3px; }
.ag-dev.is-need .ag-sheet { display: flex; animation: agIn .3s ease-out; }
.ag-dev--phone.is-need .ag-natp .ag-body::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ag-dev--phone.is-need .ag-phone { box-shadow: inset 0 0 0 1.5px #59616a, inset 0 0 0 3px #15181c, 0 0 0 2px var(--ag-amber), 0 0 30px rgba(245, 185, 66, .35); }
.ag-dev--phone.is-ping .ag-phone { animation: agPing .8s ease-out; }
@keyframes agPing { 0% { box-shadow: inset 0 0 0 1.5px #59616a, inset 0 0 0 3px #15181c, 0 0 0 0 rgba(34, 211, 238, .7); } 100% { box-shadow: inset 0 0 0 1.5px #59616a, inset 0 0 0 3px #15181c, 0 0 0 14px rgba(34, 211, 238, 0); } }

/* the agent's finger on the phone */
.ag-tap { position: absolute; z-index: 3; left: 40%; top: 40%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 22%, rgba(34, 211, 238, .5) 23% 58%, transparent 60%); opacity: 0; pointer-events: none; }
.ag-dev--phone.is-work .ag-tap { animation: agTap 2.6s ease-in-out infinite; }
@keyframes agTap { 0% { left: 34%; top: 30%; opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 22% { transform: scale(.75); } 32% { transform: scale(1); } 55% { left: 62%; top: 48%; } 65% { transform: scale(.75); } 75% { transform: scale(1); opacity: 1; } 100% { left: 62%; top: 48%; opacity: 0; } }

/* ---------- Android apps (360 dp wide) */
.sa-app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; animation: agFade .35s ease-out; }
@keyframes agFade { from { opacity: 0; } }
.sa-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; color: #49454f; }
.sa-ic svg { width: 24px; height: 24px; }
/* Material 3 list app */
.sa-list { background: #fff; }
.m3-top { flex: none; display: flex; align-items: center; height: 64px; padding: 0 4px; background: #f4f6fa; }
.m3-top b { flex: 1; min-width: 0; margin-left: 4px; font: 400 22px/1.2 Roboto, "Source Sans 3", sans-serif; color: #1d1b20; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-sum { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 16px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--app) 9%, #fff); }
.m3-sum span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m3-sum small { font-size: 13px; color: #49454f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-sum b { font: 500 22px/1.2 Roboto, "Source Sans 3", sans-serif; }
.m3-sum em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.m3-sum em.warn { background: #fde7e6; color: #b3261e; } .m3-sum em.ok { background: #dcf3e5; color: #146c43; }
.m3-chips { flex: none; display: flex; gap: 8px; padding: 0 16px 8px; }
.m3-chips span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #c4c7c5; font-size: 14px; font-weight: 500; color: #49454f; }
.m3-chips span.on { border-color: transparent; background: color-mix(in srgb, var(--app) 16%, #fff); color: #1d1b20; padding-left: 8px; }
.m3-chips svg { width: 18px; height: 18px; }
.m3-lst { flex: 1; overflow: hidden; }
.m3-li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; padding: 8px 20px 8px 16px; }
.m3-li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m3-li b { font-size: 16px; font-weight: 500; color: #1d1b20; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-li small { font-size: 14px; color: #49454f; }
.m3-li em { font-style: normal; font-size: 15px; font-weight: 600; color: #1d1b20; font-variant-numeric: tabular-nums; }
.m3-li.warn em, .m3-li.warn small { color: #b3261e; }
.m3-li.on { background: color-mix(in srgb, var(--app) 10%, #fff); box-shadow: inset 4px 0 0 var(--app); }
.m3-li.on small { color: #0e7490; font-weight: 600; }
.m3-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 600 15px/1 Roboto, "Source Sans 3", sans-serif; font-style: normal; background: color-mix(in srgb, var(--c) 20%, #fff); color: color-mix(in srgb, var(--c) 70%, #000); }
.m3-nav { flex: none; display: flex; height: 86px; padding-bottom: 12px; background: #f4f6fa; }
.m3-nav span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: #49454f; }
.m3-nav i { display: grid; place-items: center; width: 60px; height: 32px; border-radius: 16px; }
.m3-nav svg { width: 24px; height: 24px; }
.m3-nav .on { color: #1d1b20; font-weight: 700; } .m3-nav .on i { background: color-mix(in srgb, var(--app) 20%, #fff); }
/* WhatsApp: chats */
.sa-chats { background: #fff; }
.wa-top { flex: none; display: flex; align-items: center; height: 58px; padding: 0 4px 0 16px; }
.wa-top b { flex: 1; font: 600 24px/1 "Source Sans 3", Roboto, sans-serif; color: #1daa61; }
.wa-top .sa-ic { color: #1d1b20; }
.wa-search { flex: none; display: flex; align-items: center; gap: 12px; height: 46px; margin: 2px 16px 10px; padding: 0 16px; border-radius: 23px; background: #f0f2f5; color: #667781; font-size: 16px; }
.wa-search svg { width: 20px; height: 20px; }
.wa-chips { flex: none; display: flex; gap: 8px; padding: 0 16px 6px; }
.wa-chips span { padding: 7px 14px; border-radius: 18px; background: #f0f2f5; color: #54656f; font-size: 14px; font-weight: 500; }
.wa-chips .on { background: #d8fdd2; color: #15603e; }
.wa-list { flex: 1; overflow: hidden; }
.wa-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; }
.wa-row span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-row b { font-size: 16.5px; font-weight: 600; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-row small { font-size: 14.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-row em { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-style: normal; font-size: 12.5px; color: #667781; }
.wa-row em.un { color: #1daa61; font-weight: 600; }
.wa-row u { text-decoration: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #25d366; color: #fff; font-size: 12px; font-weight: 700; }
.wa-row.on { background: #f0f2f5; }
.wa-av { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 600 18px/1 "Source Sans 3", Roboto, sans-serif; font-style: normal; background: color-mix(in srgb, var(--c) 22%, #fff); color: color-mix(in srgb, var(--c) 70%, #000); }
.wa-fab { position: absolute; right: 16px; bottom: 102px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #1daa61; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.wa-fab svg { width: 24px; height: 24px; }
.wa-nav { background: #fff; border-top: 1px solid #e9edef; }
.wa-nav .on i { background: #d8fdd2; }
/* WhatsApp: a conversation */
.sa-conv { background: #efeae2; }
.wa-hd { flex: none; display: flex; align-items: center; height: 60px; padding: 0 2px; background: var(--app); color: #fff; }
.wa-hd .sa-ic { width: 42px; color: #fff; }
.wa-hd .wa-av { width: 38px; height: 38px; font-size: 14px; }
.wa-who { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 10px; }
.wa-who b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who small { font-size: 13px; opacity: .85; }
.wa-wall { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 12px 108px; overflow: hidden;
  background: #efeae2 radial-gradient(circle at 3px 3px, rgba(0, 0, 0, .045) 2px, transparent 0) 0 0 / 24px 24px; }
.wa-day { align-self: center; margin-bottom: 6px; padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: 12.5px; font-weight: 500; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-bub { max-width: 82%; padding: 7px 10px 6px; border-radius: 10px; background: #fff; color: #111b21; font: 400 15.5px/1.35 Roboto, "Source Sans 3", sans-serif; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-bub small { display: block; text-align: right; margin-top: 2px; font-size: 11.5px; color: #667781; }
.wa-bub small i { font-style: normal; color: #53bdeb; margin-left: 4px; letter-spacing: -2px; }
.wa-bub.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.wa-bub.in { align-self: flex-start; border-top-left-radius: 2px; }
.wa-in { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 8px 8px 20px; }
.wa-box { flex: 1; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border-radius: 24px; background: #fff; color: #8696a0; }
.wa-box svg { width: 22px; height: 22px; } .wa-box i { flex: 1; font-style: normal; font-size: 16px; }
.wa-mic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1daa61; color: #fff; }
.wa-mic svg { width: 22px; height: 22px; }
.sa-conv .wa-wall { padding-bottom: 82px; }
.ag-dev--phone[data-tpl="conv"] .ag-pill { bottom: 80px; }
/* Google Maps */
.sa-map { background: #f1f3f4; }
.gm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-search { position: absolute; left: 16px; right: 16px; top: 46px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 18px; border-radius: 26px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); color: #5f6368; }
.gm-search svg { width: 22px; height: 22px; flex: none; }
.gm-search span { flex: 1; min-width: 0; font-size: 16px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-search i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #5b3fc4; color: #fff; font: 600 13px/1 Roboto, sans-serif; font-style: normal; }
.gm-fab { position: absolute; right: 16px; bottom: 296px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: #1a73e8; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.gm-fab svg { width: 24px; height: 24px; }
.gm-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 20px 128px; border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15); }
.gm-grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: #dadce0; margin-bottom: 12px; }
.gm-sheet b { font: 500 24px/1.2 Roboto, "Source Sans 3", sans-serif; color: #188038; }
.gm-sheet small { font-size: 15px; color: #5f6368; }
.gm-acts { display: flex; gap: 8px; margin-top: 14px; }
.gm-acts span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid #dadce0; color: #1a73e8; font-size: 14px; font-weight: 500; }
.gm-acts .pri { background: #1a73e8; border-color: transparent; color: #fff; }
.gm-acts svg { width: 18px; height: 18px; }
/* Camera, document mode */
.sa-cam { background: #000; color: #fff; }
.cm-top { flex: none; display: flex; justify-content: space-around; align-items: center; height: 56px; }
.cm-top svg { width: 24px; height: 24px; } .cm-top span { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.cm-vf { position: relative; flex: none; height: 470px; background: radial-gradient(120% 90% at 50% 40%, #6b5a45, #2b241c); overflow: hidden; }
.cm-doc { position: absolute; left: 17%; right: 17%; top: 10%; bottom: 13%; display: flex; flex-direction: column; justify-content: space-around; padding: 26px 22px; border-radius: 3px; background: #f6f0df; transform: rotate(-4deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.cm-doc i { height: 6px; border-radius: 3px; background: #3d4f7a; opacity: .5; }
.cm-doc i:nth-child(odd) { width: 82%; } .cm-doc i:nth-child(3n) { width: 56%; } .cm-doc i:first-child { height: 10px; width: 64%; opacity: .75; }
.cm-c { position: absolute; width: 34px; height: 34px; border: solid #fbbc04; border-width: 0; }
.cm-c.tl { left: 12%; top: 7%; border-width: 4px 0 0 4px; } .cm-c.tr { right: 12%; top: 7%; border-width: 4px 4px 0 0; }
.cm-c.bl { left: 12%; bottom: 9%; border-width: 0 0 4px 4px; } .cm-c.br { right: 12%; bottom: 9%; border-width: 0 4px 4px 0; }
.cm-chip { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 18px; background: rgba(0, 0, 0, .66); font-size: 14px; white-space: nowrap; }
.cm-chip svg { width: 16px; height: 16px; color: #81c995; }
.cm-modes { flex: none; display: flex; justify-content: center; gap: 22px; padding: 20px 0 14px; }
.cm-modes span { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); } .cm-modes .on { color: #fbbc04; }
.cm-shut { flex: none; display: flex; justify-content: space-around; align-items: center; padding: 8px 30px; }
.cm-shut span { width: 70px; height: 70px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #000, 0 0 0 9px #fff; }
.cm-th { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #8a7458, #3a2f22); border: 2px solid #fff; }
.cm-fl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.cm-fl svg { width: 24px; height: 24px; }
/* Home screen */
.sa-home { padding: 76px 22px 0; color: #fff; background: radial-gradient(90% 60% at 18% 8%, #3b82f6aa, transparent 60%), radial-gradient(90% 60% at 92% 92%, #a855f7aa, transparent 60%), linear-gradient(170deg, #0f3a4a, #241b4b 60%, #3a1a3d); }
.hm-glance b { display: block; font: 300 92px/1 Roboto, "Source Sans 3", sans-serif; letter-spacing: -.03em; }
.hm-glance small { display: block; margin-top: 8px; font-size: 16px; opacity: .9; }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 8px; margin-top: auto; }
.hm-grid span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); white-space: nowrap; }
.hm-grid i, .hm-dock i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.hm-grid svg, .hm-dock svg { width: 28px; height: 28px; }
.hm-dock { display: flex; justify-content: space-between; padding: 26px 8px 18px; }
.hm-search { display: flex; align-items: center; gap: 12px; height: 54px; margin-bottom: 46px; padding: 0 18px; border-radius: 27px; background: rgba(255, 255, 255, .9); color: #444; }
.hm-search span { flex: 1; font-size: 16px; color: #5f6368; } .hm-search svg { width: 22px; height: 22px; }

/* ---------- MacBook */
.ag-mac { width: 100%; max-width: 430px; margin: 0 auto; }
.ag-lid { position: relative; padding: 2.3% 2.3% 2.8%; border-radius: 16px 16px 6px 6px; background: #0a0a0b; box-shadow: inset 0 0 0 1px #3f4247, inset 0 0 0 2.5px #111; transition: box-shadow .3s; }
.ag-desk { position: relative; aspect-ratio: 1280 / 800; border-radius: 6px; overflow: hidden; background: #172033; }
.ag-notch { position: absolute; z-index: 9; top: 0; left: 50%; width: 13%; height: 3.4%; margin-left: -6.5%; border-radius: 0 0 6px 6px; background: #0a0a0b; }
.ag-base { position: relative; height: 11px; margin: 0 -3%; border-radius: 2px 2px 14px 14px / 2px 2px 9px 9px; background: linear-gradient(#e2e4e7, #b9bdc3 45%, #8c9097); box-shadow: 0 1px 0 #6d7177; }
.ag-base i { position: absolute; top: 0; left: 50%; width: 15%; height: 4px; margin-left: -7.5%; border-radius: 0 0 5px 5px; background: linear-gradient(#a3a7ad, #c7cacf); }
.ag-menu { position: absolute; z-index: 8; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 22px; height: 32px; padding: 0 18px; background: rgba(12, 16, 26, .3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 500 14.5px/1 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; }
.ag-menu b { font-weight: 700; }
.ag-menu em { margin-left: auto; display: flex; align-items: center; gap: 18px; font-style: normal; }
.ag-menu em svg { height: 15px; width: auto; }
.ag-apple svg { height: 17px; width: auto; }
.ag-mo { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #d9f6fb 0 8%, #22d3ee 34%, #0e7490 100%); box-shadow: 0 0 8px rgba(34, 211, 238, .8); }
.ag-dock { position: absolute; z-index: 7; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 22px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .25); }
.ag-dock i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ag-dock i:nth-child(2) { color: #1d7bf5; }
.ag-dock svg { width: 30px; height: 30px; }
.ag-dock b { width: 1px; height: 46px; background: rgba(255, 255, 255, .35); }
.ag-dock i.aw { background: radial-gradient(circle at 50% 50%, #22d3ee 0 30%, #0e7490 31% 38%, #0b1014 40%); box-shadow: 0 0 12px rgba(34, 211, 238, .5); }

/* the app window */
.ag-w { position: absolute; z-index: 2; left: 26px; top: 46px; width: 868px; height: 664px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; color: #1f2328; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 30px 70px rgba(0, 0, 0, .5); animation: agIn .4s ease-out; }
[data-tpl="home"] .ag-w { display: none; }
.ag-tl { position: absolute; z-index: 3; left: 20px; top: 19px; display: flex; gap: 8px; }
.ag-tl i { width: 13px; height: 13px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.ag-tl i:nth-child(2) { background: #febc2e; } .ag-tl i:nth-child(3) { background: #28c840; }
.ag-natm .ag-body { position: relative; flex: 1; overflow: hidden; }
.ag-dev--mac .ag-tap { width: 0; height: 0; margin: 0; background: none; z-index: 4; }
.ag-dev--mac .ag-tap::before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0 30px 21px; border-color: transparent transparent transparent #111; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.ag-dev--mac.is-work .ag-tap { animation: agPoint 3.2s ease-in-out infinite; }
@keyframes agPoint { 0% { left: 30%; top: 40%; opacity: 0; } 10% { opacity: 1; } 40% { left: 62%; top: 52%; } 55% { left: 62%; top: 52%; } 85% { left: 78%; top: 82%; opacity: 1; } 100% { left: 78%; top: 82%; opacity: 0; } }

/* the Mac's sticky pad: the pill on the right edge and, while a task runs, its panel open beside it (a glance) */
.ag-mpill { position: absolute; z-index: 6; right: 8px; bottom: 22px; display: flex; align-items: center; gap: 10px; width: 372px; height: 60px; padding: 6px 6px 6px 10px; border-radius: 30px; background: #2b2b2e; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.ag-mpill .ag-coin { --s: 48px; }
.ag-micb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #e9eef0; }
.ag-micb svg { width: 19px; height: 19px; }
.ag-dev--mac.is-need .ag-mpill { box-shadow: 0 0 0 2px var(--ag-amber), 0 14px 34px rgba(0, 0, 0, .45); }
.ag-pad { position: absolute; z-index: 6; right: 8px; bottom: 94px; width: 372px; max-height: 640px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: #232325; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); overflow: hidden; font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; animation: agIn .3s ease-out; }
.ag-dev--mac.is-idle .ag-pad { display: none; }
.ag-pad__h { display: flex; align-items: center; gap: 12px; }
.ag-pad__h .ag-coin { --s: 40px; }
.ag-pad__h b { flex: 1; display: flex; flex-direction: column; gap: 2px; font: 600 17px/1.15 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; }
.ag-pad .ag-sl { font: 600 13px/1.2 -apple-system, sans-serif; letter-spacing: 0; text-transform: none; }
.ag-pad .ag-sl::after { content: "All clear"; color: #9a9aa0; }
.is-work .ag-pad .ag-sl::after { content: "Working"; color: #3ec7e6; }
.is-need .ag-pad .ag-sl::after { content: "Needs your OK"; color: var(--ag-amber); }
.is-done .ag-pad .ag-sl::after { content: "Done"; color: var(--ag-green); }
.ag-pb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #d6dadc; }
.ag-pb svg { width: 16px; height: 16px; }
.ag-box { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: #8e8e93; font-size: 14.5px; }
.ag-box span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-box i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #c7c7cc; }
.ag-box svg { width: 17px; height: 17px; }
.ag-pad__k { margin-top: 4px; font: 600 12px/1 -apple-system, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; }
.ag-now, .ag-needc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.ag-now__t { display: flex; align-items: flex-start; gap: 10px; }
.ag-now__t .ag-appic { width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; }
.ag-job { margin: 0; font: 600 15.5px/1.35 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; color: #fff; }
.ag-steps { list-style: none; margin: 0; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 7px; }
.ag-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font: 400 13.5px/1.4 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; color: #a8b3b8; animation: agIn .3s ease-out; }
.ag-steps i { position: relative; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; }
.ag-steps .s-done i { background: rgba(79, 209, 161, .2); }
.ag-steps .s-done i::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7.5px; border: solid var(--ag-green); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.ag-steps .s-cur i { border: 2px solid rgba(62, 199, 230, .25); border-top-color: #3ec7e6; animation: agSpin .9s linear infinite; }
.ag-steps .s-cur span { color: #fff; }
.ag-steps .s-need i { background: var(--ag-amber); }
.ag-steps .s-need span { color: #fde7b0; }
.ag-now__f { display: flex; align-items: center; gap: 8px; }
.ag-now__f > span:first-child { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; color: #3ec7e6; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 17px; background: rgba(255, 255, 255, .1); font-weight: 600; font-size: 14px; color: #f2f2f7; }
.ag-btn.w { background: #fff; color: #111; }
.ag-dev--mac.is-done .ag-now__f .ag-btn { display: none; }
.ag-dev--mac.is-done .ag-now__f > span:first-child { color: var(--ag-green); }
.ag-padneed { display: none; flex-direction: column; gap: 10px; }
.ag-padneed .ag-pad__k { color: var(--ag-amber); }
.ag-needc { border: 1px solid rgba(245, 185, 66, .45); background: rgba(245, 185, 66, .1); }
.ag-padneed .ag-sheet__b { justify-content: flex-start; }
.ag-dev--mac.is-need .ag-padneed { display: flex; }
.ag-pad__f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.ag-pad__f span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #5ac8e0; }
.ag-pad__f svg { width: 15px; height: 15px; }
.ag-pad__f small { font-size: 13px; color: #8e8e93; }
.ag-dev--mac.is-need .ag-lid { box-shadow: inset 0 0 0 1px #3f4247, inset 0 0 0 2.5px #111, 0 0 0 2px var(--ag-amber), 0 0 30px rgba(245, 185, 66, .3); }
.ag-dev--mac.is-ping .ag-mpill { animation: agPadPing .8s ease-out; }
@keyframes agPadPing { 0% { box-shadow: 0 0 0 0 rgba(62, 199, 230, .8); } 100% { box-shadow: 0 0 0 22px rgba(62, 199, 230, 0); } }

/* ---------- Mac apps: web apps in Safari or Chrome, Excel and TallyPrime (868 x 664 window) */
.mw { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1f2328; font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; animation: agFade .35s ease-out; }
.mw svg { width: 18px; height: 18px; }
.mw-tb { flex: none; display: flex; align-items: center; gap: 4px; }
.mw-tbi { display: grid; place-items: center; width: 32px; height: 30px; border-radius: 6px; color: #6e6e73; }
.mw-sf { height: 52px; padding: 0 14px 0 92px; background: #f6f6f7; border-bottom: 1px solid #dcdcdf; }
.mw-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 34px; margin: 0 56px; padding: 0 12px; border-radius: 9px; background: #e8e8eb; color: #3c3c43; font-size: 14px; }
.mw-url svg { width: 13px; height: 13px; color: #6e6e73; flex: none; }
.mw-url span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-tabs { flex: none; display: flex; align-items: flex-end; gap: 4px; height: 44px; padding: 0 10px 0 92px; background: #dee1e6; }
.mw-tab { display: flex; align-items: center; gap: 10px; width: 230px; height: 36px; padding: 0 12px 0 14px; border-radius: 10px 10px 0 0; background: #fff; font-size: 13.5px; color: #1f1f1f; white-space: nowrap; overflow: hidden; }
.mw-tab b { margin-left: auto; font-weight: 400; font-size: 16px; color: #5f6368; }
.mw-fav { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.mw-tabs .mw-tbi { height: 36px; color: #3c4043; }
.mw-cr { height: 46px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e3e3e3; }
.mw-cr .mw-url { justify-content: flex-start; margin: 0 8px; padding: 0 16px; border-radius: 18px; background: #f1f3f4; }
.mw-prof { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 4px; border-radius: 50%; background: #5b3fc4; color: #fff; font: 600 12px/1 -apple-system, sans-serif; font-style: normal; }
.mw-site { flex: none; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; background: var(--app); color: #fff; }
.mw-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .22); font: 700 13px/1 -apple-system, sans-serif; font-style: normal; }
.mw-site b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.mw-site nav { display: flex; gap: 22px; margin-left: 24px; font-size: 14px; opacity: .85; }
.mw-site .mw-tbi { margin-left: auto; color: #fff; }
.mw-user { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .25); font: 600 12px/1 -apple-system, sans-serif; font-style: normal; }
.mw-main { flex: 1; display: flex; min-height: 0; }
.mw-side { flex: none; display: flex; flex-direction: column; gap: 4px; width: 180px; padding: 16px 10px; background: #f6f8fa; border-right: 1px solid #e6e9ee; }
.mw-side span { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; color: #3d4752; }
.mw-side svg { color: #6b7480; }
.mw-side .on { background: color-mix(in srgb, var(--app) 12%, #fff); color: var(--app); font-weight: 600; }
.mw-side .on svg { color: var(--app); }
.mw-page { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px 28px; overflow: hidden; }
.mw-crumb { font-size: 13px; color: #6b7480; } .mw-crumb i { font-style: normal; margin: 0 6px; } .mw-crumb b { color: #1f2328; font-weight: 500; }
.mw-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mw-h h5 { margin: 0; font: 600 26px/1.2 -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif; color: #111; }
.mw-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e6f9fc; color: #0e7490; font-size: 13px; font-weight: 600; }
.mw-chip i { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; }
.mw-chip.live { background: #e7f6ec; color: #146c43; } .mw-chip.live i { background: #22c55e; }
.mw-card { border: 1px solid #e3e7ec; border-radius: 12px; padding: 20px 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.mw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.mw-fields label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mw-fields small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7480; }
.mw-fields span { display: flex; align-items: center; height: 42px; padding: 0 14px; border: 1px solid #cfd6de; border-radius: 8px; background: #fff; font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.mw-fields .on span { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .28); }
.mw-fields .warn span { color: #b3261e; border-color: #f1b0ab; background: #fff6f5; }
.mw-caret { width: 2px; height: 20px; margin-left: 2px; background: #0e7490; animation: agBlink 1s steps(1) infinite; }
.mw-acts { display: flex; justify-content: flex-end; gap: 10px; }
.mw-btn, .mw-btn2 { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 8px; font-size: 14.5px; font-weight: 600; }
.mw-btn { background: var(--app); color: #fff; } .mw-btn2 { border: 1px solid #cfd6de; color: #1f2328; }
.mw-btn2 svg { width: 16px; height: 16px; }
.mw-tools { display: flex; align-items: center; gap: 10px; }
.mw-sr { display: flex; align-items: center; gap: 8px; width: 200px; height: 38px; padding: 0 12px; border: 1px solid #cfd6de; border-radius: 8px; color: #8a939c; }
.mw-sr svg { width: 16px; height: 16px; }
.mw-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid #d5dbe1; font-size: 13.5px; font-weight: 500; color: #3d4752; }
.mw-pill.on { border-color: transparent; background: color-mix(in srgb, var(--app) 12%, #fff); color: var(--app); }
.mw-tools .mw-btn2 { margin-left: auto; height: 36px; }
.mw-card.mt { padding: 0; overflow: hidden; }
.mt-tr { display: grid; grid-template-columns: 1.6fr; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: center; height: 46px; padding: 0 20px; border-bottom: 1px solid #eef1f4; font-size: 15px; }
.mt-tr > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-tr > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mt-th { height: 40px; background: #f6f8fa; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7480; }
.mt-tr.on { background: #fff8db; box-shadow: inset 4px 0 0 #e5a800; }
.mt-tr.warn > :last-child { color: #b3261e; font-weight: 700; }
.mt-tot { border-bottom: 0; background: #f6f8fa; font-weight: 700; }
.mt-tot > :last-child { grid-column: var(--n); }
.mw-foot { font-size: 13px; color: #6b7480; }
/* Excel */
.xl-tb { height: 52px; justify-content: center; gap: 10px; background: #107c41; color: #fff; }
.xl-tb b { font-size: 14px; font-weight: 600; } .xl-tb small { font-size: 13px; opacity: .75; }
.xl-tabs { flex: none; display: flex; align-items: flex-end; gap: 20px; height: 36px; padding: 0 18px; background: #f3f3f3; }
.xl-tabs span { padding-bottom: 8px; font-size: 13.5px; color: #444; }
.xl-tabs .on { color: #107c41; font-weight: 600; box-shadow: inset 0 -3px 0 #107c41; }
.xl-rib { flex: none; display: flex; gap: 14px; height: 76px; padding: 8px 18px; background: #f3f3f3; border-bottom: 1px solid #d6d6d6; }
.xl-rib span { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 60px; font-size: 12px; color: #444; }
.xl-rib i { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(#eef7f1, #cfe6d8); border: 1px solid #b9d7c4; }
.xl-fx { flex: none; display: flex; align-items: center; height: 36px; border-bottom: 1px solid #d6d6d6; font-size: 14px; }
.xl-fx b { width: 80px; text-align: center; font-weight: 500; border-right: 1px solid #d6d6d6; line-height: 36px; }
.xl-fx i { padding: 0 12px; color: #888; border-right: 1px solid #d6d6d6; line-height: 36px; }
.xl-fx span { padding: 0 12px; }
.xl-grid { flex: 1; overflow: hidden; font-size: 14px; }
.xl-r { display: grid; grid-template-columns: 44px 1.8fr; grid-auto-flow: column; grid-auto-columns: 1fr; height: 30px; border-bottom: 1px solid #e3e3e3; }
.xl-r > * { padding: 0 10px; line-height: 30px; border-right: 1px solid #e3e3e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-r > i { padding: 0; text-align: center; font-style: normal; font-size: 12.5px; color: #666; background: #f3f3f3; border-right-color: #d6d6d6; }
.xl-r span + span { text-align: right; font-variant-numeric: tabular-nums; }
.xl-h { height: 26px; background: #f3f3f3; } .xl-h > * { line-height: 26px; } .xl-h span, .xl-h span + span { text-align: center; color: #666; font-size: 12.5px; }
.xl-t span:first-of-type { overflow: visible; font-weight: 700; font-size: 15.5px; }
.xl-b span { font-weight: 700; } .xl-b:not(.xl-tot) span { background: #e9f5ee; }
.xl-tot span { border-top: 2px solid #444; }
.xl-r.on span { background: #e6f4ea; }
.xl-r .sel { box-shadow: inset 0 0 0 2px #107c41; }
.xl-r .w { color: #b3261e; font-weight: 700; }
.xl-foot { flex: none; display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px; background: #f3f3f3; border-top: 1px solid #d6d6d6; font-size: 13px; color: #444; }
.xl-foot span { padding: 6px 14px; } .xl-foot .on { background: #fff; color: #107c41; font-weight: 600; box-shadow: inset 0 -2px 0 #107c41; }
.xl-foot b { margin: 0 8px; color: #666; font-weight: 400; } .xl-foot em { margin-left: auto; font-style: normal; color: #666; }
/* TallyPrime */
.mw-tally { background: #fbfaf5; }
.tl-tb { height: 46px; gap: 20px; padding: 0 18px 0 92px; background: #22344c; color: #fff; font-size: 13px; }
.tl-tb b { margin-right: 14px; font-size: 15px; font-weight: 700; color: #ffd34d; } .tl-tb span { opacity: .9; white-space: nowrap; }
.tl-main { flex: 1; display: flex; min-height: 0; }
.tl-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-h { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 18px; background: #2f7f8f; color: #fff; }
.tl-h b { font-size: 15px; } .tl-h span { font-size: 13px; opacity: .85; }
.tl-r { display: grid; grid-template-columns: 1.6fr; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: center; height: 38px; padding: 0 18px; border-bottom: 1px solid #ece7d8; font-size: 14.5px; }
.tl-r > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-r > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tl-th { font-size: 13px; font-weight: 700; color: #2f5d6b; background: #eef6f7; }
.tl-r.on { background: #ffe58f; }
.tl-r.warn > :last-child { color: #b3261e; font-weight: 700; }
.tl-tot { border-top: 2px solid #2f5d6b; font-weight: 700; }
.tl-tot > :last-child { grid-column: var(--n); }
.tl-keys { flex: none; width: 130px; display: flex; flex-direction: column; background: #eef1f4; border-left: 1px solid #d7dce2; }
.tl-keys span { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid #dde2e7; font-size: 13px; color: #33414d; }
.tl-keys b { width: 32px; font-size: 12px; color: #2f7f8f; }
.tl-foot { flex: none; display: flex; align-items: center; gap: 26px; height: 34px; padding: 0 18px; background: #22344c; color: #fff; font-size: 13px; }

/* ---------- caption under each device */
.ag-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; width: 100%; margin: 0 auto; transition: opacity .3s; }
.ag-dev--phone .ag-meta { max-width: 172px; }
.ag-dev--mac .ag-meta { max-width: 410px; }
.ag-meta > b { font-size: 14px; color: #fff; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta > small { font-size: 11.5px; color: var(--ag-mute); line-height: 1.3; }
.ag-agent { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(34, 211, 238, .08); color: #bfeaf2; text-decoration: none; font-size: 12px; max-width: 100%; }
.ag-agent:not([href]) { visibility: hidden; }
.ag-agent em { font: 600 10px/1 "IBM Plex Mono", monospace; font-style: normal; padding: 4px 5px; border-radius: 999px; background: rgba(34, 211, 238, .18); color: var(--ag-cyan); }
.ag-agent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-agent[href]:hover { background: rgba(34, 211, 238, .16); }
.ag-st { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ag-mute); }
.ag-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ag-dev.is-work .ag-st { color: var(--ag-cyan); } .ag-dev.is-need .ag-st { color: var(--ag-amber); } .ag-dev.is-done .ag-st { color: var(--ag-green); }

/* ---------- product cards under the demo */
.ag-g { flex: none; display: grid; place-items: center; position: relative; }
.ag-g i { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, .8); }
.ag-g--phone { width: 20px; height: 34px; border-radius: 5px; box-shadow: inset 0 0 0 2px #3a4750; background: #0a0f13; }
.ag-g--mac { width: 34px; height: 23px; margin-bottom: 4px; border-radius: 3px; box-shadow: inset 0 0 0 2px #4a4d53; background: #16171a; }
.ag-g--mac::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 3px; border-radius: 0 0 3px 3px; background: #4a4d53; }
.ag-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ag-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid #dce7ea; text-decoration: none; transition: border-color .2s, transform .2s; }
.ag-card:hover { border-color: #22b5cc; transform: translateY(-2px); }
.ag-card:focus-visible { outline: 3px solid #22d3ee; outline-offset: 3px; }
.ag-card small { display: block; font: 600 10.5px/1.2 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; color: #0a6f83; }
.ag-card b { display: block; margin: 4px 0 2px; font-size: 18px; color: #1f2a2d; }
.ag-card em { display: block; font-style: normal; font-size: 14px; line-height: 1.45; color: #55605f; }
.ag-go { font-weight: 600; font-size: 14px; color: #0a6f83; white-space: nowrap; }

@media (max-width: 1100px) and (min-width: 901px) { .ag-grid { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); } .ag-devs { gap: 22px 10px; } }
@media (max-width: 900px) { .ag-grid, .ag-pair { grid-template-columns: 1fr; } .ag-log { flex: none; height: 230px; } }
@media (max-width: 560px) { .ag-army { padding: 10px; border-radius: 16px; } .ag-devs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .ag-tabs [role="tab"] { flex: 1 1 40%; padding: 8px 10px; } .ag-replay { margin-left: 0; }
  .ag-card { grid-template-columns: auto minmax(0, 1fr); } .ag-go { grid-column: 2; } .ag-log li { grid-template-columns: 72px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ag-army *, .ag-army.is-typing .ag-cmd { animation: none !important; transition: none !important; } .ag-card { transition: none; } }

/* ---------- reading aids: how it works, numbered devices, progress, the live "Now" line, the colour key */
.ag-tabs__k { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-mute); margin-right: 4px; }
.ag-flow { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.ag-flow li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ag-sur); border: 1px solid var(--ag-line); color: var(--ag-mute); transition: background .35s, border-color .35s, color .35s; }
.ag-flow li:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: solid rgba(255, 255, 255, .25); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.ag-flow b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); font: 600 12px/1 "IBM Plex Mono", monospace; color: var(--ag-mute); transition: inherit; }
.ag-flow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #cfd9de; }
.ag-flow small { font-size: 11.5px; font-weight: 400; color: var(--ag-mute); }
.ag-flow li.done b { border-color: transparent; background: rgba(79, 209, 161, .18); color: var(--ag-green); }
.ag-flow li.on { background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, .04)); border-color: rgba(34, 211, 238, .55); }
.ag-flow li.on b { border-color: var(--ag-cyan); background: var(--ag-cyan); color: #062c33; box-shadow: 0 0 14px rgba(34, 211, 238, .6); }
.ag-flow li.on span { color: #fff; }
.ag-flow li.on.need { border-color: rgba(245, 185, 66, .6); background: linear-gradient(135deg, rgba(245, 185, 66, .16), rgba(245, 185, 66, .04)); }
.ag-flow li.on.need b { background: var(--ag-amber); border-color: var(--ag-amber); box-shadow: 0 0 14px rgba(245, 185, 66, .6); }
.ag-num { flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 7px; border-radius: 6px; background: var(--c); color: #071116; font: 700 11px/1 "IBM Plex Mono", monospace; font-style: normal; vertical-align: 1px; }
.ag-log b { display: inline-flex; align-items: center; }
.ag-log .ag-num { width: 17px; height: 17px; margin-right: 6px; font-size: 10px; border-radius: 5px; }
.ag-prog { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--ag-sur2); }
.ag-prog > span { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-mute); }
.ag-prog > b { justify-self: end; font-size: 14px; color: #fff; }
.ag-pbar { grid-column: 1 / -1; display: flex; gap: 4px; }
.ag-pbar i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); transition: background .4s, box-shadow .4s; }
.ag-pbar i.on { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.ag-pbar i.wk { background: color-mix(in srgb, var(--c) 35%, transparent); }
.ag-fleet__h b small { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--ag-mute); }
.ag-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ag-mute); }
.ag-key i { width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; } .ag-key i.w { background: var(--ag-cyan); } .ag-key i.n { background: var(--ag-amber); } .ag-key i.d { background: var(--ag-green); }
.ag-meta > b { display: inline-flex; align-items: center; }
.ag-dev { --dc: var(--ag-cyan); }
.ag-device::before { content: ""; position: absolute; inset: -6px; border-radius: 30px; opacity: 0; transition: opacity .4s; background: radial-gradient(closest-side, color-mix(in srgb, var(--dc) 22%, transparent), transparent); pointer-events: none; }
.ag-dev.is-work .ag-device::before, .ag-dev.is-need .ag-device::before { opacity: 1; }
.ag-nowl { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; min-height: 36px; font-size: 13px; line-height: 1.38; color: #dbe5ea; }
.ag-nowl span { flex: none; font: 600 10px/1.6 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-cyan); }
.ag-nowl em { font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-dev.is-need .ag-nowl span { color: var(--ag-amber); } .ag-dev.is-need .ag-nowl em { color: #fde7b0; }
.ag-dev.is-done .ag-nowl span { color: var(--ag-green); }
.ag-dev.is-idle .ag-nowl { opacity: .5; }
@media (max-width: 1100px) { .ag-flow { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; } .ag-flow li:not(:last-child)::after { display: none; } }
@media (max-width: 560px) { .ag-tabs__k { display: none; } .ag-key { display: none; } }
.ag-dev--mac .ag-nowl { min-height: 0; }