/* The display face, self-hosted.

   Until 2026-09-08 every surface declared `'Fraunces','Inter',serif` and no
   surface shipped a font file, so on a measured page 70 of 96 headings fell
   all the way through to Times New Roman -- the operator's "the headers are
   not the same font". Declaring the same stack on every page, which is what
   the previous note here suggested, could not have fixed that: consistent
   fallback is not the typeface. A CDN is not an option either (the engine's
   CSP is `font-src 'self' data:`), so the face is served from our own origin
   on both surfaces and the stacks finally resolve to what they name.

   Variable, 400-700, latin subset, SIL OFL 1.1 (see FRAUNCES-LICENSE.md).
   `swap` because a heading that is invisible while 67KB arrives is worse
   than a heading that restyles. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Anvella materials and layout. Business state remains owned by the existing API painters. */
:root {
  /* Canonical gold for the public site and product. */
  --gold-line: #D3A84C;
  --gold-text-grad: linear-gradient(120deg,#B58F3E 0%,#D3A84C 24%,#FFEC94 47%,#FFD87C 58%,#D3A84C 76%,#B58F3E 100%);
  --gold-fill: linear-gradient(170deg,#FFEC94,#E6BE69 30%,#D3A84C 72%,#B58F3E);
  --gold-glow: rgba(211,168,76,.28);
  --font-interface: Inter, "Segoe UI", Arial, sans-serif;
  --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --motion-instant: 0ms; --motion-fast: 140ms; --motion-normal: 240ms;
  --motion-slow: 600ms; --motion-ambient: 36s;
  /* These are anvellaai.com's own dark tokens, value for value, not an
     approximation of them. They used to be a separate cold ramp -- base
     #090c0d and panel #111718, both blue-green (B > R) -- sitting under a
     marketing page whose every surface is warm (#12100C, #1A1611, R > G > B).
     Signing in changed the temperature of the product, which is the one
     thing a console and its marketing page must not do to a customer.

     --material-line was ALSO carrying two jobs at once: hairlines between
     panels and the border that identifies a form field. At #655639 on the
     old panel that border measured 2.54:1, under the 3:1 WCAG 2.2 1.4.11
     asks of a control's edge, and there was no second token to promote it
     to. The site solved this long ago by splitting --border from
     --border-strong; the split is imported here with the values. */
  --material-base: #12100C; --material-panel: #1A1611;
  --material-raised: #241E16; --material-ink: #F5EFE8;
  --material-muted: #A3937B; --material-gold: var(--gold-line);
  --material-line: #3A3024;        /* hairlines only -- 1.4:1, never a control */
  --material-line-strong: #8F806B; /* the edge of a control -- 4.69:1 on panel */
  --material-shadow: 0 16px 42px #0004;
  /* The metal, not a flat yellow. Same ramp and same stop positions as the
     site's --gold-fill, so a primary button is the same object in both
     places. Floored at --gold-mid (6.3:1) because dark text sits on it. */
  --material-gold-fill: var(--gold-fill);
  --material-gold-ink: #17120D;    /* the site's --ivory-deep, 9.2:1 on the fill */
  /* The site's --gold-sheen-text, stop for stop. Not the plain --gold-sheen:
     that one bottoms out at #956D13 (1.94:1), which is fine on a 1px rule and
     unreadable on a letterform. This variant is floored at --gold-mid, so the
     darkest part of a glyph is still 6.3:1. Metal on type has to survive
     being read, not only being looked at. */
  --material-gold-sheen-text: var(--gold-text-grad);
}
:root[data-mode="light"], :root[data-theme="light"] {
  /* Softened 2026-09-09: the operator asked for light mode to be easier on
     the eyes. The panel was #FBF5EA -- effectively paper-white -- so a page
     built mostly of panels glared, and the base behind it was barely darker,
     which flattened the whole surface stack into one bright sheet. Each step
     now comes down and warms slightly, so the ramp reads as aged paper rather
     than a lit screen and the three surfaces are actually distinguishable.
     Ink is unchanged, so every text contrast ratio in this theme went UP
     rather than down -- checked against the light-theme contrast suite. */
  --material-base: #ECE4D5; --material-panel: #F3EBDC;
  --material-raised: #E3D8C3; --material-ink: #1A140B;
  --material-muted: #6A5840; --material-gold: #6B4520;
  --material-line: #C9B690;        /* 1.7:1 hairline */
  --material-line-strong: #8A7449; /* 3.7:1 worst case, control edges */
  --material-shadow: 0 16px 42px rgba(0,0,0,0.07);
  /* Light mode inverts the metal: the site's light --gold-fill runs dark, so
     a gold button stays a button rather than becoming a pale smear. */
  --material-gold-fill: linear-gradient(170deg,#8B5A2B,#6B4520 30%,#5C3B1A 72%,#4A2F13);
  --material-gold-ink: #FBF5EA;
  /* The light ramp puts --gold-light at the specular instead of --gold-spec,
     because #D9BE86 is 1.6:1 on an ivory ground -- decorative on a gradient,
     invisible on a glyph. Every stop here is 3.1:1 or better. */
  --material-gold-sheen-text: linear-gradient(120deg,
    #5C3B1A 0%, #6B4520 24%, #7D5A27 47%,
    #6B4520 58%, #5C3B1A 76%, #4A2F13 100%);
}
html { color-scheme: dark; }
html[data-mode="light"], html[data-theme="light"] { color-scheme: light; }
body { font-family: var(--font-interface); }
.engine-home .home-brand-name em { font-style:normal; color:var(--gold-line); background:var(--gold-text-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gate-system { --bg:var(--material-base); --text:var(--material-ink); --muted:var(--material-muted); --gold:var(--material-gold); --card:var(--material-panel); --surface:var(--material-raised); --line:var(--material-line); --line-strong:var(--material-line-strong); background:radial-gradient(ellipse at 50% 0%,#D3A84C1f,transparent 60%),var(--material-base); color:var(--material-ink); }
.gate-system :is(.gate-art,.sigil,.art-frame,.vignette) { display:none; }
.gate-system .gate-stack { margin-top:clamp(24px,8vh,100px); max-height:calc(100dvh - clamp(24px,8vh,100px) - 84px); }
.gate-system .card { background:var(--material-panel); border:1px solid var(--material-line); box-shadow:var(--material-shadow); border-radius:20px; }
.gate-system :is(input,button,.btn) { min-height:44px; }
.gate-system :is(input,.choice button) { background:var(--material-raised);color:var(--material-ink);border-color:var(--material-line-strong); }
.gate-system .go:not(.secondary) { background:var(--material-gold-fill);color:var(--material-gold-ink); }
.gate-system :is(.option h2,.step h2.step-h) { color:var(--material-gold); }
:root[data-mode="light"] .gate-system { --success-fg:#21694f;--success-bg:#21694f0c;--success-border:#21694f80;--danger-fg:#a32a27;--danger-bg:#a32a270c;--danger-border:#a32a2780;--warning-fg:#7A3D11;--info-fg:#6B4520;--focus:#6B4520; }
:root[data-mode="light"] .gate-system .err:not(:empty)::before { color:#fff; }
.gate-system .product-appearance { position:fixed; right:18px; bottom:18px; }
body.product-system {
  --bg: var(--material-base); --text: var(--material-ink);
  --muted: var(--material-muted); --gold: var(--material-gold);
  --surface: var(--material-panel); --surface-2: var(--material-raised);
  background: radial-gradient(ellipse at 52% 0%, #D3A84C20, transparent 48%), var(--material-base);
  color: var(--material-ink);
}
.product-system main { min-width: 0; max-width: 2200px; }
.product-system :is(button,input,select,textarea) { font: inherit; }
.product-system :is(button,.btn,input,select) { min-height: 42px; }
.product-system :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--material-gold); outline-offset: 4px; }
.product-system :is(.panel,.home-module,.ehome-zone,.weekbar,.composer,.dash-tile) {
  border-color: var(--material-line); background: var(--material-panel);
  box-shadow: var(--material-shadow); border-radius: 16px;
}
.product-system :is(h1,h2,.ehome-title) { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.035em; }
/* The page's own title gets the metal, the way the marketing page's display
   text does -- one treatment, not a console approximation of it. Only this
   one heading: the sheen is for the largest type on the page, and running it
   through every panel h2 would turn a signature into wallpaper.

   The solid colour is declared FIRST and unconditionally, so a browser
   without background-clip:text paints readable gold rather than nothing. The
   transparent fill is the part that can erase the text, so that is what sits
   behind @supports -- guarding the wrong half of this pattern is how it ends
   up invisible. */
.product-system .ehome-title { color: var(--material-gold); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .product-system .ehome-title {
    background: var(--material-gold-sheen-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.product-system [data-panel] { min-width: 0; }
.product-system [data-panel]:not([data-panel="console"]) { padding-block: 18px; }
.product-system .rail { background: var(--material-panel); border-right: 1px solid var(--material-line); }
.product-system .rail-nav button { border-radius: 9px; margin-block: 2px; }
.product-system .rail-nav button[aria-selected="true"] { background: linear-gradient(110deg,#D3A84C3d,transparent); color: var(--material-gold); }
.product-system [data-panel="console"] { display: flex; flex-direction: column; gap: 18px; }
.product-system [data-panel="console"] > * { order: 2; }
.product-system [data-panel="console"].hidden { display: none; }
.product-system .hud { order: 1; }
.product-system .hud-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(340px, 1.7fr) minmax(240px,.8fr); align-items: start; gap: 20px; }
.product-system .hud-col { position: relative; width: auto; min-width: 0; margin: 0; grid-row: 1; }
.product-system .hud-col.left { grid-column: 1; }
.product-system .hud-col.right { grid-column: 3; }
.eye-center { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.eye-globe-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; min-width: 0; overflow: clip; border-radius: 50%; background: radial-gradient(ellipse,#D3A84C22,transparent 65%); }
.eye-globe-stage { max-width: 420px; margin-inline:auto; }
.product-system .eye-globe-stage .reactor { position: absolute; inset: 13%; width: 74%; height: 74%; max-width: none; margin: 0; aspect-ratio: 1; grid-area: auto; }
.product-system .eye-globe-stage :is(.orbit,.orbit-labels,.orbit-near) { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-system .reactor-text { background: color-mix(in srgb,var(--material-base) 94%,transparent); padding: 12px; border: 1px solid var(--material-line); border-radius: 50%; width: 42%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 5px; }
.product-system .reactor-text b { font-size: clamp(10px,1vw,14px); }
.product-system .reactor-hint { color: var(--material-gold); font-size: clamp(11px,1vw,14px); text-transform: none; letter-spacing: 0; }
.eye-microphone { width: 26px; height: 26px; flex-shrink: 0; color: var(--material-gold); }
.product-system .reactor svg.eye-microphone { position: static; width: 26px; height: 26px; min-height: 26px; transform: none; overflow: visible; }
.product-system .hud { background: transparent; border: 0; padding: 0; display:flex; flex-direction:column; }
.product-system .hud > * { order:1; }
.product-system .hud > .hud-grid { order:0; }
.product-system .home-quote { display:none; }
.product-system .reactor-text :is(#hud-sub,#hud-route) { display:none; }
.product-system .reactor-text { width: 38%; padding: 8px; }
.product-system .reactor-text::before { display: none; }
.product-system .reactor-text,
.product-system .reactor-text b { color: var(--material-ink); text-shadow: none; }
.product-system .reactor-text .reactor-hint { text-shadow: none; }
.product-system .reactor.geographic-globe > svg { opacity:0; }
.product-system .geographic-globe .core-gl { display:block; position:absolute; inset:0; width:100%; height:100%; opacity:1; z-index:0; border-radius:50%; }
.product-system .geographic-globe .reactor-text { z-index:2; }
.product-system .geographic-globe { background:transparent; box-shadow:0 0 40px #D3A84C20; }
.product-system .geographic-globe::before { display:none; }
.product-system .geographic-globe::after { content:''; position:absolute; inset:-5%; border:1px solid var(--material-line); border-radius:50%; pointer-events:none; }
.product-system .eye-center .composer-panel > :is(h2,p) { display:none; }
.product-system .eye-center .composer-panel { margin: 0; width: 100%; order: initial; }
.product-system .eye-center .thread:has(> .muted:only-child) { display: none; }
.product-system .eye-center .composer-panel { padding: 10px; }
.product-system .eye-center .composer { padding: 12px; }
.product-system .eye-center .composer textarea { min-height: 48px; max-height: 180px; font-size: 15px; }
.product-system .eye-center #mic { display: none; }
.eye-routing { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
.eye-routing .gauge { text-align: left; padding: 0; }
.eye-routing .seg { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
.eye-routing .seg button { padding: 10px 6px; min-width: 0; }
.eye-routing .seg button small { display: block; font-size: 11px; margin-top: 4px; }
.eye-routing .smart-route { border: 1px solid var(--material-line); background: var(--material-panel); border-radius: 10px; padding: 10px; }
.eye-routing .smart-route-label { font-size: 13px; }
.eye-deck { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 16px; }
.eye-deck button { flex: 1 1 100px; padding: 10px; background: var(--material-panel); color: var(--material-ink); border: 1px solid var(--material-line-strong); border-radius: 9px; }
.eye-deck button:hover { color: var(--material-gold); background: var(--material-raised); }
.product-system .ehome-head { order: 0; }
.product-system :is(.hud-projects,#hud-scope,#home-modules,.hud-machine,.hud-controls) { order: 2; }
.product-system .hud-metrics-band { margin-bottom: 20px; }
.product-system .home-module { overflow-wrap: anywhere; }
.product-system .home-module-summary { min-height: 44px; }
.product-appearance { display: inline-flex; align-items: center; gap: 8px; color: var(--material-muted); font-size: 12px; }
.product-appearance select { color: var(--material-ink); background: var(--material-panel); border: 1px solid var(--material-line-strong); border-radius: 8px; padding: 8px; }
@media(min-width:2200px) { .product-system .hud-grid { grid-template-columns: minmax(280px,.8fr) minmax(620px,1.5fr) minmax(320px,.8fr); } }
@media(max-width:1279px) {
  .product-system .hud-grid { grid-template-columns: minmax(0,1fr) minmax(260px,.65fr); }
  .eye-center { grid-column: 1; grid-row: 1 / span 2; }
  .product-system .hud-col.left { grid-column: 2; grid-row: 1; }
  .product-system .hud-col.right { grid-column: 2; grid-row: 2; }
}
@media(max-width:767px) {
  .product-system .topbar { gap:8px; padding:8px 12px; }
  .product-system .topbar-context { display:none; }
  .product-system .topbar :is(button,.status-chip) { min-height:36px; }
  .product-system .eye-globe-stage { max-width:280px; }
  .product-system .hud-grid { display: flex; flex-direction: column; gap: 18px; }
  .eye-center { order: 0; width: 100%; }
  .product-system .hud-col { width: 100%; }
  .product-system .hud-col.left { order: 1; }
  .product-system .hud-col.right { order: 2; }
  .product-system .reactor-text { width: 44%; padding: 8px; }
  .product-system #hud-route { display: none; }
  .product-system .hud-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-system .composer-actions { gap: 5px; }
}
@media(prefers-reduced-motion:reduce) { :root { --motion-fast:0ms; --motion-normal:0ms; --motion-slow:0ms; } }