/* Air Router product page (air-router.html), rebuilt 2026-10-14 from the 14-section brief. * * This page draws its themes itself, like the AirCode CLI page (aircode-cli.css): * Night html[data-theme="dark"] Gateway: the live Final Dark look * Day html[data-theme="studio"] Gateway: the live Final Light look * Telemetry html[data-theme="studio"][data-final="telemetry"] the operations-console dark * Cloud html[data-theme="studio"][data-final="cloud"] the soft app-store light (see cloud.css) * Cloud Dark html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] Cloud on a charcoal ground (cloud-dark.css) * The file is linked (not inlined) and lives outside css/, so the generated Studio colour adapter * (tailwind/studio-colors.cjs) never rewrites it, and
keeps studio-icons.js and the * Telemetry layer off its sections. The header and footer are the shared site chrome. Every rule is * scoped under .ar and every class is ar-prefixed (studio-components.css and Tailwind already own * names like .btn, .card, .glass, .chip). Demos are in air-router.js. */ /* ── Tokens ─────────────────────────────────────────────────────────────────────────── */ .ar { --ar-display: var(--ft-display, 'Sora', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif); --ar-body: var(--ft-sans, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); --ar-mono: var(--ft-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); --ar-r: 16px; --ar-r-sm: 12px; --ar-r-btn: 999px; /* Night: Gateway Dark (the live Final Dark) */ --ar-bg: #050505; --ar-band: #0A0A0A; --ar-band-line: rgba(255,255,255,.07); --ar-surface: rgba(17,17,17,.62); --ar-surface-solid: #0E0E10; --ar-surface2: rgba(255,255,255,.03); --ar-line: rgba(255,255,255,.08); --ar-line2: rgba(255,255,255,.16); --ar-ink: #FFFFFF; --ar-ink2: #A3AAB6; --ar-ink3: #8A93A2; --ar-acc: #00F0FF; --ar-acc-soft: rgba(0,240,255,.08); --ar-grad: linear-gradient(90deg, #3B82F6 0%, #8A2BE2 50%, #00F0FF 100%); --ar-btn-bg: linear-gradient(90deg, #0055FF 0%, #8A2BE2 100%); --ar-btn-fg: #FFFFFF; --ar-btn-glow: 0 0 30px rgba(138,43,226,.3); --ar-btn2-bg: rgba(255,255,255,.06); --ar-btn2-fg: #FFFFFF; --ar-btn2-line: rgba(255,255,255,.2); --ar-glow-a: rgba(0,85,255,.16); --ar-glow-b: rgba(138,43,226,.16); --ar-glow-c: rgba(0,240,255,.06); --ar-shadow: 0 30px 60px -30px rgba(0,0,0,.85); --ar-focus: #00F0FF; --ar-t1: #22D3EE; --ar-t2: #60A5FA; --ar-t3: #C084FC; --ar-ok: #4ADE80; --ar-warn: #FBBF24; --ar-err: #F87171; --ar-dots: transparent; --ar-term-bg: #0A0C10; --ar-term-bar: #101319; --ar-term-line: rgba(255,255,255,.1); --ar-x-ink: #E6EDF3; --ar-x-dim: #8B949E; --ar-x-ok: #4ADE80; --ar-x-err: #F87171; --ar-x-warn: #FACC15; --ar-x-acc: #22D3EE; --ar-close-bg: #0A0A0A; --ar-close-ink: #FFFFFF; --ar-close-ink2: #A3AAB6; } html[data-theme="studio"] .ar { /* Day: Gateway Light (the live Final Light) */ --ar-bg: #FBFCFD; --ar-band: #EEF2F7; --ar-band-line: rgba(11,22,34,.11); --ar-surface: #FFFFFF; --ar-surface-solid: #FFFFFF; --ar-surface2: #F6F8FA; --ar-line: rgba(11,22,34,.11); --ar-line2: rgba(11,22,34,.2); --ar-ink: #0B1622; --ar-ink2: #2E3B4A; --ar-ink3: #4A5A6B; --ar-acc: #0C6A84; --ar-acc-soft: rgba(14,116,144,.08); --ar-grad: linear-gradient(90deg, #0E7490 0%, #1E40AF 100%); --ar-btn-bg: linear-gradient(90deg, #0E7490 0%, #1E40AF 100%); --ar-btn-fg: #FFFFFF; --ar-btn-glow: 0 10px 26px -14px rgba(14,116,144,.6); --ar-btn2-bg: #FFFFFF; --ar-btn2-fg: #0B1622; --ar-btn2-line: rgba(11,22,34,.2); --ar-glow-a: rgba(14,116,144,.07); --ar-glow-b: rgba(91,33,182,.06); --ar-glow-c: transparent; --ar-shadow: 0 1px 2px rgba(11,22,34,.06), 0 10px 26px -18px rgba(11,22,34,.45); --ar-focus: #155E75; --ar-t1: #0C6A84; --ar-t2: #1D4ED8; --ar-t3: #6D28D9; --ar-ok: #036B4E; --ar-warn: #92400E; --ar-err: #B42318; --ar-term-bg: #0B1622; --ar-term-bar: #111E2D; --ar-term-line: rgba(11,22,34,.22); --ar-close-bg: #0B1622; --ar-close-ink: #FFFFFF; --ar-close-ink2: #B8C2CF; } html[data-theme="studio"][data-final="telemetry"] .ar { /* Telemetry: the operations-console dark */ --ar-r: 8px; --ar-r-sm: 6px; --ar-r-btn: 6px; --ar-bg: #0B0C0E; --ar-band: #0B0C0E; --ar-band-line: #22262C; --ar-surface: #111316; --ar-surface-solid: #111316; --ar-surface2: #16191D; --ar-line: #22262C; --ar-line2: #353B44; --ar-ink: #ECEEF1; --ar-ink2: #A9B0BA; --ar-ink3: #8A929E; --ar-acc: var(--tm-accent); --ar-acc-soft: rgb(var(--tm-accent-rgb) / .08); --ar-grad: none; --ar-btn-bg: var(--tm-accent); --ar-btn-fg: var(--tm-accent-ink); --ar-btn-glow: none; --ar-btn2-bg: transparent; --ar-btn2-fg: #ECEEF1; --ar-btn2-line: #353B44; --ar-glow-a: transparent; --ar-glow-b: transparent; --ar-glow-c: transparent; --ar-shadow: none; --ar-focus: var(--tm-accent); --ar-t1: #4ADE80; --ar-t2: #38BDF8; --ar-t3: #C084FC; --ar-ok: #4ADE80; --ar-warn: #FBBF24; --ar-err: #F87171; --ar-dots: rgba(255,255,255,.07); --ar-term-bg: #08090B; --ar-term-bar: #0F1114; --ar-term-line: #22262C; --ar-x-acc: var(--tm-accent); --ar-close-bg: #111316; --ar-close-ink: #ECEEF1; --ar-close-ink2: #A9B0BA; } html[data-theme="studio"][data-final="cloud"] .ar { /* Cloud: the soft app-store light — grey-lavender ground, white cards, one action blue */ --ar-r: 24px; --ar-r-sm: 18px; --ar-r-btn: 16px; --ar-bg: #F4F5F9; --ar-band: #FAFBFD; --ar-band-line: rgba(24,27,38,.08); --ar-surface: #FFFFFF; --ar-surface-solid: #FFFFFF; --ar-surface2: #F7F8FB; --ar-line: rgba(24,27,38,.07); --ar-line2: rgba(24,27,38,.12); --ar-ink: #090A0D; --ar-ink2: #474A56; --ar-ink3: #5F6270; --ar-acc: #0060C4; --ar-acc-soft: rgba(10,132,255,.08); --ar-grad: none; --ar-btn-bg: #0071E3; --ar-btn-fg: #FFFFFF; --ar-btn-glow: 0 16px 34px rgba(10,132,255,.22); --ar-btn2-bg: #FFFFFF; --ar-btn2-fg: #090A0D; --ar-btn2-line: rgba(24,27,38,.1); --ar-glow-a: rgba(10,132,255,.08); --ar-glow-b: rgba(0,200,150,.06); --ar-glow-c: rgba(255,138,20,.05); --ar-shadow: 0 20px 55px rgba(70,72,105,.07); --ar-focus: #0071E3; --ar-t1: #0060C4; --ar-t2: #6633D6; --ar-t3: #B4127A; --ar-ok: #006B4F; --ar-warn: #954400; --ar-err: #C0102C; --ar-term-bg: #16171C; --ar-term-bar: #1D1E24; --ar-term-line: rgba(24,27,38,.2); --ar-close-bg: #FFFFFF; --ar-close-ink: #090A0D; --ar-close-ink2: #474A56; } html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ar { /* Cloud Dark: Cloud on Telemetry's charcoal lifted 10%; the glyph colours stay Cloud's */ --ar-bg: #232426; --ar-band: #27292C; --ar-band-line: rgba(255,255,255,.07); --ar-surface: #2C2E32; --ar-surface-solid: #2C2E32; --ar-surface2: #27292C; --ar-line: rgba(255,255,255,.07); --ar-line2: rgba(255,255,255,.14); --ar-ink: #FFFFFF; --ar-ink2: #CFD1D8; --ar-ink3: #B4B7C0; --ar-acc: #9CCBFF; --ar-acc-soft: rgba(10,132,255,.14); --ar-btn-bg: #0071E3; --ar-btn-fg: #FFFFFF; --ar-btn-glow: 0 16px 34px rgba(10,132,255,.3); --ar-btn2-bg: #36383D; --ar-btn2-fg: #FFFFFF; --ar-btn2-line: rgba(255,255,255,.1); --ar-glow-a: rgba(10,132,255,.12); --ar-glow-b: rgba(0,200,150,.08); --ar-glow-c: rgba(255,138,20,.06); --ar-shadow: 0 20px 55px rgba(0,0,0,.34); --ar-focus: #4DA3FF; --ar-t1: #9CCBFF; --ar-t2: #B3BCFF; --ar-t3: #FFC4E6; --ar-ok: #7EE2B8; --ar-warn: #FFCB7A; --ar-err: #FFADB5; --ar-term-bg: #17181B; --ar-term-bar: #1C1D20; --ar-term-line: rgba(255,255,255,.1); --ar-x-dim: #A3ABB6; --ar-x-err: #FF8F8F; --ar-close-bg: #27292C; --ar-close-ink: #FFFFFF; --ar-close-ink2: #CFD1D8; } /* ── Base ───────────────────────────────────────────────────────────────────────────── */ .ar { display: block; position: relative; color: var(--ar-ink); background-color: var(--ar-bg); font-family: var(--ar-body); font-size: 16px; line-height: 1.6; font-weight: 450; letter-spacing: -.005em; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-final="telemetry"] .ar { background-image: radial-gradient(var(--ar-dots) 1px, transparent 1.4px); background-size: 22px 22px; background-position: 11px 11px; } .ar *, .ar *::before, .ar *::after { box-sizing: border-box; } .ar :focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 3px; border-radius: 4px; } .ar a { color: inherit; } .ar button { font: inherit; color: inherit; } .ar ::selection { background: color-mix(in srgb, var(--ar-acc) 28%, transparent); } .ar [hidden] { display: none !important; } .ar .ar-ico { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ar .ar-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .ar .ar-mono { font-family: var(--ar-mono); } .ar .ar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ar svg { max-width: 100%; } /* ── Type & atoms ───────────────────────────────────────────────────────────────────── */ .ar .ar-headline, .ar h2, .ar h3, .ar h4 { font-family: var(--ar-display); margin: 0; text-wrap: balance; color: var(--ar-ink); } .ar .ar-headline { font-size: clamp(2.45rem, 5.8vw, 4.75rem); line-height: 1.03; font-weight: 700; letter-spacing: -.04em; } .ar h2 { font-size: clamp(1.95rem, 3.7vw, 3.15rem); line-height: 1.08; font-weight: 700; letter-spacing: -.032em; } .ar h3 { font-size: 1.04rem; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; } .ar p { margin: 0; text-wrap: pretty; } .ar .ar-g { color: var(--ar-acc); background: var(--ar-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ar .ar-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 5px 14px; border-radius: 999px; font-family: var(--ar-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-acc); border: 1px solid color-mix(in srgb, var(--ar-acc) 30%, transparent); background: color-mix(in srgb, var(--ar-acc) 10%, transparent); } .ar .ar-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: arLed 2s ease-out infinite; } .ar .ar-lede { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--ar-ink2); max-width: 60ch; line-height: 1.65; } .ar .ar-key { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--ar-display); font-size: clamp(1.05rem, 1.6vw, 1.22rem); font-weight: 600; letter-spacing: -.015em; color: var(--ar-ink); } .ar .ar-key::before { content: ""; width: 28px; height: 2px; flex: none; border-radius: 2px; background: var(--ar-grad), var(--ar-acc); } .ar .ar-note { font-size: 12.5px; line-height: 1.5; color: var(--ar-ink3); } .ar .ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: var(--ar-r-btn); font-weight: 650; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .18s ease, filter .2s ease, border-color .2s, background-color .2s; } .ar .ar-btn .ar-ico { font-size: 17px; } .ar .ar-btn-p { background: var(--ar-btn-bg); color: var(--ar-btn-fg); box-shadow: var(--ar-btn-glow); } .ar .ar-btn-p:hover { transform: translateY(-1px); filter: brightness(1.08); } .ar .ar-btn-s { background: var(--ar-btn2-bg); color: var(--ar-btn2-fg); border-color: var(--ar-btn2-line); } .ar .ar-btn-s:hover { border-color: var(--ar-acc); transform: translateY(-1px); } .ar .ar-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .ar .ar-card { background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: var(--ar-r); box-shadow: var(--ar-shadow); min-width: 0; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .ar .ar-chip { --tc: var(--ar-t1); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 32%, transparent); } .ar .ar-chip i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--tc); } .ar .ar-t1 { --tc: var(--ar-t1); } .ar .ar-t2 { --tc: var(--ar-t2); } .ar .ar-t3 { --tc: var(--ar-t3); } .ar .ar-tile { --h: var(--ar-acc); width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: var(--h); background: color-mix(in srgb, var(--h) 12%, transparent); border: 1px solid color-mix(in srgb, var(--h) 26%, transparent); } .ar .ar-h1 { --h: var(--ar-t1); } .ar .ar-h2 { --h: var(--ar-t2); } .ar .ar-h3 { --h: var(--ar-t3); } .ar .ar-hw { --h: var(--ar-warn); } .ar .ar-ha { --h: var(--ar-acc); } .ar .ar-hok { --h: var(--ar-ok); } .ar .ar-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-acc); background: var(--ar-acc-soft); border: 1px solid color-mix(in srgb, var(--ar-acc) 30%, transparent); } .ar .ar-badge .ar-ico { font-size: 13px; } .ar .ar-floaty { animation: arFloat 4.5s ease-in-out infinite; } @keyframes arFloat { 50% { transform: translateY(-4px); } } @keyframes arLed { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } @keyframes arFill { to { width: 100%; } } .ar .ar-replay { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer; border: 1px solid var(--ar-line2); background: transparent; color: var(--ar-ink3); font-family: var(--ar-mono); font-size: 11.5px; } .ar .ar-replay:hover { color: var(--ar-ink); border-color: var(--ar-ink3); } .ar .ar-tabs { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--ar-r-btn); border: 1px solid var(--ar-line); background: var(--ar-surface2); } .ar .ar-tab { border: 0; background: transparent; cursor: pointer; padding: 8px 15px; border-radius: var(--ar-r-btn); white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--ar-ink2); transition: background-color .2s, color .2s; } .ar .ar-tab:hover { color: var(--ar-ink); } .ar .ar-tab[aria-selected="true"] { background: var(--ar-ink); color: var(--ar-bg); } /* ── Section skeleton ───────────────────────────────────────────────────────────────── */ .ar .ar-sec { position: relative; padding-block: clamp(76px, 9vw, 128px); } .ar .ar-alt { background: var(--ar-band); border-block: 1px solid var(--ar-band-line); } html[data-theme="dark"] .ar .ar-alt { background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.022)); } .ar .ar-sx { display: grid; gap: clamp(30px, 4vw, 46px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "feats" "key"; } .ar .ar-sx > .ar-head { grid-area: head; min-width: 0; text-align: center; justify-self: center; max-width: 820px; } .ar .ar-sx > .ar-head .ar-lede { margin: 18px auto 0; } .ar .ar-sx > .ar-vis { grid-area: vis; min-width: 0; container-type: inline-size; position: relative; } .ar .ar-sx > .ar-feats { grid-area: feats; min-width: 0; } .ar .ar-sx > .ar-key { grid-area: key; justify-self: center; text-align: center; } .ar .ar-feats { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .ar .ar-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ar .ar-feat { display: flex; gap: 14px; align-items: flex-start; padding: 20px; min-width: 0; border-radius: var(--ar-r-sm); background: var(--ar-surface); border: 1px solid var(--ar-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .ar .ar-feat p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ar-ink2); } @media (min-width: 1024px) { .ar .ar-sx.ar-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head vis" "feats vis" "key vis"; column-gap: 64px; align-items: start; } .ar .ar-sx.ar-split.ar-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "vis head" "vis feats" "vis key"; } .ar .ar-sx.ar-split > .ar-head { text-align: left; justify-self: start; position: sticky; top: 112px; } .ar .ar-sx.ar-split > .ar-head .ar-lede { margin-left: 0; } .ar .ar-sx.ar-split > .ar-key { justify-self: start; text-align: left; } .ar .ar-sx.ar-split > .ar-feats { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ar .ar-sx.ar-split h2 { font-size: clamp(1.9rem, 2.6vw, 2.45rem); } } /* ── 1 · Hero + routing engine ─────────────────────────────────────────────────────── */ .ar .ar-hero { padding-block: calc(80px + clamp(44px, 6vw, 84px)) clamp(64px, 8vw, 112px); } .ar .ar-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(48% 40% at 22% 18%, var(--ar-glow-a), transparent 66%), radial-gradient(42% 42% at 80% 30%, var(--ar-glow-b), transparent 66%), radial-gradient(40% 30% at 50% 100%, var(--ar-glow-c), transparent 70%); } .ar .ar-hero > .ar-wrap { position: relative; z-index: 1; } .ar .ar-hero-copy { max-width: 920px; margin-inline: auto; text-align: center; min-width: 0; } .ar .ar-hero-copy .ar-lede { margin: 22px auto 0; max-width: 62ch; } .ar .ar-hero-copy .ar-ctas { margin-top: 30px; justify-content: center; } .ar .ar-hero-vis { margin-top: clamp(48px, 6vw, 76px); container-type: inline-size; min-width: 0; position: relative; } .ar .ar-rv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: clamp(18px, 3cqw, 34px); padding-top: clamp(32px, 3.6cqw, 42px); } @container (min-width: 760px) { .ar .ar-rv { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(56px, 8cqw, 104px); align-items: center; } } .ar .ar-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; } .ar .ar-rv-col, .ar .ar-engine { position: relative; z-index: 1; min-width: 0; } .ar .ar-lbl { margin: 0 0 12px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-rv-list { display: grid; gap: 10px; } .ar .ar-agent { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-width: 0; border-radius: var(--ar-r-sm); background: var(--ar-surface-solid); border: 1px solid var(--ar-line); font-size: 14px; font-weight: 650; transition: border-color .3s, box-shadow .3s, transform .3s; } .ar .ar-agent > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar .ar-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; font-size: 15px; border-radius: 8px; color: var(--ar-ink2); background: var(--ar-surface2); border: 1px solid var(--ar-line); } .ar .ar-agent.ar-dim { color: var(--ar-ink2); font-weight: 550; } .ar .ar-agent.on { border-color: color-mix(in srgb, var(--ar-acc) 60%, transparent); box-shadow: 0 0 0 3px var(--ar-acc-soft); transform: translateX(3px); } .ar .ar-agent.on .ar-av { color: var(--ar-acc); } .ar .ar-engine { padding: 20px; border-radius: calc(var(--ar-r) + 2px); background: var(--ar-surface-solid); border: 1px solid color-mix(in srgb, var(--ar-acc) 42%, var(--ar-line2)); box-shadow: 0 0 0 6px var(--ar-acc-soft), var(--ar-shadow); } html[data-theme="dark"] .ar .ar-engine { box-shadow: 0 0 0 6px rgba(0,240,255,.06), 0 0 60px -16px rgba(138,43,226,.55); } .ar .ar-eh { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ar .ar-eh b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ar-mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--ar-ink); } .ar .ar-eh small { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink3); } .ar .ar-core { position: relative; width: 30px; height: 30px; flex: none; } .ar .ar-core i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ar-acc); opacity: .9; } .ar .ar-core i:nth-child(2) { inset: 7px; border: 0; background: var(--ar-acc); } .ar .ar-core i:nth-child(3) { inset: -4px; opacity: 0; animation: arRing 2.4s ease-out infinite; } @keyframes arRing { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } } .ar .ar-task { margin-top: 16px; font-family: var(--ar-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-task b { display: block; min-height: 1.4em; margin-top: 4px; font-family: var(--ar-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.015em; text-transform: none; color: var(--ar-ink); } .ar .ar-stages { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .ar .ar-stages li { position: relative; overflow: hidden; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-ink3); transition: color .25s, border-color .25s; } .ar .ar-stages .n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ar-line2); font-size: 10.5px; letter-spacing: 0; } .ar .ar-stages li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ar-acc); } .ar .ar-stages li.on { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-acc) 45%, transparent); } .ar .ar-stages li.on::after { animation: arFill .42s linear forwards; } .ar .ar-stages li.on .n { border-color: var(--ar-acc); color: var(--ar-acc); } .ar .ar-stages li.done { color: var(--ar-ink2); } .ar .ar-stages li.done::after { width: 100%; opacity: .35; } .ar .ar-stages li.done .n { background: var(--ar-acc); border-color: var(--ar-acc); color: var(--ar-bg); } .ar .ar-out { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--ar-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-tier { --tc: var(--ar-t1); min-width: 0; padding: 13px 15px; border-radius: var(--ar-r-sm); background: var(--ar-surface-solid); border: 1px solid var(--ar-line); transition: border-color .3s, box-shadow .3s, background-color .3s; } .ar .ar-tier .tn { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; } .ar .ar-tier .tn i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent); } .ar .ar-tier .td { margin-top: 3px; font-size: 12.5px; color: var(--ar-ink3); } .ar .ar-tier .hit { display: block; min-height: 1.5em; margin-top: 8px; font-family: var(--ar-mono); font-size: 11.5px; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s; } .ar .ar-tier.on { border-color: color-mix(in srgb, var(--tc) 62%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 15%, transparent); background: color-mix(in srgb, var(--tc) 7%, var(--ar-surface-solid)); } .ar .ar-tier.on .hit, .ar .ar-tier.kept .hit { opacity: 1; transform: none; } .ar .ar-status { position: absolute; top: 0; right: clamp(16px, 3cqw, 30px); z-index: 2; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; white-space: nowrap; border-radius: 999px; background: var(--ar-surface-solid); border: 1px solid var(--ar-line2); font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; color: var(--ar-ink2); } .ar .ar-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-ok); color: var(--ar-ok); animation: arLed 2s ease-out infinite; } /* wires and packets, shared by the hero and the hybrid diagram */ .ar .ar-w { fill: none; stroke-linecap: round; } .ar .ar-w-in { stroke: var(--ar-line2); stroke-width: 1.4; stroke-dasharray: 3 5; } .ar .ar-w-out { stroke: color-mix(in srgb, var(--tc) 40%, transparent); stroke-width: 1.6; stroke-dasharray: 3 5; } .ar .ar-w-live { stroke: var(--tc, var(--ar-acc)); stroke-width: 2.2; opacity: 0; } .ar .ar-w-live.go { opacity: 1; } .ar .ar-w-down { stroke: var(--ar-err) !important; opacity: .55; } .ar .ar-pk { fill: var(--tc, var(--ar-acc)); } .ar .ar-pk-halo { fill: var(--tc, var(--ar-acc)); opacity: .22; } @container (max-width: 759px) { .ar .ar-rv-agents .ar-rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar .ar-rv-tiers .ar-rv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ar .ar-tier { padding: 11px 10px; } .ar .ar-tier .td { display: none; } .ar .ar-tier .tn { gap: 7px; font-size: 13px; } .ar .ar-tier .hit { white-space: normal; font-size: 10.5px; } .ar .ar-rv .ar-lbl { text-align: center; } } @container (max-width: 420px) { .ar .ar-tier .tn b span { display: none; } } @container (max-width: 759px) { .ar .ar-rv-agents .ar-agent.ar-dim { grid-column: 1 / -1; } } /* ── 2 · Agent-step timeline ───────────────────────────────────────────────────────── */ .ar .ar-flow { position: relative; padding: clamp(16px, 2.6cqw, 28px); } .ar .ar-flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .ar .ar-flow-req { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .ar .ar-flow-req .k { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-flow-req b { font-family: var(--ar-display); font-size: clamp(1.1rem, 2.4cqw, 1.45rem); font-weight: 600; letter-spacing: -.02em; } .ar .ar-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 520px) { .ar .ar-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (min-width: 900px) { .ar .ar-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ar .ar-st { --tc: var(--ar-t1); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); transition: border-color .3s, box-shadow .3s, transform .3s; } .ar .ar-st-n { display: flex; justify-content: space-between; gap: 8px; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink3); } .ar .ar-st-n .s { text-transform: uppercase; letter-spacing: .08em; } .ar .ar-st-name { min-height: 2.7em; font-size: 14px; font-weight: 650; line-height: 1.35; } .ar .ar-st-bar { height: 3px; margin-top: auto; border-radius: 3px; background: var(--ar-line); overflow: hidden; } .ar .ar-st-bar i { display: block; width: 0; height: 100%; background: var(--tc); } .ar .ar-st.done .ar-st-bar i { width: 100%; } .ar .ar-st.on .ar-st-bar i { animation: arFill 1.3s linear forwards; } .ar .ar-st.on { border-color: color-mix(in srgb, var(--tc) 58%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 14%, transparent); transform: translateY(-2px); } .ar .ar-st.on .ar-st-n .s { color: var(--tc); } .ar .ar-st.done .ar-st-n .s { color: var(--ar-ok); } .ar .ar-flow-foot { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; } .ar .ar-tally { display: flex; flex-wrap: wrap; gap: 8px; } @container (max-width: 519px) { .ar .ar-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px; } .ar .ar-st-n, .ar .ar-st-bar { grid-column: 1 / -1; } .ar .ar-st-name { min-height: 0; } } /* ── 3 · Loop protection ───────────────────────────────────────────────────────────── */ .ar .ar-loopv { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 880px) { .ar .ar-loopv { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } } .ar .ar-term { min-width: 0; overflow: hidden; color: var(--ar-x-ink); background: var(--ar-term-bg); border: 1px solid var(--ar-term-line); border-radius: var(--ar-r); box-shadow: var(--ar-shadow); } .ar .ar-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 14px; background: var(--ar-term-bar); border-bottom: 1px solid var(--ar-term-line); } .ar .ar-dots { display: flex; gap: 7px; flex: none; } .ar .ar-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; } .ar .ar-dots i:nth-child(2) { background: #FEBC2E; } .ar .ar-dots i:nth-child(3) { background: #28C840; } .ar .ar-title { flex: 1; min-width: 0; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-x-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .ar .ar-term .ar-replay { height: 26px; border-color: var(--ar-term-line); color: var(--ar-x-dim); } .ar .ar-term .ar-replay:hover { color: var(--ar-x-ink); border-color: var(--ar-x-dim); } .ar .ar-tbody { min-height: 372px; padding: 16px 18px 18px; font-family: var(--ar-mono); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; } .ar .ar-tbody .ln { display: block; min-height: 1.75em; white-space: pre-wrap; } .ar .ar-tbody .ln.in { animation: arLnIn .3s ease both; } @keyframes arLnIn { from { opacity: 0; transform: translateY(3px); } } .ar .c-dim { color: var(--ar-x-dim); } .ar .c-ok { color: var(--ar-x-ok); } .ar .c-err { color: var(--ar-x-err); } .ar .c-warn { color: var(--ar-x-warn); } .ar .c-acc { color: var(--ar-x-acc); } .ar .ar-tbody .tag { padding: 0 .5em; border-radius: 4px; font-size: .86em; color: var(--ar-x-warn); background: color-mix(in srgb, var(--ar-x-warn) 12%, transparent); } .ar .ar-alert { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 7px 12px; border-radius: 8px; border: 1px solid; font-weight: 600; white-space: normal; } .ar .ar-alert .ar-ico { font-size: 15px; } .ar .ar-alert.warn { color: var(--ar-x-warn); border-color: color-mix(in srgb, var(--ar-x-warn) 40%, transparent); background: color-mix(in srgb, var(--ar-x-warn) 9%, transparent); } .ar .ar-alert.redir { color: var(--ar-x-acc); border-color: color-mix(in srgb, var(--ar-x-acc) 40%, transparent); background: color-mix(in srgb, var(--ar-x-acc) 8%, transparent); } .ar .ar-alert.stop { color: var(--ar-x-err); border-color: color-mix(in srgb, var(--ar-x-err) 45%, transparent); background: color-mix(in srgb, var(--ar-x-err) 9%, transparent); } .ar .ar-alert.in.warn { animation: arLnIn .3s ease both, arWarn 1.4s ease-in-out .3s 2; } @keyframes arWarn { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-x-warn) 16%, transparent); } } .ar .ar-guard { display: flex; flex-direction: column; gap: 18px; padding: 20px; } .ar .ar-guard-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ar .ar-guard-h h3, .ar .ar-panel-h { font-family: var(--ar-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-state { padding: 3px 9px; border-radius: 999px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-ink2); border: 1px solid var(--ar-line2); transition: color .3s, border-color .3s, background-color .3s; } .ar .ar-state[data-s="warn"] { color: var(--ar-warn); border-color: color-mix(in srgb, var(--ar-warn) 45%, transparent); background: color-mix(in srgb, var(--ar-warn) 9%, transparent); } .ar .ar-state[data-s="redir"] { color: var(--ar-acc); border-color: color-mix(in srgb, var(--ar-acc) 45%, transparent); background: var(--ar-acc-soft); } .ar .ar-state[data-s="stop"] { color: var(--ar-ok); border-color: color-mix(in srgb, var(--ar-ok) 45%, transparent); background: color-mix(in srgb, var(--ar-ok) 9%, transparent); } .ar .ar-reps-l { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--ar-ink2); } .ar .ar-reps-l b { font-family: var(--ar-mono); font-variant-numeric: tabular-nums; color: var(--ar-ink); } .ar .ar-reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ar .ar-reps i { height: 8px; border-radius: 4px; background: var(--ar-surface2); border: 1px solid var(--ar-line2); transition: background-color .3s, border-color .3s; } .ar .ar-reps i.on { background: var(--ar-warn); border-color: var(--ar-warn); } .ar .ar-reps i.on.max { background: var(--ar-err); border-color: var(--ar-err); } .ar .ar-gflow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ar .ar-gflow li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); font-size: 14px; font-weight: 600; color: var(--ar-ink3); transition: color .3s, border-color .3s; } .ar .ar-gflow li .ar-ico { font-size: 16px; } .ar .ar-gflow li.on { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-acc) 45%, transparent); } .ar .ar-gflow li.on .ar-ico { color: var(--ar-acc); } .ar .ar-gres { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ar-line2); font-size: 13.5px; color: var(--ar-ink3); transition: color .3s; } .ar .ar-gres .ar-ico { font-size: 16px; } .ar .ar-gres.on { color: var(--ar-ok); font-weight: 600; } /* ── 4 · Cache-aware cost ──────────────────────────────────────────────────────────── */ .ar .ar-cache { display: grid; gap: 16px; } .ar .ar-seg { position: relative; display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; justify-self: start; border-radius: var(--ar-r-btn); border: 1px solid var(--ar-line2); background: var(--ar-surface-solid); } .ar .ar-seg button { position: relative; z-index: 1; padding: 10px 16px; border: 0; border-radius: var(--ar-r-btn); background: transparent; cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--ar-ink2); transition: color .25s; } .ar .ar-seg button[aria-checked="true"] { color: var(--ar-bg); } .ar .ar-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--ar-r-btn); background: var(--ar-ink); transition: transform .38s cubic-bezier(.3,.7,.2,1), width .38s cubic-bezier(.3,.7,.2,1); } .ar .ar-cgrid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 600px) { .ar .ar-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ar .ar-scn { position: relative; display: flex; flex-direction: column; padding: 20px; transition: border-color .35s, box-shadow .35s, opacity .35s; } .ar .ar-sk { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-scn h3 { margin-top: 4px; font-size: 1.12rem; } .ar .ar-mr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--ar-mono); font-size: 12px; } .ar .ar-mr span { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--ar-line2); background: var(--ar-surface2); } .ar .ar-mr .ar-ico { color: var(--ar-ink3); } .ar .ar-scn ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ar-ink2); } .ar .ar-scn li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; } .ar .ar-scn li .ar-ico { margin-top: 2px; font-size: 15px; } .ar .ar-scn li.good .ar-ico { color: var(--ar-ok); } .ar .ar-scn li.bad .ar-ico { color: var(--ar-warn); } .ar .ar-meter { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ar-line2); } .ar .ar-scn ul + .ar-meter { margin-top: 18px; } .ar .ar-meter-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink3); } .ar .ar-meter-l b { font-family: var(--ar-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; color: var(--ar-ink); font-variant-numeric: tabular-nums; } .ar .ar-meter-l b small { font-family: var(--ar-mono); font-size: 12px; font-weight: 500; color: var(--ar-ink3); letter-spacing: 0; } .ar .ar-track { display: flex; height: 12px; margin-top: 10px; overflow: hidden; border-radius: 6px; background: var(--ar-surface2); border: 1px solid var(--ar-line); } .ar .ar-track i { display: block; height: 100%; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); } .ar .ar-fresh { background: color-mix(in srgb, var(--ar-warn) 75%, transparent); } .ar .ar-cached { background: color-mix(in srgb, var(--ar-t1) 72%, transparent); } .ar .ar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink3); } .ar .ar-legend span { display: inline-flex; align-items: center; gap: 6px; } .ar .ar-legend i { width: 9px; height: 9px; border-radius: 3px; } .ar .ar-pick { position: absolute; top: 16px; right: 16px; opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; } .ar .ar-scn.sel .ar-pick { opacity: 1; transform: none; } .ar .ar-scn.sel { border-color: color-mix(in srgb, var(--ar-acc) 62%, transparent); box-shadow: 0 0 0 4px var(--ar-acc-soft), var(--ar-shadow); } .ar .ar-scn:not(.sel) { box-shadow: none; } .ar .ar-scn:not(.sel) .ar-track, .ar .ar-scn:not(.sel) .ar-legend i, .ar .ar-scn:not(.sel) .ar-mr .ar-ico { opacity: .5; } .ar .ar-out-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-radius: var(--ar-r-sm); border: 1px dashed var(--ar-line2); font-size: 14px; color: var(--ar-ink2); } .ar .ar-out-row b { color: var(--ar-ink); } .ar .ar-out-row .big { font-family: var(--ar-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; } /* ── 5 · Complexity: context size vs task difficulty ───────────────────────────────── */ .ar .ar-cx { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 900px) { .ar .ar-cx { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } } .ar .ar-reqs { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 560px) { .ar .ar-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ar .ar-req { display: flex; flex-direction: column; gap: 16px; padding: 20px; cursor: pointer; text-align: left; color: var(--ar-ink); transition: border-color .3s, box-shadow .3s; } .ar .ar-req.sel { border-color: color-mix(in srgb, var(--ar-acc) 55%, transparent); box-shadow: 0 0 0 3px var(--ar-acc-soft), var(--ar-shadow); } .ar .ar-req-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ar .ar-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ar-ink3); } .ar .ar-kv b { font-family: var(--ar-mono); font-size: 13px; font-weight: 600; color: var(--ar-ink); font-variant-numeric: tabular-nums; } .ar .ar-req-task { font-family: var(--ar-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; min-height: 2.6em; } .ar .ar-ctrack { height: 10px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: var(--ar-surface2); border: 1px solid var(--ar-line); } .ar .ar-ctrack i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--ar-t2) 55%, transparent), var(--ar-t2)); transition: width 1s cubic-bezier(.2,.8,.2,1); } .ar .ar-ctrack.zero i { width: 0; } .ar .ar-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 8px; } .ar .ar-segs i { height: 10px; border-radius: 3px; background: var(--ar-surface2); border: 1px solid var(--ar-line2); transition: background-color .25s, border-color .25s; } .ar .ar-segs i.on { background: var(--lv); border-color: var(--lv); } .ar .ar-req-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ar-line2); font-size: 13px; color: var(--ar-ink3); } .ar .ar-req-out .ar-chip { transition: opacity .3s, transform .3s; } .ar .ar-req-out .ar-chip.hide { opacity: 0; transform: translateY(3px); } .ar .ar-mbox { display: flex; flex-direction: column; gap: 16px; padding: 20px; } .ar .ar-mbox-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .ar .ar-mbox .ar-tab { padding: 6px 12px; font-size: 13px; } .ar .ar-sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ar .ar-sig li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; font-size: 14px; font-weight: 600; } .ar .ar-sig li span { font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lv, var(--ar-ink3)); } .ar .ar-sig .ar-sbar { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ar-surface2); border: 1px solid var(--ar-line); } .ar .ar-sig .ar-sbar i { display: block; height: 100%; width: var(--w, 0%); background: var(--lv, var(--ar-acc)); border-radius: 4px; transition: width .7s cubic-bezier(.2,.8,.2,1), background-color .3s; } .ar .ar-mbox-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ar-line2); font-size: 14px; color: var(--ar-ink2); } .ar .ar-mbox-out b { color: var(--ar-ink); } .ar .lv-lo { --lv: var(--ar-ok); } .ar .lv-mid { --lv: var(--ar-t2); } .ar .lv-hi { --lv: var(--ar-t3); } /* ── 6 · Tier ladder ───────────────────────────────────────────────────────────────── */ .ar .ar-ldr { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 640px) { .ar .ar-ldr { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } } .ar .ar-ladder { display: grid; gap: 10px; align-content: start; padding: 18px; } .ar .ar-ld-ev { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 2.2em; padding: 2px 4px 6px; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink3); } .ar .ar-ld-ev b { color: var(--ar-ink); font-weight: 600; } .ar .ar-rung { --tc: var(--ar-t1); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); transition: border-color .35s, box-shadow .35s, opacity .35s, background-color .35s; } .ar .ar-rung .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 16%, transparent); } .ar .ar-rung .rk { display: block; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-rung b { font-family: var(--ar-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .ar .ar-rung .rt { display: inline-flex; align-items: center; gap: 8px; } .ar .ar-rung .lk, .ar .ar-rung .tk { display: none; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; } .ar .ar-rung .tk { color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); } .ar .ar-rung .lk { color: var(--ar-ink2); border: 1px solid var(--ar-line2); } .ar .ar-rung.cur { border-color: color-mix(in srgb, var(--tc) 62%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 14%, transparent); background: color-mix(in srgb, var(--tc) 7%, var(--ar-surface-solid)); } .ar .ar-rung.cur .tk, .ar .ar-rung.floor .lk { display: inline-flex; } .ar .ar-rung.cur.floor .tk { display: none; } .ar .ar-rung.below { background: transparent; border-style: dashed; } .ar .ar-rung.below b { color: var(--ar-ink3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ar-ink3) 60%, transparent); } .ar .ar-rung.below .dot { background: var(--ar-line2); box-shadow: none; } .ar .ar-ld-down { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: var(--ar-r-sm); border: 1px dashed var(--ar-line2); font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink3); transition: color .3s, border-color .3s; } .ar .ar-ld-down .na { position: relative; display: inline-grid; place-items: center; font-size: 16px; } .ar .ar-ld-down .na::after { content: ""; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); } .ar .ar-ld-down.on { color: var(--ar-err); border-color: color-mix(in srgb, var(--ar-err) 45%, transparent); } .ar .ar-ld-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; } .ar .ar-ld-log li { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface); transition: opacity .35s, border-color .35s; } .ar .ar-ld-log li p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ar-ink2); } .ar .ar-ld-log li:not(.on) h3 { color: var(--ar-ink3); } .ar .ar-ld-log li:not(.on) .ar-tile { opacity: .45; } .ar .ar-ld-log li.on { border-color: color-mix(in srgb, var(--ar-acc) 45%, transparent); } /* ── 7 · Context optimization: before / after stacks ───────────────────────────────── */ .ar .ar-ctxv { padding: clamp(16px, 2.6cqw, 26px); } .ar .ar-ctxv-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .ar .ar-stacks { --px: 2.4px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } @container (min-width: 720px) { .ar .ar-stacks { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: 22px; } } .ar .ar-scol { min-width: 0; display: flex; flex-direction: column; } .ar .ar-scol .ar-lbl { margin-bottom: 10px; } .ar .ar-stack { position: relative; display: flex; flex-direction: column; gap: 6px; } .ar .ar-blk { --bc: var(--ar-ink3); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; padding: 0 12px; overflow: hidden; height: calc(var(--k) * var(--px) + 22px); border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ar-ink); background: color-mix(in srgb, var(--bc) 13%, var(--ar-surface-solid)); border: 1px solid color-mix(in srgb, var(--bc) 38%, transparent); transition: height .7s cubic-bezier(.3,.7,.2,1), opacity .5s ease, margin .7s cubic-bezier(.3,.7,.2,1), border-width .7s, background-color .4s, border-color .4s; } .ar .ar-blk > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar .ar-blk b { flex: none; font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; color: var(--ar-ink2); } .ar .ar-blk.sys { --bc: var(--ar-ink3); } .ar .ar-blk.repo { --bc: var(--ar-t2); } .ar .ar-blk.tool { --bc: var(--ar-t3); } .ar .ar-blk.user { --bc: var(--ar-acc); } .ar .ar-blk.dup { --bc: var(--ar-warn); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ar-warn) 14%, transparent) 0 6px, transparent 6px 12px); } .ar .ar-blk.dup.flag { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-warn) 22%, transparent); } .ar .ar-blk.gone { height: 0; opacity: 0; margin-top: -6px; border-width: 0; } /* Narrow cards (phones). After the base rules on purpose: at equal specificity the base `nowrap` above used to win, so every label was cut to "Repository …". Three lines fit every label in its block at the 1.5px scale. */ @container (max-width: 520px) { .ar .ar-stacks { --px: 1.5px; gap: 10px; } .ar .ar-blk { padding: 0 8px; font-size: 11px; } .ar .ar-blk > span:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.15; } .ar .ar-blk b { font-size: 10.5px; } } .ar .ar-stack-after { outline: 1px dashed transparent; } .ar .ar-stot { margin-top: 12px; font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink3); } .ar .ar-stot b { font-family: var(--ar-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--ar-ink); font-variant-numeric: tabular-nums; } .ar .ar-smid { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; align-self: center; text-align: center; } @container (min-width: 720px) { .ar .ar-smid { display: flex; } } .ar .ar-smid .ar-arrowline { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--ar-acc)); position: relative; } .ar .ar-smid .ar-arrowline::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--ar-acc); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .ar .ar-metric { font-family: var(--ar-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .ar .ar-metric small { display: block; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-metric-m { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ar-line2); } @container (min-width: 720px) { .ar .ar-metric-m .ar-metric { display: none; } } /* ── 8 · Hybrid GPU + cloud ────────────────────────────────────────────────────────── */ .ar .ar-hy { position: relative; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); padding: clamp(18px, 3cqw, 32px); } @container (min-width: 780px) { .ar .ar-hy { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 7cqw, 92px); align-items: center; } } .ar .ar-hy > :not(svg) { position: relative; z-index: 1; min-width: 0; } .ar .ar-hy-src { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--ar-r-sm); background: var(--ar-surface-solid); border: 1px solid var(--ar-line2); } .ar .ar-hy-src .ar-req-task { min-height: 0; font-size: 1.05rem; } .ar .ar-hy-hub { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; text-align: center; border-radius: calc(var(--ar-r) + 2px); background: var(--ar-surface-solid); border: 1px solid color-mix(in srgb, var(--ar-acc) 42%, var(--ar-line2)); box-shadow: 0 0 0 6px var(--ar-acc-soft); } .ar .ar-hy-hub b { font-family: var(--ar-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; } .ar .ar-hy-dec { min-height: 2.6em; font-size: 12.5px; line-height: 1.35; color: var(--ar-ink2); } .ar .ar-hy-dst { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 520px) and (max-width: 779px) { .ar .ar-hy-dst { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ar .ar-pool { --pc: var(--ar-t1); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--ar-r-sm); background: var(--ar-surface-solid); border: 1px solid var(--ar-line); transition: border-color .35s, box-shadow .35s, opacity .35s; } .ar .ar-pool.cloud { --pc: var(--ar-t3); } .ar .ar-pool-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ar .ar-pool-h h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; } .ar .ar-pool-h h3 .ar-ico { color: var(--pc); font-size: 18px; } .ar .ar-pst { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ar-ok); border: 1px solid color-mix(in srgb, var(--ar-ok) 40%, transparent); background: color-mix(in srgb, var(--ar-ok) 9%, transparent); } .ar .ar-pst::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ar .ar-pool ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13.5px; color: var(--ar-ink2); } .ar .ar-pool li { display: flex; gap: 8px; align-items: baseline; } .ar .ar-pool li::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--pc); transform: translateY(-2px); } .ar .ar-pool.on { border-color: color-mix(in srgb, var(--pc) 62%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 15%, transparent); } .ar .ar-pool.on .ar-pst { color: var(--pc); border-color: color-mix(in srgb, var(--pc) 45%, transparent); background: color-mix(in srgb, var(--pc) 10%, transparent); } .ar .ar-pool.down { border-color: color-mix(in srgb, var(--ar-err) 50%, transparent); border-style: dashed; } .ar .ar-pool.down h3 .ar-ico { color: var(--ar-ink3); } .ar .ar-pool.down .ar-pst { color: var(--ar-err); border-color: color-mix(in srgb, var(--ar-err) 45%, transparent); background: color-mix(in srgb, var(--ar-err) 9%, transparent); } .ar .ar-hy-log { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 2.6em; padding: 10px 14px; border-radius: var(--ar-r-sm); border: 1px dashed var(--ar-line2); font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink2); } .ar .ar-hy-log i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lc, var(--ar-ok)); } /* ── 9 · Effective-cost dashboard ──────────────────────────────────────────────────── */ .ar .ar-dash { padding: clamp(16px, 2.6cqw, 24px); } .ar .ar-dash-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .ar .ar-dscroll { overflow-x: auto; } .ar .ar-dtab { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .ar .ar-dtab col.m { width: 31%; } .ar .ar-dtab th, .ar .ar-dtab td { padding: 13px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ar-line); font-size: 14px; } .ar .ar-dtab thead th { padding-block: 12px; font-family: var(--ar-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-dtab tbody th { font-weight: 600; color: var(--ar-ink2); font-size: 13.5px; } .ar .ar-dtab tbody tr:last-child > * { border-bottom: 0; } .ar .ar-dtab td { color: var(--ar-ink); font-weight: 600; transition: background-color .35s, opacity .35s; } .ar .ar-dtab .ar-col-b { position: relative; } .ar .ar-dtab.decided .ar-col-b { background: var(--ar-acc-soft); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ar-acc) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--ar-acc) 45%, transparent); } .ar .ar-dtab.decided thead .ar-col-b { color: var(--ar-acc); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ar-acc) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--ar-acc) 45%, transparent), inset 0 2px 0 var(--ar-acc); } .ar .ar-dtab .scan { background: color-mix(in srgb, var(--ar-ink) 5%, transparent); } .ar .ar-dtab tbody tr { transition: opacity .3s; } .ar .ar-dtab tbody tr.wait td { opacity: .25; } .ar .ar-pips { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: 1px; } .ar .ar-pips i { width: 6px; height: 12px; border-radius: 2px; background: var(--ar-line2); } .ar .ar-pips[data-l="1"] i:nth-child(-n+1), .ar .ar-pips[data-l="2"] i:nth-child(-n+2), .ar .ar-pips[data-l="3"] i:nth-child(-n+3) { background: var(--ar-ink3); } .ar .ar-cs { display: inline-flex; align-items: center; gap: 6px; } .ar .ar-cs::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .ar .ar-cs.cold { --c: var(--ar-t2); } .ar .ar-cs.warm { --c: var(--ar-warn); } .ar .ar-yes { display: inline-flex; align-items: center; gap: 6px; } .ar .ar-yes .ar-ico { color: var(--ar-ok); font-size: 16px; } .ar .ar-eff { display: grid; gap: 6px; } .ar .ar-eff i { display: block; height: 6px; border-radius: 3px; width: var(--w); background: var(--c, var(--ar-ink3)); transition: width .8s cubic-bezier(.2,.8,.2,1); } .ar .ar-dtab:not(.costed) .ar-eff i { width: 0; } .ar .ar-eff.lo { --c: var(--ar-ok); } .ar .ar-eff.mid { --c: var(--ar-warn); } .ar .ar-eff.hi { --c: var(--ar-err); } .ar .ar-selb { display: none; margin-left: 6px; } .ar .ar-dtab.decided .ar-selb { display: inline-flex; } .ar .ar-dash-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--ar-r-sm); border: 1px dashed var(--ar-line2); font-size: 14px; color: var(--ar-ink2); transition: border-color .35s, color .35s; } .ar .ar-dash-out .ar-ico { color: var(--ar-ok); font-size: 17px; } .ar .ar-dash-out b { color: var(--ar-ink); } @container (max-width: 520px) { .ar .ar-pips { display: none; } .ar .ar-dtab th, .ar .ar-dtab td { padding: 11px 7px; font-size: 12.5px; } .ar .ar-dtab thead th { font-size: 10px; letter-spacing: .04em; } .ar .ar-selb { display: none !important; } } /* ── 10 · Self-recovering execution ────────────────────────────────────────────────── */ .ar .ar-recv { display: grid; gap: 18px; padding: clamp(16px, 2.6cqw, 26px); } .ar .ar-pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); counter-reset: none; } @container (min-width: 760px) { .ar .ar-pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } } .ar .ar-ps { --sc: var(--ar-ink3); position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); font-size: 13.5px; font-weight: 650; color: var(--ar-ink2); transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s; } .ar .ar-ps .ar-ico { font-size: 17px; color: var(--sc); transition: color .3s; } .ar .ar-ps small { display: block; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ar-ink3); } @container (min-width: 760px) { .ar .ar-ps { flex-direction: column; align-items: flex-start; margin-right: 22px; } .ar .ar-ps:last-child { margin-right: 0; } .ar .ar-ps:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -18px; width: 14px; height: 2px; background: var(--ar-line2); } } .ar .ar-ps.on { --sc: var(--ar-acc); color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-acc) 55%, transparent); box-shadow: 0 0 0 3px var(--ar-acc-soft); } .ar .ar-ps.bad { --sc: var(--ar-warn); color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-warn) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-warn) 14%, transparent); } .ar .ar-ps.good { --sc: var(--ar-ok); color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-ok) 50%, transparent); } .ar .ar-recb { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 820px) { .ar .ar-recb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } } .ar .ar-code { min-width: 0; overflow: hidden; color: var(--ar-x-ink); background: var(--ar-term-bg); border: 1px solid var(--ar-term-line); border-radius: var(--ar-r-sm); } .ar .ar-code .ar-bar { height: 38px; } .ar .ar-code .ar-title { text-align: left; } .ar .ar-cst { flex: none; padding: 2px 9px; border-radius: 999px; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ar-x-dim); border: 1px solid var(--ar-term-line); transition: color .3s, border-color .3s; } .ar .ar-cst[data-s="bad"] { color: var(--ar-x-warn); border-color: color-mix(in srgb, var(--ar-x-warn) 45%, transparent); } .ar .ar-cst[data-s="fix"] { color: var(--ar-x-acc); border-color: color-mix(in srgb, var(--ar-x-acc) 45%, transparent); } .ar .ar-cst[data-s="ok"] { color: var(--ar-x-ok); border-color: color-mix(in srgb, var(--ar-x-ok) 45%, transparent); } .ar .ar-cbody { padding: 12px 0; font-family: var(--ar-mono); font-size: 12.5px; line-height: 1.8; } .ar .ar-cl { display: grid; grid-template-columns: 36px 16px minmax(0, 1fr); min-height: 1.8em; white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 12px; transition: background-color .35s, opacity .35s; } .ar .ar-code .ar-replay { height: 26px; border-color: var(--ar-term-line); color: var(--ar-x-dim); } .ar .ar-code .ar-replay:hover { color: var(--ar-x-ink); border-color: var(--ar-x-dim); } .ar .ar-cl > .n { padding-right: 8px; text-align: right; color: var(--ar-x-dim); opacity: .7; user-select: none; } .ar .ar-cl > .m { color: var(--ar-x-dim); user-select: none; } .ar .ar-cl .k { color: #9CDCFE; } .ar .ar-cl .s { color: #CE9178; } .ar .ar-cl .nu { color: #B5CEA8; } .ar .ar-cl .p { color: var(--ar-x-dim); } html[data-final="telemetry"] .ar .ar-cl .k { color: #E6EDF3; } html[data-final="telemetry"] .ar .ar-cl .s { color: #FFC857; } .ar .ar-cl.err { background: color-mix(in srgb, var(--ar-x-err) 12%, transparent); } .ar .ar-cl.err > .m { color: var(--ar-x-err); } .ar .ar-cl.add { background: color-mix(in srgb, var(--ar-x-ok) 11%, transparent); } .ar .ar-cl.add > .m { color: var(--ar-x-ok); } .ar .ar-cl .bad { text-decoration: underline wavy var(--ar-x-err); text-underline-offset: 3px; } .ar .ar-cl.hide { display: none; } .ar .ar-rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; } .ar .ar-rsteps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); font-size: 14px; font-weight: 600; color: var(--ar-ink3); transition: color .3s, border-color .3s, opacity .3s; } .ar .ar-rsteps li .ar-ico { font-size: 17px; } .ar .ar-rsteps li.on.bad { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-warn) 55%, transparent); } .ar .ar-rsteps li.on.bad .ar-ico { color: var(--ar-warn); } .ar .ar-rsteps li.on.fix { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-acc) 55%, transparent); } .ar .ar-rsteps li.on.fix .ar-ico { color: var(--ar-acc); } .ar .ar-rsteps li.on.good { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-ok) 50%, transparent); } .ar .ar-rsteps li.on.good .ar-ico { color: var(--ar-ok); } .ar .ar-rsteps .arr { display: flex; justify-content: center; padding: 0; border: 0; background: none; color: var(--ar-ink3); font-size: 15px; } /* ── 11 · Compression-aware tiering ────────────────────────────────────────────────── */ .ar .ar-cpv { display: grid; gap: 16px; padding: clamp(16px, 2.6cqw, 24px); } .ar .ar-cps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 620px) { .ar .ar-cps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } } .ar .ar-cs-st { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface2); transition: border-color .35s, box-shadow .35s, opacity .35s; } .ar .ar-cs-st h3 { font-size: .98rem; } .ar .ar-cs-st p { font-size: 13px; color: var(--ar-ink2); } .ar .ar-cs-st.on { border-color: color-mix(in srgb, var(--ar-acc) 55%, transparent); box-shadow: 0 0 0 3px var(--ar-acc-soft); } .ar .ar-cs-st.dim { opacity: .55; } @container (min-width: 620px) { .ar .ar-cs-st:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -20px; width: 14px; height: 14px; transform: translateY(-50%); background: no-repeat center / 14px 14px url("data:image/svg+xml;utf8,"); } } .ar .ar-cbar { height: 10px; margin-top: 4px; overflow: hidden; border-radius: 5px; background: var(--ar-surface-solid); border: 1px solid var(--ar-line); } .ar .ar-cbar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--ar-t2) 50%, transparent), var(--ar-t2)); transition: width 1s cubic-bezier(.2,.8,.2,1); } .ar .ar-cs-st .tok { font-family: var(--ar-mono); font-size: 12.5px; font-weight: 600; color: var(--ar-ink); font-variant-numeric: tabular-nums; } .ar .ar-naive { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ar-ink3); } .ar .ar-naive s { text-decoration-thickness: 1.5px; } .ar .ar-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ar .ar-pickrow .ar-chip { transition: opacity .3s; } .ar .ar-pickrow .lk { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink3); } .ar .ar-guards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 520px) { .ar .ar-guards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ar .ar-guards li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ar-r-sm); border: 1px solid var(--ar-line); background: var(--ar-surface-solid); font-size: 13.5px; font-weight: 600; color: var(--ar-ink3); transition: color .3s, border-color .3s; } .ar .ar-guards li i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ar-line2); transition: background-color .3s, box-shadow .3s; } .ar .ar-guards li.on { color: var(--ar-ink); border-color: color-mix(in srgb, var(--ar-ok) 45%, transparent); } .ar .ar-guards li.on i { background: var(--ar-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-ok) 20%, transparent); } /* ── 12 · Comparison ───────────────────────────────────────────────────────────────── */ .ar .ar-cmpw { overflow-x: auto; padding: 0; } .ar .ar-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .ar .ar-cmp col.c1 { width: 46%; } .ar .ar-cmp col.c2, .ar .ar-cmp col.c3 { width: 27%; } .ar .ar-cmp th, .ar .ar-cmp td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ar-line); font-size: 14.5px; } .ar .ar-cmp tbody tr:last-child > * { border-bottom: 0; } .ar .ar-cmp thead th { padding-block: 16px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink3); } .ar .ar-cmp tbody th { font-weight: 600; color: var(--ar-ink); } .ar .ar-cmp .ar-c { background: var(--ar-acc-soft); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ar-acc) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--ar-acc) 35%, transparent); } .ar .ar-cmp thead .ar-c { color: var(--ar-acc); } .ar .ar-cmp thead .ar-c span { display: inline-flex; align-items: center; gap: 8px; } .ar .ar-cmp tbody .ar-c { animation: arPulse 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .32s); } @keyframes arPulse { 0%, 22%, 100% { background-color: var(--ar-acc-soft); } 8% { background-color: color-mix(in srgb, var(--ar-acc) 18%, transparent); } } .ar .ar-cmp .ar-yes { font-weight: 600; } .ar .ar-cmp .ar-yes .ar-ico { font-size: 18px; } .ar .ar-cmp .ar-c .ar-yes .ar-ico { color: var(--ar-acc); } .ar .ar-varies { font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink3); } /* ── 13 · Compatibility hub ────────────────────────────────────────────────────────── */ .ar .ar-hubv { display: grid; gap: 18px; } .ar .ar-hub { position: relative; padding: 20px; } .ar .ar-hub-lines { display: none; } .ar .ar-hub-core { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 0 auto 18px; padding: 14px 18px; max-width: 320px; border-radius: calc(var(--ar-r) + 2px); background: var(--ar-surface-solid); border: 1px solid color-mix(in srgb, var(--ar-acc) 45%, var(--ar-line2)); box-shadow: 0 0 0 6px var(--ar-acc-soft); } .ar .ar-hub-core b { display: block; font-family: var(--ar-mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; } .ar .ar-hub-core small { display: block; font-size: 12.5px; color: var(--ar-ink3); } .ar .ar-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar .ar-tool { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--ar-r-sm); background: var(--ar-surface-solid); border: 1px solid var(--ar-line2); font-size: 14px; font-weight: 650; } .ar .ar-tool span:last-child { min-width: 0; line-height: 1.25; } .ar .ar-tool .ar-av { width: 26px; height: 26px; font-size: 14px; } .ar .ar-tool.g { border-color: color-mix(in srgb, var(--ar-acc) 42%, transparent); } .ar .ar-tool.g .ar-av { color: var(--ar-acc); } .ar .ar-tool.c { border-style: dashed; } @container (min-width: 700px) { .ar .ar-hub { aspect-ratio: 2.05 / 1; padding: 0; } .ar .ar-hub-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .ar .ar-hub-lines line { stroke: var(--ar-line2); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .ar .ar-hub-lines line.g { stroke: color-mix(in srgb, var(--ar-acc) 45%, transparent); } .ar .ar-hub-lines line.c { stroke-dasharray: 4 6; } .ar .ar-hub-lines line.flow { stroke: var(--ar-acc); stroke-width: 2; stroke-dasharray: 2 34; animation: arDash 2.6s linear infinite; opacity: .9; } .ar .ar-hub-core { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); z-index: 1; } .ar .ar-tools { display: block; } .ar .ar-tool { position: absolute; z-index: 1; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: max-content; max-width: 30%; } } @keyframes arDash { to { stroke-dashoffset: -72; } } .ar .ar-hub-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--ar-ink2); } .ar .ar-hub-legend span { display: inline-flex; align-items: center; gap: 8px; } .ar .ar-hub-legend i { width: 22px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ar-line2); } .ar .ar-hub-legend i.g { border-color: var(--ar-acc); } .ar .ar-hub-legend i.c { border-style: dashed; } .ar .ar-apis { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 640px) { .ar .ar-apis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ar .ar-api { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--ar-r-sm); background: var(--ar-surface); border: 1px solid var(--ar-line); } .ar .ar-api b { font-size: 14.5px; } .ar .ar-api code { font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-acc); } .ar .ar-hub-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } /* ── 14 · Closing ──────────────────────────────────────────────────────────────────── */ .ar .ar-closing { position: relative; overflow: hidden; text-align: center; padding-block: clamp(96px, 12vw, 160px); color: var(--ar-close-ink); background: var(--ar-close-bg); border-top: 1px solid var(--ar-line); } .ar .ar-closing > .ar-wrap { position: relative; z-index: 1; } .ar .ar-closing h2 { color: var(--ar-close-ink); font-size: clamp(2.2rem, 4.6vw, 3.8rem); } .ar .ar-closing .ar-lede { margin: 20px auto 0; color: var(--ar-close-ink2); } .ar .ar-closing .ar-ctas { justify-content: center; margin-top: 34px; } .ar .ar-closing small { display: block; margin-top: 24px; font-size: 13.5px; color: var(--ar-close-ink2); } .ar .ar-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .ar .ar-net .e { fill: none; stroke: color-mix(in srgb, var(--ar-close-ink) 12%, transparent); stroke-width: 1; } .ar .ar-net .f { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 26; opacity: .85; animation: arDash2 3.2s linear infinite; } .ar .ar-net .n { fill: color-mix(in srgb, var(--ar-close-ink) 26%, transparent); } @keyframes arDash2 { to { stroke-dashoffset: -58; } } .ar .ar-closing::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 60% at 50% 50%, var(--ar-close-bg) 0%, color-mix(in srgb, var(--ar-close-bg) 70%, transparent) 55%, transparent 100%); } /* Day's closing panel is dark: give it Night's light-on-dark tokens (Cloud's closing is white) */ html[data-theme="studio"]:not([data-final="telemetry"]):not([data-final="cloud"]) .ar .ar-closing { --ar-acc: #67E8F9; --ar-t1: #22D3EE; --ar-t2: #60A5FA; --ar-t3: #C084FC; --ar-focus: #67E8F9; --ar-line: rgba(255,255,255,.1); --ar-grad: linear-gradient(90deg, #60A5FA 0%, #A78BFA 50%, #67E8F9 100%); --ar-btn2-bg: transparent; --ar-btn2-fg: #FFFFFF; --ar-btn2-line: rgba(255,255,255,.3); } /* ── Small shared bits ──────────────────────────────────────────────────────────────── */ .ar .ar-lvt { color: var(--lv); } .ar .ar-req > div > .ar-kv + .ar-req-task { margin-top: 4px; } .ar .ar-vis-note { margin-top: 12px; text-align: center; } .ar .ar-sx > .ar-fine { grid-area: key; justify-self: center; text-align: center; margin-top: -18px; } .ar .ar-hy-log.lc-ok { --lc: var(--ar-ok); } .ar .ar-hy-log.lc-gpu { --lc: var(--ar-t1); } .ar .ar-hy-log.lc-cloud { --lc: var(--ar-t3); } .ar .ar-hy-log.lc-err { --lc: var(--ar-err); } .ar .ar-dash-out, .ar .ar-naive, .ar .ar-pickrow { transition: opacity .35s ease; } /* ═══ TELEMETRY: the console layout over the same DOM ═══════════════════════════════════ */ html[data-final="telemetry"] .ar .ar-sec { border-top: 1px solid var(--ar-line); } html[data-final="telemetry"] .ar .ar-hero, html[data-final="telemetry"] .ar .ar-closing { border-top: 0; } html[data-final="telemetry"] .ar .ar-alt { background: transparent; border-block: 0; border-top: 1px solid var(--ar-line); } html[data-final="telemetry"] .ar .ar-hero::before { display: none; } html[data-final="telemetry"] .ar .ar-headline { font-weight: 600; letter-spacing: -.045em; } html[data-final="telemetry"] .ar h2 { font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -.035em; } html[data-final="telemetry"] .ar .ar-g { background: none; -webkit-text-fill-color: currentColor; color: var(--ar-acc); } html[data-final="telemetry"] .ar .ar-eyebrow { padding: 0; border: 0; background: none; border-radius: 0; letter-spacing: .12em; } html[data-final="telemetry"] .ar .ar-eyebrow::before { content: "["; width: auto; height: auto; border-radius: 0; background: none; color: var(--ar-ink3); animation: none; } html[data-final="telemetry"] .ar .ar-eyebrow::after { content: "]"; color: var(--ar-ink3); } html[data-final="telemetry"] .ar .ar-hero-copy { text-align: left; margin-inline: 0; } html[data-final="telemetry"] .ar .ar-hero-copy .ar-lede { margin-left: 0; } html[data-final="telemetry"] .ar .ar-hero-copy .ar-ctas { justify-content: flex-start; } html[data-final="telemetry"] .ar .ar-sx > .ar-head { text-align: left; justify-self: stretch; max-width: none; } html[data-final="telemetry"] .ar .ar-sx > .ar-head .ar-lede { margin-left: 0; } html[data-final="telemetry"] .ar .ar-sx > .ar-key, html[data-final="telemetry"] .ar .ar-sx > .ar-fine { justify-self: start; text-align: left; } html[data-final="telemetry"] .ar .ar-vis-note { text-align: left; } @media (min-width: 1024px) { html[data-final="telemetry"] .ar .ar-sx:not(.ar-split) > .ar-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 48px; align-items: end; } html[data-final="telemetry"] .ar .ar-sx:not(.ar-split) > .ar-head .ar-eyebrow { grid-column: 1 / -1; justify-self: start; } html[data-final="telemetry"] .ar .ar-sx:not(.ar-split) > .ar-head .ar-lede { margin-top: 0; font-size: 1rem; } } html[data-final="telemetry"] .ar .ar-vis[data-panel] { padding: 0 14px 14px; background: var(--ar-surface); border: 1px solid var(--ar-line2); border-radius: var(--ar-r); } html[data-final="telemetry"] .ar .ar-vis[data-panel]::before { content: attr(data-panel); display: block; margin: 0 -14px 14px; padding: 10px 92px 10px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink3); background: var(--ar-surface2); border-bottom: 1px solid var(--ar-line); border-radius: var(--ar-r) var(--ar-r) 0 0; } html[data-final="telemetry"] .ar .ar-vis[data-panel]::after { content: "\25CF LIVE"; position: absolute; top: 10px; right: 14px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ar-ok); } html[data-final="telemetry"] .ar .ar-hero-vis { margin-top: clamp(40px, 5vw, 56px); } html[data-final="telemetry"] .ar .ar-card { background: var(--ar-surface2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-final="telemetry"] .ar .ar-vis[data-panel] > .ar-rv { border: 0; background: transparent; padding-inline: 4px; } html[data-final="telemetry"] .ar .ar-engine, html[data-final="telemetry"] .ar .ar-hy-hub, html[data-final="telemetry"] .ar .ar-hub-core { box-shadow: 0 0 0 4px var(--ar-acc-soft); } html[data-final="telemetry"] .ar .ar-feats { gap: 0; overflow: hidden; border: 1px solid var(--ar-line2); border-radius: var(--ar-r); background: var(--ar-surface); } html[data-final="telemetry"] .ar .ar-feat { border: 0; border-radius: 0; padding: 22px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-final="telemetry"] .ar .ar-feat + .ar-feat { border-top: 1px solid var(--ar-line); } @media (min-width: 720px) { html[data-final="telemetry"] .ar .ar-sx:not(.ar-split) .ar-feat + .ar-feat { border-top: 0; border-left: 1px solid var(--ar-line); } } html[data-final="telemetry"] .ar .ar-tile { width: 34px; height: 34px; border-radius: 6px; font-size: 16px; } html[data-final="telemetry"] .ar .ar-btn { min-height: 46px; font-family: var(--ar-mono); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; } html[data-final="telemetry"] .ar .ar-tab[aria-selected="true"], html[data-final="telemetry"] .ar .ar-thumb { background: var(--ar-acc); } html[data-final="telemetry"] .ar .ar-tab[aria-selected="true"], html[data-final="telemetry"] .ar .ar-seg button[aria-checked="true"] { color: var(--tm-accent-ink); } html[data-final="telemetry"] .ar .ar-key { font-family: var(--ar-mono); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ar-ink2); } html[data-final="telemetry"] .ar .ar-key::before { content: "\203A"; width: auto; height: auto; background: none; color: var(--ar-acc); font-weight: 700; } html[data-final="telemetry"] .ar .ar-dots i { background: transparent; border: 1.5px solid var(--ar-x-dim); opacity: .7; } html[data-final="telemetry"] .ar .ar-status i, html[data-final="telemetry"] .ar .ar-core i:nth-child(3) { animation-duration: 3s; } html[data-final="telemetry"] .ar .ar-closing { border-top: 1px solid var(--ar-line); } /* ── Small screens ──────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .ar .ar-tbody { min-height: 410px; padding: 14px 14px 16px; font-size: 12px; } .ar .ar-btn { width: 100%; } .ar .ar-cmp th, .ar .ar-cmp td { padding: 12px 10px; font-size: 13px; } .ar .ar-cmp col.c1 { width: 40%; } .ar .ar-cmp col.c2, .ar .ar-cmp col.c3 { width: 30%; } .ar .ar-cmp thead th { font-size: 10px; letter-spacing: .06em; } .ar .ar-seg { width: 100%; } .ar .ar-seg button { flex: 1; padding: 10px 8px; font-size: 13px; } .ar .ar-flow .ar-tabs { width: 100%; } .ar .ar-flow .ar-tab { flex: 1; padding: 8px 6px; font-size: 13px; } .ar .ar-hy-log { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { .ar *, .ar *::before, .ar *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .ar .ar-net .f, .ar .ar-hub-lines line.flow { animation: none; } } /* ═══ CLOUD: the app-store light over the same DOM (see cloud.css) ═════════════════════════ Floating white cards with wide soft shadows and big corners, the system face, grey two-tone headlines, spaced-out grey eyebrows, one action blue, colourful glyphs with no tile fill. */ html[data-final="cloud"] .ar .ar-headline { font-weight: 650; letter-spacing: -.045em; } html[data-final="cloud"] .ar h2 { font-weight: 650; letter-spacing: -.04em; } html[data-final="cloud"] .ar h3 { font-weight: 650; letter-spacing: -.02em; } html[data-final="cloud"] .ar .ar-g { background: none; -webkit-text-fill-color: currentColor; color: #555864; } html[data-final="cloud"] .ar .ar-eyebrow { padding: 0; border: 0; background: none; border-radius: 0; gap: 0; font-family: var(--ar-body); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--ar-ink3); } html[data-final="cloud"] .ar .ar-eyebrow::before { display: none; } html[data-final="cloud"] .ar .ar-btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), background-color .25s; } html[data-final="cloud"] .ar .ar-btn-p:hover { transform: translateY(-3px); filter: none; background: #0066D6; box-shadow: 0 21px 42px rgba(10,132,255,.28); } html[data-final="cloud"] .ar .ar-btn-s { box-shadow: 0 10px 30px rgba(70,72,105,.08); } html[data-final="cloud"] .ar .ar-btn-s:hover { transform: translateY(-3px); border-color: var(--ar-btn2-line); box-shadow: 0 18px 40px rgba(70,72,105,.13); } html[data-final="cloud"] .ar .ar-card { border-color: rgba(24,27,38,.045); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-final="cloud"] .ar .ar-feat { border-color: rgba(24,27,38,.045); box-shadow: 0 14px 40px rgba(70,72,105,.07); -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1); } html[data-final="cloud"] .ar .ar-feat:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(70,72,105,.12); } html[data-final="cloud"] .ar .ar-tile { --clt: #0A84FF; border: 0; color: var(--clt); background: none; box-shadow: none; font-size: 26px; } html[data-final="cloud"] .ar .ar-h1, html[data-final="cloud"] .ar .ar-ha { --clt: #0A84FF; } html[data-final="cloud"] .ar .ar-h2 { --clt: #9556FF; } html[data-final="cloud"] .ar .ar-h3 { --clt: #EF42A7; } html[data-final="cloud"] .ar .ar-hw { --clt: #FF9F0A; } html[data-final="cloud"] .ar .ar-hok { --clt: #00B386; } html[data-final="cloud"] .ar .ar-chip, html[data-final="cloud"] .ar .ar-badge { font-family: var(--ar-body); letter-spacing: .06em; border-color: transparent; } html[data-final="cloud"] .ar .ar-chip { background: color-mix(in srgb, var(--tc) 11%, #FFFFFF); } html[data-final="cloud"] .ar .ar-closing { border-top: 1px solid var(--ar-band-line); } @media (prefers-reduced-motion: reduce) { html[data-final="cloud"] .ar .ar-btn:hover, html[data-final="cloud"] .ar .ar-feat:hover { transform: none; } } /* Cloud Dark: the same layout in charcoal (tokens above); only Cloud's literal light colours change. */ html[data-final="cloud"][data-cloud="dark"] .ar .ar-g { color: #A9ACB6; } html[data-final="cloud"][data-cloud="dark"] .ar .ar-btn-s { box-shadow: 0 10px 30px rgba(0,0,0,.34); } html[data-final="cloud"][data-cloud="dark"] .ar .ar-btn-s:hover { box-shadow: 0 18px 40px rgba(0,0,0,.46); } html[data-final="cloud"][data-cloud="dark"] .ar .ar-card { border-color: rgba(255,255,255,.06); } html[data-final="cloud"][data-cloud="dark"] .ar .ar-feat { border-color: rgba(255,255,255,.06); box-shadow: 0 14px 40px rgba(0,0,0,.32); } html[data-final="cloud"][data-cloud="dark"] .ar .ar-feat:hover { box-shadow: 0 24px 55px rgba(0,0,0,.44); } html[data-final="cloud"][data-cloud="dark"] .ar .ar-chip { background: color-mix(in srgb, var(--tc) 12%, #232426); } /* SEO (2026-10-20): the hero's eyebrow is the page's

, carrying the search phrase; the big display headline under it is p.ar-headline (the rules above that styled "h1" now style it). The eyebrow keeps its own look: these undo what final-type.css gives every h1 (the display face) and keep a wrapped eyebrow readable. */ .ar h1.ar-eyebrow { font-family: var(--ar-mono); line-height: 1.5; text-wrap: balance; } /* Telemetry brackets the eyebrow: as a block, a long one wraps with its brackets beside the words instead of at the edges. */ html[data-final="telemetry"] .ar h1.ar-eyebrow { display: block; } html[data-final="telemetry"] .ar h1.ar-eyebrow::before { margin-right: 8px; } html[data-final="telemetry"] .ar h1.ar-eyebrow::after { margin-left: 8px; }