/* estate.css — GENERATED by estate-ui/build.mjs from tokens.json. Do not edit; edit tokens.json and rebuild.
   Palette fingerprint ef1ab3a1. One block per palette, applied as <html class="pal-<key>">. There is NO :root palette
   anywhere in this file on purpose: a :root block has the same specificity as .pal-* and, declared later, would win —
   which is how a class flip on <html> becomes dead CSS. Client overlays go in html[data-tenant="…"]{} (0,1,1). */

/* @fonts */
@font-face{ font-family:'Geist Fallback'; src:local('Arial'); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }

/* @scale — palette-independent, so it lives on html, never in :root */
html{ --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:15px; --fs-6:17px; --fs-7:20px; --fs-8:24px; --fs-9:28px; --fs-10:34px; --fs-11:42px; --fs-12:52px; --r-1:6px; --r-2:12px; --r-3:22px; --r-4:24px; --sans:Geist,'Geist Fallback',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace; }

/* @palette piano — Piano Neon */
.pal-piano{ --bg:#010102; --bg-2:#06070B; --panel:#10121C; --panel-2:#171A28; --line:#24222A; --line-2:#34313B; --line-soft:#19181D; --line-ui:#60606C; --text:#F6F7FC; --text-2:#D9DDEB; --muted:#A3A9C0; --muted-2:#969DB5; --dim:#8A90A8; --faint:#8A90A8; --hairline:#5F6680; --accent:#FFC247; --accent-hi:#FFD57A; --on-accent:#1A1205; --accent-tint:#231C0A; --ok:#22D3EE; --on-ok:#002520; --ok-tint:#08211E; --bad:#FF3D7F; --on-bad:#2A0010; --bad-tint:#2A0B18; --warn:#FF8A3D; --on-warn:#1E0A00; --warn-tint:#2A160A; --agent:#A78BFA; --on-agent:#160B26; --agent-tint:#1E1229; --pop:#CFFF3A; --on-pop:#141A00; --pop-tint:#171D07; --bg-rgb:1 1 2; --panel-rgb:16 18 28; --line-rgb:36 34 42; --accent-rgb:255 194 71; --ok-rgb:34 211 238; --bad-rgb:255 61 127; --warn-rgb:255 138 61; --agent-rgb:167 139 250; --pop-rgb:207 255 58; --grid:rgba(34,211,238,0.015); --void:var(--bg); --deep:var(--bg-2); --ink:var(--text); --gold:var(--accent); --turq:var(--ok); --tq:var(--ok); --pos:var(--ok); --neg:var(--bad); }
/* @palette ember — Ember Ink */
.pal-ember{ --bg:#0B0E1A; --bg-2:#0E1222; --panel:#121729; --panel-2:#181E35; --line:#222A42; --line-2:#2F3854; --line-soft:#191F33; --line-ui:#666E7A; --text:#ECEFF7; --text-2:#CDD3E3; --muted:#A5ADC5; --muted-2:#9099B3; --dim:#8089A4; --faint:#8089A4; --hairline:#5E6782; --accent:#FF6B2C; --accent-hi:#FF9466; --on-accent:#1C0900; --accent-tint:#2A1710; --ok:#7CF5D0; --on-ok:#03231A; --ok-tint:#0D2420; --bad:#FF4D5E; --on-bad:#1A0A10; --bad-tint:#2A1017; --warn:#FFC04D; --on-warn:#1E0A00; --warn-tint:#2A2010; --agent:#9B8CFF; --on-agent:#160B26; --agent-tint:#1B1832; --pop:#CFFF3A; --on-pop:#141A00; --pop-tint:#1A200C; --bg-rgb:11 14 26; --panel-rgb:18 23 41; --line-rgb:34 42 66; --accent-rgb:255 107 44; --ok-rgb:124 245 208; --bad-rgb:255 77 94; --warn-rgb:255 192 77; --agent-rgb:155 140 255; --pop-rgb:207 255 58; --grid:rgba(255,255,255,0.03); --void:var(--bg); --deep:var(--bg-2); --ink:var(--text); --gold:var(--accent); --turq:var(--ok); --tq:var(--ok); --pos:var(--ok); --neg:var(--bad); }
/* @palette v1 — Cyan/Lime v1 */
.pal-v1{ --bg:#06080A; --bg-2:#080B0E; --panel:#0C1014; --panel-2:#10151B; --line:#1B232C; --line-2:#26303B; --line-soft:#12181E; --line-ui:#5C6674; --text:#E8EEF4; --text-2:#C9D3DD; --muted:#A3AFBC; --muted-2:#8A97A6; --dim:#7C8896; --faint:#7C8896; --hairline:#5E6B79; --accent:#2DE2F0; --accent-hi:#8AF1F8; --on-accent:#031418; --accent-tint:#0A1A1C; --ok:#C6F432; --on-ok:#0E1400; --ok-tint:#10180A; --bad:#FF6B6B; --on-bad:#1A0A10; --bad-tint:#1A0C0E; --warn:#FFB547; --on-warn:#1E0A00; --warn-tint:#1A140A; --agent:#B98CFF; --on-agent:#160B26; --agent-tint:#1A0F1C; --pop:#FF5FD2; --on-pop:#22001A; --pop-tint:#200A1B; --bg-rgb:6 8 10; --panel-rgb:12 16 20; --line-rgb:27 35 44; --accent-rgb:45 226 240; --ok-rgb:198 244 50; --bad-rgb:255 107 107; --warn-rgb:255 181 71; --agent-rgb:185 140 255; --pop-rgb:255 95 210; --grid:rgba(255,255,255,0.028); --void:var(--bg); --deep:var(--bg-2); --ink:var(--text); --gold:var(--accent); --turq:var(--ok); --tq:var(--ok); --pos:var(--ok); --neg:var(--bad); }

/* @neon — Piano only: gold links glow on hover, cards light up gold with a turquoise halo */
.pal-piano a:hover{ text-shadow:0 0 10px rgb(var(--accent-rgb) / 0.55); }
.pal-piano .capcard:hover,.pal-piano .mt-capcard:hover{ box-shadow:0 0 0 1px var(--accent), 0 0 22px rgb(var(--accent-rgb) / 0.35), 0 18px 48px rgb(var(--ok-rgb) / 0.12) !important; }
.pal-piano .pop-tag{ box-shadow:0 0 14px rgb(var(--pop-rgb) / 0.45); }

/* @base */
.pal-piano,.pal-ember,.pal-v1{ background:var(--bg); color:var(--text); }
.mt-body{ margin:0; overflow-x:clip; font-family:var(--sans); font-size:var(--fs-4); line-height:1.55; background:var(--bg); color:var(--text); background-image:radial-gradient(900px 520px at 15% -8%, rgba(var(--accent-rgb) / 0.07), transparent 60%), radial-gradient(760px 460px at 88% 6%, rgba(var(--ok-rgb) / 0.05), transparent 62%), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:175% 175%, 175% 175%, 48px 48px, 48px 48px; background-position:0% 0%, 100% 0%, 0 0, 0 0; -webkit-font-smoothing:antialiased; }
/* The morfs (DW): a slow, low-opacity aurora drifts behind every surface while the
   grid stays crisp (per-layer background-position — only the two radial layers move).
   The drift itself is the morf motion in tokens.json (its keyframe + the mt-body
   animation class), so the reduced-motion list names it and the motion test counts it. */
.mt-wrap{ max-width:1440px; margin:0 auto; padding:0 32px; }
.mt-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.mt-stack{ display:flex; flex-direction:column; gap:10px; }
.mt-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mt-mono{ font-family:var(--mono); }
.mt-h1{ font-size:var(--fs-10); font-weight:600; letter-spacing:-0.02em; line-height:1.1; margin:0 0 12px; }
.mt-h2{ font-size:var(--fs-7); font-weight:600; letter-spacing:-0.01em; line-height:1.2; margin:0 0 10px; }
.mt-kicker{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.mt-muted{ color:var(--muted-2); }
::placeholder{ color:var(--muted-2); opacity:1; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mt-input{ font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line-ui); border-radius:var(--r-2); padding:10px 12px; min-height:44px; }
.mt-input:focus-visible{ border-color:var(--accent); }
.mt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--r-2); border:1px solid var(--line-ui); background:transparent; color:var(--text); font:inherit; font-size:var(--fs-4); text-decoration:none; cursor:pointer; }
.mt-btn:hover{ border-color:var(--accent); }
.mt-btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.mt-btn-bad{ background:var(--bad); color:var(--on-bad); border-color:var(--bad); font-weight:600; }
.mt-secure .mt-wordmark-img,.mt-secure .mt-client-colors{ display:none; }
.mt-secure .mt-nav{ border-bottom-color:var(--line-ui); }
.mt-secure .mt-secure-note{ display:inline-flex; }
.mt-secure-note{ display:none; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-1); color:var(--dim); }

/* @tags */
.pop-tag{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.08em; text-transform:uppercase; color:var(--on-pop); background:var(--pop); border-radius:var(--r-1); padding:3px 7px; white-space:nowrap; font-weight:600; }
.sample-tag{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.1em; text-transform:uppercase; color:var(--warn); border:1px dashed rgb(var(--warn-rgb) / 0.55); border-radius:var(--r-1); padding:2px 6px; white-space:nowrap; }
.mt-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.06em; text-transform:uppercase; border-radius:var(--r-1); padding:3px 7px; white-space:nowrap; border:1px solid transparent; }
.mt-badge-neutral{ color:var(--muted); background:var(--panel-2); border-color:var(--line-2); }
.mt-badge-accent{ color:var(--accent); background:var(--accent-tint); }
.mt-badge-ok{ color:var(--ok); background:var(--ok-tint); }
.mt-badge-bad{ color:var(--bad); background:var(--bad-tint); }
.mt-badge-warn{ color:var(--warn); background:var(--warn-tint); }
.mt-badge-agent{ color:var(--agent); background:var(--agent-tint); }
.mt-badge-pop{ color:var(--on-pop); background:var(--pop); }
.mt-badge-fill-ok{ color:var(--on-ok); background:var(--ok); }
.mt-badge-fill-bad{ color:var(--on-bad); background:var(--bad); }
.mt-badge-fill-warn{ color:var(--on-warn); background:var(--warn); }
.mt-badge-fill-agent{ color:var(--on-agent); background:var(--agent); }
.mt-badge-fill-accent{ color:var(--on-accent); background:var(--accent); }

/* @nav — one nav across every surface. 6 public products in the product row; never a fenced host. */
.mt-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; height:64px; box-sizing:border-box; padding:0 32px; background:rgb(var(--bg-rgb) / 0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); font-family:var(--sans); color:var(--text); }
.mt-nav a{ color:inherit; text-decoration:none; }
.mt-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mt-mark{ width:26px; height:26px; flex-shrink:0; }
.mt-mark path{ stroke:var(--accent); }
.mt-mark circle{ fill:var(--accent); }
.mt-mark .mt-mark-core{ fill:var(--ok); }
.mt-diamond path{ fill:var(--accent); }
.mt-word{ font-size:var(--fs-6); font-weight:600; letter-spacing:-0.01em; }
.mt-client{ font-size:var(--fs-4); font-weight:500; color:var(--text-2); padding-left:10px; border-left:1px solid var(--line-2); }
.mt-wordmark-img{ height:22px; width:auto; max-width:140px; display:block; }
.mt-chip{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted-2); border:1px solid var(--line-ui); border-radius:var(--r-1); padding:2px 6px; white-space:nowrap; }
.mt-items{ display:flex; align-items:center; gap:2px; flex-grow:1; min-width:0; }
.mt-item{ display:flex; align-items:center; height:36px; padding:0 9px; border-radius:var(--r-2); font-size:var(--fs-3); white-space:nowrap; color:var(--muted-2); }
.mt-item:hover{ color:var(--text); }
.mt-item[aria-current="page"]{ color:var(--text); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line-ui); }
.mt-more{ position:relative; }
.mt-more summary{ list-style:none; cursor:pointer; display:flex; align-items:center; height:36px; padding:0 9px; border-radius:var(--r-2); font-size:var(--fs-3); color:var(--muted-2); white-space:nowrap; }
.mt-more summary::-webkit-details-marker{ display:none; }
.mt-more summary::after{ content:" ▾"; font-size:var(--fs-1); }
.mt-more[open] summary{ color:var(--text); }
.mt-products{ position:absolute; top:40px; left:0; min-width:220px; display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--panel); border:1px solid var(--line-ui); border-radius:var(--r-3); box-shadow:0 18px 48px rgb(var(--bg-rgb) / 0.6); }
.mt-products-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); padding:6px 9px 2px; }
.mt-products .mt-item{ height:40px; }
.mt-pal{ margin:0; flex-shrink:0; }
.mt-pal > div{ display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-ui); border-radius:9px; background:var(--panel); }
.mt-sw{ display:flex; align-items:center; justify-content:center; width:30px; height:28px; padding:0; border:0; border-radius:6px; cursor:pointer; background:transparent; color:var(--muted-2); }
.mt-sw span{ width:10px; height:10px; border-radius:50%; display:block; }
.mt-sw[aria-pressed="true"]{ background:var(--panel-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-ui); }
.mt-sw-piano span{ background:#FFC247; box-shadow:0 0 0 2px #010102, 0 0 0 3px rgba(255,255,255,0.18); }
.mt-sw-ember span{ background:#FF6B2C; box-shadow:0 0 0 2px #0B0E1A, 0 0 0 3px rgba(255,255,255,0.18); }
.mt-sw-v1 span{ background:#2DE2F0; box-shadow:0 0 0 2px #06080A, 0 0 0 3px rgba(255,255,255,0.18); }
.mt-balance{ display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--line-ui); border-radius:var(--r-2); font-family:var(--mono); font-size:var(--fs-3); flex-shrink:0; }
.mt-balance svg{ width:12px; height:12px; }
.mt-cta{ display:flex; align-items:center; height:36px; padding:0 16px; border-radius:var(--r-2); background:var(--accent); color:var(--on-accent) !important; font-size:var(--fs-4); font-weight:600; flex-shrink:0; }
.mt-menu{ display:none; }
.mt-nav.mt-universe{ height:40px; padding:0 16px; gap:10px; }
.mt-nav.mt-universe .mt-mark{ width:18px; height:18px; }
.mt-nav.mt-universe .mt-word{ font-size:var(--fs-3); }
.mt-nav.mt-universe .mt-item{ height:28px; font-size:var(--fs-2); padding:0 7px; }
.mt-nav.mt-universe .mt-chip,.mt-nav.mt-universe .mt-cta,.mt-nav.mt-universe .mt-balance,.mt-nav.mt-universe .mt-more{ display:none; }
.mt-nav.mt-universe .mt-pal > div{ padding:2px; }
.mt-nav.mt-universe .mt-sw{ width:24px; height:22px; }

/* @footer */
.mt-footer{ padding:48px 32px 32px; display:flex; flex-direction:column; gap:40px; background:var(--bg); border-top:1px solid var(--line); font-family:var(--sans); color:var(--text); }
.mt-footer a{ color:var(--text-2); text-decoration:none; }
.mt-footer a:hover{ color:var(--text); }
.mt-footer-top{ display:flex; gap:64px; max-width:1440px; margin:0 auto; width:100%; }
.mt-footer-brand{ display:flex; flex-direction:column; gap:12px; width:360px; flex-shrink:0; }
.mt-footer-brand .mt-word{ font-size:var(--fs-6); font-weight:600; }
.mt-footer-blurb{ font-size:var(--fs-4); line-height:1.55; color:var(--muted-2); }
.mt-footer-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; flex-grow:1; font-size:var(--fs-4); }
.mt-col{ display:flex; flex-direction:column; gap:10px; }
.mt-col h4{ margin:0; font-family:var(--mono); font-size:var(--fs-1); font-weight:400; letter-spacing:0.08em; color:var(--dim); }
.mt-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-2); color:var(--dim); max-width:1440px; margin:0 auto; width:100%; }
.mt-status{ display:flex; align-items:center; gap:8px; }
.mt-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block; }
.mt-dot-warn{ background:var(--warn); } .mt-dot-bad{ background:var(--bad); }

/* @components */
.mt-receipt{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); font-family:var(--mono); font-size:var(--fs-3); }
.mt-receipt-id{ color:var(--dim); font-size:var(--fs-1); letter-spacing:0.06em; }
.mt-receipt-cap{ color:var(--text); font-family:var(--sans); font-size:var(--fs-4); font-weight:500; }
.mt-receipt-price{ color:var(--accent); font-weight:600; text-align:right; }
.mt-receipt-meta{ color:var(--muted-2); display:flex; gap:10px; align-items:center; flex-wrap:wrap; grid-column:1 / -1; }
.mt-capcard{ display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); transition:box-shadow .2s, transform .2s; }
.mt-capcard:hover{ transform:translateY(-1px); }
.mt-capcard:focus-within{ box-shadow:0 0 0 1px var(--accent); }
.mt-capcard-name{ font-size:var(--fs-5); font-weight:600; }
.mt-capcard-name a{ color:inherit; text-decoration:none; }
.mt-capcard-blurb{ color:var(--muted); font-size:var(--fs-3); line-height:1.5; }
.mt-capcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted-2); }
.mt-capcard-price{ color:var(--accent); font-weight:600; font-size:var(--fs-4); }
.mt-kpi{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); min-width:0; }
.mt-kpi-v{ font-family:var(--mono); font-size:var(--fs-8); font-weight:600; letter-spacing:-0.02em; line-height:1.1; color:var(--text); }
.mt-kpi-v small{ font-size:var(--fs-3); color:var(--muted-2); font-weight:400; margin-left:6px; }
.mt-kpi-d{ font-family:var(--mono); font-size:var(--fs-2); }
.mt-kpi-d.up{ color:var(--ok); } .mt-kpi-d.down{ color:var(--bad); }
.mt-pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:var(--fs-2); padding:4px 10px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text-2); }
.mt-pill .mt-dot{ width:8px; height:8px; }
.mt-pill-detail{ color:var(--muted-2); }
.mt-ticker{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); font-family:var(--mono); font-size:var(--fs-2); }
.mt-ticker-track{ display:flex; width:max-content; padding:8px 0; animation:mtick 38s linear infinite; }
.mt-ticker-set{ display:inline-flex; gap:40px; padding-right:40px; }
.mt-ticker:hover .mt-ticker-track,.mt-ticker:focus-within .mt-ticker-track{ animation-play-state:paused; }
.mt-ticker-item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:var(--muted); }
.mt-ticker-item .mt-dot{ width:6px; height:6px; }
.mt-ticker-tag{ padding:6px 32px; }
.mt-ticker-pause{ position:absolute; left:-9999px; }
.mt-ticker-pause:focus-visible{ position:static; }
.mt-tc{ width:100%; }
.mt-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:var(--fs-3); }
.mt-table caption{ text-align:left; padding:0 0 8px; font-family:var(--sans); color:var(--muted-2); font-size:var(--fs-3); }
.mt-table th{ text-align:left; font-weight:400; font-size:var(--fs-1); letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); padding:8px 10px; border-bottom:1px solid var(--line-2); }
.mt-table td{ padding:10px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:top; }
.mt-cards{ display:none; flex-direction:column; gap:10px; }
.mt-card{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); font-family:var(--mono); font-size:var(--fs-3); }
.mt-card dt{ color:var(--dim); font-size:var(--fs-1); letter-spacing:0.06em; text-transform:uppercase; padding-top:2px; }
.mt-card dd{ margin:0; color:var(--text-2); overflow-wrap:anywhere; }
.mt-diagram-list{ display:none; }
.mt-door{ max-width:440px; margin:64px auto; padding:28px; background:var(--panel); border:1px solid var(--line-ui); border-radius:var(--r-4); display:flex; flex-direction:column; gap:14px; font-family:var(--sans); }
.mt-door h1{ font-size:var(--fs-7); margin:0; font-weight:600; }
.mt-door p{ margin:0; color:var(--muted); line-height:1.5; }

/* @tile — a stat tile: kicker + big mono value + trend, with a slot for a sparkline. The dashboard L1. */
.mt-tile{ display:flex; flex-direction:column; gap:8px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); min-width:0; }
.mt-tile-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mt-tile-v{ font-family:var(--mono); font-size:var(--fs-9); font-weight:600; letter-spacing:-0.02em; line-height:1.05; color:var(--text); overflow-wrap:anywhere; }
.mt-tile-v small{ font-family:var(--sans); font-size:var(--fs-2); color:var(--muted-2); font-weight:400; margin-left:5px; }
.mt-tile-d{ font-family:var(--mono); font-size:var(--fs-2); white-space:nowrap; }
.mt-tile-d.up{ color:var(--ok); } .mt-tile-d.down{ color:var(--bad); }

/* @spark — a sparkline: an SVG polyline over a numeric series; colour by class, geometry in attributes (CSP-safe). vector-effect keeps the 1.5px stroke crisp under the non-uniform scale. */
.mt-spark{ display:block; width:100%; height:34px; }
.mt-spark-line{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.mt-spark-area{ fill:rgb(var(--accent-rgb) / 0.12); stroke:none; }
.mt-spark.ok .mt-spark-line{ stroke:var(--ok); } .mt-spark.ok .mt-spark-area{ fill:rgb(var(--ok-rgb) / 0.12); }
.mt-spark.bad .mt-spark-line{ stroke:var(--bad); } .mt-spark.bad .mt-spark-area{ fill:rgb(var(--bad-rgb) / 0.12); }
.mt-spark.agent .mt-spark-line{ stroke:var(--agent); } .mt-spark.agent .mt-spark-area{ fill:rgb(var(--agent-rgb) / 0.12); }

/* @meter — a ratio/progress meter: an SVG track + fill rect, the fill width a number in a 0..100 box. */
.mt-meter{ display:flex; flex-direction:column; gap:6px; }
.mt-meter-cap{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted-2); }
.mt-meter-cap b{ color:var(--text); font-weight:600; }
.mt-meter-bar{ display:block; width:100%; height:10px; }
.mt-meter-track{ fill:var(--panel-2); }
.mt-meter-fill{ fill:var(--accent); }
.mt-meter.ok .mt-meter-fill{ fill:var(--ok); }
.mt-meter.warn .mt-meter-fill{ fill:var(--warn); }
.mt-meter.bad .mt-meter-fill{ fill:var(--bad); }

/* @bars — a labelled horizontal bar chart: one row per item, each bar an SVG rect whose width is numeric. */
.mt-bars{ display:flex; flex-direction:column; gap:9px; }
.mt-bars-row{ display:grid; grid-template-columns:minmax(64px, 28%) 1fr auto; gap:10px; align-items:center; }
.mt-bars-label{ font-size:var(--fs-2); color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-bars-track{ display:block; width:100%; height:12px; }
.mt-bars-bg{ fill:var(--panel-2); }
.mt-bars-fill{ fill:var(--accent); }
.mt-bars-row.ok .mt-bars-fill{ fill:var(--ok); }
.mt-bars-row.agent .mt-bars-fill{ fill:var(--agent); }
.mt-bars-row.warn .mt-bars-fill{ fill:var(--warn); }
.mt-bars-row.pop .mt-bars-fill{ fill:var(--pop); }
.mt-bars-v{ font-family:var(--mono); font-size:var(--fs-2); color:var(--text-2); }

/* @legend — a direct chart legend: a swatch per series, coloured by class (never a style attribute). */
.mt-legend{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.04em; color:var(--muted-2); }
.mt-legend span{ display:inline-flex; align-items:center; gap:6px; }
.mt-legend i{ width:9px; height:9px; border-radius:2px; background:var(--accent); display:inline-block; }
.mt-legend .ok i{ background:var(--ok); } .mt-legend .agent i{ background:var(--agent); } .mt-legend .warn i{ background:var(--warn); } .mt-legend .pop i{ background:var(--pop); }

/* @mint — a mintable-instrument card (the wallet Mint Bay): a family accent bar, a tinted glyph, name, blurb, depth. */
.mt-mint{ position:relative; display:flex; flex-direction:column; gap:10px; padding:18px 16px 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden; transition:box-shadow .2s, transform .2s; }
.mt-mint:hover{ transform:translateY(-1px); }
.mt-mint:focus-within{ box-shadow:0 0 0 1px var(--accent); }
.mt-mint::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--accent), transparent 80%); }
.mt-mint-head{ display:flex; align-items:center; gap:10px; }
.mt-mint-glyph{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:var(--r-2); background:var(--accent-tint); color:var(--accent); font-family:var(--mono); font-size:var(--fs-3); font-weight:600; }
.mt-mint-name{ font-size:var(--fs-5); font-weight:600; }
.mt-mint-name a{ color:inherit; text-decoration:none; }
.mt-mint-blurb{ color:var(--muted); font-size:var(--fs-3); line-height:1.5; flex-grow:1; }
.mt-mint-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; }
.mt-mint.ok::before{ background:linear-gradient(90deg, var(--ok), transparent 80%); }
.mt-mint.ok .mt-mint-glyph{ background:var(--ok-tint); color:var(--ok); }
.mt-mint.agent::before{ background:linear-gradient(90deg, var(--agent), transparent 80%); }
.mt-mint.agent .mt-mint-glyph{ background:var(--agent-tint); color:var(--agent); }
.mt-mint.pop::before{ background:linear-gradient(90deg, var(--pop), transparent 80%); }
.mt-mint.pop .mt-mint-glyph{ background:var(--pop); color:var(--on-pop); }

/* @ladder — the recursive-leverage depth ladder: settled rung = a minted skill, leverage = mints deeper, end = loop back. Nested ladders indent; the spine is a border, the node a dot — no data geometry, so no SVG. */
.mt-ladder{ display:flex; flex-direction:column; }
.mt-ladder .mt-ladder{ margin-left:16px; }
.mt-rung{ position:relative; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:8px 0 8px 22px; }
.mt-rung::before{ content:""; position:absolute; left:5px; top:0; bottom:0; width:1px; background:var(--line-2); }
.mt-rung:first-child::before{ top:50%; }
.mt-rung:last-child::before{ bottom:50%; }
.mt-rung-node{ position:absolute; left:0; top:50%; width:11px; height:11px; margin-top:-6px; border-radius:50%; background:var(--panel); border:2px solid var(--line-ui); box-sizing:border-box; }
.mt-rung.settled .mt-rung-node{ background:var(--ok); border-color:var(--ok); }
.mt-rung.leverage .mt-rung-node{ background:var(--accent); border-color:var(--accent); }
.mt-rung.end .mt-rung-node{ background:var(--pop); border-color:var(--pop); }
.mt-rung-label{ font-size:var(--fs-3); color:var(--text-2); }
.mt-rung-skill{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:0.04em; color:var(--dim); white-space:nowrap; }

/* @empty — the empty / no-data-yet state every live view needs, plus a static skeleton block (no animation, by the reduced-motion contract). */
.mt-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 16px; text-align:center; background:var(--panel); border:1px dashed var(--line-2); border-radius:var(--r-3); }
.mt-empty-title{ font-size:var(--fs-4); color:var(--text-2); }
.mt-skeleton{ background:var(--panel-2); border-radius:var(--r-2); min-height:14px; }

/* @seat-signature — shared presentation, without changing route or action semantics.
   Ordinary card styling uses theme tokens so client overlays and palette switching survive.
   The luminous brand orb and blue/cyan artwork belong to Piano Neon only. */
.mt-nav{ background:linear-gradient(180deg,rgb(var(--bg-rgb) / .96),rgb(var(--bg-rgb) / .85)); backdrop-filter:blur(20px); }
.mt-word{ font-weight:700; }
.mt-h1{ font-weight:700; letter-spacing:-.035em; line-height:1.04; }
.mt-kicker{ color:var(--accent); letter-spacing:.14em; font-weight:600; }
.mt-capcard,.mt-receipt,.mt-kpi,.mt-card,.mt-tile{ background:radial-gradient(120% 60% at 50% -10%,rgb(var(--text-rgb,255 255 255) / .04),transparent 60%),linear-gradient(180deg,var(--panel),var(--bg-2)); box-shadow:0 20px 60px rgb(var(--bg-rgb) / .45),inset 0 1px 0 rgb(255 255 255 / .14); }
.mt-cta{ background:linear-gradient(135deg,var(--accent-hi),var(--accent)); box-shadow:0 6px 24px rgb(var(--accent-rgb) / .2),inset 0 1px 0 rgb(255 255 255 / .35); font-weight:700; }
.mt-item[aria-current="page"]{ text-shadow:0 0 18px rgb(var(--ok-rgb) / .45); }
.pal-piano .mt-mark{ width:22px; height:22px; border-radius:50%; background:radial-gradient(circle,#ffffff 0,#ffd57a 24%,rgb(255 194 71 / .35) 48%,transparent 70%); }
.pal-piano .mt-mark path,.pal-piano .mt-mark circle{ opacity:0; }
.pal-piano:not(.mt-secure):not([data-tenant]) .mt-title-glow{ background:linear-gradient(135deg,#f6f7fc,#9feeff 60%,#5b7cff); background-clip:text; -webkit-background-clip:text; color:transparent; }
/* Use dark ink across the action gradient; white fails on its cyan end. */
.pal-piano:not(.mt-secure) .mt-btn-action{ color:#010102; border-color:#5b7cff; background:linear-gradient(135deg,#6f8cff,#2ee6ff); box-shadow:0 10px 34px rgb(34 211 238 / .2),inset 0 1px 0 rgb(255 255 255 / .35); font-weight:700; }

/* @actual-signature — the merged particle orb, lit MESH word and lava/lens.
   Decorative only; secure routes and client palettes never inherit its lighting. */
#sigLava,#sigLens{ position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; opacity:.24; }
#sigLens{ z-index:-1; }
html.sig-on .mesh-word{ opacity:0; }
html.sig-on body{ isolation:isolate; background:transparent; }
.mt-mark[data-orb]{ background:none; }
.mt-signature-word.mesh-word{ position:fixed; left:0; right:0; top:50%; transform:translateY(-50%); z-index:-1; pointer-events:none; user-select:none; font:900 clamp(120px,31vw,560px)/.8 var(--sans); letter-spacing:-.04em; text-align:center; white-space:nowrap; color:transparent; background-clip:text; -webkit-background-clip:text; background-image:radial-gradient(circle var(--lr,26vw) at var(--lx,70%) var(--ly,50%),rgba(205,220,255,var(--la,.42)) 0%,rgba(91,124,255,calc(var(--la,.42)*.55)) 38%,rgba(34,211,238,calc(var(--la,.42)*.18)) 62%,transparent 100%); -webkit-text-stroke:1px rgba(255,255,255,.018); }
.mt-signature-hero{ position:fixed; right:4vw; top:18vh; width:min(54vw,720px); height:min(54vw,720px); z-index:-1; pointer-events:none; opacity:.18 !important; }
html:not(.pal-piano) .mt-signature-word,html:not(.pal-piano) .mt-signature-hero,html:not(.pal-piano) #sigLava,html:not(.pal-piano) #sigLens,html.mt-secure .mt-signature-word,html.mt-secure .mt-signature-hero,html.mt-secure #sigLava,html.mt-secure #sigLens,html[data-tenant] .mt-signature-word,html[data-tenant] .mt-signature-hero,html[data-tenant] #sigLava,html[data-tenant] #sigLens{ display:none !important; }
html.sig-on:not(.pal-piano) body,html.sig-on.mt-secure body,html.sig-on[data-tenant] body{ background:var(--bg) !important; }

/* @motion */
@keyframes arcflow{to{stroke-dashoffset:-40}}
@keyframes dblink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ddcursor{0%{transform:translate(0,0)}50%{transform:translate(120px,46px)}100%{transform:translate(0,0)}}
@keyframes ddflow{to{stroke-dashoffset:-20}}
@keyframes ddpulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dvbar{from{width:18%}to{width:82%}}
@keyframes gflow{to{stroke-dashoffset:-24}}
@keyframes gpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mflash{0%{background:rgb(var(--accent-rgb) / 0.22)}100%{background:transparent}}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ping{0%{r:3;opacity:.9}100%{r:14;opacity:0}}
@keyframes sbflow{to{background-position:24px 0}}
@keyframes sflow{to{stroke-dashoffset:-24}}
@keyframes spulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes xpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes morf{0%{background-position:0% 0%, 100% 0%, 0 0, 0 0}100%{background-position:100% 55%, 10% 45%, 0 0, 0 0}}
.arcflow{ animation:arcflow 2.2s linear infinite; }
.dblink{ animation:dblink 1.2s steps(1) infinite; }
.ddcursor{ animation:ddcursor 6s ease-in-out infinite; }
.ddflow{ animation:ddflow 1.6s linear infinite; }
.ddpulse{ animation:ddpulse 2.4s ease-in-out infinite; }
.dvbar{ animation:dvbar 3.6s ease-in-out infinite alternate; }
.gflow{ animation:gflow 1.8s linear infinite; }
.gpulse{ animation:gpulse 2.2s ease-in-out infinite; }
.mflash{ animation:mflash 1.4s ease-out 1; }
.mpulse{ animation:mpulse 2.2s ease-in-out infinite; }
.mtick{ animation:mtick 38s linear infinite; }
.ping{ animation:ping 2.4s ease-out infinite; }
.sbflow{ animation:sbflow 1.2s linear infinite; }
.sflow{ animation:sflow 1.8s linear infinite; }
.sflow-slow{ animation:sflow 3.6s linear infinite; }
.spulse{ animation:spulse 2.4s ease-in-out infinite; }
.xpulse{ animation:xpulse 2.2s ease-in-out infinite; }
.mt-body{ animation:morf 64s ease-in-out infinite alternate; }
/* @reduced-motion — every animation class the estate declares, plus the universal floor */
@media (prefers-reduced-motion: reduce){
  .arcflow,.dblink,.ddcursor,.ddflow,.ddpulse,.dvbar,.gflow,.gpulse,.mflash,.mpulse,.mtick,.ping,.sbflow,.sflow,.sflow-slow,.spulse,.xpulse,.mt-body,.mt-ticker-track{ animation:none !important; }
  *,::before,::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* @nav-fit — the surface pill (.mt-chip) is a wide-screen luxury. In the 900–1440px
   laptop band the full horizontal nav still shows, and the pill steals the room the
   platform items need — "Gateway" clips and, on secure surfaces, the key·secure badge
   collides with the active item. Hide the pill below the 1440px map width; it returns
   at 1440px+. (Below 900px the mobile block hides it anyway.) */
@media (max-width:1439px){ .mt-chip{ display:none; } }

/* @responsive — containers cap at 1440px; 16px gutters under 600px; 44px targets on coarse pointers; tables become card rows under 720px; diagrams become lists under 900px */
@media (max-width:900px){
  .mt-nav{ height:56px; padding:0 16px; gap:10px; }
  .mt-chip{ display:none; }
  .mt-menu{ display:block; order:100; }
  .mt-pal{ margin-left:auto; }
  .mt-menu summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-2); border:1px solid var(--line-ui); color:var(--text); font-size:var(--fs-5); }
  .mt-menu summary::-webkit-details-marker{ display:none; }
  .mt-items{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; flex-direction:column; align-items:stretch; gap:4px; padding:16px 16px 28px; max-height:70vh; overflow:auto; background:var(--panel); border-top:1px solid var(--line-ui); border-radius:var(--r-4) var(--r-4) 0 0; box-shadow:0 -18px 48px rgb(var(--bg-rgb) / 0.7); }
  .mt-nav:has(.mt-menu[open]) .mt-items{ display:flex; }
  .mt-item{ height:44px; font-size:var(--fs-4); }
  .mt-more{ position:static; }
  .mt-more summary{ height:44px; font-size:var(--fs-4); }
  .mt-products{ position:static; border:0; padding:0 0 0 12px; background:transparent; box-shadow:none; }
  .mt-balance,.mt-cta{ display:none; }
  .mt-nav:has(.mt-menu[open]) .mt-cta{ display:flex; order:99; justify-content:center; }
  .mt-diagram{ display:none; } .mt-diagram-list{ display:block; }
  .mt-footer-top{ flex-direction:column; gap:32px; }
  .mt-footer-brand{ width:auto; }
  .mt-footer-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .mt-table{ display:none; } .mt-cards{ display:flex; }
  .mt-h1{ font-size:var(--fs-8); }
}
@media (max-width:600px){
  .mt-wrap,.mt-footer{ padding-left:16px; padding-right:16px; }
  .mt-footer-grid{ grid-template-columns:1fr; }
  .mt-footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (pointer:coarse){
  .mt-nav a,.mt-nav button,.mt-btn,.mt-sw{ min-height:44px; }
  .mt-sw{ min-width:44px; }
}
/* @phone-fit — under 480px the bar (mark + badge + three 44px swatches + the 44px menu, ~430px)
   ran past a 375px phone and cut the menu button in half (DW, 2026-10-17: "everything to fit on a
   cell phone"). The palette switcher steps out of the bar there; the chosen palette still applies
   everywhere (it is the mt_pal cookie). The menu keeps the right edge. */
@media (max-width:480px){
  .mt-nav .mt-pal{ display:none; }
  .mt-menu{ margin-left:auto; }
  .mt-nav{ min-width:0; }
  .mt-brand,.mt-client{ min-width:0; }
}