/* Armadai 3D in the app's own Pure Black theme (apps/armadai-macos/Sources/Armadai/Resources/Theme.css): a black canvas,
   near-black surfaces, hairline borders in the theme's ink at low alpha, near-white accent, SF Pro and SF Mono, and
   colour only where it means something (agent kinds, diffs, status). No glow. */
:root {
  --canvas: 0, 0, 0;
  --surface: 8, 8, 8;
  --raised: 17, 17, 17;
  --control: 25, 25, 25;
  --hover: 38, 38, 38;
  --selected: 48, 48, 48;
  --border: 48, 48, 48;
  --border-strong: 76, 76, 76;
  --text-rgb: 239, 239, 239;
  --muted-rgb: 164, 164, 164;
  --dim-rgb: 120, 120, 120;
  --accent-rgb: 218, 218, 218;
  --on-accent: 12, 12, 12;
  --ink: 236, 236, 236;
  --text: rgb(var(--text-rgb));
  --muted: rgb(var(--muted-rgb));
  --dim: rgb(var(--dim-rgb));
  --accent: rgb(var(--accent-rgb));
  --line: rgba(var(--ink), 0.09);
  --line-strong: rgba(var(--ink), 0.18);
  /* the meaning colours the app keeps in every theme */
  --claude: #ef9b6a;
  --codex: #72d9c7;
  --add: #5fbf82;
  --del: #e36a77;
  --warn: #e8b96a;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #000; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--accent); color: #000; padding: 8px 12px; border-radius: 7px; }
.skip:focus { left: 8px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; outline: none; touch-action: pan-y; }
#overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mark-head, .spin-hint { user-select: none; -webkit-user-select: none; }
main { position: relative; z-index: 1; pointer-events: none; }
main a, main button, main summary, main details, .parts, .approval, .plans, .footer { pointer-events: auto; }

/* ------------------------------------------------------------ nav: the app's toolbar */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 52px; padding: 0 20px; background: rgba(var(--canvas), 0.82); border-bottom: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%); }
.nav nav { display: flex; gap: 4px; margin-left: auto; font-size: 12px; }
.nav nav a { text-decoration: none; color: var(--muted); padding: 6px 10px; border-radius: 8px; transition: background 0.12s, color 0.12s; }
.nav nav a:hover { color: var(--text); background: rgba(var(--ink), 0.055); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; font-size: 14px; letter-spacing: -0.01em; }
.brand img { border-radius: 6px; }

/* ------------------------------------------------------------ buttons, as the app's */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 9px; font: 600 13px var(--sans); text-decoration: none; border: 1px solid rgba(var(--ink), 0.16); background: rgba(var(--control), 0.88); color: var(--text); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.btn:hover { background: rgba(var(--ink), 0.11); border-color: rgba(var(--ink), 0.28); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: rgb(var(--on-accent)); }
.btn.primary:hover { background: #fff; border-color: #fff; }
.btn.small { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn.ghost { background: rgba(var(--control), 0.6); }
kbd { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(var(--ink), 0.16); background: rgba(var(--control), 0.9); color: var(--muted); }

/* ------------------------------------------------------------ chapters */
.chapter { position: relative; }
.hero { height: 130vh; }
#workspace { height: 340vh; }
#teardown { height: 320vh; }
#master-agent { height: 280vh; }
#chat { height: 300vh; }
#attention { height: 220vh; }
#coordinate { height: 220vh; }
.flow { padding: 140px 24px 120px; }
.finale { height: 110vh; display: flex; align-items: center; justify-content: center; }
.sticky { position: sticky; top: 0; height: 100vh; }

.panel { position: absolute; max-width: 460px; }
.panel.center { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 820px; width: calc(100% - 48px); text-align: center; }
/* the hero's words at the foot of the first screen (the section is 130vh tall, for the scroll); the mark is fitted over them */
.hero .panel.center { top: auto; bottom: calc(30vh + max(18px, 3.5vh)); bottom: calc(130vh - 100svh + max(18px, 3.5svh)); transform: translateX(-50%); max-width: 900px; }
/* the hero's and the finale's eyebrow and fine print at their own small mono size (.panel p was taking them to 14px) */
.hero .panel .eyebrow, .finale .panel .eyebrow { font-size: 11px; }
.hero .panel .fine, .finale .panel .fine { font-size: 11px; }
/* the finale's words carry a soft black ground of their own, so they read over the canvas's lighter tiles (never wider
   than the screen, or a phone would zoom out to take it) */
.finale .panel.center { isolation: isolate; }
.finale .panel.center::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(calc(100% + 260px), 100vw); height: calc(100% + 170px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.finale .panel.center { position: relative; left: auto; top: auto; transform: none; margin-top: 64vh; }
/* a chapter's text: one of the app's raised panels */
.panel.left { left: clamp(20px, 4vw, 64px); top: 50%; transform: translateY(-50%); padding: 22px 24px; border-radius: 14px; background: rgba(var(--raised), 0.94); border: 1px solid rgba(var(--ink), 0.12); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4), inset 0 1px rgba(var(--ink), 0.035); }
.panel.narrow { max-width: 390px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--muted); margin: 0 0 18px; padding: 4px 10px; border: 1px solid rgba(var(--ink), 0.12); border-radius: 999px; background: rgba(var(--surface), 0.62); }
.eyebrow i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
h1 { font-size: min(clamp(38px, 5.4vw, 68px), calc((100vw - 48px) / 8.8)); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 18px; font-weight: 650; }
/* each line of the headline on one line: the first (8.4 font-sizes wide in SF) only gives way on the smallest phones, the
   second (12.0 wide) keeps the first's size wherever it fits the panel (900px), and on phones steps down to fit the screen */
.hero h1 span { font-size: min(1em, calc((min(100vw, 948px) - 48px) / 12.6)); letter-spacing: -0.035em; }
h1 span, .finale h2 span, .mark-head h2 span { color: var(--dim); }
h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 12px; font-weight: 650; }
.finale h2 { font-size: clamp(34px, 4.6vw, 58px); }
.lede { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; color: var(--muted); max-width: 600px; margin: 0 auto 24px; }
.panel p { line-height: 1.55; color: var(--muted); font-size: 14px; }
/* the app's section headings: small, uppercase, dim */
.kicker { font: 650 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.fine { font-size: 11px; color: var(--dim); letter-spacing: 0; }
.hint { font: 500 11px var(--mono) !important; letter-spacing: 0 !important; color: var(--dim) !important; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 500 10px var(--mono); color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint b { width: 1px; height: 24px; background: linear-gradient(var(--dim), transparent); animation: drip 1.8s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* steps: the app's sidebar rows */
.steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 2px; }
.steps li { padding: 8px 10px; border-radius: 8px; color: var(--dim); font-size: 12px; line-height: 1.45; transition: background 0.12s, color 0.12s; }
.steps li b { display: block; font: 500 10px var(--mono); color: var(--dim); margin-bottom: 2px; }
.steps li span { display: block; color: var(--muted); font-weight: 590; font-size: 13px; margin-bottom: 1px; }
.steps li.on { background: rgba(var(--ink), 0.08); color: var(--muted); box-shadow: inset 2px 0 var(--accent); }
.steps li.on span { color: var(--text); }
/* the master's steps open the explorer */
#master-agent .steps li { cursor: pointer; pointer-events: auto; }
#master-agent .steps li:not(.on):hover { background: rgba(var(--ink), 0.045); color: var(--muted); }
.explore-hint { margin: 14px 0 0 10px; }

/* ------------------------------------------------------------ the explorer: the canvas, opened in a window */
.xtip { position: fixed; z-index: 4; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(var(--raised), 0.94); border: 1px solid rgba(var(--ink), 0.22); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); font: 590 12px var(--sans); color: var(--text); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(0, calc(-100% - 6px)); transition: opacity 0.14s; }
.xtip[data-anchor='centre'] { transform: translate(-50%, -100%); }
.xtip.on { opacity: 1; }
.xtip span { color: var(--dim); font-weight: 500; }
.xtip i { font: 600 9.5px var(--mono); font-style: normal; letter-spacing: 0.06em; color: var(--muted); padding-left: 8px; border-left: 1px solid rgba(var(--ink), 0.14); }
html.xw-lock, html.xw-lock body { overflow: hidden; }
.xw { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; }
.xw[hidden] { display: none; }
.xw-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s; }
.xw-win { position: relative; display: flex; flex-direction: column; width: min(1180px, calc(100vw - 40px)); height: min(780px, calc(100vh - 40px)); height: min(780px, calc(100dvh - 40px)); border-radius: 14px; background: #000; border: 1px solid #272727; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5); overflow: hidden; outline: none; opacity: 0; transform: scale(0.98) translateY(8px); transition: opacity 0.2s, transform 0.2s; }
.xw.on .xw-back { opacity: 1; }
.xw.on .xw-win { opacity: 1; transform: none; }
.xw button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.xw-bar { display: flex; align-items: center; gap: 14px; height: 38px; flex: none; padding: 0 14px; background: #000; border-bottom: 1px solid #1a1a1a; font-size: 12px; }
.xw-bar b { font-weight: 620; color: var(--muted); }
.xw-keys { margin-left: auto; font-size: 10px; color: var(--dim); }
.xw-lights { display: flex; gap: 7px; }
.xw-lights > * { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; display: block; }
.xw-lights .r { background: #ec6a5e; }
.xw-lights .r:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.xw-body { display: flex; flex: 1; min-height: 0; }
/* the sidebar, the app's: the Master agent button, Canvases, Workspaces as cards; usage, hours and profile at its foot */
.xw-side { display: flex; flex-direction: column; width: 232px; flex: none; padding: 10px 8px; border-right: 1px solid #121212; background: #000; overflow-y: auto; }
.xw-h { display: flex; justify-content: space-between; align-items: center; margin: 12px 6px 6px; font: 600 12px var(--sans); color: var(--muted); }
.xw-h span { font-weight: 500; color: var(--dim); }
.xw-go { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 8px 9px !important; border-radius: 8px; text-align: left; transition: background 0.12s; }
.xw-go:hover { background: rgba(var(--ink), 0.04) !important; }
.xw-go.on { background: #141414 !important; }
.xw .xw-master { height: 33px; padding: 0 10px !important; border: 1px solid #262626 !important; background: #0e0e0e !important; font-size: 12.5px; font-weight: 600; color: var(--muted) !important; }
.xw-master i { font-style: normal; color: var(--dim); }
.xw-master em { margin-left: auto; font-style: normal; color: var(--dim); }
.xw .xw-master.on { background: #1c1c1c !important; border-color: #464646 !important; color: var(--text) !important; }
.xw-canvas { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border-radius: 8px; background: #141414; }
.xw-canvas b, .xw-ws b { font-size: 13px; font-weight: 600; color: var(--text); }
.xw-canvas small, .xw-ws small { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xw-ws { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.xw-ws small { max-width: 100%; }
.xw-ws small.n { color: var(--muted); }
.xw-foot { margin-top: auto; padding-top: 10px; }
.xw-use { display: flex; align-items: center; gap: 7px; margin: 0 6px 7px; font-size: 12px; }
.xw-use .pmark { width: 12px; height: 12px; }
.xw-use b { font-weight: 600; color: var(--text); }
.xw-use i { margin-left: auto; width: 46px; height: 3px; border-radius: 2px; background: #4c4c4c; overflow: hidden; }
.xw-use s { display: block; height: 100%; background: var(--accent); }
.xw-use span { width: 30px; text-align: right; color: var(--muted); }
.xw-hours { margin: 10px 6px 10px; font-size: 12px; color: var(--dim); }
.xw-hours b { font-weight: 600; color: var(--text); }
.xw-profile { display: flex; align-items: center; gap: 9px; padding: 9px 6px 0; border-top: 1px solid #121212; }
.xw-profile i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #505050; font: 700 12px var(--sans); font-style: normal; color: var(--text); }
.xw-profile span { display: flex; flex-direction: column; font-size: 12px; }
.xw-profile b { font-weight: 600; color: var(--text); }
.xw-profile small { color: var(--dim); }
.xw-profile em { margin-left: auto; font-style: normal; color: var(--dim); }
.xw-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.xw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 46px; flex: none; padding: 0 18px; border-bottom: 1px solid #1a1a1a; }
.xw-crumb { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; }
.xw-crumb span { color: var(--muted); }
.xw-crumb i { font-style: normal; color: var(--dim); }
.xw-crumb b { font-weight: 600; color: var(--text); }
.xw-crumb em { font-style: normal; font-size: 12px; color: var(--dim); margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
.xw-k { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.06em; color: var(--dim); }
.xw-head h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.xw-head h3 span { color: var(--dim); font-weight: 550; margin-left: 6px; }
.xw-path { margin: 0; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.xw-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.xw-area { position: absolute; border-radius: 18px; border: 1px solid #646464; box-shadow: 0 0 0 1px #111111; background: linear-gradient(135deg, #050505, #010101); transition: opacity 0.25s; }
.xw-alabel { position: absolute; left: 12px; top: 8px; display: flex; align-items: center; gap: 7px; height: 22px; margin: 0; padding: 0 9px; border-radius: 6px; background: rgba(8, 8, 8, 0.9); border: 1px solid #232323; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.xw-alabel i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); }
.xw-alabel span { font: 500 9.5px var(--mono); color: var(--dim); margin-left: 4px; }
.xw-abtns { position: absolute; right: 12px; top: 8px; display: flex; gap: 6px; margin: 0; }
.xw-abtns b { display: grid; place-items: center; height: 22px; padding: 0 10px; border-radius: 6px; border: 1px solid #242424; background: #111111; font-size: 11.5px; font-weight: 600; color: var(--text); }
.xw-abtns b + b { background: #080808; border-color: #2f2f2f; }
.xw-seg { position: absolute; left: 50%; top: 10px; z-index: 3; display: flex; padding: 2px; margin: 0; transform: translateX(-50%); border-radius: 9px; background: #080808; border: 1px solid #282828; font-size: 12px; font-weight: 600; }
.xw-seg span { padding: 3px 12px; border-radius: 7px; color: var(--muted); }
.xw-seg span.on { background: #dadada; color: #0c0c0c; }
.xw-hint { position: absolute; left: 16px; bottom: 8px; margin: 0; font-size: 11px; color: #545454; white-space: nowrap; }
.xw-stage.focused .xw-seg, .xw-stage.focused .xw-hint { opacity: 0; }
.xw-area.away { opacity: 0.25; }
.xw-tile { position: absolute !important; display: block !important; border-radius: 11px; overflow: hidden; box-shadow: 0 0 0 1px #272727, 0 10px 30px rgba(0, 0, 0, 0.5); transition: left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s, box-shadow 0.15s; }
.xw-tile canvas { display: block; width: 100%; height: 100%; }
.xw-tile:hover, .xw-tile:focus-visible { box-shadow: 0 0 0 1px rgba(var(--ink), 0.45), 0 12px 34px rgba(0, 0, 0, 0.55); outline: none; }
.xw-tile.focus { z-index: 2; box-shadow: 0 0 0 1px rgba(var(--ink), 0.3), 0 24px 70px rgba(0, 0, 0, 0.7); cursor: zoom-out; }
.xw-tile.away { opacity: 0; pointer-events: none; }
.xw-tag { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(var(--raised), 0.92); border: 1px solid rgba(var(--ink), 0.16); font-size: 11px; font-weight: 600; color: var(--text); opacity: 0; transform: translateY(3px); transition: opacity 0.14s, transform 0.14s; pointer-events: none; }
.xw-tag .pmark { width: 12px; height: 12px; }
.xw-tile:hover .xw-tag, .xw-tile:focus-visible .xw-tag { opacity: 1; transform: none; }
.xw-tile.focus .xw-tag { display: none; }
/* the site's own word on what you're looking at, on the app's toast surface */
.xw-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; min-height: 80px; margin: 0 12px 12px; padding: 12px 18px; border-radius: 10px; border: 1px solid #3f3f3f; background: #181818; }
.xw-what { min-width: 0; max-width: 640px; }
.xw-what h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 640; }
.xw-what p:not(.xw-k) { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.xw-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.xw-chips button, .xw-nav button { display: inline-flex !important; align-items: center; gap: 7px; height: 28px; padding: 0 10px !important; border-radius: 8px; border: 1px solid rgba(var(--ink), 0.12) !important; background: rgb(var(--control)) !important; font-size: 12px !important; font-weight: 590; color: var(--muted) !important; white-space: nowrap; transition: color 0.12s, border-color 0.12s; }
.xw-chips button:hover, .xw-nav button:hover { color: var(--text) !important; border-color: rgba(var(--ink), 0.3) !important; }
.xw-chips .pmark { width: 12px; height: 12px; }
.xw-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.xw-nav span { font-size: 11px; color: var(--dim); min-width: 44px; text-align: center; }
.xw-all { margin-left: 6px; }
/* the master: its three steps across the top, the feature live, the step's features beside it */
.xw-stage.master { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.xw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: none; }
.xw-steps button { display: block !important; padding: 9px 12px !important; border-radius: 9px; border: 1px solid rgba(var(--ink), 0.09) !important; background: rgb(var(--surface)) !important; text-align: left; font-size: 12.5px !important; font-weight: 600; color: var(--muted) !important; transition: background 0.12s, color 0.12s; }
.xw-steps button b { display: block; font-size: 10px; font-weight: 500; color: var(--dim); margin-bottom: 2px; }
.xw-steps button:hover { color: var(--text) !important; }
.xw-steps button.on { background: rgba(var(--ink), 0.08) !important; border-color: rgba(var(--ink), 0.2) !important; color: var(--text) !important; box-shadow: inset 2px 0 var(--accent); }
.xw-split { display: flex; gap: 16px; flex: 1; min-height: 0; }
.xw-shot { flex: 0 1 auto; max-width: calc(100% - 236px); max-height: 100%; margin: auto 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--ink), 0.14), 0 18px 50px rgba(0, 0, 0, 0.6); }
.xw-shot canvas { display: block; width: 100%; height: 100%; }
.xw-feats { display: flex; flex-direction: column; gap: 4px; width: 220px; flex: none; margin-left: auto; }
.xw-feats button { display: flex !important; flex-direction: column; gap: 2px; padding: 9px 11px !important; border-radius: 8px; text-align: left; transition: background 0.12s; }
.xw-feats button span { font-size: 13px; font-weight: 600; color: var(--muted); }
.xw-feats button small { font-size: 9.5px; letter-spacing: 0.05em; color: var(--dim); }
.xw-feats button:hover { background: rgba(var(--ink), 0.05) !important; }
.xw-feats button:hover span { color: var(--text); }
.xw-feats button.on { background: rgba(var(--ink), 0.09) !important; box-shadow: inset 2px 0 var(--accent); }
.xw-feats button.on span { color: var(--text); }
@media (max-width: 760px) {
  .xw-win { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .xw-keys { display: none; }
  .xw-body { flex-direction: column; }
  .xw-side { width: auto; display: flex; flex-direction: row; flex: none; gap: 4px; padding: 6px 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(var(--ink), 0.07); }
  .xw-h { display: none; }
  .xw-go { width: auto; flex: none; padding: 6px 9px !important; }
  .xw-go small, .xw-canvas, .xw-foot, .xw-master em { display: none; }
  .xw-ws b { font-size: 12px; }
  .xw-master { height: auto; }
  .xw-crumb em, .xw-hint, .xw-abtns, .xw-alabel { display: none; }
  .xw-info { margin: 0 8px 8px; }
  .xw-head { padding: 10px 14px 8px; }
  .xw-head h3 { font-size: 16px; }
  .xw-path { display: none; }
  .xw-info { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; min-height: 0; }
  .xw-chips { justify-content: flex-start; }
  .xw-stage.master { padding: 10px 12px; gap: 10px; }
  .xw-steps { grid-template-columns: 1fr; gap: 4px; }
  .xw-steps button { padding: 6px 10px !important; font-size: 12px !important; }
  .xw-steps button:not(.on) b { display: none; }
  .xw-split { flex-direction: column; }
  .xw-shot { max-width: 100%; margin: 0; }
  .xw-feats { width: auto; flex-direction: row; overflow-x: auto; margin: 0; }
  .xw-feats button { flex: none; }
  .xw-feats small { display: none; }
}

/* ------------------------------------------------------------ the mark, taken apart */
#mark { height: 300vh; }
.mark-head { position: absolute; top: 88px; left: clamp(20px, 4vw, 60px); text-align: left; width: 340px; }
.mark-head h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 8px; }
.mark-btn { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.12); background: rgba(var(--surface), 0.72); color: var(--accent); font: 630 11px var(--sans); cursor: pointer; backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); transition: opacity 0.3s, background 0.12s, border-color 0.12s; }
.mark-btn:hover { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--raised), 0.9); }
.mark-btn i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.mlabel { position: absolute; transform: translate(0, -100%); display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(var(--raised), 0.92); border: 1px solid rgba(var(--ink), 0.12); font: 590 11px var(--sans); color: var(--muted); white-space: nowrap; pointer-events: none; transition: background 0.12s, color 0.12s, border-color 0.12s; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.mlabel b { font: 500 10px var(--mono); color: var(--dim); }
.mlabel.short span { display: none; }
.mlabel.short.on span, .mlabel.short:hover span { display: inline; }
.mlabel:hover, .mlabel.on { background: rgba(var(--hover), 0.96); border-color: rgba(var(--ink), 0.28); color: var(--text); }
.mlabel.on { background: var(--accent); border-color: var(--accent); color: rgb(var(--on-accent)); }
.mlabel.on b { color: rgba(var(--on-accent), 0.6); }
.mgroup { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 7px; font: 650 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; pointer-events: none; }
.mgroup b { font: 500 10px var(--mono); letter-spacing: 0; color: var(--dim); }
#gl.spinning { cursor: grabbing; }
.spin-hint { position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 3; margin: 0; font: 500 11px var(--sans); color: var(--dim); white-space: nowrap; pointer-events: none; transition: opacity 0.4s; }
.spin-hint b { color: var(--muted); font-weight: 600; }
/* shut, the hint is a quiet note up beside the mark's top-left (or just over it, on a narrow screen) */
.spin-hint[data-place='side'], .spin-hint[data-place='above'] { font-size: 10px; line-height: 1.5; letter-spacing: 0.01em; }
.spin-hint[data-place='side'] { transform: translate(-100%, 0); text-align: right; }
.spin-hint[data-place='above'] { transform: translate(0, -100%); text-align: left; }
.mark-card { position: fixed; left: 50%; top: 50%; z-index: 8; width: min(400px, calc(100% - 24px)); padding: 14px 16px; border-radius: 14px; background: rgb(var(--raised)); border: 1px solid rgba(var(--ink), 0.16); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); opacity: 0; transform: translate(-50%, -46%); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.mark-card.show { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.mark-card .mc-preview { display: block; width: 100%; margin: 0 auto 12px; border-radius: 10px; background: #000; }
.mark-card .mc-sys { margin: 0 0 6px; font: 650 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); display: flex; gap: 8px; }
.mark-card .mc-sys b { font: 500 10px var(--mono); letter-spacing: 0; color: var(--muted); }
.mark-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 640; }
.mark-card .mc-desc { margin: 0 0 12px; max-width: 72ch; color: var(--muted); line-height: 1.5; font-size: 12.5px; }
.mark-card a { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(var(--ink), 0.16); background: rgba(var(--control), 0.88); font: 600 11px var(--sans); color: var(--text); text-decoration: none; }
.mark-card a:hover { background: rgba(var(--ink), 0.11); }

/* ------------------------------------------------------------ teardown parts list: a workspace tool menu */
.parts { position: absolute; right: clamp(16px, 3vw, 44px); top: 50%; transform: translateY(-50%); width: 290px; padding: 6px; border-radius: 11px; background: rgb(var(--raised)); border: 1px solid rgba(var(--ink), 0.16); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.25s; }
.parts.show { opacity: 1; }
.parts h4 { margin: 0; padding: 10px 9px 6px; font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; }
.parts h4 span { font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--mono); }
.parts ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 1px; }
.parts li button { all: unset; display: flex; gap: 10px; width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 7px; font-size: 12px; cursor: pointer; color: var(--text); }
.parts li button b { font: 500 10px var(--mono); color: var(--dim); width: 18px; padding-top: 2px; }
.parts li button:hover { background: rgba(var(--ink), 0.08); }
.parts li button.on { background: rgba(var(--accent-rgb), 0.14); box-shadow: inset 2px 0 var(--accent); }
.parts li button.on b { color: var(--muted); }
.card { margin: 0 4px 4px; border-top: 1px solid var(--line); padding: 10px 6px 4px; min-height: 88px; }
.card b { display: block; font-size: 13px; font-weight: 640; margin-bottom: 4px; }
.card .sys { font: 650 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; display: block; }
.card p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* balloons and leader lines (drawn over the scene by JS) */
#overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bal { position: absolute; height: 20px; min-width: 24px; margin: -10px 0 0 -12px; padding: 0 5px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 600 10px var(--mono); color: var(--muted); background: rgb(var(--raised)); border: 1px solid rgba(var(--ink), 0.18); pointer-events: auto; cursor: pointer; transition: background 0.12s, color 0.12s; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.bal:hover, .bal.on { background: var(--accent); border-color: var(--accent); color: rgb(var(--on-accent)); }
.tagline { position: absolute; padding: 4px 8px; border-radius: 6px; background: rgb(var(--raised)); border: 1px solid rgba(var(--ink), 0.18); color: var(--text); font: 590 11px var(--sans); white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }

/* ------------------------------------------------------------ attention: the sidebar's session activity */
.legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.legend li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; font: 550 10px var(--sans); color: var(--muted); background: rgba(var(--border-strong), 0.16); }
i.working, i.idle, i.waiting { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
i.working { animation: pulse 1.8s infinite; }
i.idle { background: var(--dim); }
i.waiting { background: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22); }
li:has(i.waiting) { color: rgb(var(--on-accent)) !important; background: var(--accent) !important; }
li:has(i.waiting) i { background: rgb(var(--on-accent)); box-shadow: none; }
@keyframes pulse { 50% { opacity: 0.35; } }
/* the approval card: the app's sidebar approval menu */
.approval { position: absolute; right: clamp(16px, 5vw, 80px); bottom: 12vh; width: 330px; padding: 14px; border-radius: 14px; background: rgb(var(--control)); border: 1px solid rgb(var(--border)); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.47), 0 2px 8px rgba(0, 0, 0, 0.25); font: 12px/1.45 var(--sans); opacity: 0; transform: translateY(16px); transition: opacity 0.25s, transform 0.25s; }
.approval.show { opacity: 1; transform: none; }
.ap-head { display: flex; align-items: center; gap: 8px; }
.ap-head b { font-size: 13px; font-weight: 600; }
.ap-head span { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; font-size: 9.5px; font-weight: 600; color: rgb(var(--on-accent)); background: var(--accent); }
.approval.done .ap-head span { color: var(--muted); background: rgba(var(--border-strong), 0.18); }
.ap-head i { display: none; }
.ap-where { font: 10px var(--mono); color: var(--dim); margin: 2px 0 10px; }
.approval p { margin: 0 0 6px; font-size: 12px; color: var(--text); }
.approval .ap-ask { color: var(--dim); font-size: 11px; }
.approval code { display: block; padding: 10px; border-radius: 8px; background: rgba(var(--canvas), 0.5); border: 1px solid rgba(var(--border-strong), 0.5); font: 12px var(--mono); color: var(--text); margin: 6px 0 12px; }
.ap-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-done { font: 11px var(--mono); color: var(--muted) !important; margin-top: 10px !important; }

/* ------------------------------------------------------------ coordinate */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.pair div { padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--ink), 0.12); background: rgb(var(--surface)); }
.pair b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 620; margin-bottom: 3px; }
/* the agents' real marks (marks.js, from the app's ProviderIcons): Claude in its orange, the others in the text colour */
.pmark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; height: 15px; font-style: normal; color: var(--text); }
.pmark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.pmark[data-mark='claude'] { color: #d97757; }
.pmark.box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(var(--ink), 0.12); background: rgba(var(--ink), 0.045); }
.pmark.box svg { width: 11px; height: 11px; }
/* in a sentence: the mark before the name, the pair kept together */
.ag { white-space: nowrap; color: var(--text); }
.ag .pmark { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.32em; vertical-align: -0.13em; }
/* the master's provider, the way master settings picks it */
.providers { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 18px; }
.providers span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(var(--ink), 0.12); background: rgb(var(--surface)); font-size: 12px; font-weight: 590; color: var(--muted); }
.providers span.on { border-color: rgba(var(--ink), 0.3); background: rgba(var(--ink), 0.07); color: var(--text); }
.providers .pmark { width: 13px; height: 13px; }
.pair span { font: 10px var(--mono); color: var(--dim); }

/* ------------------------------------------------------------ pricing, faq */
.center-wrap { max-width: 900px; margin: 0 auto; text-align: center; }
.center-wrap.narrow { max-width: 720px; text-align: left; }
.center-wrap .sub { color: var(--muted); line-height: 1.55; max-width: 580px; margin: 0 auto 32px; font-size: 14px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.plan { position: relative; padding: 22px; border-radius: 14px; background: rgba(var(--surface), 0.92); border: 1px solid rgba(var(--ink), 0.14); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), inset 0 1px rgba(var(--ink), 0.035); }
.plan.best { border-color: rgba(var(--ink), 0.36); }
.plan h3 { margin: 0 0 8px; font-size: 13px; font-weight: 620; color: var(--muted); }
.plan .price { margin: 0 0 6px; color: var(--dim); font-size: 13px; }
.plan .price b { font-size: 38px; color: var(--text); letter-spacing: -0.03em; font-weight: 650; }
.plan p { color: var(--muted); line-height: 1.5; font-size: 13px; }
.plan .btn { margin: 8px 0 12px; width: 100%; }
.tag { position: absolute; top: 18px; right: 18px; font: 600 9.5px var(--sans); padding: 2px 6px; border-radius: 5px; background: var(--accent); color: rgb(var(--on-accent)); letter-spacing: 0; }
.more { display: inline-flex; margin-top: 22px; height: 30px; align-items: center; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(var(--ink), 0.16); background: rgba(var(--control), 0.88); font: 600 12px var(--sans); letter-spacing: 0; color: var(--text); text-decoration: none; }
details { border-bottom: 1px solid var(--line); padding: 14px 10px; border-radius: 0; background: rgba(var(--canvas), 0.72); }
details:hover { background: rgba(var(--ink), 0.03); }
summary { cursor: pointer; font-size: 14px; font-weight: 590; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
summary::after { content: '+'; color: var(--dim); font-family: var(--mono); }
details[open] summary::after { content: '–'; }
details p { color: var(--muted); line-height: 1.6; margin: 10px 0 0; font-size: 13px; }

.footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 22px 20px 28px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: #000; }
.footer nav { display: flex; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.footer nav a { color: var(--dim); text-decoration: none; padding: 5px 9px; border-radius: 7px; }
.footer nav a:hover { color: var(--text); background: rgba(var(--ink), 0.055); }
.footer .fine { margin-left: auto; }

/* ------------------------------------------------------------ small screens: text under the scene */
@media (max-width: 820px) {
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .panel.left { left: 12px; right: 12px; top: auto; bottom: 14px; transform: none; max-width: none; padding: 16px 16px; }
  .panel.left .steps li:not(.on) { display: none; }
  .panel.left p { font-size: 13px; }
  .parts { left: 12px; right: 12px; width: auto; top: 64px; transform: none; max-height: 30vh; overflow: auto; }
  .approval { left: 12px; right: 12px; width: auto; bottom: auto; top: 64px; }
  .plans { grid-template-columns: 1fr; }
  .footer .fine { margin-left: 0; }
  .eyebrow { flex-wrap: wrap; justify-content: center; gap: 4px 8px; border-radius: 12px; padding: 4px 10px; font-size: 10px; }
  .hero .panel .eyebrow, .finale .panel .eyebrow { font-size: 10px; }
  .parts ul { grid-template-columns: 1fr 1fr; gap: 0 4px; margin-bottom: 4px; }
  .parts li button { font-size: 11.5px; padding: 4px 6px; }
  .parts .card { min-height: 0; }
  #teardown .panel p:not(.hint) { display: none; }
  .finale .panel.center { margin-top: 66vh; }
  .mark-head { top: 66px; left: 50%; transform: translateX(-50%); text-align: center; width: calc(100% - 32px); }
  .mark-card { top: auto !important; left: 50% !important; bottom: 18px; transform: translate(-50%, 16px); }
  .mark-card.show { transform: translate(-50%, 0); }
  .mark-head h2 { font-size: 22px; }
  .mlabel { font-size: 10px; height: 18px; padding: 0 6px; }
  .mark-card .mc-preview { display: none; }
  .mlabel span { display: none; }
  .mark-btn { top: 60px; }
  .mgroup { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint b, i.working { animation: none; }
}

/* where other armadai.sh pages' links to the homepage's sections land */
.anchor-alias { display: block; height: 0; scroll-margin-top: 80px; }

/* A window many screens tall is nobody's screen. It is a search engine's renderer, which draws a page into one very
   tall window instead of scrolling it (Google's is about 12,000 px high), or a tool taking a picture of the whole
   page. There the scene can't be drawn (a canvas that size is refused) and the chapters, each a screen tall or more,
   end up thousands of pixels apart on black. So in such a window the page is plain: the same words, in order, top to
   bottom, all of them shown and nothing moving. main.js doesn't draw the scene there either (PLAIN). */
@media (min-height: 5000px) {
  #gl, #overlay, .boot, .mark-card, .mark-btn, .spin-hint, .scroll-hint, .parts, .approval, .xtip, .hint { display: none !important; }
  .chapter { height: auto !important; }
  .sticky { position: static; height: auto; padding: 0 24px; }
  .hero { padding: 120px 24px 24px; }
  .finale { display: block; padding: 24px 24px 72px; }
  .panel, .mark-head { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: auto; max-width: 720px; margin: 22px auto !important; }
  .hero .panel.center, .finale .panel.center { max-width: 900px; }
  .finale .panel.center::before { display: none; }
  .mark-head { text-align: left; }
  /* what a phone's width folds away to keep a panel short is shown here: there is room */
  .panel.left .steps li:not(.on) { display: block; }
  #teardown .panel p:not(.hint) { display: block; }
}