/* The demo app (/demo/), in the shared Perceptric style (Omniscient's docs/brand.md):
   black and white, square and framed. Inter at 13px on a 4px grid, black (#0A0A0A) on white with plain grays.
   Outer frames (cards, menus, dialogs, buttons, filters) are a 1px black line; rows inside keep gray hairlines.
   No shadows, no gradients, no round corners. Black is the one action color; Arrowsterr blue is the signal
   (your brand, about 5% of a screen). Other hues only mean status or an engine or brand.
   Shell and shared parts here; each screen's own rules are in screens/<group>.css, under .awd-main--<id>. */

:root {
  --bg: #FFFFFF; --bg-2: #FAFAFA; --bg-3: #F5F5F5; --bg-4: #EBEBEB;
  --ink: #0A0A0A; --ink-strong: #0A0A0A; --ink-2: #262626; --gray: #737373; --gray-2: #A3A3A3; --gray-3: #C4C4C4;
  --frame: #0A0A0A; --line-strong: #D4D4D4; --line: #E5E5E5; --line-faint: #F0F0F0;
  --shell: #FFFFFF; --shell-line: #0A0A0A;
  --lift: none;
  --brand: #0A0A0A; --brand-dark: #262626; --brand-ink: #0A0A0A;
  --signal: #2760CF; --signal-ink: #0943B0; --signal-bg: #EDF2FC;
  --green: #0A7A52; --red: #C2412D; --orange: #B7791F;
  --green-bg: #E8F5EF; --red-bg: #FBEDEA; --orange-bg: #FBF3E6;
  --blue-bg: #F5F5F5;
  --purple: #6E56CF; --purple-bg: #F1EEFB;
  --btn-r: 0;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.3, 1.5, .6, 1);
  --fast: 120ms; --normal: 200ms; --slow: 320ms;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.awd-body { background: var(--bg); color: var(--ink); font: 400 13px/20px var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
:where(.awd) :is(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; padding: 0; }
:where(.awd) :is(h1, h2, h3) { font-feature-settings: "ss07" 1, "ss08" 1, "liga" 0; }
:where(.awd) :is(ol, ul) { list-style: none; }
:where(.awd) :is(button, input, textarea) { font: inherit; color: inherit; }
:where(.awd) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.awd) a { color: inherit; text-decoration: none; }
:where(.awd) img { display: block; }
.awd ::selection { background: var(--ink); color: #fff; }
.awd :focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
.awd [hidden] { display: none !important; }
.awd-i { flex: none; }

/* Section labels: mono, in brackets. */
.awd-nav__sec, .awd-tasks__row span:first-child { font-family: var(--code); }
.awd-nav__sec::before { content: "[ "; }
.awd-nav__sec::after { content: " ]"; }

/* ─────────────── Demo bar ─────────────── */
.awd-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 8px 0 16px; background: var(--ink); color: #fff; font-size: 13px; }
.awd-bar__msg { display: flex; align-items: center; gap: 12px; min-width: 0; }
.awd-bar__msg b { height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border: 1px solid #fff; font-family: var(--code); font-weight: 500; font-size: 11px; }
.awd-bar__msg span { color: #A3A3A3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awd-bar__go { display: flex; align-items: center; gap: 4px; flex: none; }
.awd-bar__link { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; color: #A3A3A3; font-weight: 500; transition: color var(--fast) var(--ease); }
.awd-bar__link:hover { color: #fff; }
.awd-bar__btn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; background: #fff; color: var(--ink); font-weight: 500; transition: transform var(--normal) var(--ease-spring), opacity var(--fast) var(--ease); }
.awd-bar__btn:hover { opacity: .88; }
.awd-bar__btn:active { transform: scale(.96); }

/* ─────────────── App frame: white edge to edge, a black rule splits the sidebar from the page ─────────────── */
.awd-app { display: flex; min-height: calc(100vh - 44px); }
.awd-side { position: sticky; top: 44px; flex: none; width: 220px; height: calc(100vh - 44px); display: flex; flex-direction: column; gap: 16px; padding: 0 8px 8px; background: var(--bg); border-right: 1px solid var(--frame); overflow-y: auto; }
.awd-main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.awd-main { flex: 1; padding: 24px 32px 64px; outline: 0; }
.awd-ws { display: flex; align-items: center; gap: 4px; height: 52px; margin: 0 -8px; padding: 0 8px; border-bottom: 1px solid var(--frame); }
.awd-ws__btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); transition: background var(--fast) var(--ease); }
.awd-ws__btn:hover { background: var(--bg-3); }
.awd-ws__btn > span:not(.awd-tile) { flex: 1; text-align: left; }
.awd-ws__btn .awd-i { color: var(--gray-2); }
.awd-side [data-side-close] { display: none; }
.awd-nav { display: flex; flex-direction: column; gap: 16px; }
.awd-nav__group { display: flex; flex-direction: column; gap: 1px; }
.awd-nav__sec { padding: 0 8px 4px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--gray-2); }
.awd-nav__link { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--gray); width: 100%; text-align: left; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.awd-nav__link:hover { color: var(--ink); background: var(--bg-3); }
.awd-nav__link.is-on, .awd-nav__link.is-on:hover { background: var(--ink); color: #fff; }
.awd-nav__link .awd-i { color: currentColor; }
.awd-side__foot { margin: auto -8px 0; padding: 8px 8px 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--frame); }
.awd-tasks { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg); text-align: left; transition: background var(--fast) var(--ease); }
.awd-tasks:hover { background: var(--bg-3); }
.awd-tasks__row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; }
.awd-tasks__row span:last-child { color: var(--gray); font-variant-numeric: tabular-nums; }
.awd-tasks__sub { font-size: 11px; color: var(--gray-2); }

/* ─────────────── Page head (sticky row) ─────────────── */
.awd-head { position: sticky; top: 44px; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px 8px 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.awd-head__menu { display: none !important; }
.awd-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.awd-title__g { color: var(--gray-2); }
.awd-title__sep { color: var(--gray-3); }
.awd-head__rule { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
.awd-head__f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.awd-head__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* ─────────────── Type and page title block ─────────────── */
.awd-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.awd-h1 { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.awd-ph__line { margin-top: 4px !important; color: var(--gray-2); font-size: 13px; }
.awd-ph__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.awd-h2 { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.025em; }
.awd-h3 { font-size: 13px; line-height: 20px; font-weight: 600; }
.awd-muted { color: var(--gray); }
.awd-small { font-size: 12px; line-height: 16px; }
.awd-num { font-variant-numeric: tabular-nums; }
.awd-stack { display: flex; flex-direction: column; gap: 24px; }
.awd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.awd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.awd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.awd-grid-6040 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }

/* ─────────────── Buttons and fields: square, 32px, a black frame ─────────────── */
.awd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid transparent; font-size: 12px; font-weight: 500; white-space: nowrap; transition: transform var(--normal) var(--ease-spring), background var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.awd-btn:active { transform: scale(.96); }
.awd-btn--primary { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.awd-btn--primary:hover { background: var(--ink-2); }
.awd-btn--secondary { background: var(--bg); border-color: var(--frame); color: var(--ink); }
.awd-btn--secondary:hover { background: var(--bg-3); }
.awd-btn--ghost { color: var(--gray); }
.awd-btn--ghost:hover { background: var(--bg-3); color: var(--ink); }
.awd-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.awd-btn:disabled { opacity: .4; pointer-events: none; }
.awd-iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; color: var(--gray); flex: none; transition: transform var(--normal) var(--ease-spring), background var(--fast) var(--ease); }
.awd-iconbtn:hover { background: var(--bg-3); color: var(--ink); }
.awd-iconbtn:active { transform: scale(.96); }
.awd-ctl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--frame); background: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background var(--fast) var(--ease); }
.awd-ctl:hover { background: var(--bg-3); }
.awd-ctl > .awd-i:last-child { color: var(--gray-2); }
.awd-input { height: 32px; width: 100%; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--bg); font-size: 13px; outline: 0; transition: border-color var(--fast) var(--ease); }
.awd-input:hover { border-color: var(--ink); }
.awd-input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.awd-input::placeholder { color: var(--gray-2); }
.awd-search { position: relative; display: flex; align-items: center; }
.awd-search > .awd-i { position: absolute; left: 12px; color: var(--gray-2); pointer-events: none; }
.awd-search .awd-input { padding-left: 36px; }
.awd textarea.awd-input { height: auto; padding: 8px 12px; resize: vertical; line-height: 20px; }

/* ─────────────── Tags: a square with a step 3 fill, step 11 text and a 1px frame in its color ─────────────── */
.awd-tag, .awd-delta { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border: 1px solid; font-size: 12px; font-weight: 500; white-space: nowrap; }
.awd-tag--gray, .awd-delta--flat { background: var(--bg-3); border-color: var(--line-strong); color: var(--gray); }
.awd-tag--green, .awd-delta--up { background: var(--green-bg); border-color: color-mix(in oklab, var(--green) 35%, var(--bg)); color: var(--green); }
.awd-tag--red, .awd-delta--down { background: var(--red-bg); border-color: color-mix(in oklab, var(--red) 35%, var(--bg)); color: var(--red); }
.awd-tag--orange { background: var(--orange-bg); border-color: color-mix(in oklab, var(--orange) 35%, var(--bg)); color: var(--orange); }
.awd-tag--blue { background: var(--signal-bg); border-color: color-mix(in oklab, var(--signal) 35%, var(--bg)); color: var(--signal-ink); }
.awd-tag--purple { background: var(--purple-bg); border-color: color-mix(in oklab, var(--purple) 35%, var(--bg)); color: var(--purple); }
.awd-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.awd-logo { width: 16px; height: 16px; flex: none; object-fit: cover; }
.awd-tile { width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; background: var(--c); color: #fff; font-size: calc(var(--s) * .52); font-weight: 600; line-height: 1; }
.awd-you { height: 18px; padding: 0 4px; display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--signal) 35%, var(--bg)); background: var(--signal-bg); color: var(--signal-ink); font-size: 11px; font-weight: 500; }
.awd-site span { overflow: hidden; text-overflow: ellipsis; }

.awd-meter { position: relative; display: inline-block; width: 100%; min-width: 48px; height: 4px; background: var(--bg-4); overflow: hidden; vertical-align: middle; }
.awd-meter i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.awd-dot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.awd-dot i { width: 8px; height: 8px; flex: none; }
.awd-pct { display: flex; align-items: center; gap: 12px; }
.awd-pct b { min-width: 34px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.awd-zip { flex: none; }

/* ─────────────── Cards, stats, tables: flat, a black frame outside, gray hairlines inside ─────────────── */
.awd-frame { background: var(--bg); border: 1px solid var(--frame); min-width: 0; }
.awd-frame__head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); }
.awd-frame__head h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.awd-frame__sub { color: var(--gray-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awd-frame__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.awd-frame__body { padding: 16px; }
.awd-frame__body--flush { padding: 0; }
.awd-frame__body--flush .awd-table-wrap { border: 0; }
.awd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--frame); }
.awd-stat { padding: 16px 20px; background: var(--bg); min-width: 0; }
.awd-stat__lab { font-size: 12px; font-weight: 500; color: var(--gray); margin-bottom: 8px !important; }
.awd-stat__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.awd-stat__num { font-size: 28px; line-height: 32px; font-weight: 400; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.awd-stat__sub { margin-top: 4px !important; font-size: 12px; color: var(--gray-2); }
.awd-table-wrap { overflow-x: auto; }
.awd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.awd-table th { height: 32px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--gray-2); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--bg); }
.awd-table td { height: 40px; padding: 8px; border-bottom: 1px solid var(--line-faint); vertical-align: middle; }
.awd-table :is(th, td):first-child { padding-left: 16px; }
.awd-table :is(th, td):last-child { padding-right: 16px; }
.awd-table tbody tr:last-child td { border-bottom: 0; }
.awd-table tbody tr:hover td { background: var(--bg-3); }
.awd-table tr.is-link { cursor: pointer; }
.awd-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.awd-table .c { text-align: center; }
.awd-table .w { width: 28%; min-width: 140px; }
.awd-table .muted { color: var(--gray); }
.awd-table .nowrap { white-space: nowrap; }
.awd-table .clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────── Switches: a black-framed row of square cells, the current one solid black ─────────────── */
.awd-seg { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--frame); background: var(--bg); }
.awd-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--gray); white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.awd-seg button + button { border-left: 1px solid var(--line); }
.awd-seg button:hover { color: var(--ink); background: var(--bg-3); }
.awd-seg button.is-on, .awd-seg button.is-on:hover { background: var(--ink); color: #fff; }

/* ─────────────── Chart ─────────────── */
.awd-chart { position: relative; height: var(--h); padding-bottom: 0; touch-action: pan-y; }
.awd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.awd-chart__grid { stroke: var(--line-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.awd-chart__x { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11px; color: var(--gray-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.awd-chart__x.is-start { transform: none; }
.awd-chart__x.is-end { transform: translateX(-100%); }
.awd-chart__line { position: absolute; top: 0; bottom: 18px; width: 1px; background: var(--ink); pointer-events: none; }
.awd-chart__tip { position: absolute; top: 4px; z-index: 2; min-width: 150px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); border: 1px solid var(--frame); font-size: 12px; pointer-events: none; }
.awd-chart__tip b { font-weight: 600; }
.awd-chart__tip span { display: flex; align-items: center; gap: 6px; color: var(--gray); }
.awd-chart__tip i { width: 8px; height: 8px; }
.awd-chart__tip em { margin-left: auto; font-style: normal; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.awd-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--gray); }
.awd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.awd-legend i { width: 8px; height: 8px; }
.awd-ring { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; }
.awd-ring svg { position: absolute; inset: 0; }
.awd-ring b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ─────────────── Empty, loader, agent steps ─────────────── */
.awd-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 64px 16px; text-align: center; }
.awd-empty__t { font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.awd-empty__x { color: var(--gray); margin-bottom: 12px !important; }
.awd-loader { display: inline-grid; grid-template-columns: 6px 6px; gap: 2px; width: 14px; height: 14px; flex: none; }
.awd-loader i { background: var(--ink); animation: awd-sq 1s infinite; }
.awd-loader i:nth-child(2) { animation-delay: .25s; } .awd-loader i:nth-child(4) { animation-delay: .5s; } .awd-loader i:nth-child(3) { animation-delay: .75s; }
@keyframes awd-sq { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.awd-run { padding: 16px; border: 1px solid var(--frame); background: var(--bg); }
.awd-run__who { display: flex; align-items: center; gap: 8px; margin-bottom: 12px !important; }
.awd-run__who span { color: var(--gray); }
.awd-run ol { display: flex; flex-direction: column; gap: 8px; }
.awd-run li { display: flex; align-items: center; gap: 12px; color: var(--gray-3); }
.awd-run li .awd-loader, .awd-run li > .awd-i { display: none; }
.awd-run li::before { content: ''; width: 14px; height: 14px; border: 1px solid var(--line-strong); flex: none; }
.awd-run li.is-on { color: var(--ink); }
.awd-run li.is-on::before { display: none; }
.awd-run li.is-on .awd-loader { display: inline-grid; }
.awd-run li.is-done { color: var(--gray); }
.awd-run li.is-done::before { display: none; }
.awd-run li.is-done > .awd-i { display: block; color: var(--green); }

/* ─────────────── Floating layer: flat, a black frame, no shadow ─────────────── */
.awd-layer { position: relative; z-index: 100; }
.awd-menu { position: fixed; z-index: 110; min-width: 200px; max-height: 360px; overflow-y: auto; padding: 4px; background: var(--bg); border: 1px solid var(--frame); animation: awd-pop var(--fast) var(--ease); }
.awd-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; font-size: 13px; text-align: left; color: var(--ink); white-space: nowrap; }
.awd-menu button:hover { background: var(--bg-3); }
.awd-menu button span { flex: 1; }
.awd-menu button.is-on { font-weight: 500; }
.awd-menu button > .awd-i:last-child { color: var(--ink); }
@keyframes awd-pop { from { opacity: 0; transform: translateY(-4px); } }
.awd-scrim { position: fixed; inset: 0; z-index: 100; background: #0A0A0A33; opacity: 0; transition: opacity var(--normal) var(--ease); }
.awd-scrim.is-in { opacity: 1; }
.awd-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(var(--w), 100vw); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--frame); transform: translateX(100%); transition: transform var(--slow) var(--ease); }
.awd-sheet.is-in { transform: none; }
.awd-sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 12px 16px 24px; border-bottom: 1px solid var(--line); }
.awd-sheet__head > div { flex: 1; min-width: 0; }
.awd-sheet__head h2 { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.025em; }
.awd-sheet__head p { margin-top: 4px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--gray); font-size: 12px; }
.awd-sheet__body { flex: 1; overflow-y: auto; padding: 24px; }
.awd-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: #0A0A0A40; opacity: 0; transition: opacity var(--normal) var(--ease); }
.awd-modal.is-in { opacity: 1; }
.awd-modal__box { width: min(440px, 100%); padding: 24px; background: var(--bg); border: 1px solid var(--frame); transform: scale(.97); transition: transform var(--slow) var(--ease); }
.awd-modal.is-in .awd-modal__box { transform: none; }
.awd-modal__box h2 { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.025em; }
.awd-modal__body { margin-top: 8px; color: var(--gray); }
.awd-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.awd-toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--frame); font-size: 13px; font-weight: 500; transform: translate(-50%, 12px); opacity: 0; transition: transform var(--normal) var(--ease), opacity var(--normal) var(--ease); }
.awd-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.awd-toast .awd-i { color: var(--green); }

/* ─────────────── Answers (markdown-like text) ─────────────── */
.awd-md { font-size: 13px; line-height: 22px; color: var(--ink); }
.awd-md > * + * { margin-top: 12px !important; }
.awd-md h3 { font-size: 15px; font-weight: 500; letter-spacing: -.015em; }
.awd-md ol { list-style: decimal; padding-left: 20px; }
.awd-md ul { list-style: square; padding-left: 20px; }
.awd-md li + li { margin-top: 4px; }
.awd-md mark { background: var(--signal-bg); color: var(--signal-ink); padding: 0 2px; font-weight: 500; }
.awd-cite { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; margin-left: 2px; vertical-align: 1px; border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--gray); font-size: 11px; font-weight: 500; white-space: nowrap; }
.awd-cite em { font-style: normal; color: var(--gray-2); }

/* ─────────────── Phones and tablets ─────────────── */
@media (max-width: 1100px) {
  .awd-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awd-grid-6040 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .awd-side { position: fixed; z-index: 60; top: 44px; left: 0; bottom: 0; height: auto; width: 280px; transform: translateX(-100%); visibility: hidden; transition: transform var(--slow) var(--ease), visibility 0s var(--slow); }
  .awd.is-menu .awd-side { transform: none; visibility: visible; transition: transform var(--slow) var(--ease); }
  .awd-side [data-side-close] { display: inline-grid; }
  .awd-head__menu { display: inline-grid !important; }
  .awd-head { padding: 8px 12px; flex-wrap: wrap; }
  .awd-head__rule { display: none; }
  .awd-head__f { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .awd-main { padding: 20px 16px 48px; }
  .awd-grid2, .awd-grid3 { grid-template-columns: minmax(0, 1fr); }
  .awd-bar__msg span, .awd-bar__link { display: none; }
}
@media (max-width: 520px) {
  .awd-h1 { font-size: 24px; line-height: 32px; }
  .awd-head__right .awd-btn span { display: none; }
  .awd-head__right .awd-btn { width: 32px; padding: 0; }
  .awd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awd-stat { padding: 12px 16px; }
  .awd-stat__num { font-size: 24px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .awd *, .awd *::before, .awd *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}