/* ============================================================================
   ALPHAVERSE OS -- the shell, the material system, and Alpha Finder.
   ----------------------------------------------------------------------------
   Loaded from the END of <body> in static/index.html, which is the only place
   it can win: index.html carries 44 <style> blocks, two of which are
   whole-product rethemes that won by being last and use !important
   throughout. A <link> in <head> loses to every one of them. In document
   order at the end of <body> it wins by exactly the rule they did.

   NOTHING HERE IS UNSCOPED. Every rule sits under `body.avos`, so removing
   that one class from <body> gives back the previous UI byte for byte.

   ---------------------------------------------------------------------------
   THE NUMBERS IN THIS FILE WERE MEASURED, NOT CHOSEN.
   They come off frames of the reference walkthrough at 1280x632:

     window glass   rgb(197,213,224) over sky rgb(54,116,148)
                    -> white at 0.71 alpha, and the SAME 0.71 on all three
                       channels, so the veil is neutral and untinted
     toolbar glass  rgb(151,183,195) over the same sky  -> white at 0.47
     icon glass     rgb(150,177,189) over the same sky  -> white at 0.45
     system bar     rgb(54,115,143) against a wallpaper of rgb(54,116,148)
                    -> NO BACKGROUND AT ALL. It is text on the wallpaper.
     icon tile      33px, radius ~7.5px, glyph ~55% of the tile, filled white
     icon grid      48px across, 62px down, last column 27px from the right
     window chrome  ~30px tall, fully transparent, ONE 7px grey dot at the
                    left and the app name at the right in ~10px grey. No
                    traffic lights. No second control.
     windows        417x497 at (100,25) and 440x428 at (645,30) on a 1280x632
                    screen: about a third of the width each, overlapping,
                    never centred, never full screen, and the wallpaper fully
                    visible around and between them at all times.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. THE MATERIAL SYSTEM
   Six named materials, one set of physics. Each is a white (or graphite)
   veil at a measured alpha over a real backdrop-filter, plus an edge
   highlight, a hairline, an internal light and a cast shadow. Nothing else
   in this file may invent its own glass.
   ────────────────────────────────────────────────────────────────────────── */
body.avos{
  /* --- the veil. A light wallpaper gets white glass. --- */
  /* ⚠ .80, not the .71 measured off the reference. That number is correct
     for the picture it was measured on -- a flat blue sky -- and a veil tuned
     to a flat backdrop falls apart over a busy one: on the forest wallpaper
     at .72 the headings sank into the branches behind them. The reference's
     INTENT is "you can see the picture through it and still read the text",
     and on this picture that costs another eight points. */
  /* 🔴 ONE NUMBER MOVES ALL OF IT. Zumo, 1 Sep: "there should be a slider
     where we can adjust the transparency, glass effect, refraction effect.
     The least should be fully transparent, fully crystal glass. And the full
     should be a blurry glass effect."
     --gl is that slider, 0 crystal to 1 frosted, written by avos.js.
     --gk is the multiplier every veil alpha in the system is scaled by, so
     the whole material moves together and no surface has its own idea of how
     clear it is. .72 + .406*gl is 1.000 at gl = .69, which is why the shipped
     material is the MIDDLE of the slider rather than a fourth setting bolted
     on beside it: the alphas below are exactly the ones that shipped.
     ⚠ Verified, not eyeballed: tools/measure_glass.py composites each token
     over the darkest place a line of text can land on all 26 wallpapers and
     checks all three inks at five points along the slider. Nothing is under
     4.5:1. It also found that FOUR of the six settings the three-way control
     shipped were already below it -- Clear was 2.66:1. */
  --gl: .69;
  /* the fallback curve, for the moment before avos.js has read the
     wallpaper's own floor and for any browser where it never runs */
  --gk: calc(.72 + .406 * var(--gl));
  --veil-window:  rgba(255,255,255, calc(.80 * var(--gkw, var(--gk))));
  --veil-toolbar: rgba(255,255,255, calc(.52 * var(--gk)));
  --veil-dock:    rgba(255,255,255, calc(.46 * var(--gk)));
  /* ⚠ .50, and it is a SMOKY veil rather than a white one. A white veil
     over the bright mist in the middle of this wallpaper makes a white
     tile, and a white glyph on a white tile is nothing at all: the
     Wallpaper and Profile icons vanished while the ones over the dark
     forest were fine. A smoky veil lands mid-tone over both. */
  /* ⚠ THE ICON TILE IS THE ONE THING THE SLIDER DOES NOT TOUCH, and the
     three-way control did not touch it either. Its glyph is white and it
     sits DIRECTLY on the wallpaper with nothing else behind it, so taking
     its veil away does not make it clearer, it makes a white glyph on a
     bright picture, which is nothing at all. */
  --veil-icon:    rgba(46,52,62,.50);
  --veil-menu:    rgba(255,255,255, calc(.80 * var(--gkw, var(--gk))));
  --veil-pop:     rgba(255,255,255, calc(.84 * var(--gkw, var(--gk))));
  /* ⚠ THE SUNK PANEL IS NOT ON --gk. Everything else scales with how much
     veil the wallpaper demands; this one sits on the WINDOW's own surface,
     not on the wallpaper, and its job is to separate a control from the panel
     it is on. Tying it to a floor that is 0.000 on most wallpapers made every
     Settings row and every input disappear. --gks moves it far less. */
  /* ⚠ THREE SCALES, NOT ONE, AND THE REASON IS DIFFERENT FOR EACH.
     --gk   the wallpaper's own floor. Chrome that sits on the picture and
            occludes nothing takes this, and on 24 of the 26 wallpapers it
            starts at zero, which is what lets the material be nearly
            invisible at all.
     --gkw  the same, but never below what a WINDOW needs to hide the window
            behind it. Occlusion is not contrast and no ratio will fix it.
     --gks  a panel INSIDE an application. It sits on the window's own
            surface, not on the wallpaper, so a wallpaper's floor has nothing
            to say about it -- tying it to --gk made every Settings row and
            every input vanish. */
  --gks: calc(.62 + .5 * var(--gl));
  --veil-sunk:    rgba(255,255,255, calc(.42 * var(--gks)));  /* inside an app */
  --veil-off:     rgba(255,255,255, calc(.88 * var(--gkw, var(--gk))));  /* unfocused */

  /* --- the optics. One blur scale, one saturation, used everywhere. --- */
  /* ⚠ 22 / 16 / 12, not 30 / 22 / 14. Three overlapping windows each
     blurring a 2560px photograph at 30px is enough to make the compositor
     drop frames, and the difference between 22 and 30 is not visible on a
     surface this opaque. This is the brief's performance clause: the
     material stays, the cost comes down. */
  /* ⚠ AND THE BLUR IS THE SAME AXIS. Crystal glass is not blurred glass:
     at gl = 0 the radius is 0 and the saturation is 100%, which is the
     identity filter -- so the wallpaper reads as itself through the window,
     and avos.js drops backdrop-filter entirely at that end (see 19), because
     an identity filter still costs a compositing layer. At gl = .69 these
     come out at 22 / 16 / 12 px and 180%, which is exactly what shipped. */
  --fx-heavy:  saturate(calc(100% + 116% * var(--gl))) blur(calc(32px * var(--gl)));
  --fx-medium: saturate(calc(100% + 116% * var(--gl))) blur(calc(23px * var(--gl)));
  --fx-light:  saturate(calc(100% + 87% * var(--gl))) blur(calc(17.5px * var(--gl)));

  /* --- the edges. A material has a lit top edge and a hairline. --- */
  --edge-top:  inset 0 1px 0 rgba(255,255,255,.62);
  --edge-line: 0 0 0 .5px rgba(0,0,0,.13);
  --edge-in:   inset 0 0 0 .5px rgba(255,255,255,.28);

  /* --- the shadows. A contact shadow and a soft cast. --- */
  --cast-win:  0 24px 60px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.10);
  --cast-off:  0 12px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07);
  --cast-pop:  0 18px 44px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12);
  --cast-flat: 0 6px 18px rgba(0,0,0,.14);

  /* --- ink, on light glass --- */
  /* 🔴 MEASURED AT 1.81:1 AND THAT IS WHY IT READ AS GREY IN BOTH THEMES.
     Zumo: "the text is in gray color, so it doesn't really show very
     prominently in either of those styles". The old muted inks (#8A8F96 light,
     #767C85 dark) were picked against a SOLID panel, and these panels are
     glass -- the real background is the wallpaper coming through, so the same
     grey sat somewhere in the middle of whatever was behind it and lost.
     ⚠ The three levels are kept, compressed upward rather than flattened: a
     hierarchy where everything is maximum contrast is not a hierarchy. The
     dimmest one now clears 4.5:1, which is the readable floor. */
  /* 🔴 AND THE INK MOVES WITH THE GLASS, which is the part that makes a
     clear end possible at all. Through a .58 veil the wallpaper is most of
     what is behind a paragraph, so the same grey that reads on frosted glass
     is gone on crystal. These interpolate on --gl: darkest at the clear end,
     the shipped values at the frosted end. measure_glass.py is what fixes
     where they land, and it is why --ink-3 ends at #565C64 rather than the
     #5C626A that shipped -- that value measured 4.09:1 over Ridge, whose
     tone is light and whose undergrowth is nearly black. */
  --ink:       rgb(calc(11 + 9 * var(--gl)), calc(13 + 9 * var(--gl)), calc(17 + 9 * var(--gl)));
  --ink-2:     rgb(calc(29 + 33 * var(--gl)), calc(33 + 34 * var(--gl)), calc(39 + 35 * var(--gl)));
  --ink-3:     rgb(calc(43 + 43 * var(--gl)), calc(48 + 44 * var(--gl)), calc(55 + 45 * var(--gl)));
  --ink-line:  rgba(0,0,0,.10);
  --ink-line-2:rgba(0,0,0,.06);
  --ink-hover: rgba(0,0,0,.045);
  --ink-sel:   rgba(0,0,0,.075);
  /* 🔴 TEXT DRAWN STRAIGHT ON THE WALLPAPER, AND IT WAS THE WORST CONTRAST
     IN THE PRODUCT. The system bar and the desktop icon labels have no
     surface under them at all -- that is the measurement off the reference
     and it is deliberate -- so their only background is the picture. They
     were white with a soft shadow, which is right over the reference's blue
     sky and wrong over half of our own library: measured over the brightest
     text-sized region of each wallpaper, white came out at 1.09:1 on Paper,
     1.13 on Chalk, 1.14 on Ridge, 1.24 on Morning. Unreadable, on the first
     screen anybody sees.
     Two changes, both measured (tools/measure_glass.py --onwall):
     1. THE INK FOLLOWS THE WALLPAPER, like every other material here: dark
        on a light picture, white on a dark one.
     2. THE SHADOW IS A HALO, NOT A DROP. One soft shadow at .45 leaves the
        wallpaper as the glyph's background. Three stacked at .72 in the
        OPPOSITE colour compound to about .98 right at the glyph edge, so the
        thing a letter is actually read against is the halo. That is what
        makes a number possible on a photograph at all, and it is what every
        desktop does with icon labels.
     ⚠ The two high-contrast photographs are why neither ink alone works:
     Ridge is a LIGHT forest with near-black undergrowth and Dawn is a DARK
     sunrise with a bright sky, so each contains the other's worst case. */
  --on-wall:   #10141A;                    /* on a LIGHT wallpaper */
  --wall-chip: rgba(255,255,255,.46);      /* a wash under a chip on the bar */
  --wall-glow: drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 1px 2px rgba(255,255,255,.7));
  --wall-shadow: 0 0 2px rgba(255,255,255,.72), 0 0 5px rgba(255,255,255,.68),
                 0 1px 3px rgba(255,255,255,.6);

  /* --- accent. Alphaverse cobalt, kept, because it is the product. --- */
  --acc:       #3B6FE0;
  --acc-hi:    #5486EE;
  --acc-wash:  rgba(59,111,224,.13);
  --acc-edge:  rgba(59,111,224,.40);
  /* ⚠ MEASURED ON WHITE GLASS: --pos was 4.04:1 and --warn 3.97:1, both a
     hair under the 4.5 floor on 10px badge text. Darkened until they clear it.
     The dark variants below already pass and are untouched. */
  --amb:       #96691A;
  --pos:       #24774A;
  --neg:       #B33C36;
  --warn:      #8A5F14;

  /* --- type. The platform's own UI face is most of why an OS reads as one. */
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
        'Segoe UI', 'Inter', system-ui, sans-serif;
  --num: ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, monospace;

  /* --- metrics --- */
  --r-win: 12px;
  --r-ctl: 6px;
  --bar-h: 26px;
  --orb:   34px;
}

/* --- the dark material. Chosen by the WALLPAPER, not by the product. ------ */
body.avos[data-os="dark"]{
  /* 🔴 .78 AND .80, NOT THE .68 AND .72 THAT SHIPPED. Measured over Dawn,
     which is a DARK-toned wallpaper with a bright sunrise across the top of
     it: at .68 the dimmest ink sat at 3.82:1 and the menu at about the same.
     It is the mirror of Ridge, and the same lesson -- a wallpaper's TONE is
     its average and text lands somewhere, not on the average. */
  --veil-window:  rgba(30,32,36, calc(.78 * var(--gkw, var(--gk))));
  --veil-toolbar: rgba(30,32,36, calc(.44 * var(--gk)));
  --veil-dock:    rgba(28,30,34, calc(.46 * var(--gk)));
  --veil-icon:    rgba(255,255,255,.19);
  --veil-menu:    rgba(34,36,41, calc(.80 * var(--gkw, var(--gk))));
  --veil-pop:     rgba(32,34,39, calc(.84 * var(--gkw, var(--gk))));
  --veil-sunk:    rgba(255,255,255, calc(.075 * var(--gks)));
  --veil-off:     rgba(30,32,36, calc(.88 * var(--gkw, var(--gk))));

  --edge-top:  inset 0 1px 0 rgba(255,255,255,.14);
  --edge-line: 0 0 0 .5px rgba(0,0,0,.55);
  --edge-in:   inset 0 0 0 .5px rgba(255,255,255,.07);

  --cast-win:  0 24px 64px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35);
  --cast-off:  0 12px 32px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22);
  --cast-pop:  0 18px 46px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.32);
  --cast-flat: 0 6px 20px rgba(0,0,0,.38);

  --ink:       rgb(calc(255 - 9 * var(--gl)), calc(255 - 8 * var(--gl)), calc(255 - 6 * var(--gl)));
  --ink-2:     rgb(calc(236 - 29 * var(--gl)), calc(239 - 27 * var(--gl)), calc(243 - 25 * var(--gl)));
  --ink-3:     rgb(calc(218 - 40 * var(--gl)), calc(223 - 38 * var(--gl)), calc(229 - 35 * var(--gl)));
  --ink-line:  rgba(255,255,255,.11);
  --ink-line-2:rgba(255,255,255,.06);
  --ink-hover: rgba(255,255,255,.06);
  --ink-sel:   rgba(255,255,255,.09);

  --on-wall:   #FFFFFF;                    /* on a DARK wallpaper */
  --wall-chip: rgba(255,255,255,.24);
  --wall-glow: drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 1px 2px rgba(0,0,0,.7));
  --wall-shadow: 0 0 2px rgba(0,0,0,.72), 0 0 5px rgba(0,0,0,.68),
                 0 1px 3px rgba(0,0,0,.55);

  --acc:       #6E9BFF;
  --acc-hi:    #86ADFF;
  --acc-wash:  rgba(110,155,255,.16);
  --acc-edge:  rgba(110,155,255,.44);
  --amb:       #D9AE5C;
  --pos:       #63BF8C;
  --neg:       #DE7A74;
  --warn:      #D2A55C;
}

/* --- the six materials, and the only six --------------------------------- */
body.avos .mat-window{
  background-color:var(--veil-window);
  -webkit-backdrop-filter:var(--fx-heavy); backdrop-filter:var(--fx-heavy);
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-win);
}
body.avos .mat-toolbar{
  background-color:var(--veil-toolbar);
  -webkit-backdrop-filter:var(--fx-medium); backdrop-filter:var(--fx-medium);
}
body.avos .mat-dock{
  background-color:var(--veil-dock);
  -webkit-backdrop-filter:var(--fx-medium); backdrop-filter:var(--fx-medium);
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-flat);
}
body.avos .mat-icon{
  background-color:var(--veil-icon);
  -webkit-backdrop-filter:var(--fx-light); backdrop-filter:var(--fx-light);
  box-shadow:var(--edge-top), var(--edge-in), 0 2px 7px rgba(0,0,0,.20);
}
body.avos .mat-menu{
  background-color:var(--veil-menu);
  -webkit-backdrop-filter:var(--fx-heavy); backdrop-filter:var(--fx-heavy);
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-pop);
}
body.avos .mat-popover{
  background-color:var(--veil-pop);
  -webkit-backdrop-filter:var(--fx-heavy); backdrop-filter:var(--fx-heavy);
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-pop);
}
/* the internal light: a material is brighter where the light enters it.
   One gradient, no image, no repaint cost. */
body.avos .mat-window::before,
body.avos .mat-menu::before,
body.avos .mat-popover::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
}
body.avos[data-os="dark"] .mat-window::before,
body.avos[data-os="dark"] .mat-menu::before,
body.avos[data-os="dark"] .mat-popover::before{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);
}

/* ⚠ NO BLUR WITHOUT A BACKDROP WORTH BLURRING. Everything above is expensive,
   so it is applied to the shell and to nothing inside an application. Panels
   inside a window are opaque tints of the veil, which cost nothing. */

/* ══════════════════════════════════════════════════════════════════════════
   2. THE HOST. Stand the previous shell down.
   ────────────────────────────────────────────────────────────────────────── */
html:has(> body.avos){ background:#33586E; }
body.avos{
  margin:0; height:100dvh; overflow:hidden !important;
  color:var(--ink) !important;
  font-family:var(--ui) !important;
  font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  background:#33586E !important;
}
body.avos::after{ content:none !important; }
body.avos #lgBgLayer,
body.avos #stationBg,
body.avos > header,
body.avos #routenav,
body.avos .wh .top,
body.avos .wh .rail,
body.avos .wh .pills,
body.avos .wh .hero,
body.avos .wh .vig,
body.avos #hubBg,
body.avos .adm,
body.avos .siteFoot,
body.avos .gateBack{ display:none !important; }

body.avos .wrap{
  max-width:none !important; margin:0 !important; padding:0 !important;
  position:static !important;
}
body.avos .route[data-route="hub"] .wh{
  position:static !important; inset:auto !important; height:auto !important;
  min-height:0 !important; background:none !important; overflow:visible !important;
}
body.avos .route{ display:none !important; }
body.avos .winBody > .route,
body.avos .winBody > .route.active{
  display:block !important; opacity:1 !important; transform:none !important;
  animation:none !important; position:static !important; inset:auto !important;
  max-width:none !important; margin:0 !important; padding:0 !important;
  min-height:0 !important; height:auto !important; overflow:visible !important;
  background:none !important;
}
body.avos .winBody > .route > .wh > .grid{
  position:static !important; display:grid !important; height:auto !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. THE DESKTOP
   The wallpaper is the canvas and it is NEVER dimmed, blurred or covered by
   a scrim. That is the whole difference between an operating system and a
   dashboard with a picture behind it.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #wall, body.avos #wallNext{
  position:fixed; inset:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
body.avos #wall{ z-index:0; }
body.avos #wallNext{ z-index:1; opacity:0; transition:opacity 420ms ease; }
body.avos #wallNext.in{ opacity:1; }

/* ══════════════════════════════════════════════════════════════════════════
   3b. THE LIGHT CURTAIN -- a wallpaper that is drawn, not photographed.
   Lifted out of the landing page (docs/landing_demo.src.html, the block
   headed THE LIGHT CURTAIN) so the front door and the desktop are the same
   place. The page itself is signed off and untouched; this is a copy.

   🔴 THREE LAYERS, EACH SEAMLESS ON ITS OWN, WITH COPRIME PERIODS.
   One element carrying three repeating gradients cannot be translated without
   a visible jump, because the three periods have no short common multiple.
   Each period gets its own element and slides by exactly ONE OF ITS OWN
   PERIODS, so every layer loops invisibly -- and because 47, 79 and 131 are
   coprime the pattern they make together does not repeat for about half a
   million pixels. That is what stops it reading as wallpaper.

   ⚠ THE LANDING PAGE DRIVES THIS OFF SCROLL AND A DESKTOP HAS NO SCROLL.
   There, the bright core of the mask travels down the page and the strength
   rises through the middle. Here the same two motions are on timers instead:
   the core drifts on a TRANSFORM (a custom property cannot be animated
   without @property, and a transform composites for free) and the strength
   breathes on opacity. Both are minutes long, so a glance reads as still.

   ⚠ NOT A LIVE WALLPAPER MADE OF PICTURES. A screenshot of this loses the
   thing that makes it worth having, so the wallpaper layer mounts DOM for a
   `live` entry instead of setting a background image. See avos.js, setWall.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #wall.live, body.avos #wallNext.live{
  background-image:none;
  background-color:var(--curt-seat, #05070A);
}
body.avos .avcurt{
  position:absolute; inset:0; overflow:hidden;
  background:var(--curt-seat, #05070A);
  --curt-ac:46,72,146;          /* the landing page's own column colour */
  --curt-str:.74;               /* strength; the slider does not touch this */
}
body.avos .avcurtCore{
  position:absolute; inset:-14% -18%;
  opacity:var(--curt-str);
  -webkit-mask-image:radial-gradient(62% 82% at 50% 38%,
    #000 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.18) 68%, transparent 84%);
  mask-image:radial-gradient(62% 82% at 50% 38%,
    #000 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.18) 68%, transparent 84%);
  animation:avCurtDrift 214s ease-in-out infinite alternate,
            avCurtBreath 97s ease-in-out infinite alternate;
  will-change:transform, opacity;
}
/* ⚠ THE COLOUR FIELDS ARE PART OF IT. Side by side against the landing
   page the columns alone came out flat and grey: there, three very soft
   radial fields drift under the curtain and give it the blue depth, and the
   curtain takes its own hue from them. Dropping them and keeping only the
   columns is not "the same curtain", it is a screenshot of one layer of it.
   The values are the landing page's own table, at the blue it settles on
   (its `access` band), and every one of them is dark on purpose -- the
   brightest tint here lands near luminance 40 of 255, so white desktop text
   keeps the same margin it has over the photographs.
   ⚠ No `filter:blur()`. A radial gradient is already soft, and blurring a
   90vw box is the difference between free and a dropped frame. */
body.avos .avcurtF{ position:absolute; will-change:transform; }
body.avos .avcurtF.f1{
  width:104vw; height:104vw; left:-30vw; top:-38vw;
  background:radial-gradient(closest-side, rgba(20,32,66,.92), rgba(20,32,66,0) 70%);
  animation:avAtm1 96s ease-in-out infinite alternate;
}
body.avos .avcurtF.f2{
  width:92vw; height:92vw; right:-28vw; top:14vh;
  background:radial-gradient(closest-side, rgba(15,21,44,.86), rgba(15,21,44,0) 68%);
  animation:avAtm2 124s ease-in-out infinite alternate;
}
body.avos .avcurtF.f3{
  width:120vw; height:120vw; left:-10vw; bottom:-52vw;
  background:radial-gradient(closest-side, rgba(10,13,24,.80), rgba(10,13,24,0) 72%);
  animation:avAtm3 152s ease-in-out infinite alternate;
}
@keyframes avAtm1{ from{ transform:translate3d(0,0,0) scale(1) }
                   to  { transform:translate3d(7vw,5vh,0) scale(1.12) } }
@keyframes avAtm2{ from{ transform:translate3d(0,0,0) scale(1.06) }
                   to  { transform:translate3d(-6vw,-7vh,0) scale(1) } }
@keyframes avAtm3{ from{ transform:translate3d(0,0,0) scale(1) }
                   to  { transform:translate3d(5vw,-4vh,0) scale(1.1) } }
body.avos .avcurL{ position:absolute; inset:0; will-change:transform; }
body.avos .avcurL.l1{
  background-image:repeating-linear-gradient(90deg,
    rgba(var(--curt-ac),0) 0px, rgba(var(--curt-ac),.43) 9px,
    rgba(var(--curt-ac),.16) 19px, rgba(var(--curt-ac),0) 30px,
    rgba(var(--curt-ac),0) 47px);
  animation:avCur1 64s linear infinite;
}
body.avos .avcurL.l2{
  background-image:repeating-linear-gradient(90deg,
    rgba(var(--curt-ac),0) 0px, rgba(var(--curt-ac),.40) 16px,
    rgba(var(--curt-ac),.10) 34px, rgba(var(--curt-ac),0) 52px,
    rgba(var(--curt-ac),0) 79px);
  animation:avCur2 103s linear infinite;
}
body.avos .avcurL.l3{
  background-image:repeating-linear-gradient(90deg,
    rgba(var(--curt-ac),0) 0px, rgba(var(--curt-ac),.26) 4px,
    rgba(var(--curt-ac),.05) 12px, rgba(var(--curt-ac),0) 26px,
    rgba(var(--curt-ac),0) 131px);
  animation:avCur3 157s linear infinite;
}
/* each slides exactly one of its own periods, so the loop is invisible */
@keyframes avCur1{ from{transform:translate3d(0,0,0)}    to{transform:translate3d(-47px,0,0)} }
@keyframes avCur2{ from{transform:translate3d(-79px,0,0)} to{transform:translate3d(0,0,0)} }
@keyframes avCur3{ from{transform:translate3d(0,0,0)}    to{transform:translate3d(-131px,0,0)} }
/* the bright core travels, the way it travels down the landing page */
@keyframes avCurtDrift{
  from{ transform:translate3d(-4%,-3%,0) scale(1) }
  to  { transform:translate3d(4%,4%,0) scale(1.07) }
}
@keyframes avCurtBreath{ from{ opacity:calc(var(--curt-str) * .74) } to{ opacity:var(--curt-str) } }
/* ⚠ a vertical falloff on top of the radial one, so the columns never run
   into the system bar at the top or the orb at the bottom */
body.avos .avcurtFade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,10,.85) 0%, rgba(5,7,10,0) 22%,
                                     rgba(5,7,10,0) 74%, rgba(5,7,10,.9) 100%);
}
@media (prefers-reduced-motion:reduce){
  body.avos .avcurL, body.avos .avcurtCore, body.avos .avcurtF{ animation:none; }
}
@media (max-width:760px){
  /* fewer, wider columns on a phone: the fine ones turn to mush at that pixel
     density and cost the same to composite. The landing page drops the same
     layer at the same breakpoint. */
  body.avos .avcurL.l3{ display:none; }
  body.avos .avcurtCore{ --curt-str:.6; }
}

/* --- the sign-in gate stands on the curtain too --------------------------
   Zumo: the same curtain on the landing page, on the sign in and sign up
   page, and on the desktop. So the gate does not blur somebody's chosen
   photograph any more; it gets the curtain, whoever they are and whatever
   they last picked -- which also means the front door, the login card and
   the desktop are one continuous surface.
   ⚠ Below the login route (z-index 9000) and above the wallpaper (0 and 1). */
body.avos #authWall{ position:fixed; inset:0; z-index:2; pointer-events:none; display:none; }
body.avos.signin #authWall{ display:block; }
/* nothing is gained by blurring a picture nobody can see through the curtain,
   and a full-screen blur filter is not free */
body.avos.signin #wall, body.avos.signin #wallNext{ display:none; }

/* --- desktop icons: the right edge, always visible, never covered --------- */
body.avos #icons{
  position:fixed; top:calc(var(--bar-h) + 10px); right:14px; bottom:58px; z-index:6;
  display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-end;
  pointer-events:none;
}
body.avos .dicon{
  pointer-events:auto; width:74px; height:78px; padding:0; border:0;
  background:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:6px; border-radius:8px;
  -webkit-user-select:none; user-select:none;
}
body.avos .dicon .dtile{
  position:relative; width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center; color:#fff;
  transition:transform 150ms cubic-bezier(.2,.9,.3,1.25);
}
body.avos[data-os="light"] .dicon .dtile{ color:#fff; }
body.avos .dicon .dtile .ci{ width:23px; height:23px; }
body.avos .dicon span{
  font:400 10.5px/1.15 var(--ui); color:var(--on-wall);
  text-shadow:var(--wall-shadow); text-align:center; max-width:72px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos .dicon:hover .tile{ transform:scale(1.07); }
body.avos .dicon:active .tile{ transform:scale(.97); }
body.avos .dicon.run .dtile::after{
  content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:var(--on-wall);
  box-shadow:var(--wall-shadow);
}
body.avos .dicon:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:1px; }

/* ══════════════════════════════════════════════════════════════════════════
   4. SYSTEM BAR. Measured: it has no background. It is text on the wallpaper.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #bar{
  position:fixed; left:0; right:0; top:0; height:var(--bar-h); z-index:60;
  display:flex; align-items:center; gap:1px; padding:0 12px 0 8px;
  font:400 12px/1 var(--ui); color:var(--on-wall); text-shadow:var(--wall-shadow);
  -webkit-user-select:none; user-select:none;
  background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
}
body.avos .barBtn{
  height:20px; padding:0 8px; border:0; border-radius:5px; cursor:pointer;
  background:none; color:inherit; font:400 12px/20px var(--ui);
  text-shadow:inherit; white-space:nowrap; transition:background 110ms ease;
}
body.avos .barBtn:hover, body.avos .barBtn.on{ background:var(--wall-chip); }
body.avos .barBtn.app{ font-weight:600; }
body.avos .barMark{
  width:26px; height:20px; display:grid; place-items:center; border:0;
  background:none; cursor:pointer; border-radius:5px; padding:0;
}
/* ⚠ THE MARK ONLY EXISTS AS A WHITE PNG, and the system bar has no
   background, so on a light wallpaper it was a white shape on a pale sky.
   invert() turns a white glyph on transparent into a black one and leaves the
   alpha alone, so one file serves both wallpapers. */
body.avos .barMark img{
  width:14px; height:14px; display:block;
  filter:invert(1) var(--wall-glow);
}
body.avos[data-os="dark"] .barMark img{ filter:var(--wall-glow); }
body.avos .barMark:hover{ background:var(--wall-chip); }
body.avos .barRight{
  margin-left:auto; display:flex; align-items:center; gap:11px;
  font-variant-numeric:tabular-nums;
}
body.avos .barStat{ opacity:.88; font-size:11.5px; white-space:nowrap; }
body.avos .barSlot{ display:inline-flex; align-items:center; }

/* --- menus dropped from the bar ------------------------------------------ */
body.avos .menu{
  position:fixed; z-index:200; min-width:186px; padding:5px;
  border-radius:9px; transform-origin:top left;
  animation:menuIn 130ms cubic-bezier(.2,.9,.3,1);
}
@keyframes menuIn{ from{ opacity:0; transform:scale(.97) translateY(-4px); } }
body.avos .menu > *{ position:relative; z-index:1; }
body.avos .menu button{
  display:flex; align-items:center; gap:9px; width:100%; height:26px;
  padding:0 9px; border:0; border-radius:5px; background:none; cursor:pointer;
  text-align:left; font:400 12.5px/1 var(--ui); color:var(--ink);
}
body.avos .menu button:hover{ background:var(--acc); color:#fff; }
body.avos .menu button:hover .ci{ color:#fff; }
body.avos .menu button[disabled]{ color:var(--ink-3); pointer-events:none; }
body.avos .menu button .k{ margin-left:auto; font-size:11px; color:var(--ink-3); }
body.avos .menu button:hover .k{ color:rgba(255,255,255,.78); }
body.avos .menu hr{ margin:4px 8px; border:0; border-top:1px solid var(--ink-line); }
body.avos .menu .mh{ padding:6px 9px 4px; font:500 10.5px/1 var(--ui); color:var(--ink-3); }
body.avos .menu .ci{ color:var(--ink-2); }
body.avos .menu .dot{ width:5px; height:5px; border-radius:50%; background:var(--acc); flex:none; }

/* ══════════════════════════════════════════════════════════════════════════
   5. THE ORB. In the reference the entire dock is one small orb at the bottom
   centre. Minimised windows appear beside it, and only then.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #orbBar{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:8px;
}
body.avos #orb{
  width:var(--orb); height:var(--orb); border-radius:50%; border:0; padding:0;
  cursor:pointer; position:relative; display:grid; place-items:center;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:var(--fx-light); backdrop-filter:var(--fx-light);
  box-shadow:var(--edge-top), var(--edge-in), 0 4px 14px rgba(0,0,0,.20);
  transition:transform 160ms cubic-bezier(.2,.9,.3,1.25), background 160ms ease;
}
body.avos #orb::after{
  content:""; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #EAF0FF, #B9CBF2 58%, #8FA6D8);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7);
}
body.avos #orb:hover{ transform:scale(1.09); background:rgba(255,255,255,.46); }
body.avos #orb:active{ transform:scale(.96); }
body.avos .minChip{
  height:26px; padding:0 10px 0 7px; display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:13px; cursor:pointer; color:var(--ink);
  font:400 11.5px/1 var(--ui); max-width:160px;
  animation:menuIn 170ms cubic-bezier(.2,.9,.3,1);
}
body.avos .minChip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.avos .minChip .ci{ width:14px; height:14px; color:var(--ink-2); }
body.avos .minChip:hover{ background-color:var(--veil-window); }

/* ══════════════════════════════════════════════════════════════════════════
   6. THE LAUNCHER
   ────────────────────────────────────────────────────────────────────────── */
body.avos #launch{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:flex-start; justify-content:center; padding-top:13vh;
}
body.avos #launch.open{ display:flex; }
body.avos #launch .scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:fadeIn 140ms ease;
}
@keyframes fadeIn{ from{ opacity:0 } }
body.avos .launchPanel{
  position:relative; width:min(660px, 92vw); border-radius:14px;
  animation:launchIn 190ms cubic-bezier(.16,.84,.28,1);
}
@keyframes launchIn{ from{ opacity:0; transform:scale(.97) translateY(-10px); } }
body.avos .launchIn{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  height:48px; padding:0 16px; border-bottom:1px solid var(--ink-line);
  color:var(--ink-3);
}
body.avos .launchIn input{
  flex:1; min-width:0; border:0; outline:none; background:none;
  font:400 16px/1 var(--ui); color:var(--ink);
}
body.avos .launchIn input::placeholder{ color:var(--ink-3); }
body.avos .launchList{
  position:relative; z-index:1; max-height:min(50vh,440px); overflow:auto; padding:6px;
}
body.avos .lrow{
  display:flex; align-items:center; gap:10px; width:100%; height:38px;
  padding:0 10px; border:0; border-radius:7px; background:none; cursor:pointer;
  text-align:left; color:var(--ink); font:400 13.5px/1 var(--ui);
}
body.avos .lrow .lico{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:var(--acc); color:#fff; flex:none;
}
body.avos .lrow .lico .ci{ width:15px; height:15px; }
body.avos .lrow.proj .lico{ background:var(--ink-3); }
body.avos .lrow i{ font-style:normal; margin-left:auto; font-size:11px; color:var(--ink-3); }
body.avos .lrow.sel, body.avos .lrow:hover{ background:var(--acc); color:#fff; }
body.avos .lrow.sel i, body.avos .lrow:hover i{ color:rgba(255,255,255,.82); }
body.avos .lrow.sel .lico, body.avos .lrow:hover .lico{ background:rgba(255,255,255,.22); }
body.avos .lsec{ padding:9px 11px 5px; font:500 10.5px/1 var(--ui); color:var(--ink-3); }
body.avos .lnone{ padding:26px; text-align:center; color:var(--ink-3); font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════════
   7. WINDOWS
   ────────────────────────────────────────────────────────────────────────── */
body.avos #wins{ position:fixed; inset:0; z-index:10; pointer-events:none; }
body.avos .win{
  position:absolute; display:flex; flex-direction:column; pointer-events:auto;
  min-width:320px; min-height:190px; border-radius:var(--r-win); overflow:hidden;
  transform-origin:50% 60%;
  animation:winIn 230ms cubic-bezier(.16,.84,.28,1);
  transition:box-shadow 220ms ease;
}
@keyframes winIn{ from{ opacity:0; transform:scale(.94) translateY(10px); } }
body.avos .win.closing{ animation:winOut 150ms cubic-bezier(.4,0,.7,.2) forwards; pointer-events:none; }
@keyframes winOut{ to{ opacity:0; transform:scale(.95) translateY(6px); } }
body.avos .win.stow{ animation:winStow 240ms cubic-bezier(.4,0,.6,.2) forwards; pointer-events:none; }
@keyframes winStow{ to{ opacity:0; transform:scale(.24) translate(var(--sx,0px), var(--sy,42vh)); } }
body.avos .win.min{ display:none; }
/* inactive windows recede: less shadow, quieter title, still fully legible */
/* An unfocused window recedes AND costs less: a denser veil over a lighter
   blur. Real systems do the same thing, and with four windows open it is
   the difference between smooth and not. */
body.avos .win:not(.on){
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-off);
  -webkit-backdrop-filter:var(--fx-light); backdrop-filter:var(--fx-light);
  background-color:var(--veil-off);
}
body.avos .win:not(.on) .winTitle{ opacity:.5; }

body.avos .winBar{
  position:relative; z-index:2; flex:none; height:30px; display:flex;
  align-items:center; padding:0 12px; gap:7px; cursor:grab;
  -webkit-user-select:none; user-select:none;
}
body.avos .winBar.drag{ cursor:grabbing; }
body.avos .winDots{ display:flex; gap:7px; align-items:center; }
body.avos .winDot.stowBtn, body.avos .winDot.growBtn{
  width:0; opacity:0; margin-left:-7px;
  transition:width 140ms cubic-bezier(.2,.9,.3,1), opacity 120ms ease, margin-left 140ms;
}
body.avos .win:hover .winDot.stowBtn, body.avos .win:hover .winDot.growBtn,
body.avos .winBar:focus-within .winDot.stowBtn, body.avos .winBar:focus-within .winDot.growBtn{
  width:9px; opacity:1; margin-left:0;
}
body.avos .winDot{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; flex:none;
  cursor:pointer; background:rgba(0,0,0,.17); position:relative;
  transition:background 120ms ease, transform 120ms ease;
}
body.avos[data-os="dark"] .winDot{ background:rgba(255,255,255,.26); }
body.avos .winDot::before{ content:""; position:absolute; inset:-8px; }
body.avos .win.on .winDot:hover{ background:var(--neg); transform:scale(1.15); }
body.avos .win.on .winDot.stowBtn:hover{ background:var(--warn); }
body.avos .win.on .winDot.growBtn:hover{ background:var(--pos); }
body.avos .winTitle{
  margin-left:auto; font:400 11px/1 var(--ui); color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56%;
  transition:opacity 220ms ease;
}
body.avos .winBody{ position:relative; z-index:1; flex:1; min-height:0; overflow:auto; }
/* --- resize handles: four edges, four corners. 7px strips sitting outside the
   content, so none of them steals a click from the application. --- */
body.avos .grip{ position:absolute; z-index:4; }
body.avos .g-n{ left:12px; right:12px; top:-3px; height:7px; cursor:ns-resize; }
body.avos .g-s{ left:12px; right:12px; bottom:-3px; height:7px; cursor:ns-resize; }
body.avos .g-w{ top:12px; bottom:12px; left:-3px; width:7px; cursor:ew-resize; }
body.avos .g-e{ top:12px; bottom:12px; right:-3px; width:7px; cursor:ew-resize; }
body.avos .g-nw{ left:-3px; top:-3px; width:15px; height:15px; cursor:nwse-resize; }
body.avos .g-ne{ right:-3px; top:-3px; width:15px; height:15px; cursor:nesw-resize; }
body.avos .g-sw{ left:-3px; bottom:-3px; width:15px; height:15px; cursor:nesw-resize; }
body.avos .g-se{ right:-3px; bottom:-3px; width:15px; height:15px; cursor:nwse-resize; }
/* ⚠ THE WINDOW CANNOT CLIP ITSELF ANY MORE. The grips sit outside the frame,
   and `overflow:hidden` on .win would eat all eight of them. The rounding
   moves onto the bar and the body, which is where the scrolling already was. */
body.avos .win{ overflow:visible; }
body.avos .win > .winBar{
  border-top-left-radius:var(--r-win); border-top-right-radius:var(--r-win);
}
body.avos .win > .winBody{
  border-bottom-left-radius:var(--r-win); border-bottom-right-radius:var(--r-win);
}
body.avos .win.full{
  left:0 !important; top:var(--bar-h) !important;
  width:100% !important; height:calc(100dvh - var(--bar-h) - 62px) !important;
  border-radius:0;
}
body.avos .win.full .grip{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   8. CONTROLS INSIDE AN APPLICATION.
   Flat, quiet, opaque. No blur below this line: the window is the glass and
   nothing inside it gets its own.
   ────────────────────────────────────────────────────────────────────────── */
body.avos .ci{ width:18px; height:18px; flex:none; display:block; color:inherit; }
body.avos .ci-14{ width:14px; height:14px; } body.avos .ci-16{ width:16px; height:16px; }
body.avos .ci-20{ width:20px; height:20px; } body.avos .ci-24{ width:24px; height:24px; }

body.avos .b{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border:.5px solid var(--ink-line); border-radius:var(--r-ctl);
  background:var(--veil-sunk); color:var(--ink-2); cursor:pointer;
  font:450 12px/1 var(--ui); white-space:nowrap;
  transition:background 110ms ease, color 110ms ease, border-color 110ms ease;
}
body.avos .b:hover{ background:var(--ink-hover); color:var(--ink); }
body.avos .b:active{ background:var(--ink-sel); }
body.avos .b[disabled]{ opacity:.4; pointer-events:none; }
body.avos .b.pri{ background:var(--acc); border-color:transparent; color:#fff; }
body.avos .b.pri:hover{ background:var(--acc-hi); color:#fff; }
body.avos .b.on{ background:var(--acc-wash); border-color:var(--acc-edge); color:var(--acc); }
body.avos .b.ico{ width:26px; padding:0; justify-content:center; }

body.avos .seg{
  display:inline-flex; padding:2px; gap:2px; flex:none;
  border:.5px solid var(--ink-line); border-radius:var(--r-ctl);
  background:var(--veil-sunk);
}
body.avos .seg button{
  height:20px; padding:0 10px; border:0; border-radius:4px; cursor:pointer;
  background:none; color:var(--ink-3); font:450 11.5px/1 var(--ui); white-space:nowrap;
  transition:background 110ms ease, color 110ms ease;
}
body.avos .seg button:hover{ color:var(--ink-2); }
body.avos .seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
body.avos[data-os="dark"] .seg button.on{ background:rgba(255,255,255,.16); box-shadow:none; }

body.avos .fld{
  display:flex; align-items:center; gap:7px; height:26px; padding:0 9px; min-width:0;
  border:.5px solid var(--ink-line); border-radius:var(--r-ctl);
  background:var(--veil-sunk); color:var(--ink-3);
  transition:border-color 110ms ease;
}
body.avos .fld:focus-within{ border-color:var(--acc); }
body.avos .fld input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font:400 12.5px/1 var(--ui); color:var(--ink);
}
body.avos .fld input::placeholder{ color:var(--ink-3); }

body.avos select.sel{
  height:26px; padding:0 24px 0 9px; cursor:pointer; appearance:none; -webkit-appearance:none;
  border:.5px solid var(--ink-line); border-radius:var(--r-ctl);
  background:var(--veil-sunk); color:var(--ink-2); font:450 12px/1 var(--ui);
}
body.avos select.sel:hover{ background:var(--ink-hover); color:var(--ink); }
body.avos select.sel:focus{ outline:none; border-color:var(--acc); }

body.avos .toolbar{
  position:relative; z-index:1; display:flex; align-items:center; gap:7px;
  flex-wrap:wrap; padding:8px 12px; flex:none; border-bottom:1px solid var(--ink-line-2);
}
body.avos .grow{ flex:1 1 auto; min-width:6px; }

body.avos .tag{
  display:inline-flex; align-items:center; height:17px; padding:0 6px;
  border-radius:4px; border:.5px solid var(--ink-line);
  font:450 10.5px/1 var(--ui); color:var(--ink-3); white-space:nowrap;
}
body.avos .tag.pos{ color:var(--pos); border-color:rgba(47,143,91,.30); background:rgba(47,143,91,.10); }
body.avos .tag.neg{ color:var(--neg); border-color:rgba(192,69,63,.30); background:rgba(192,69,63,.10); }
body.avos .tag.wrn{ color:var(--warn); border-color:rgba(169,118,28,.30); background:rgba(169,118,28,.10); }
body.avos .tag.acc{ color:var(--acc); border-color:var(--acc-edge); background:var(--acc-wash); }

body.avos .empty{ padding:48px 24px; text-align:center; color:var(--ink-3); font-size:13px; }
body.avos .empty b{ display:block; color:var(--ink-2); font-size:14px; margin-bottom:5px; font-weight:600; }

body.avos ::-webkit-scrollbar{ width:12px; height:12px; }
body.avos ::-webkit-scrollbar-track{ background:transparent; }
body.avos ::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.20); border-radius:7px; border:4px solid transparent;
  background-clip:content-box;
}
body.avos[data-os="dark"] ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22); background-clip:content-box;
}
body.avos ::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.32); background-clip:content-box; }
body.avos ::-webkit-scrollbar-corner{ background:transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   9. ALPHA FINDER
   ────────────────────────────────────────────────────────────────────────── */
body.avos .af{ display:flex; flex-direction:column; height:100%; min-height:0; }
body.avos .afMain{
  flex:1; min-height:0; display:grid; grid-template-columns:164px minmax(0,1fr);
  overflow:hidden; position:relative;
}
body.avos .afMain.insp{ grid-template-columns:164px minmax(0,1fr) 292px; }
body.avos .afSide{ border-right:1px solid var(--ink-line-2); overflow:auto; padding:4px 0 16px; }
body.avos .afSideH{ padding:10px 12px 5px; font:500 10.5px/1 var(--ui); color:var(--ink-3); }
body.avos .facet{
  display:flex; align-items:center; gap:7px; width:100%; padding:0 12px; height:24px;
  border:0; background:none; cursor:pointer; text-align:left;
  font:400 12px/1 var(--ui); color:var(--ink-2);
  transition:background 100ms ease, color 100ms ease;
}
body.avos .facet:hover{ background:var(--ink-hover); color:var(--ink); }
body.avos .facet.on{ background:var(--acc-wash); color:var(--acc); }
body.avos .facet .lb{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.avos .facet .n{ margin-left:auto; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
body.avos .facet.on .n{ color:var(--acc); }
body.avos .afSep{ height:1px; background:var(--ink-line-2); margin:8px 12px; }
body.avos .afList{ overflow:auto; min-width:0; }
body.avos .afFoot{
  display:flex; align-items:center; gap:10px; padding:6px 12px; flex:none;
  border-top:1px solid var(--ink-line-2);
  font:400 11px/1.4 var(--ui); color:var(--ink-3); font-variant-numeric:tabular-nums;
}

body.avos .tbl{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
body.avos .tbl th, body.avos .tbl td{ overflow:hidden; }
body.avos .tbl thead th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  padding:0 11px; height:26px; background:var(--veil-window);
  -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--ink-line);
  font:450 10.5px/1 var(--ui); color:var(--ink-3);
  -webkit-user-select:none; user-select:none;
}
body.avos .tbl thead th.n{ text-align:right; }
body.avos .tbl thead th.s{ cursor:pointer; }
body.avos .tbl thead th.s:hover, body.avos .tbl thead th.act{ color:var(--ink); }
body.avos .tbl tbody td{
  padding:0 11px; height:34px; border-bottom:1px solid var(--ink-line-2);
  font:400 12.5px/1.35 var(--ui); color:var(--ink-2); vertical-align:middle;
}
body.avos .tbl tbody td.n{ text-align:right; font-variant-numeric:tabular-nums; font-size:12px; }
body.avos .tbl tbody tr{ cursor:pointer; }
body.avos .tbl tbody tr:hover td{ background:var(--ink-hover); }
body.avos .tbl tbody tr.sel td{ background:var(--acc-wash); }
body.avos td.cName{ padding-top:5px; padding-bottom:5px; height:auto; }
body.avos .pName{ display:flex; align-items:center; gap:7px; min-width:0; }
body.avos .pName b{
  font:600 12.5px/1.2 var(--ui); color:var(--ink); letter-spacing:-.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos .pName .sym{ font:400 10.5px/1 var(--num); color:var(--acc); flex:none; }
body.avos .pSub{
  font:400 11px/1 var(--ui); color:var(--ink-3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos .cTags{ display:flex; gap:4px; align-items:center; overflow:hidden; }
body.avos .score{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
body.avos .score .v{
  font:600 14px/1 var(--ui); font-variant-numeric:tabular-nums;
  color:var(--ink); min-width:22px; text-align:right;
}
body.avos .score.top .v{ color:var(--amb); }
body.avos .score.dead .v{ color:var(--ink-3); }
body.avos .meter{ display:flex; align-items:flex-end; gap:2px; height:13px; }
body.avos .meter i{ width:3px; border-radius:1px; background:var(--ink-line); display:block; }
body.avos .meter i:nth-child(1){ height:38% } body.avos .meter i:nth-child(2){ height:54% }
body.avos .meter i:nth-child(3){ height:70% } body.avos .meter i:nth-child(4){ height:85% }
body.avos .meter i:nth-child(5){ height:100% }
body.avos .meter.b1 i:nth-child(-n+1), body.avos .meter.b2 i:nth-child(-n+2),
body.avos .meter.b3 i:nth-child(-n+3), body.avos .meter.b4 i:nth-child(-n+4),
body.avos .meter.b5 i:nth-child(-n+5){ background:var(--acc); }
body.avos .meter.top.b5 i:nth-child(-n+5){ background:var(--amb); }
body.avos .score.dead .meter i{ background:var(--ink-line) !important; }
body.avos .delta{ font:400 10.5px/1 var(--ui); color:var(--ink-3); font-variant-numeric:tabular-nums; }
body.avos .delta.up{ color:var(--pos); } body.avos .delta.dn{ color:var(--neg); }
body.avos .more{ padding:12px; text-align:center; font:400 11px/1 var(--ui); color:var(--ink-3); }

body.avos .afOps{ border-bottom:1px solid var(--ink-line); flex:none; display:none; }
body.avos .afOps.open{ display:block; max-height:46vh; overflow:auto; }
body.avos .afOpsIn{ padding:10px; display:flex; flex-direction:column; gap:9px; }

body.avos .insp{ border-left:1px solid var(--ink-line-2); overflow:auto; min-width:0; }
body.avos .inspH{
  position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; gap:8px;
  padding:11px 12px; border-bottom:1px solid var(--ink-line-2);
  background:var(--veil-window);
  -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px);
}
body.avos .inspH .t{ min-width:0; flex:1; }
body.avos .inspH .t b{ display:block; font:600 14px/1.2 var(--ui); color:var(--ink); }
body.avos .inspH .t i{ display:block; margin-top:3px; font:400 11px/1 var(--ui);
  font-style:normal; color:var(--ink-3); }
body.avos .inspS{ padding:11px 12px; border-bottom:1px solid var(--ink-line-2); }
body.avos .inspS h4{ margin:0 0 8px; font:500 10.5px/1 var(--ui); color:var(--ink-3); }
body.avos .kv{ display:flex; align-items:baseline; gap:10px; padding:3px 0; }
body.avos .kv .k{ font:400 11.5px/1.3 var(--ui); color:var(--ink-3); }
body.avos .kv .v{ margin-left:auto; text-align:right; font:400 11.5px/1.3 var(--ui);
  color:var(--ink-2); font-variant-numeric:tabular-nums; }
body.avos .inspP{ margin:0; font:400 12px/1.55 var(--ui); color:var(--ink-2); }
body.avos .inspP + .inspP{ margin-top:7px; }
body.avos .inspTags{ display:flex; flex-wrap:wrap; gap:4px; }
body.avos .inspA{ display:flex; gap:6px; padding:11px 12px; }
body.avos .inspA .b{ flex:1; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════════════
   10. THE WALLPAPER APP. The reference has one in its system bar and the
   whole material reads off the choice, so this is a real application.
   ────────────────────────────────────────────────────────────────────────── */
body.avos .wallApp{ padding:14px 16px 22px; }
body.avos .wallApp h2{ margin:0 0 3px; font:600 21px/1.2 var(--ui); color:var(--ink);
  letter-spacing:-.02em; }
body.avos .wallApp p.sub{ margin:0 0 16px; font:400 12.5px/1.5 var(--ui); color:var(--ink-3); }
body.avos .wallApp h3{ margin:16px 0 9px; font:500 11px/1 var(--ui); color:var(--ink-3); }
body.avos .wallGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(126px,1fr)); gap:12px; }
body.avos .wallOpt{ border:0; background:none; padding:0; cursor:pointer; text-align:left; }
body.avos .wallOpt .th{
  width:100%; aspect-ratio:16/10; border-radius:8px; background-size:cover;
  background-position:center; box-shadow:var(--edge-in), 0 2px 6px rgba(0,0,0,.16);
  transition:transform 140ms cubic-bezier(.2,.9,.3,1.2);
}
body.avos .wallOpt:hover .th{ transform:scale(1.03); }
body.avos .wallOpt.on .th{ box-shadow:0 0 0 2.5px var(--acc), 0 2px 6px rgba(0,0,0,.16); }
body.avos .wallOpt span{ display:block; margin-top:6px; font:400 11.5px/1 var(--ui); color:var(--ink-2); }
body.avos .wallOpt.on span{ color:var(--acc); }
/* --- the live tile draws the curtain instead of loading a picture --------
   ⚠ SCALED, NOT SQUASHED. The columns are absolute pixel periods, so a
   126px tile showing them at full size reads as three fat stripes rather than
   as a curtain. The tile holds a 4x box scaled to a quarter, which puts the
   same number of columns in the tile as there are on the screen. */
body.avos .wallOpt .th.live{ position:relative; overflow:hidden; }
body.avos .wallOpt .th.live .avcurt{
  position:absolute; top:0; left:0; width:400%; height:400%;
  transform:scale(.25); transform-origin:0 0;
}
body.avos .wallOpt .th.live .avcurtFade{
  background:linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 30%,
                                     rgba(5,7,10,0) 70%, rgba(5,7,10,.6) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   11. APPLICATIONS NOT REBUILT YET.
   They keep working and they get the material, the type and the ink. This
   block is the SEAM and it is meant to be deleted app by app, not extended.
   ────────────────────────────────────────────────────────────────────────── */
body.avos .winBody.old{ padding:14px 16px 22px; }
body.avos .winBody.old .stub-head, body.avos .winBody.old .op-head{
  display:block; margin:0 0 13px; padding:0 0 11px;
  border-bottom:1px solid var(--ink-line-2); background:none !important;
}
body.avos .winBody.old h2{
  margin:0 0 4px !important; font:600 19px/1.25 var(--ui) !important;
  color:var(--ink) !important; letter-spacing:-.018em !important;
}
body.avos .winBody.old .stub-head p, body.avos .winBody.old .op-head p{
  margin:0; max-width:74ch; font:400 12.5px/1.55 var(--ui) !important;
  color:var(--ink-3) !important;
}
body.avos .winBody.old .opbar, body.avos .winBody.old .controls,
body.avos .winBody.old .facets{
  gap:6px !important; margin:0 0 11px !important; padding:8px 9px !important;
  border:.5px solid var(--ink-line) !important; border-radius:8px !important;
  background:var(--veil-sunk) !important; box-shadow:none !important;
}
body.avos .winBody.old .fbtn, body.avos .winBody.old .ffbtn,
body.avos .winBody.old .scan-btn, body.avos .winBody.old .analyze-btn,
body.avos .winBody.old .pbtn, body.avos .winBody.old .tab,
body.avos .winBody.old .gen-btn, body.avos .winBody.old .copy,
body.avos .winBody.old .theme-btn{
  height:24px; padding:0 9px !important; border-radius:var(--r-ctl) !important;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  box-shadow:none !important; color:var(--ink-2) !important; text-shadow:none !important;
  font:450 11.5px/22px var(--ui) !important; letter-spacing:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.avos .winBody.old .fbtn.active, body.avos .winBody.old .ffbtn.on,
body.avos .winBody.old .pbtn.on, body.avos .winBody.old .pbtn.accent{
  color:var(--acc) !important; border-color:var(--acc-edge) !important;
  background:var(--acc-wash) !important;
}
body.avos .winBody.old .fbtn::before, body.avos .winBody.old .fbtn::after,
body.avos .winBody.old .ffbtn::before, body.avos .winBody.old .ffbtn::after,
body.avos .winBody.old .pbtn::before, body.avos .winBody.old .pbtn::after,
body.avos .winBody.old .tab::before, body.avos .winBody.old .tab::after,
body.avos .winBody.old .sortsel::before, body.avos .winBody.old .sortsel::after,
body.avos .winBody.old .copy::before, body.avos .winBody.old .copy::after,
body.avos .winBody.old .scan-btn::before, body.avos .winBody.old .scan-btn::after,
body.avos .winBody.old .analyze-btn::before, body.avos .winBody.old .analyze-btn::after{
  display:none !important;
}
body.avos .winBody.old .meta-line{
  font:400 11px/1.5 var(--ui) !important; color:var(--ink-3) !important;
  letter-spacing:0 !important; margin:0 0 9px !important;
}
body.avos .winBody.old .row, body.avos .winBody.old .ncrd,
body.avos .winBody.old .tile, body.avos .winBody.old .c,
body.avos .winBody.old .mini, body.avos .winBody.old .vccard,
body.avos .winBody.old .actcard, body.avos .winBody.old .opp-item,
body.avos .winBody.old .ncard, body.avos .winBody.old .summary,
body.avos .winBody.old .draft, body.avos .winBody.old .banner-in,
body.avos .winBody.old .chg, body.avos .winBody.old .empty,
body.avos .winBody.old .score-cell, body.avos .winBody.old .dscore{
  border:.5px solid var(--ink-line) !important; border-radius:8px !important;
  background:var(--veil-sunk) !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.avos .winBody.old .row:hover, body.avos .winBody.old .opp-item:hover,
body.avos .winBody.old .vccard:hover, body.avos .winBody.old .actcard:hover,
body.avos .winBody.old .ncrd:hover{
  transform:none !important; background:var(--ink-hover) !important;
  border-color:var(--ink-line) !important; box-shadow:none !important;
}
body.avos .winBody.old .rows{ gap:5px !important; }
body.avos .winBody.old .tile::after, body.avos .winBody.old .ncrd::after,
body.avos .winBody.old .tile::before, body.avos .winBody.old .ncrd::before,
body.avos .winBody.old .stsheen{ display:none !important; }
body.avos .winBody.old .pname{ font:600 13px/1.2 var(--ui) !important; color:var(--ink) !important; }
body.avos .winBody.old .sect, body.avos .winBody.old .stag,
body.avos .winBody.old .badge, body.avos .winBody.old .chip{
  border-radius:4px !important; box-shadow:none !important;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  color:var(--ink-3) !important; font-family:var(--ui) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
body.avos .winBody.old .grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; gap:10px !important;
}
body.avos .winBody.old .mid{ min-width:0; }
body.avos .winBody.old .ct, body.avos .winBody.old .sec h3, body.avos .winBody.old .slabel{
  font:500 10.5px/1.3 var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-3) !important;
}
body.avos .winBody.old .mv{ font-family:var(--ui) !important; color:var(--ink) !important; }
body.avos .winBody.old .sec h3::after{
  height:1px !important; background:var(--ink-line) !important;
  box-shadow:none !important; border-radius:0 !important;
}
/* 🔴 LIST EVERY TYPE, AND THE TYPELESS ONE. This selector named four
   types, so the profile ended up showing three different input styles side by
   side: `type="password"` kept the old dark monospace bar, and an `<input>`
   with no type at all fell through to the BROWSER DEFAULT, white with an inset
   border, in the middle of a glass panel.
   ⚠ `input:not([type])` is what catches the typeless one; `input` on its own
   would also grab checkboxes, radios and the range sliders. */
body.avos .winBody.old select,
body.avos .winBody.old input[type="search"],
body.avos .winBody.old input[type="password"],
body.avos .winBody.old input[type="email"],
body.avos .winBody.old input:not([type]),
body.avos .winBody.old input[type="text"], body.avos .winBody.old input[type="number"]{
  height:24px !important; padding:0 8px !important; border-radius:var(--r-ctl) !important;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  box-shadow:none !important; color:var(--ink) !important;
  font:400 12px/22px var(--ui) !important; letter-spacing:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. THE PROJECT SHEET, and the bug it carried.
   `.pclose` is written `position:absolute; top:18px; right:20px`, but the
   liquid-glass block re-declares every button class including `.pclose` with
   `position:relative` so a ::before can sit inside it. Relative won on
   document order, so the close control dropped into the flow at the top LEFT
   and sat on the project name: "Polymarket" read as "olymarket" with a cross
   over the P, on every project, on every load.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #panel{
  z-index:400 !important; border-radius:0 !important;
  border-left:.5px solid var(--ink-line) !important;
  background-color:var(--veil-pop) !important;
  -webkit-backdrop-filter:var(--fx-heavy) !important; backdrop-filter:var(--fx-heavy) !important;
  box-shadow:var(--cast-pop) !important;
  font-family:var(--ui) !important; color:var(--ink-2) !important;
  padding:18px 20px 60px !important;
}
body.avos #scrim{ z-index:390 !important; background:rgba(0,0,0,.14) !important; }

/* the sheet once it has been moved inside a window: absolute to the window
   box rather than fixed to the viewport, and clipped by it. Narrower too --
   560px inside a 900px window leaves no window. */
body.avos .win > #panel{
  position:absolute !important; top:0 !important; right:0 !important;
  bottom:0 !important; left:auto !important;
  height:auto !important; width:min(440px, 68%) !important;
  z-index:6 !important; border-radius:0 var(--r-win) var(--r-win) 0 !important;
}
body.avos .win > #scrim{
  position:absolute !important; inset:0 !important;
  z-index:5 !important; border-radius:var(--r-win) !important;
}
body.avos .win.hasSheet{ overflow:hidden; }
body.avos #panel h2, body.avos #panel h3{ color:var(--ink) !important; font-family:var(--ui) !important; }
body.avos #panel .dhead{ padding-right:42px; }
body.avos #panel .dhead .pname{
  font:600 21px/1.2 var(--ui) !important; letter-spacing:-.02em; color:var(--ink) !important;
}
body.avos #panel .pclose{
  position:absolute !important; top:15px !important; right:17px !important;
  left:auto !important; width:26px !important; height:26px !important;
  display:grid; place-items:center; font-size:14px !important;
  border-radius:var(--r-ctl) !important; border:.5px solid var(--ink-line) !important;
  background:var(--veil-sunk) !important; color:var(--ink-2) !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
body.avos #panel .pclose:hover{ background:var(--ink-hover) !important; color:var(--ink) !important; }
body.avos #panel .pclose::before, body.avos #panel .pclose::after{ display:none !important; }
body.avos #panel .dscore, body.avos #panel .summary, body.avos #panel .draft,
body.avos #panel .ncard, body.avos #panel .opp-item, body.avos #panel .empty{
  border:.5px solid var(--ink-line) !important; border-radius:8px !important;
  background:var(--veil-sunk) !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.avos #panel .sval.lg{ font-family:var(--ui) !important; font-size:32px !important; }
body.avos #panel .bd-track{
  height:4px !important; border-radius:2px !important; box-shadow:none !important;
  background:var(--ink-line) !important; overflow:hidden;
}
body.avos #panel .bd-fill{ border-radius:2px !important; }
body.avos #panel .bd-name, body.avos #panel .bd-pts,
body.avos #panel .dfacts, body.avos #panel .sources{
  font-family:var(--ui) !important; color:var(--ink-3) !important;
}
body.avos #panel .reasons li::before{ color:var(--acc) !important; }

/* the analyst is an application, so it is in the system */
body.avos #aiChat{
  z-index:420 !important; background:rgba(0,0,0,.16) !important;
  -webkit-backdrop-filter:blur(4px) !important; backdrop-filter:blur(4px) !important;
}
body.avos .aic{
  border-radius:14px !important; border:.5px solid var(--ink-line) !important;
  background-color:var(--veil-pop) !important;
  -webkit-backdrop-filter:var(--fx-heavy) !important; backdrop-filter:var(--fx-heavy) !important;
  box-shadow:var(--cast-pop) !important;
}
body.avos .aic-top, body.avos .aic-att{ border-bottom-color:var(--ink-line-2) !important; }
body.avos .aic-top b{ font:600 14px/1.2 var(--ui) !important; color:var(--ink) !important; }
body.avos .aic-top .sub{ color:var(--ink-3) !important; }
body.avos .aic-orb{
  width:26px !important; height:26px !important;
  background:radial-gradient(circle at 38% 32%, #EAF0FF, #B9CBF2 58%, #8FA6D8) !important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7) !important;
}
body.avos .aic-x, body.avos .aic-attbtn{
  border-radius:var(--r-ctl) !important; background:var(--veil-sunk) !important;
  border:.5px solid var(--ink-line) !important; color:var(--ink-2) !important;
  font-family:var(--ui) !important;
}
body.avos .aic-chip, body.avos .aic-send{
  border-radius:var(--r-ctl) !important; background:var(--acc) !important;
  color:#fff !important; border:0 !important; box-shadow:none !important;
  font-family:var(--ui) !important;
}
body.avos .aic-in{
  border-radius:8px !important; background:var(--veil-sunk) !important;
  border:.5px solid var(--ink-line) !important;
}
body.avos .aic-in textarea{
  font-family:var(--ui) !important; color:var(--ink) !important; background:none !important;
}
body.avos .aic-meta, body.avos .aic-att .hint{
  font-family:var(--ui) !important; color:var(--ink-3) !important;
}
body.avos .aic-thread{ color:var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   13. THE OTHER PALETTES.
   index.html declares --accent four times with four different values, --bg
   three times, --amber three times, and the hub shell keeps its OWN set on
   `.wh`. All of them are re-pointed here so anything not yet rebuilt still
   inherits the right ink. A few are written INLINE on elements, and an
   inline value beats any rule that is not !important, so those are matched on
   the style attribute, which keeps each card's meaning.
   ────────────────────────────────────────────────────────────────────────── */
body.avos{
  --bg:transparent; --text:var(--ink); --muted:var(--ink-3);
  --accent:var(--acc); --cyan:var(--pos); --amber:var(--amb); --rose:var(--neg);
  --white:var(--ink); --radius:8px;
  --display:var(--ui); --body:var(--ui);
  --g:var(--veil-sunk); --gd:var(--veil-sunk); --gb:var(--ink-line);
  --rim:none; --hull:var(--veil-sunk); --deep:transparent;
  --hair:var(--ink-line); --hot:var(--acc-edge); --readout:var(--veil-sunk);
  --sd:0 0 0; --hl:transparent;
  --st-good:var(--pos); --st-warn:var(--warn); --st-bad:var(--neg); --st-mute:var(--ink-3);
  --glass:var(--veil-sunk); --glass-line:var(--ink-line); --glass-line2:var(--ink-line);
}
body.avos .wh, body.avos .ca{
  --acc:var(--acc); --acc2:var(--acc-hi); --gold:var(--amb); --warm:var(--amb);
  --ink:var(--ink); --dim:var(--ink-2); --faint:var(--ink-3);
}
body.avos [style*="--ac:#66e6ff"]{ --ac:var(--acc) !important; }
body.avos [style*="--ac:#34d399"]{ --ac:var(--pos) !important; }
body.avos [style*="--ac:#fbbf24"]{ --ac:var(--amb) !important; }
body.avos [style*="--ac:#fb7185"]{ --ac:var(--neg) !important; }
body.avos [style*="color:#66ffb0"]{ color:var(--pos) !important; }
body.avos [style*="background:#66ffb0"]{ background:var(--pos) !important; }
body.avos [style*="background:#fbbf24"]{ background:var(--amb) !important; }
body.avos [style*="background:#66e6ff"]{ background:var(--acc) !important; }
body.avos [style*="background:#2ea8d8"]{ background:var(--acc-hi) !important; }
body.avos .wh .orb u{
  background:radial-gradient(circle at 38% 32%, #EAF0FF, #B9CBF2 58%, #8FA6D8) !important;
  box-shadow:none !important; animation:none !important; width:min(84px,40%) !important;
}
body.avos .wh .orb u::after{ display:none !important; }

/* ⚠ index.html's #app-shell block sets border-radius, padding, font-family
   and font-size with !important on every select and text input inside a
   .route, and `body.appshell .route input[type="search"]` is 0-3-2 because an
   attribute selector counts in the class column. The class is repeated to
   reach 0-3-2 and win on document order: the same `.auCard.auCard` trick
   index.html already uses a few hundred lines up, for the same reason. */
body.avos select.sel.sel,
body.avos .fld.fld input,
body.avos .launchIn.launchIn input{
  border-radius:var(--r-ctl) !important; font-family:var(--ui) !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
body.avos select.sel.sel{
  padding:0 24px 0 9px !important; font-size:12px !important;
  color:var(--ink-2) !important; border:.5px solid var(--ink-line) !important;
  background:var(--veil-sunk) !important;
}
body.avos .fld.fld input, body.avos .launchIn.launchIn input{
  background:none !important; border:0 !important; padding:0 !important;
  color:var(--ink) !important;
}
body.avos .fld.fld input{ font-size:12.5px !important; }
body.avos .launchIn.launchIn input{ font-size:16px !important; }

body.avos :focus-visible{ outline:2px solid var(--acc); outline-offset:1px; border-radius:var(--r-ctl); }
body.avos .fld input:focus-visible, body.avos .launchIn input:focus-visible{ outline:none; }

/* ══════════════════════════════════════════════════════════════════════════
   14. BOOT, and the sign-in gate
   ────────────────────────────────────────────────────────────────────────── */
/* --- the machine turning on ---------------------------------------------- */
body.avos #boot{
  position:fixed; inset:0; z-index:900; display:grid; place-items:center;
  background:#0A0C10; transition:opacity 440ms ease;
}
body.avos #boot.gone{ opacity:0; pointer-events:none; }
body.avos .bootIn{ display:flex; flex-direction:column; align-items:center; gap:26px; }
body.avos #boot img{
  width:44px; height:44px; opacity:.95;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
  animation:bootIn 620ms cubic-bezier(.2,.9,.3,1) both;
}
@keyframes bootIn{ from{ opacity:0; transform:scale(.86) } }
body.avos .bootBar{
  width:150px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.16);
}
body.avos .bootBar u{
  display:block; height:100%; width:38%; border-radius:2px;
  background:rgba(255,255,255,.85);
  animation:bootRun 1.05s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes bootRun{ from{ transform:translateX(-110%) } to{ transform:translateX(370%) } }

/* --- the welcome, on every start ----------------------------------------- */
body.avos #welcome{
  position:fixed; inset:0; z-index:880; display:grid; place-items:center;
  background:rgba(8,10,14,.55);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  transition:opacity 600ms ease;
  animation:fadeIn 320ms ease;
}
body.avos #welcome.gone{ opacity:0; pointer-events:none; }
body.avos .wIn{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  animation:wIn 700ms cubic-bezier(.2,.9,.3,1) both;
}
@keyframes wIn{ from{ opacity:0; transform:translateY(14px) scale(.96) } }
body.avos .wAv{
  width:70px; height:70px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 6px 24px rgba(0,0,0,.35);
  font:500 22px/1 var(--ui); letter-spacing:.03em;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
body.avos .wT{
  font:400 24px/1.2 var(--ui); color:#fff; letter-spacing:-.015em;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
body.avos:not(.ready) #bar, body.avos:not(.ready) #icons, body.avos:not(.ready) #orbBar{ opacity:0; }
body.avos.ready #bar, body.avos.ready #icons, body.avos.ready #orbBar{
  opacity:1; transition:opacity 460ms ease 100ms;
}

/* the private gate owns the screen before sign-in; the OS stands aside */
/* --- the sign-in screen: the OS asking who you are, on its own wallpaper --- */
body.avos.locked #bar, body.avos.locked #icons, body.avos.locked #orbBar,
body.avos.locked #wins, body.avos.locked #launch{ display:none !important; }
body.avos.locked .route.active{ display:block !important; }
body.avos.locked{ background:#0A0C10 !important; }
/* ⚠ THE GATE USED TO BLUR THE WALLPAPER. It does not any more: the sign-in
   screen stands on the light curtain now (see 3b), so the picture behind it
   is hidden rather than filtered, and a full-screen blur filter comes off the
   load at exactly the moment the page is doing its most work. */
/* index.html's gate paints its own dark radial over everything; the wallpaper
   is the background here, so that one has to become a plain scrim */
body.avos.signin .route[data-route="login"].active{
  background:rgba(6,9,14,.30) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
body.avos.signin .loginmark{ filter:drop-shadow(0 3px 14px rgba(0,0,0,.55)); }
body.avos.signin .auCard.auCard{
  border-radius:16px !important; padding:26px 26px 22px !important;
  background:rgba(22,25,31,.62) !important;
  -webkit-backdrop-filter:blur(26px) saturate(170%) !important;
  backdrop-filter:blur(26px) saturate(170%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.5),
             0 26px 70px rgba(0,0,0,.5) !important;
}
body.avos.signin .auCard h2{
  font:600 20px/1.25 var(--ui) !important; letter-spacing:-.015em !important;
  color:#F2F3F5 !important;
}
body.avos.signin .auCard #loginBlurb{
  font:400 12.5px/1.5 var(--ui) !important; color:#A9AEB6 !important;
}
/* 🔴 THE BLUE PILL IS A background-IMAGE, NOT A background-COLOR.
   `.auModeB.on`, `.auPrimary` and `.invVerify` all carry the same blue-to-cyan
   gradient, so setting background-color leaves the gradient painting over the
   top of it and nothing appears to change. Both have to be named.
   A segmented control is a CHOICE, not an action, so it gets the same raised
   glass pill Settings uses; colour is kept for the button that does something,
   and that button gets a flat accent instead of a gradient with dark ink on
   it, which was close to unreadable. */
body.avos.signin .auMode{
  background:rgba(255,255,255,.10) !important; border-radius:9px !important;
  padding:2px !important; gap:2px !important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10) !important;
}
body.avos.signin .auModeB{
  font:450 12px/1 var(--ui) !important; letter-spacing:0 !important;
  border-radius:7px !important; padding:8px 14px !important;
  background-image:none !important; background-color:transparent !important;
  border:0 !important; color:#A3A8B0 !important;
  transition:background-color 110ms ease, color 110ms ease !important;
}
body.avos.signin .auModeB:hover{ color:#D6D9DE !important; }
body.avos.signin .auModeB.on{
  background-image:none !important;
  background-color:rgba(255,255,255,.18) !important; color:#F2F3F5 !important;
}
body.avos.signin .auCard input{
  border-radius:8px !important; font-family:var(--ui) !important;
  background:rgba(255,255,255,.06) !important;
  border:.5px solid rgba(255,255,255,.14) !important; color:#F2F3F5 !important;
}
body.avos.signin .auPrimary, body.avos.signin .invVerify,
body.avos.signin #auGoBtn{
  border-radius:8px !important; font:600 13px/1 var(--ui) !important;
  letter-spacing:0 !important; background-image:none !important;
  background-color:#3B6FE0 !important; color:#fff !important;
  border:0 !important; box-shadow:0 1px 3px rgba(0,0,0,.35) !important;
}
body.avos.signin .auPrimary:hover, body.avos.signin .invVerify:hover,
body.avos.signin #auGoBtn:hover{ background-color:#4B7BE8 !important; }
body.avos.signin .auCard .auLink, body.avos.signin .auCard .auLegal,
body.avos.signin .auCard .meta-line{
  font-family:var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; background:none !important;
  border:0 !important; padding:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE. 1440x900 and 1920x1080 are the targets. Below that the OS
   metaphor is kept and the windows simply grow relative to the screen.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  body.avos .afMain{ grid-template-columns:148px minmax(0,1fr); }
  body.avos .afMain.insp{ grid-template-columns:148px minmax(0,1fr) 274px; }
}
@media (max-width:900px){
  /* one window at a time, still a window, still sitting on the wallpaper */
  body.avos .win{
    left:12px !important; top:calc(var(--bar-h) + 10px) !important;
    width:calc(100vw - 24px) !important;
    height:calc(100dvh - var(--bar-h) - 76px) !important;
  }
  body.avos .win:not(.on){ display:none; }
  body.avos .grip{ display:none; }
  body.avos .winBar{ cursor:default; }
  body.avos #icons{ bottom:64px; right:10px; }
  body.avos .dicon{ width:68px; height:72px; }
  body.avos .dicon .dtile{ width:40px; height:40px; }
  body.avos .afMain, body.avos .afMain.insp{ grid-template-columns:minmax(0,1fr); }
  body.avos .afSide{ display:none; }
  body.avos .afMain.side .afSide{
    display:block; position:absolute; left:0; top:0; bottom:0; width:196px; z-index:5;
    background:var(--veil-window); box-shadow:var(--cast-pop);
  }
  body.avos .insp{ position:absolute; inset:0; z-index:6; border-left:0; background:var(--veil-window); }
  body.avos .barStat{ display:none; }
}
@media (max-width:700px){
  /* 🔴 THIS SAID `#icons{ display:none }` AND PUT NOTHING IN ITS PLACE.
     On a phone the desktop came up completely empty: eighteen applications in
     the DOM, none of them on screen, and no way to open one. The launcher is
     behind a keyboard shortcut and a menu, which is not an answer on a device
     with no keyboard.
     A phone-shaped OS has a HOME SCREEN, so that is what the icon grid
     becomes: full width under the system bar, four across, scrolling, with the
     orb still on top of it. The metaphor survives the screen size, which is
     the whole point of the responsive section above. */
  body.avos #icons{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr);
    gap:6px 2px;
    align-content:start;
    position:fixed; left:0; right:0;
    top:calc(var(--bar-h) + 14px); bottom:70px;
    padding:0 10px 10px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    pointer-events:auto;
  }
  body.avos .dicon{ width:auto; height:auto; padding:8px 2px; }
  body.avos .dicon .dtile{ width:48px; height:48px; border-radius:13px; }
  /* ⚠ the label has one line and an ellipsis rather than wrapping: two
     lines on some tiles and one on others makes a ragged grid */
  body.avos .dicon > span:last-child{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* the wallpaper is the ground the icons sit on, so it must not scroll away */
  body.avos #icons::-webkit-scrollbar{ width:0; height:0; }

  body.avos .tbl thead{ display:none; }
  body.avos .tbl, body.avos .tbl tbody{ display:block; width:100%; }
  body.avos .tbl tbody tr{
    display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:2px 9px;
    padding:9px 12px; border-bottom:1px solid var(--ink-line-2); align-items:start;
  }
  body.avos .tbl tbody tr.span{ display:block; padding:0; }
  body.avos .tbl tbody td{ display:block; height:auto; padding:0; border:0; background:none !important; }
  body.avos td.cRank{ grid-column:1; grid-row:1; line-height:18px; }
  body.avos td.cName{ grid-column:2; grid-row:1; }
  body.avos td.cScore{ grid-column:3; grid-row:1; }
  body.avos td.cStat{ display:block !important; grid-column:2 / span 2; grid-row:2; margin-top:4px; }
  body.avos td.cRaise, body.avos td.cBack{ display:none !important; }
}

@media (max-width:380px){
  body.avos #icons{ grid-template-columns:repeat(3, 1fr); }
}

/* touch: the app's own gate sets html.avtouch and it already has a measured
   44px standard. The OS grows its controls to meet it rather than shrinking
   the target to the control. */
html.avtouch body.avos .b{ min-height:34px; }
html.avtouch body.avos .fld, html.avtouch body.avos select.sel{ min-height:36px; height:auto; }
html.avtouch body.avos .facet{ height:36px; }
html.avtouch body.avos .winDot{ width:11px; height:11px; }
html.avtouch body.avos .winDot::before{ inset:-14px; }
html.avtouch body.avos .dicon .dtile{ transform:none !important; }

@media (prefers-reduced-motion:reduce){
  body.avos *, body.avos *::before, body.avos *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. THE RELOCATED CONTROLS.
   #notifBell and #hubProf are MOVED into the system bar rather than rebuilt,
   because every handler bound to them already works and both of their panels
   position themselves from their button's own bounding rect. What they lose
   in the move is the `.wh .ico` / `.wh .prof` styling, which was scoped to
   the hub shell, so it is replaced here rather than inherited.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #bar #notifBell{
  position:relative; width:22px; height:20px; padding:0; border:0; cursor:pointer;
  display:grid; place-items:center; border-radius:5px;
  background:none !important; box-shadow:none !important;
  /* the bell is a glyph, not text, so it takes the halo as a drop-shadow */
  color:var(--on-wall) !important; filter:var(--wall-glow);
  transition:background 110ms ease;
}
body.avos #bar #notifBell:hover{ background:var(--wall-chip); }
body.avos #bar #notifBell.has{ color:#FFD98A !important; }
body.avos #bar #notifBell svg{ width:14px; height:14px; }
body.avos #bar .nbadge{
  top:-1px; right:-3px; min-width:13px; height:13px; line-height:13px; padding:0 3px;
  border-radius:7px; background:#E5544B !important; color:#fff !important;
  font-family:var(--ui) !important; font-size:9px !important; font-weight:600 !important;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.25) !important;
}
body.avos #bar #hubProf{
  display:flex; align-items:center; gap:6px; height:20px; padding:0 7px 0 4px;
  border:0; border-radius:5px; cursor:pointer; width:auto !important;
  background:none !important; box-shadow:none !important;
  transition:background 110ms ease;
}
body.avos #bar #hubProf:hover{ background:var(--wall-chip); }
body.avos #bar #hubProf .av{
  width:16px; height:16px; border-radius:4px; display:grid; place-items:center;
  background:var(--wall-chip) !important; color:var(--on-wall) !important;
  box-shadow:none !important; overflow:hidden;
  font:600 8px/1 var(--ui) !important; letter-spacing:.02em; text-transform:uppercase;
}
body.avos #bar #hubProf .av img{ width:100%; height:100%; object-fit:cover; }

/* 🔴 THE PROFILE PICTURE, AND IT HAS TO BE DECLARED HERE.
   index.html publishes it as `--me-pic` on <html> and lights `html.mepic`, and
   one rule there covers every circle in the old shell. It cannot cover these
   three, because avos.css restyles them with `background:` shorthands carrying
   `!important` at a higher specificity -- `body.avos #bar #hubProf .av` is
   (2,2,2) and wipes background-image to none. Two `!important` declarations are
   settled by specificity, so these selectors carry the extra class.
   ⚠ The bar chip is 16px. A face is a colour at that size, which is still
   more recognisable than two letters, and it is what an OS does. */
html.mepic body.avos #bar #hubProf .av,
html.mepic body.avos .sAv,
html.mepic body.avos .wAv{
  background-image:var(--me-pic) !important;
  background-size:cover !important;
  background-position:center !important;
  font-size:0 !important;
}
body.avos #bar #hubProf .pn{
  font:400 12px/1 var(--ui) !important; color:var(--on-wall) !important;
  text-shadow:var(--wall-shadow); max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos #bar #hubProf .ph{ display:none !important; }
body.avos #bar #hubProf .pchev{ display:none; }

/* both panels re-parent to <body>, so they are styled off the body */
body.avos .npanel, body.avos .pmenu{
  border-radius:10px !important; padding:5px !important; z-index:220 !important;
  background-color:var(--veil-menu) !important;
  -webkit-backdrop-filter:var(--fx-heavy) !important; backdrop-filter:var(--fx-heavy) !important;
  border:0 !important;
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-pop) !important;
  font-family:var(--ui) !important; color:var(--ink-2) !important;
}
body.avos .npanel .nitem, body.avos .pmenu .pmi{
  border-radius:5px !important; color:var(--ink-2) !important; min-height:0 !important;
}
/* 🔴 NO BLUE IN THE ALERTS PANEL. Zumo: "the alert section doesn't have that
   Apple glassmorphism look, it still shows blue, the blue highlight. We don't
   want the blue highlight." So hover is a neutral tint of the material, and
   unread is marked by a dot rather than by flooding the row with accent. */
body.avos .npanel .nitem:hover{ background:var(--ink-hover) !important; }
body.avos .pmenu .pmi:hover{ background:var(--ink-hover) !important; color:var(--ink) !important; }
body.avos .pmenu .pmi:hover .pmg{ color:var(--ink) !important; }
body.avos .pmenu .pmi.danger:hover{ background:rgba(201,104,104,.14) !important; color:var(--neg) !important; }
body.avos .npanel .nitem{ position:relative; }
body.avos .npanel .nitem.unread{ background:none !important; }
body.avos .npanel .nitem.unread::before{
  content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--acc);
}
body.avos .npanel .nitem.unread .nt{ font-weight:600 !important; color:var(--ink) !important; }
body.avos .npanel .nhead b, body.avos .pmenu .pmwho b{
  font:600 12.5px/1 var(--ui) !important; color:var(--ink) !important;
}
body.avos .npanel .nt{ color:var(--ink) !important; }
body.avos .npanel .nmark{ color:var(--acc) !important; font-family:var(--ui) !important;
  text-transform:none !important; letter-spacing:0 !important; }
body.avos .npanel .nm, body.avos .npanel .nd, body.avos .pmenu .pmwho span{
  font-family:var(--ui) !important; color:var(--ink-3) !important;
}
body.avos .npanel .npush{
  border-radius:8px !important; background:var(--veil-sunk) !important;
  border:.5px solid var(--ink-line) !important;
}
body.avos .npanel .npush-b{
  border-radius:var(--r-ctl) !important; background:var(--veil-sunk) !important;
  color:var(--ink-2) !important; border:.5px solid var(--ink-line) !important;
  font-family:var(--ui) !important;
}
body.avos .npanel .npush-b:hover{ background:var(--ink-hover) !important; color:var(--ink) !important; }
/* the panel itself gets the popover material rather than a tinted plate */
body.avos .npanel{
  background-color:var(--veil-pop) !important;
  border-radius:12px !important; padding:6px !important;
}
body.avos .npanel .nhead{ padding:8px 10px 6px !important; }
body.avos .npanel .nitem{ padding:9px 11px 9px 14px !important; gap:9px !important; }
body.avos .pmenu .pmsep{ background:var(--ink-line) !important; }

/* the legacy empty states drew a large tinted slab with an oversized glyph */
body.avos .winBody.old .sec-empty{
  padding:26px 18px !important; border:.5px dashed var(--ink-line) !important;
  border-radius:8px !important; background:none !important; box-shadow:none !important;
  text-align:center; color:var(--ink-3) !important;
}
body.avos .winBody.old .sec-empty .ic{
  font-size:20px !important; opacity:.35; margin-bottom:6px; display:block;
  width:auto !important; height:auto !important; background:none !important;
  border:0 !important; box-shadow:none !important; color:var(--ink-3) !important;
}
body.avos .winBody.old .sec-empty b{
  display:block; font:600 13.5px/1.3 var(--ui) !important; color:var(--ink-2) !important;
  margin-bottom:4px;
}
body.avos .winBody.old .sec-empty p{
  margin:0 auto; max-width:46ch; font:400 12px/1.55 var(--ui) !important;
  color:var(--ink-3) !important;
}
body.avos .winBody.old .azm-label, body.avos .winBody.old .slabel,
body.avos .winBody.old .tag, body.avos .winBody.old .stg{
  font-family:var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-3) !important;
}

/* --- the seam, continued: the last of the shouted micro-labels.
   index.html sets text-transform:uppercase in 75 places. Most are on classes
   this block already covers; these are the ones a VC card, an activity card
   and a section counter still carried, and they are the loudest thing left in
   an interface that is supposed to be quiet. Named one at a time rather than
   with a blanket rule, so nothing that is uppercase ON PURPOSE (a ticker, a
   chain name) gets flattened with them. */
body.avos .winBody.old .vc-stat > i,
body.avos .winBody.old .vc-stat b + span,
body.avos .winBody.old .vc-sub,
body.avos .winBody.old .vc-foot,
body.avos .winBody.old .vc-id,
body.avos .winBody.old .sec-n i,
body.avos .winBody.old .act-foot,
body.avos .winBody.old .act-dl,
body.avos .winBody.old .cc-right,
body.avos .winBody.old .fp-chip,
body.avos .winBody.old .valn,
body.avos .winBody.old .invs,
body.avos .winBody.old .raise,
body.avos .winBody.old .ends,
body.avos .winBody.old .lgd,
body.avos .winBody.old .kv .ku,
body.avos .winBody.old .az-est,
body.avos .winBody.old .az-cov-top{
  font-family:var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important;
}
body.avos .winBody.old .vc-stat span:first-child,
body.avos .winBody.old .vc-load,
body.avos .winBody.old .act-load{
  font-family:var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-3) !important;
}
body.avos .winBody.old .sec-n b{ font-family:var(--ui) !important; color:var(--acc) !important; }
body.avos .winBody.old .vc-name, body.avos .winBody.old .act-top b{
  font:600 13px/1.25 var(--ui) !important; color:var(--ink) !important;
}
/* the wide progress bars the watchlist and the analyse panel draw */
body.avos .winBody.old .az-fill, body.avos .winBody.old .fp-fill,
body.avos .winBody.old .bud-fill{ background:var(--acc) !important; }
body.avos .winBody.old .az-track, body.avos .winBody.old .fp-track,
body.avos .winBody.old .bud-track{
  background:var(--ink-line) !important; border-radius:2px !important;
  box-shadow:none !important; height:4px !important; overflow:hidden;
}

/* the farm-queue group heading, the last shouted label in the watchlist */
body.avos .winBody.old .budgrp h4{
  font:500 11px/1 var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-3) !important;
  margin:12px 0 7px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17. IN THE WORLD.
   The 3D city is the one surface the OS does not frame: it owns the screen.
   The icons, the orb and the wallpaper come down, because the city has its
   own teleport bar and hint line along the bottom and the dock sat on top of
   them. The system bar stays, over the scene, because it says where you are
   and it carries the way back out.

   ⚠ #cityRoot is z-index 400 and covers everything below it, so the bar has
   to be lifted above that or it goes with the rest. Without this the world
   opened onto a full-screen 3D scene with no visible exit, which reads as a
   crash rather than as a place.
   ────────────────────────────────────────────────────────────────────────── */
body.avos.avworld #icons,
body.avos.avworld #orbBar,
body.avos.avworld #wall,
body.avos.avworld #wallNext,
body.avos.avworld #wins{ display:none !important; }
body.avos.avworld #bar{
  z-index:500; background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0));
}
body.avos .leaveBtn{
  display:none; align-items:center; gap:5px; height:20px; padding:0 9px;
  margin-left:6px; border:0; border-radius:5px; cursor:pointer;
  background:var(--wall-chip); color:var(--on-wall);
  font:500 12px/1 var(--ui); text-shadow:var(--wall-shadow);
}
body.avos.avworld .leaveBtn{ display:inline-flex; }
body.avos .leaveBtn:hover{ background:rgba(255,255,255,.40); }
body.avos.avworld .barBtn:not(.leaveBtn):not(.app){ display:none; }

/* --- the section stat chips.
   index.html turns `.meta-line` into an uppercase mono pill, and it writes the
   News, VC and Community ones as `body.appshell #newsMeta`, which is 1-1-0.
   No stack of classes reaches an id, so the seam's `.winBody.old .meta-line`
   at 0-3-1 lost and the chip stayed shouting. An id in the selector is the
   only thing that answers an id. */
body.avos #newsMeta, body.avos #vcMeta, body.avos #commMeta,
body.avos #smMeta, body.avos #raiseMeta, body.avos #earlyMeta,
body.avos #actMeta, body.avos #metaLine,
body.avos .route > .meta-line.meta-line{
  display:inline-flex; align-items:center; gap:6px;
  font:400 11px/1.4 var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-3) !important;
  background:var(--veil-sunk) !important;
  border:.5px solid var(--ink-line) !important; border-radius:6px !important;
  padding:4px 9px !important; margin:0 0 10px !important;
}
/* Alpha Finder's own footer line is not a chip; it is a status bar */
body.avos .afFoot #metaLine, body.avos .afFoot #opCount{
  background:none !important; border:0 !important; padding:0 !important;
  margin:0 !important; display:inline !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   18. ALPHA FINDER, the original page in a window.
   Zumo asked for the UI this app always had, so the structure is the app's
   own: the heading, the operator console, the filter rows, the project cards
   with their score rings. What it gets here is the material and the type, so
   it belongs to the desktop it is sitting on.
   ────────────────────────────────────────────────────────────────────────── */
body.avos .winBody.old .op-head{
  display:flex; align-items:flex-start; gap:16px;
  margin:0 0 13px; padding:0 0 11px; border-bottom:1px solid var(--ink-line-2);
}
body.avos .winBody.old .op-n{
  margin-left:auto; text-align:right; flex:none;
  background:none !important; border:0 !important; box-shadow:none !important;
}
body.avos .winBody.old .op-n b{
  display:block; font:600 22px/1 var(--ui) !important; color:var(--ink) !important;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
body.avos .winBody.old .op-n i{
  display:block; margin-top:3px; font:400 10.5px/1 var(--ui) !important;
  font-style:normal; letter-spacing:0 !important; text-transform:none !important;
  color:var(--ink-3) !important;
}

/* the project cards */
body.avos .winBody.old .rows{ gap:6px !important; }
body.avos .winBody.old .row{ padding:12px 14px !important; align-items:center; }
body.avos .winBody.old .row .rank{
  font-family:var(--ui) !important; color:var(--ink-3) !important; font-size:12px !important;
}
body.avos .winBody.old .pname .sym{
  font:400 11px/1 var(--ui) !important; color:var(--acc) !important; letter-spacing:0 !important;
}
body.avos .winBody.old .pmeta{ gap:5px !important; margin-top:6px !important; }
body.avos .winBody.old .invs, body.avos .winBody.old .pnext{
  font:400 11px/1.4 var(--ui) !important; color:var(--ink-3) !important; margin-top:6px !important;
}
body.avos .winBody.old .invs b{ color:var(--ink-2) !important; font-weight:500 !important; }
body.avos .winBody.old .pnext u{
  text-decoration:none; color:var(--acc) !important; margin-right:6px;
  font-weight:500; text-transform:none !important; letter-spacing:0 !important;
}
body.avos .winBody.old .score-cell{
  padding:7px 11px !important; gap:10px !important;
  background:var(--veil-sunk) !important;
}
body.avos .winBody.old .sval{
  font:600 19px/1 var(--ui) !important; color:var(--ink) !important;
  font-variant-numeric:tabular-nums;
}
body.avos .winBody.old .score-lab .slabel{
  font:400 9.5px/1.3 var(--ui) !important; color:var(--ink-3) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
body.avos .winBody.old .sdelta{
  font:400 10px/1 var(--ui) !important; letter-spacing:0 !important;
}
body.avos .winBody.old .tge, body.avos .winBody.old .badge,
body.avos .winBody.old .fp-chip{
  font:450 10px/1 var(--ui) !important; letter-spacing:0 !important;
  text-transform:none !important; border-radius:4px !important;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  padding:2px 6px !important; box-shadow:none !important;
}
body.avos .winBody.old .badge.good{ color:var(--pos) !important; }
body.avos .winBody.old .badge.paid, body.avos .winBody.old .badge.closing{ color:var(--warn) !important; }
body.avos .winBody.old .badge.flag, body.avos .winBody.old .badge.closed,
body.avos .winBody.old .badge.tge{ color:var(--neg) !important; }
body.avos .winBody.old .badge.free{ color:var(--pos) !important; }

/* the operator console: the app's own controls, laid out so they stop
   colliding when the window is narrow */
body.avos .winBody.old .azpanel{
  border:.5px solid var(--ink-line) !important; border-radius:8px !important;
  background:var(--veil-sunk) !important; padding:10px !important;
  margin:0 0 11px !important; box-shadow:none !important;
}
body.avos .winBody.old .az-model{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  gap:7px !important; padding:8px 9px !important; margin:0 0 7px !important;
  border:.5px solid var(--ink-line) !important; border-radius:6px !important;
  background:var(--veil-window) !important;
}
body.avos .winBody.old .az-model:last-child{ margin-bottom:0 !important; }
body.avos .winBody.old .azm-label{
  flex:0 0 auto; min-width:96px; font:500 11px/1.3 var(--ui) !important;
  color:var(--ink-2) !important; letter-spacing:0 !important; text-transform:none !important;
}
body.avos .winBody.old .azm-input, body.avos .winBody.old .azm-sel{
  height:24px !important; border-radius:var(--r-ctl) !important;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  color:var(--ink) !important; font:400 11.5px/22px var(--ui) !important;
  box-shadow:none !important; letter-spacing:0 !important;
}
body.avos .winBody.old .azm-cur, body.avos .winBody.old .az-est,
body.avos .winBody.old .az-err, body.avos .winBody.old .az-cov-top{
  font:400 10.5px/1.45 var(--ui) !important; color:var(--ink-3) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
body.avos .winBody.old .facets{ gap:5px !important; }
body.avos .winBody.old .search{ margin-left:0 !important; max-width:none !important; }
body.avos .winBody.old .controls{ align-items:center; }

/* ══════════════════════════════════════════════════════════════════════════
   19. TRANSPARENCY, as ONE CONTINUOUS AXIS.
   It used to be three buttons -- Clear, Regular, Solid -- each a hand-written
   block of veil values. Zumo asked for a slider instead, crystal at one end
   and frosted at the other, "so people can choose whatever fits their needs".
   There are no per-step blocks any more: every alpha in section 1 is the
   shipped value times --gk, and --gk is a function of --gl. Nothing here has
   to be re-tuned when a surface is added, because a new surface reads the
   same tokens as every other one.

   🔴 THE ONE SPECIAL CASE, AND IT IS AT THE CRYSTAL END, NOT THE FROSTED ONE.
   The old Solid mode turned backdrop-filter off because an opaque surface has
   nothing to blur. On this axis the frosted end is the one that is nearly
   opaque AND the one that is meant to be blurry, so the filter has to stay.
   It is the CRYSTAL end that can drop it: at gl = 0 the radius is 0 and the
   saturation is 100%, so the filter is the identity -- and an identity filter
   still costs a compositing layer and a backdrop read on every frame. avos.js
   sets data-glass="crystal" at exactly 0, and this takes the cost away.
   ────────────────────────────────────────────────────────────────────────── */
body.avos[data-glass="crystal"] .mat-window,
body.avos[data-glass="crystal"] .mat-toolbar,
body.avos[data-glass="crystal"] .mat-dock,
body.avos[data-glass="crystal"] .mat-menu,
body.avos[data-glass="crystal"] .mat-popover,
body.avos[data-glass="crystal"] .win:not(.on),
body.avos[data-glass="crystal"] #boot,
body.avos[data-glass="crystal"] .dtile{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ── WHEN THE GLASS IS REAL, THE DRAWN GLASS STANDS DOWN ───────────────────
   🔴 TWO HIGHLIGHTS IS ONE TOO MANY. Every material here carries
   --edge-top, a painted white hairline along its upper edge, because that is
   how you fake a lit rim when you have no surface normals. liquidglass.js now
   draws the real thing -- a reflection lobe positioned by the geometry, plus
   a Fresnel hairline -- and leaving the painted one on top of it gives the
   bright white outline the brief rules out by name. `html.avlg` is set by the
   engine only when the browser actually accepts an SVG filter as a
   backdrop-filter, so the fallback keeps its painted edge exactly as it was
   and is still the measured material.
   ⚠ The hairline is dimmed, not deleted: it is what separates two overlapping
   windows from each other where neither has light behind it. */
html.avlg body.avos{
  /* 🔴 THE PAINTED EDGES GO, THEY ARE NOT DIMMED. Measured off the recording
     he sent: the header read as a bright uniform outline all the way round,
     which is a drawn border and is the first thing the brief rules out. A
     real rim light is bright on the edge the light falls on and almost gone
     on the opposite one; a 1px inset white line is bright on all four,
     which is exactly how you tell a sticker from a surface.
     The hairline that separates two overlapping windows survives as the
     faintest possible dark edge, because that job is real and the specular
     cannot do it where there is no light. */
  --edge-top:  inset 0 0 0 0 rgba(255,255,255,0);
  --edge-line: 0 0 0 .5px rgba(0,0,0,.16);
  --edge-in:   inset 0 0 0 0 rgba(255,255,255,0);
}
html.avlg body.avos[data-os="dark"]{
  --edge-top:  inset 0 0 0 0 rgba(255,255,255,0);
  --edge-line: 0 0 0 .5px rgba(0,0,0,.5);
  --edge-in:   inset 0 0 0 0 rgba(255,255,255,0);
}
/* ⚠ AND THE INTERNAL LIGHT GRADIENT GOES TOO. It is a white wash over the top
   42% of every panel -- a painted approximation of a lit surface, invented
   before there was a real one, and it is a large part of what read as milky
   in the middle of the panel where nothing should be visible at all. */
html.avlg body.avos .mat-window::before,
html.avlg body.avos .mat-menu::before,
html.avlg body.avos .mat-popover::before{ content:none; }

/* ── THE BEADS: A SLIDER THUMB AND A SWITCH KNOB ───────────────────────────
   🔴 THESE ARE PSEUDO-ELEMENTS, so the engine cannot attach to them: there
   is no node, no ResizeObserver and nowhere to hang a specular layer. They
   are also always the same fourteen or eighteen pixels, so ONE filter serves
   every one of them; avos.js asks liquidglass.js for it once and publishes it
   as a custom property here. The rim light is CSS on the pseudo-element, made
   from the same two ideas the engine uses -- a bright inset arc where the
   light falls and a dimmer one opposite -- because a gradient at this size is
   indistinguishable from a rendered one and costs nothing.
   ⚠ The `bead` preset is the only one with no blur at all. Fourteen pixels
   of blurred backdrop is a grey dot, and a grey dot is what the control used
   to be. */
html.avlg body.avos .sRange::-webkit-slider-thumb{
  background:linear-gradient(200deg, rgba(255,255,255,.62), rgba(255,255,255,.16) 46%,
                                     rgba(255,255,255,.34));
  border:.5px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:var(--lg-bead, none); backdrop-filter:var(--lg-bead, none);
  box-shadow:0 1px 3px rgba(0,0,0,.34), inset 0 .5px 0 rgba(255,255,255,.85),
             inset 0 -.5px 0 rgba(255,255,255,.22);
}
html.avlg body.avos[data-os="dark"] .sRange::-webkit-slider-thumb{
  background:linear-gradient(200deg, rgba(255,255,255,.44), rgba(255,255,255,.08) 46%,
                                     rgba(255,255,255,.20));
  border:.5px solid rgba(255,255,255,.22);
}
html.avlg body.avos .sSw i{
  background:linear-gradient(200deg, rgba(255,255,255,.72), rgba(255,255,255,.24) 48%,
                                     rgba(255,255,255,.42));
  -webkit-backdrop-filter:var(--lg-knob, none); backdrop-filter:var(--lg-knob, none);
  box-shadow:0 1px 3px rgba(0,0,0,.30), inset 0 .5px 0 rgba(255,255,255,.9),
             inset 0 -.5px 0 rgba(255,255,255,.25);
}
/* ⚠ THE TRACK STAYS SIMPLE. The brief asks for the thumb to be glass and
   the active part of the track to stay readable; a refracting track would put
   the one thing the control is telling you behind a lens. */

/* ── THE TINT MOVES ONTO ITS OWN LAYER SO IT CAN BE TAPERED ────────────────
   🔴 A FLAT TINT DILUTES REFRACTION FLATLY. At a veil of .64 only about a
   third of what you see through a window is the backdrop, so bending that
   backdrop changes almost nothing -- which is exactly how the first pass came
   out: measurably refracting, visibly frosted. liquidglass.js masks the tint
   with the glass THICKNESS, full across the flat middle and almost nothing at
   the rim, so the environment comes through the bezel where the displacement
   is strongest and the text keeps the tint it was measured against.

   The engine cannot read these colours for itself: they change with the theme
   and with every step of the transparency slider, and a colour read once at
   attach time would freeze. So the stylesheet hands the token over in
   --lg-tint and stops painting the background itself. Anything the engine did
   not attach to is untouched, and so is every browser that cannot refract. */
html.avlg body.avos .mat-window{ --lg-tint:var(--veil-window); background-color:transparent; }
html.avlg body.avos .win:not(.on){ --lg-tint:var(--veil-off); background-color:transparent; }
html.avlg body.avos .mat-menu{ --lg-tint:var(--veil-menu); background-color:transparent; }
html.avlg body.avos .mat-popover{ --lg-tint:var(--veil-pop); background-color:transparent; }
html.avlg body.avos .mat-dock{ --lg-tint:var(--veil-dock); background-color:transparent; }
/* 🔴 THE ICON TILE PAINTED A FLAT WASH ON TOP OF ITS OWN GLASS, WHICH IS WHY
   THE ICONS NEVER CHANGED. Zumo said twice they looked identical -- after the
   blur came off, after the material was retuned, after everything. They were:
   `background-color: var(--veil-icon)` is rgba(255,255,255,.19) and it sat
   OVER the backdrop-filter on a 44px square. Read off a live tile: material
   attached, filter attached, fill covering all of it. A flat wash over a
   small surface erases every optical cue underneath, which is the same
   failure as the `!important` one -- attached, and then painted over.
   ⚠ THE OLD REASONING HERE WAS BACKWARDS. It said thinning the tint at the
   RIM would cost the glyph its contrast. The taper does the opposite: full in
   the middle, where the glyph is, and clear at the rim, where the material
   needs to read. So the tile hands its veil to the engine like every other
   surface, the glyph keeps its density, and the edge becomes glass. */
/* ⚠ `.lg-on`, NOT `.mat-icon`. Handing the veil to the engine has to happen
   only where the engine actually attached: with the icon style set to `plain`
   nothing attaches, and an unscoped rule stripped the tile's background anyway
   and left a bare glyph on the wallpaper. */
html.avlg body.avos .mat-icon.lg-on{ --lg-tint:var(--veil-icon); background-color:transparent; }

/* ── the six icon styles ─────────────────────────────────────────────────
   🔴 OPACITY IS HALF THE DIFFERENCE. The engine takes its tint from
   `--lg-tint`, which comes from `--veil-icon`; leaving that identical for
   every style is most of why frosted, glossy and liquid looked like one
   thing. Each style gets its own, and they are far apart on purpose --
   across 44 pixels a small step is no step at all. */

/* CLEAR: no tile. The glyph and the label, straight on the wallpaper. This is
   what Zumo saw by accident and asked to keep. Nothing to blur, nothing to
   refract, and the cheapest thing on the desktop. */
body.avos[data-icons="clear"] .mat-icon{
  background-color:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
body.avos[data-icons="clear"] .dicon .dtile{
  color:var(--on-wall); text-shadow:var(--wall-shadow);
}
body.avos[data-icons="clear"] .dicon .dtile .ci{ width:26px; height:26px; }

/* FROSTED: milky. You should not be able to read what is behind it. */
body.avos[data-icons="frosted"]{ --veil-icon:rgba(150,160,180,.34); }
body.avos[data-os="light"][data-icons="frosted"]{ --veil-icon:rgba(70,78,92,.40); }

/* CRYSTAL: nearly nothing. The wallpaper comes through almost untouched. */
body.avos[data-icons="crystal"]{ --veil-icon:rgba(255,255,255,.05); }
body.avos[data-os="light"][data-icons="crystal"]{ --veil-icon:rgba(40,46,58,.12); }

/* GLOSSY: enamel. Denser than the rest and lit hard from one corner, so the
   highlight has something solid to sit on. */
body.avos[data-icons="glossy"]{ --veil-icon:rgba(255,255,255,.26); }
body.avos[data-os="light"][data-icons="glossy"]{ --veil-icon:rgba(46,52,62,.58); }

/* LIQUID: thin, because the point of this one is the BENDING and a veil is
   the thing that hides it. */
body.avos[data-icons="liquid"]{ --veil-icon:rgba(255,255,255,.08); }
body.avos[data-os="light"][data-icons="liquid"]{ --veil-icon:rgba(40,46,58,.16); }

/* ⚠ THE APPLICATIONS' OWN CHROME DOES NOT GET THE MATERIAL, and the reason is
   measured rather than aesthetic. It was given the material on 2 Sep because
   Zumo asked for the effect inside the apps; scrolling Alpha Finder then ran
   at 1 fps, because a backdrop-filter inside a scroll container re-reads its
   backdrop on every scrolled frame and that body is 9,694px of list.
   ⚠ A STATIC FRAME COUNTER SAID IT WAS FREE (26fps either way). It is not a
   performance test of a cost that only movement triggers. The rule is about
   POSITION: material on surfaces that sit still, never on anything inside a
   scroller. */

/* ── the admin mint log ──────────────────────────────────────────────────
   ⚠ Plain rows on the window's own surface. This is an instrument, not a
   showcase: no glass inside a scroller (2 Sep), and the state of a mint has to
   be readable at a glance from across a desk. */
body.avos .mintLog .mlBar{ display:flex; align-items:center; gap:10px;
  margin:0 0 12px; flex-wrap:wrap; }
body.avos .mintLog .mlRefresh{ margin-left:auto; height:26px; padding:0 11px;
  border-radius:var(--r-ctl); border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink-2);
  font:450 11.5px/24px var(--ui); cursor:pointer; }
body.avos .mintLog .mlEmpty{ padding:26px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }
body.avos .mintLog .mlWho{ display:flex; align-items:baseline; gap:8px;
  margin:16px 0 7px; padding-bottom:6px;
  border-bottom:.5px solid var(--ink-line); }
body.avos .mintLog .mlWho b{ font:600 13px/1.2 var(--ui); color:var(--ink); }
body.avos .mintLog .mlWho i{ font:400 11px/1.2 var(--ui); color:var(--ink-3);
  font-style:normal; }
body.avos .mintLog .mlTally{ margin-left:auto; display:flex; gap:9px; }
body.avos .mintLog .mlTally em{ font:500 11px/1.2 var(--ui); font-style:normal;
  color:var(--ink-3); }
body.avos .mintLog .mlTally em.ok{ color:#3FB27F; }
body.avos .mintLog .mlTally em.bad{ color:#E0605E; }
body.avos .mintLog .mlRow{ padding:8px 10px; margin:0 0 6px; border-radius:9px;
  background:var(--veil-sunk); border-left:2.5px solid var(--ink-line); }
body.avos .mintLog .mlRow.ok{ border-left-color:#3FB27F; }
body.avos .mintLog .mlRow.bad{ border-left-color:#E0605E; }
body.avos .mintLog .mlRow.warn{ border-left-color:#D8A23C; }
body.avos .mintLog .mlTop{ display:flex; gap:8px; align-items:baseline; }
body.avos .mintLog .mlTop b{ font:600 12px/1.3 var(--ui); color:var(--ink); }
body.avos .mintLog .mlWhen{ margin-left:auto; color:var(--ink-3);
  font:400 10.5px/1.3 var(--ui); }
body.avos .mintLog .mlRead{ margin:3px 0 5px; color:var(--ink-2);
  font:450 12px/1.45 var(--ui); }
body.avos .mintLog .mlMeta{ display:flex; flex-wrap:wrap; gap:4px 10px; }
body.avos .mintLog .mlMeta span, body.avos .mintLog .mlMeta a{
  font:400 10.5px/1.4 ui-monospace,monospace; color:var(--ink-3);
  text-decoration:none; }
body.avos .mintLog .mlMeta a{ color:var(--acc); }
body.avos .mintLog .mlClass{ color:var(--ink-2) !important; }

/* the unlocks app shares the mint log's row furniture */
body.avos .unlockApp .mlBar{ display:flex; align-items:center; gap:10px;
  margin:0 0 12px; flex-wrap:wrap; }
body.avos .unlockApp .mlRefresh{ margin-left:auto; height:26px; padding:0 11px;
  border-radius:var(--r-ctl); border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink-2);
  font:450 11.5px/24px var(--ui); cursor:pointer; }
body.avos .unlockApp .mlEmpty{ padding:26px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }
body.avos .unlockApp .unlNote{ color:var(--ink-3);
  font:400 11px/1.4 var(--ui); margin:0 0 8px; }
body.avos .unlockApp .mlRow{ padding:8px 10px; margin:0 0 6px; border-radius:9px;
  background:var(--veil-sunk); border-left:2.5px solid var(--ink-line); }
body.avos .unlockApp .mlRow.bad{ border-left-color:#E0605E; }
body.avos .unlockApp .mlRow.warn{ border-left-color:#D8A23C; }
body.avos .unlockApp .mlTop{ display:flex; gap:8px; align-items:baseline; }
body.avos .unlockApp .mlTop b{ font:600 12.5px/1.3 var(--ui); color:var(--ink); }
body.avos .unlockApp .mlTop span{ font:400 11px/1.3 var(--ui); color:var(--ink-3); }
body.avos .unlockApp .mlWhen{ margin-left:auto; }
body.avos .unlockApp .mlRead{ margin:3px 0 5px; color:var(--ink-2);
  font:450 12px/1.45 var(--ui); }
body.avos .unlockApp .mlMeta{ display:flex; flex-wrap:wrap; gap:4px 12px; }
body.avos .unlockApp .mlMeta span{ font:400 10.5px/1.4 ui-monospace,monospace;
  color:var(--ink-3); }
body.avos .unlockApp .mlMeta b{ color:var(--ink-2); font-weight:500; }

/* 🔴 THE PRICE TICK. A number that changes with no warning reads as a glitch;
   a number that flashes green or red reads as live. It is a fade OUT of a
   tint, so the resting state is the ordinary colour and nothing is left
   glowing on a page somebody has stopped watching. */
/* ── the market stream card, bottom left ─────────────────────────────────
   🔴 BUILT TO THE REFERENCE Zumo sent: an amber HUD frame with cut corners, a
   hatched flash in the header, a coin mark and ticker per row, the price in
   the middle and the 24h move in green or red with an arrow.

   ⚠ THE NOTCHED FRAME IS TWO CLIPPED LAYERS, NOT A BORDER. `clip-path` on a
   polygon gives the cut corners; a border cannot follow a notched outline and
   `border-image` cannot glow along one. So an amber plate is clipped to the
   silhouette and a dark plate is clipped to the same silhouette inset by a
   pixel, leaving a hard amber edge that traces every chamfer exactly.
   ⚠ THE FRAME IS ITS OWN ELEMENT so the glow can sit behind the content
   without a stacking context that would dim the text. */
body.avos .avTicker{
  /* ⚠ z-index 8: ABOVE the wallpaper, BELOW the windows (#wins is 10). At 40
     it sat on top of Alpha Finder and covered the first statistic of whatever
     was open, which is a widget getting in the way of the work. */
  position:fixed; left:16px; bottom:16px; z-index:8; width:236px;
  font:400 12px/1.3 var(--ui);
  -webkit-user-select:none; user-select:none;
  --tkAmber:#F2A03D;
  --tkGlow:rgba(242,160,61,.34);
  filter:drop-shadow(0 0 10px var(--tkGlow));
}
/* the two clipped plates */
body.avos .avTicker .tkFrame{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--tkAmber);
  clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px,
                    100% calc(100% - 16px), calc(100% - 16px) 100%,
                    16px 100%, 0 calc(100% - 16px), 0 16px);
}
body.avos .avTicker .tkFrame::after{
  content:""; position:absolute; inset:1.5px;
  background:#0A0E15;
  clip-path:polygon(15px 0, calc(100% - 15px) 0, 100% 15px,
                    100% calc(100% - 15px), calc(100% - 15px) 100%,
                    15px 100%, 0 calc(100% - 15px), 0 15px);
}
body.avos .avTicker .tkHead,
body.avos .avTicker .tkBody{ position:relative; z-index:1; }

body.avos .avTicker .tkHead{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:11px 14px 8px; border:0; background:none; cursor:pointer;
  color:var(--tkAmber); text-align:left;
  font:700 12px/1 var(--ui); letter-spacing:.10em;
}
body.avos .avTicker .tkHead b{ flex:1; font-weight:700; }
/* the hatched flash in the reference's top right corner */
body.avos .avTicker .tkFlash{
  width:26px; height:11px; flex:none;
  background:repeating-linear-gradient(115deg,
    var(--tkAmber) 0 2px, rgba(0,0,0,0) 2px 6px);
  opacity:.85;
}
body.avos .avTicker .tkChev{
  width:9px; height:9px; flex:none; border-right:1.5px solid var(--tkAmber);
  border-bottom:1.5px solid var(--tkAmber); transform:rotate(45deg)
  translate(-1px,-2px); transition:transform 180ms ease;
}
body.avos .avTicker.shut .tkChev{ transform:rotate(-135deg) translate(-2px,-1px); }

body.avos .avTicker .tkBody{
  padding:0 12px 10px; overflow:hidden;
  max-height:340px; transition:max-height 220ms ease, opacity 160ms ease;
}
body.avos .avTicker.shut .tkBody{ max-height:0; opacity:0; padding-bottom:0; }

body.avos .avTicker .tkRow{
  display:grid; grid-template-columns:18px 42px 1fr auto;
  align-items:center; gap:7px; padding:4px 0;
  border-top:1px solid rgba(242,160,61,.13);
}
body.avos .avTicker .tkRow:first-child{ border-top:0; }
body.avos .avTicker .tkCoin{
  width:18px; height:18px; display:flex; align-items:center;
  justify-content:center;
}
body.avos .avTicker .tkCoin img{ width:17px; height:17px; border-radius:50%; }
body.avos .avTicker .tkDotMark{
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid rgba(242,160,61,.5);
}
body.avos .avTicker .tkSym{
  font:700 12.5px/1.2 var(--ui); color:#F3F6FA; letter-spacing:.02em;
}
body.avos .avTicker .tkPx{
  font:500 12px/1.2 ui-monospace,monospace; color:#F3F6FA; text-align:right;
}
body.avos .avTicker .tkChg{
  font:500 11.5px/1.2 ui-monospace,monospace; text-align:right;
  min-width:72px; color:var(--ink-3);
}
body.avos .avTicker .tkChg.up{ color:#3FD98A; }
body.avos .avTicker .tkChg.down{ color:#F2564E; }
body.avos .avTicker .tkFoot{
  margin-top:7px; text-align:right;
  font:400 10px/1.2 var(--ui); color:#3FD98A; opacity:.85;
}
@media (max-width:760px){ body.avos .avTicker{ display:none; } }

/* ── market explorer ─────────────────────────────────────────────────────
   Built to the reference: a token list down the left, a candle chart with
   timeframe buttons in the middle, the token's own figures on the right.
   ⚠ THE GRID IS THE WHOLE LAYOUT. Three columns at fixed-ish widths with the
   chart taking the slack, so the figures never wrap into a second column and
   the list never squeezes the chart into a strip. */
body.avos .mkApp{
  padding:14px 16px 16px; height:100%; display:flex; flex-direction:column;
  color:var(--ink-2); font:400 12px/1.4 var(--ui);
}
body.avos .mkApp .mkTitle{
  font:700 12px/1 var(--ui); letter-spacing:.14em; color:var(--acc);
  margin:0 0 12px;
}
body.avos .mkApp .mkGrid{
  flex:1; min-height:0; display:grid; gap:12px;
  grid-template-columns:236px minmax(0,1fr) 232px;
}
@media (max-width:1000px){
  body.avos .mkApp .mkGrid{ grid-template-columns:200px minmax(0,1fr); }
  body.avos .mkApp .mkInfo{ display:none; }
}

/* the left column */
body.avos .mkApp .mkSide{ display:flex; flex-direction:column; min-height:0; }
body.avos .mkApp .mkField label{
  display:block; font:500 9.5px/1.4 var(--ui); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 4px;
}
body.avos .mkApp .mkField input{
  width:100%; height:32px; padding:0 11px; border-radius:8px;
  border:1px solid var(--acc-edge); background:var(--veil-sunk);
  color:var(--ink); font:400 12.5px/32px var(--ui); outline:none;
}
body.avos .mkApp .mkList{
  margin-top:10px; flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:5px;
}
/* ⚠ EACH ROW IS ITS OWN OUTLINED PILL, as in the reference, not a table row.
   The picture reads as a stack of separate chips and that is most of its
   character. */
body.avos .mkApp .mkLi{
  display:grid; grid-template-columns:20px 46px minmax(0,1fr) auto;
  align-items:center; gap:7px; padding:7px 9px; cursor:pointer;
  border-radius:9px; border:1px solid var(--ink-line);
  background:var(--veil-sunk);
}
body.avos .mkApp .mkLi:hover{ border-color:var(--acc-edge); }
body.avos .mkApp .mkLi.on{ border-color:var(--acc); background:var(--acc-wash); }
body.avos .mkApp .mkLiIcon{ width:20px; height:20px; display:flex;
  align-items:center; justify-content:center; }
body.avos .mkApp .mkLiIcon img{ width:19px; height:19px; border-radius:50%; }
body.avos .mkApp .mkLi b{ font:700 12.5px/1.2 var(--ui); color:var(--ink); }
body.avos .mkApp .mkLiName{ font:400 11px/1.2 var(--ui); color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.avos .mkApp .mkLiPx{ font:500 11.5px/1.2 ui-monospace,monospace;
  color:var(--ink); text-align:right; }
body.avos .mkApp .mkLiChg{ font:500 11px/1.2 ui-monospace,monospace;
  color:var(--ink-3); text-align:right; min-width:64px; }
body.avos .mkApp .mkLiChg.up{ color:#26C281; }
body.avos .mkApp .mkLiChg.down{ color:#EF4B4B; }

/* the middle: bar + candles */
body.avos .mkApp .mkMain{ display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--ink-line); border-radius:11px;
  background:var(--veil-sunk); padding:9px 10px; }
body.avos .mkApp .mkBar{ display:flex; align-items:center; gap:10px;
  margin:0 0 8px; }
body.avos .mkApp .mkPair{ font:700 13px/1 var(--ui); color:var(--ink); }
body.avos .mkApp .mkFrames{ display:flex; gap:3px; margin-left:6px; }
body.avos .mkApp .mkFrames button{
  height:22px; padding:0 9px; border-radius:6px; cursor:pointer;
  border:1px solid var(--ink-line); background:transparent;
  color:var(--ink-3); font:500 10.5px/20px var(--ui);
}
body.avos .mkApp .mkFrames button.on{ color:var(--acc);
  border-color:var(--acc-edge); background:var(--acc-wash); }
body.avos .mkApp .mkLive{ margin-left:auto; display:flex; align-items:center;
  gap:5px; font:600 9.5px/1 var(--ui); letter-spacing:.1em; color:#26C281; }
body.avos .mkApp .mkLive i{ width:6px; height:6px; border-radius:50%;
  background:#26C281; box-shadow:0 0 0 3px rgba(38,194,129,.18); }
/* ⚠ THE LIBRARY MEASURES ITS CONTAINER, so the container must have a real
   size of its own. Inside a flex column `min-height:0` is what stops it
   collapsing to its content and reporting a height of zero. */
body.avos .mkApp .mkChart{ position:relative; flex:1; min-height:220px;
  color:var(--ink); overflow:hidden; }
/* ⚠ TradingView draws its own price and time scales, so the hand-rolled axis
   is gone. What is left is the attribution the free library asks for. */
body.avos .mkApp .mkTV{ position:absolute; left:6px; bottom:4px; z-index:3;
  font:400 9px/1 var(--ui); color:var(--ink-3); text-decoration:none;
  opacity:.65; letter-spacing:.04em; }
body.avos .mkApp .mkTV:hover{ opacity:1; color:var(--acc); }

/* the right: the figures */
body.avos .mkApp .mkInfo{ min-height:0; overflow-y:auto;
  border:1px solid var(--ink-line); border-radius:11px;
  background:var(--veil-sunk); padding:11px; }
body.avos .mkApp .mkInfoHead{ display:flex; align-items:center; gap:7px; }
body.avos .mkApp .mkInfoHead img{ width:20px; height:20px; border-radius:50%; }
body.avos .mkApp .mkInfoHead b{ font:700 13px/1.2 var(--ui); color:var(--ink); }
body.avos .mkApp .mkInfoName{ font:400 10.5px/1.4 var(--ui); color:var(--ink-3);
  margin:2px 0 8px; }
body.avos .mkApp .mkInfoPx b{ display:block;
  font:700 21px/1.15 ui-monospace,monospace; color:var(--ink); }
body.avos .mkApp .mkInfoPx i{ font:500 11px/1.4 var(--ui); font-style:normal; }
body.avos .mkApp .mkInfoPx i.up{ color:#26C281; }
body.avos .mkApp .mkInfoPx i.down{ color:#EF4B4B; }
body.avos .mkApp .mkKV{ margin-top:11px; display:flex; flex-direction:column;
  gap:1px; }
body.avos .mkApp .mkKVRow{ display:flex; justify-content:space-between;
  gap:8px; padding:5px 0; border-top:1px solid var(--ink-line); }
body.avos .mkApp .mkKVRow:first-child{ border-top:0; }
body.avos .mkApp .mkKVRow span{ font:400 10.5px/1.3 var(--ui);
  color:var(--ink-3); }
body.avos .mkApp .mkKVRow b{ font:500 11.5px/1.3 ui-monospace,monospace;
  color:var(--ink); }
body.avos .mkApp .mkWait{ padding:34px 8px; text-align:center;
  color:var(--ink-3); font:400 11.5px/1.5 var(--ui); }

/* ── eligibility, the address-first half ──────────────────────────
   ⚠ THE VERDICT IS COLOUR CODED AND THE REASON IS ALWAYS SHOWN. "eligible"
   with no reason is a claim; "eligible because you hold 3 of X" is evidence,
   and the difference matters when acting on it costs money. */
body.avos .trkApp .trkAddr{ display:flex; gap:6px; margin:0 0 8px; }
body.avos .trkApp .trkAddr input{ flex:1; height:34px; padding:0 11px;
  border-radius:9px; border:1px solid var(--acc-edge);
  background:var(--veil-sunk); color:var(--ink);
  font:400 12.5px/34px ui-monospace,monospace; outline:none; }
body.avos .trkApp .trkCheck{ height:34px; line-height:32px;
  border-color:var(--acc-edge); color:var(--acc); }
body.avos .trkApp .trkElig{ margin:0 0 12px; }
body.avos .trkApp .trkElRow{ padding:7px 10px; margin:0 0 4px;
  border-radius:9px; background:var(--veil-sunk);
  border-left:2.5px solid var(--ink-line);
  display:grid; grid-template-columns:1fr auto; gap:2px 8px; }
body.avos .trkApp .trkElRow.eligible{ border-left-color:#26C281; }
body.avos .trkApp .trkElRow.open-to-anyone{ border-left-color:#3D8BD8; }
body.avos .trkApp .trkElRow.unknowable{ border-left-color:#D8A23C; }
body.avos .trkApp .trkElRow.not-eligible{ border-left-color:#EF4B4B; }
body.avos .trkApp .trkElRow b{ font:600 12px/1.3 var(--ui); color:var(--ink); }
body.avos .trkApp .trkVerdict{ font:600 9.5px/1.4 var(--ui);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
body.avos .trkApp .trkElRow.eligible .trkVerdict{ color:#26C281; }
body.avos .trkApp .trkElRow.not-eligible .trkVerdict{ color:#EF4B4B; }
body.avos .trkApp .trkElRow.unknowable .trkVerdict{ color:#D8A23C; }
body.avos .trkApp .trkWhy{ grid-column:1 / -1; color:var(--ink-3);
  font:400 10.5px/1.5 var(--ui); }

/* ── the mint tracker ────────────────────────────────────────────────── */
body.avos .trkApp .trkAdd{ margin:0 0 12px; }
body.avos .trkApp .trkPaste{ display:flex; gap:6px; }
body.avos .trkApp .trkPaste input{ flex:1; height:32px; padding:0 11px;
  border-radius:9px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink);
  font:400 12.5px/32px var(--ui); outline:none; }
body.avos .trkApp button{ height:32px; padding:0 12px; cursor:pointer;
  border-radius:9px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink-2);
  font:450 11.5px/30px var(--ui); }
body.avos .trkApp .trkGo{ border-color:var(--acc-edge); color:var(--acc); }
body.avos .trkApp .trkManual{ height:26px; margin-top:7px; padding:0 10px;
  font-size:11px; line-height:24px; border-style:dashed; }
body.avos .trkApp .trkNote{ color:var(--ink-3); font:400 11.5px/1.5 var(--ui);
  margin:8px 0 5px; }
body.avos .trkApp .trkSug{ display:flex; align-items:center; gap:8px;
  padding:6px 9px; margin:0 0 4px; border-radius:9px;
  background:var(--veil-sunk); border:.5px solid var(--ink-line); }
body.avos .trkApp .trkSug b{ font:600 11px/1.2 var(--ui); color:var(--ink);
  letter-spacing:.05em; }
body.avos .trkApp .trkSug span{ font:400 11px/1.2 var(--ui); color:var(--ink-3); }
body.avos .trkApp .trkSug button{ margin-left:auto; height:24px;
  line-height:22px; font-size:11px; }
body.avos .trkApp .trkSug.added{ border-color:#26C281; }
body.avos .trkApp .trkForm{ display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px;
  margin-top:8px; }
body.avos .trkApp .trkForm input{ height:30px; padding:0 10px;
  border-radius:8px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink);
  font:400 12px/30px var(--ui); outline:none; }
body.avos .trkApp .trkForm .trkSave{ grid-column:1 / -1; }
body.avos .trkApp .trkRow{ padding:8px 10px; margin:0 0 6px; border-radius:9px;
  background:var(--veil-sunk); border-left:2.5px solid var(--ink-line); }
body.avos .trkApp .trkRow.ok{ border-left-color:#26C281; }
body.avos .trkApp .trkRow.bad{ border-left-color:#EF4B4B; }
body.avos .trkApp .trkRow.warn{ border-left-color:#D8A23C; }
body.avos .trkApp .mlTop{ display:flex; align-items:baseline; gap:8px; }
body.avos .trkApp .mlTop b{ font:600 12.5px/1.3 var(--ui); color:var(--ink); }
body.avos .trkApp .trkKind{ font:600 9.5px/1.4 var(--ui); letter-spacing:.08em;
  color:var(--acc); border:.5px solid var(--acc-edge); border-radius:5px;
  padding:1px 5px; }
body.avos .trkApp .mlWhen{ margin-left:auto;
  font:500 11.5px/1.3 ui-monospace,monospace; color:var(--ink-3); }
body.avos .trkApp .mlWhen.soon{ color:#D8A23C; }
body.avos .trkApp .mlWhen.gone{ color:var(--ink-3); opacity:.6; }
body.avos .trkApp .mlRead{ margin:3px 0 5px; color:var(--ink-2);
  font:450 11.5px/1.45 var(--ui); }
body.avos .trkApp .mlMeta{ display:flex; flex-wrap:wrap; gap:5px 8px;
  align-items:center; }
body.avos .trkApp .mlMeta span{ font:400 10.5px/1.4 ui-monospace,monospace;
  color:var(--ink-3); }
body.avos .trkApp .mlMeta a{ font:400 10.5px/1.4 var(--ui); color:var(--acc);
  text-decoration:none; }
body.avos .trkApp .mlMeta button{ height:22px; padding:0 8px; font-size:10.5px;
  line-height:20px; }
body.avos .trkApp .trkDel{ color:#EF4B4B; }
body.avos .trkApp .mlEmpty{ padding:24px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }

/* ── gas ─────────────────────────────────────────────────────────────── */
body.avos .gasApp .gasNote{ color:var(--ink-3); font:400 11px/1.5 var(--ui);
  margin:0 0 10px; }
body.avos .gasApp .gasRow{ padding:8px 10px; margin:0 0 6px; border-radius:9px;
  background:var(--veil-sunk); border-left:2.5px solid var(--ink-line); }
body.avos .gasApp .gasTop{ display:flex; align-items:baseline; gap:8px; }
body.avos .gasApp .gasTop b{ font:600 12.5px/1.3 var(--ui); color:var(--ink); }
body.avos .gasApp .gasSym{ font:500 10px/1.3 ui-monospace,monospace;
  color:var(--ink-3); }
body.avos .gasApp .gasUsd{ margin-left:auto;
  font:600 13px/1.3 ui-monospace,monospace; color:#26C281; }
body.avos .gasApp .gasMeta{ display:flex; flex-wrap:wrap; gap:3px 10px;
  margin-top:3px; }
body.avos .gasApp .gasMeta span{ font:400 10.5px/1.4 ui-monospace,monospace;
  color:var(--ink-3); }
body.avos .gasApp .gasFlat{ color:var(--ink-2) !important; }
body.avos .gasApp .mkSearch{ margin:0 0 8px; }
body.avos .gasApp .mkSearch input{ width:100%; height:32px; padding:0 11px;
  border-radius:9px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink);
  font:400 12.5px/32px var(--ui); outline:none; }
body.avos .gasApp .mlEmpty{ padding:24px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }

/* ── launchpad: a profile card per project, not a row ────────────────────
   🔴 THE CARD IS THE FEATURE. The two reference sites draw one line per
   project because a line is all their data fills. We hold the banner, the
   logo, the blurb, the community size and the reasons behind the score, so
   the card has to carry all of it without becoming a wall.
   ⚠ THE BANNER IS A STRIP, NOT A HEADER IMAGE. At full height it dominated
   every card and the page read as a gallery of other people's artwork; at
   44px with the content sitting over its lower half it reads as identity.  */
body.avos .lpApp .mkSearch{ margin:0 0 8px; }
body.avos .lpApp .mkSearch input{ width:100%; height:32px; padding:0 11px;
  border-radius:9px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink);
  font:400 12.5px/32px var(--ui); outline:none; }
/* ⚠ THE FILTER ROW IS THE LAST CHROME BEFORE THE CARDS. The counts line and
   the source notes that used to sit under it are gone -- see buildLaunchpad --
   so it carries the separator now. */
body.avos .lpApp .lpSorts{ display:flex; flex-wrap:wrap; gap:5px;
  margin:0 0 11px; padding-bottom:11px;
  border-bottom:.5px solid var(--ink-line); }
body.avos .lpApp .lpSorts button{ padding:5px 10px; border-radius:8px;
  border:.5px solid var(--ink-line); background:var(--veil-sunk);
  color:var(--ink-2); font:500 11px/1.2 var(--ui); cursor:pointer; }
body.avos .lpApp .lpSorts button:hover{ background:var(--ink-hover); }
body.avos .lpApp .lpSorts button.on{ background:var(--acc-wash);
  border-color:var(--acc-edge); color:var(--acc); }

body.avos .lpApp .lpCard{ position:relative; overflow:hidden;
  margin:0 0 10px; border-radius:12px; background:var(--veil-sunk);
  border:.5px solid var(--ink-line); }
body.avos .lpApp .lpBan{ height:44px; background-size:cover;
  background-position:center; opacity:.5; }
body.avos .lpApp .lpHead{ display:flex; align-items:flex-start; gap:10px;
  padding:9px 11px 0; margin-top:-16px; position:relative; }
/* 🔴 A CARD OPENED OUT OF A TILE NEEDS A WAY BACK. Without this it replaced
   the tile completely and carried no control of its own, so once opened it
   could never be closed. The body is clickable too (links excluded); this is
   the affordance that says so. */
body.avos .lpApp .lpOpened{ cursor:zoom-out;
  box-shadow:0 0 0 1px var(--acc-edge) inset; }
body.avos .lpApp .lpShut{ position:absolute; top:6px; right:6px; z-index:4;
  width:20px; height:20px; padding:0; border-radius:6px; cursor:pointer;
  border:.5px solid var(--ink-line); background:var(--veil-window);
  color:var(--ink-2); font:400 13px/18px var(--ui); }
body.avos .lpApp .lpShut:hover{ background:var(--ink-hover); color:var(--ink); }
/* ⚠ the NEW badge also sits top-right on a card; move it left of the close
   control so they cannot land on top of each other. */
body.avos .lpApp .lpOpened .lpNew{ right:30px; }

body.avos .lpApp .lpNoBan .lpHead{ margin-top:0; padding-top:11px; }
body.avos .lpApp .lpNoBan .lpWho,
body.avos .lpApp .lpNoBan .lpScore{ padding-top:0; }
body.avos .lpApp .lpLogo{ width:44px; height:44px; border-radius:11px;
  object-fit:cover; flex:0 0 auto; background:var(--veil-window);
  box-shadow:0 0 0 2px var(--veil-window), var(--cast-flat); }
body.avos .lpApp .lpNoLogo{ background:var(--ink-line); }
body.avos .lpApp .lpWho{ min-width:0; flex:1 1 auto; padding-top:16px; }
body.avos .lpApp .lpWho b{ display:block; font:600 13.5px/1.25 var(--ui);
  color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lpApp .lpSub{ display:flex; flex-wrap:wrap; gap:2px 8px;
  margin-top:2px; }
body.avos .lpApp .lpSub span{ font:400 10.5px/1.4 var(--ui);
  color:var(--ink-3); }
body.avos .lpApp .lpVet{ color:var(--pos) !important; font-weight:600; }
body.avos .lpApp .lpScore{ display:flex; align-items:center; gap:6px;
  padding-top:16px; flex:0 0 auto; }
body.avos .lpApp .lpGrade{ padding:2px 7px; border-radius:6px;
  font:600 9.5px/1.4 var(--ui); text-transform:uppercase;
  letter-spacing:.05em; background:var(--ink-line-2); color:var(--ink-3); }
body.avos .lpApp .lp-hot .lpGrade{ background:rgba(179,60,54,.14);
  color:var(--neg); }
body.avos .lpApp .lp-warm .lpGrade{ background:rgba(150,105,26,.16);
  color:var(--amb); }
body.avos .lpApp .lp-early .lpGrade{ background:var(--acc-wash);
  color:var(--acc); }
body.avos .lpApp .lpNum{ font:600 15px/1 ui-monospace,monospace;
  color:var(--ink-2); }
body.avos .lpApp .lpBlurb{ padding:7px 11px 0; color:var(--ink-2);
  font:400 11.5px/1.55 var(--ui); }
body.avos .lpApp .lpFacts{ display:flex; flex-wrap:wrap; gap:5px;
  padding:8px 11px 0; }
body.avos .lpApp .lpFacts span{ display:inline-flex; align-items:baseline;
  gap:5px; padding:3px 8px; border-radius:7px; background:var(--veil-window);
  border:.5px solid var(--ink-line-2);
  font:500 11px/1.4 ui-monospace,monospace; color:var(--ink); }
body.avos .lpApp .lpFacts i{ font:600 8.5px/1.4 var(--ui); font-style:normal;
  letter-spacing:.06em; color:var(--ink-3); }
body.avos .lpApp .lpUnk{ color:var(--ink-3) !important; }
body.avos .lpApp .lpKey{ background:var(--acc-wash) !important;
  border-color:var(--acc-edge) !important; color:var(--acc) !important; }
body.avos .lpApp .lpSoon{ background:rgba(150,105,26,.14) !important;
  border-color:rgba(150,105,26,.3) !important; color:var(--amb) !important; }
body.avos .lpApp .lpLive{ background:rgba(36,119,74,.15) !important;
  border-color:rgba(36,119,74,.32) !important; color:var(--pos) !important; }
body.avos .lpApp .lpChain{ margin:8px 11px 0; padding:5px 8px;
  border-radius:7px; background:rgba(36,119,74,.10);
  font:400 10.5px/1.5 var(--ui); color:var(--ink-2); }
body.avos .lpApp .lpChain code{ font:500 10px/1.4 ui-monospace,monospace;
  color:var(--ink); word-break:break-all; }
body.avos .lpApp .lpWhy{ margin:7px 0 0; padding:0 11px 0 26px; }
body.avos .lpApp .lpWhy li{ font:400 11px/1.6 var(--ui); color:var(--ink-3); }
body.avos .lpApp .lpLinks{ display:flex; flex-wrap:wrap; gap:5px;
  padding:9px 11px 11px; }
body.avos .lpApp .lpLinks a,
body.avos .lpApp .lpLinks button{ padding:4px 9px; border-radius:7px;
  border:.5px solid var(--ink-line); background:var(--veil-window);
  color:var(--ink-2); font:500 10.5px/1.3 var(--ui); cursor:pointer;
  text-decoration:none; }
body.avos .lpApp .lpLinks a:hover,
body.avos .lpApp .lpLinks button:hover{ background:var(--ink-hover);
  color:var(--ink); }
body.avos .lpApp .lpLinks button:disabled{ opacity:.6; cursor:default; }
body.avos .lpApp .lpRaf{ margin:0 11px 11px; border-radius:9px;
  background:var(--veil-window); border:.5px solid var(--ink-line-2);
  overflow:hidden; }
body.avos .lpApp .lpRafRow{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 9px; padding:6px 9px;
  border-bottom:.5px solid var(--ink-line-2); }
body.avos .lpApp .lpRafRow:last-child{ border-bottom:0; }
body.avos .lpApp .lpRafRow a,
body.avos .lpApp .lpRafRow span{ font:500 11px/1.4 var(--ui);
  color:var(--ink); text-decoration:none; }
body.avos .lpApp .lpRafRow a:hover{ color:var(--acc); }
body.avos .lpApp .lpRafRow em,
body.avos .lpApp .lpRafRow i,
body.avos .lpApp .lpRafRow u{ font-style:normal; text-decoration:none;
  font:400 10px/1.4 var(--ui); color:var(--ink-3); }
body.avos .lpApp .lpRafRow i{ margin-left:auto; font-family:ui-monospace,monospace; }
body.avos .lpApp .lpRafRow i + i{ margin-left:0; }
body.avos .lpApp .mlEmpty{ padding:24px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }

/* ── the layout picker, and the five compact layouts ─────────────────────
   🔴 Zumo asked to be able to switch between "a grid shape, a compact grid, a
   mosaic style, a table, or a compact table". One <select> on the end of the
   filter row rather than six more buttons, because he had just had every
   spare line of chrome taken out of this window.
   ⚠ EVERY VIEW IS CLICKABLE INTO THE FULL CARD. A tile shows six facts; the
   card shows the reasons, the links and the raffle history. A denser layout
   must not mean permanently losing the half that explains itself.          */
body.avos .lpApp .lpViewSel{ margin-left:auto; height:26px; padding:0 6px;
  border-radius:8px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink-2);
  font:500 11px/1.2 var(--ui); cursor:pointer; outline:none; }

/* GRID and COMPACT GRID. auto-fill, so the window decides the column count
   rather than a breakpoint guessing at it. */
body.avos .lpApp .lpV-grid,
body.avos .lpApp .lpV-dense,
body.avos .lpApp .lpV-mosaic{ display:grid; gap:8px; align-content:start; }
body.avos .lpApp .lpV-grid{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }
body.avos .lpApp .lpV-dense{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:6px; }
body.avos .lpApp .lpV-mosaic{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:4px; }
/* ⚠ AN OPENED CARD SPANS THE WHOLE ROW. Left in one grid cell it squeezed a
   full profile into 196px and the facts row wrapped into six lines. */
body.avos .lpApp .lpV-grid .lpCard,
body.avos .lpApp .lpV-dense .lpCard,
body.avos .lpApp .lpV-mosaic .lpCard{ grid-column:1/-1; }

body.avos .lpApp .lpTile{ position:relative; overflow:hidden; cursor:pointer;
  border-radius:11px; background:var(--veil-sunk);
  border:.5px solid var(--ink-line); display:flex; flex-direction:column; }
body.avos .lpApp .lpTile:hover{ background:var(--ink-hover); }
body.avos .lpApp .lpTBan{ height:42px; background-size:cover;
  background-position:center; opacity:.5; }
body.avos .lpApp .lpTHead{ display:flex; align-items:center; gap:7px;
  padding:7px 9px 0; }
body.avos .lpApp .lpTile .lpTBan + .lpTHead{ margin-top:-14px; }
body.avos .lpApp .lpTLogo{ width:30px; height:30px; border-radius:8px;
  object-fit:cover; flex:0 0 auto; background:var(--veil-window);
  box-shadow:0 0 0 2px var(--veil-window); }
body.avos .lpApp .lpTileSm .lpTLogo{ width:24px; height:24px; border-radius:7px; }
body.avos .lpApp .lpTWho{ min-width:0; flex:1 1 auto; }
body.avos .lpApp .lpTWho b{ display:block; font:600 11.5px/1.3 var(--ui);
  color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lpApp .lpTileSm .lpTWho b{ font-size:10.5px; }
body.avos .lpApp .lpTWho span{ display:block; font:400 9.5px/1.35 var(--ui);
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lpApp .lpTScore{ font:600 12px/1 ui-monospace,monospace;
  color:var(--ink-2); flex:0 0 auto; }
body.avos .lpApp .lpTFoot{ display:flex; align-items:baseline; gap:6px;
  padding:5px 9px 8px; margin-top:auto; }
body.avos .lpApp .lpTWhen{ font:500 10px/1.4 ui-monospace,monospace;
  color:var(--ink-2); }
body.avos .lpApp .lpTPrice{ margin-left:auto;
  font:500 10px/1.4 ui-monospace,monospace; color:var(--ink-3); }
body.avos .lpApp .lpTile .lpSoon{ color:var(--amb) !important;
  background:none !important; border:0 !important; }
body.avos .lpApp .lpTile .lpLive{ color:var(--pos) !important;
  background:none !important; border:0 !important; }

/* MOSAIC. Square, image led, caption over the foot. */
body.avos .lpApp .lpMos{ position:relative; aspect-ratio:1/1; cursor:pointer;
  border-radius:9px; overflow:hidden; background:var(--ink-line) center/cover;
  border:.5px solid var(--ink-line); }
body.avos .lpApp .lpMos:hover{ filter:brightness(1.06); }
body.avos .lpApp .lpMosCap{ position:absolute; left:0; right:0; bottom:0;
  padding:14px 7px 6px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0)); }
body.avos .lpApp .lpMosCap b{ display:block; font:600 10.5px/1.3 var(--ui);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.avos .lpApp .lpMosCap .lpTWhen{ font-size:9px; color:rgba(255,255,255,.82); }
body.avos .lpApp .lpMosCap .lpSoon{ color:#F0C05A !important; }
body.avos .lpApp .lpMosCap .lpLive{ color:#66D19E !important; }
body.avos .lpApp .lpMosScore{ position:absolute; top:5px; right:6px;
  padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.55); color:#fff;
  font:600 9.5px/1.5 ui-monospace,monospace; }

/* TABLE and COMPACT TABLE. ⚠ A GRID, NOT A <table>: the columns have to line
   up across rows that are separately clickable, and the whole thing has to
   scroll sideways inside a 520px window without pushing the page. */
body.avos .lpApp .lpTbl{ min-width:520px; }
body.avos .lpApp .lpV-table,
body.avos .lpApp .lpV-rows{ overflow-x:auto; }
body.avos .lpApp .lpTr{ position:relative; display:grid; align-items:center;
  gap:8px; padding:5px 8px; border-radius:7px; cursor:pointer;
  grid-template-columns:26px minmax(120px,2fr) 52px 62px 60px 60px 92px 34px; }
body.avos .lpApp .lpTblSm .lpTr{
  grid-template-columns:22px minmax(110px,2fr) 52px 92px 34px;
  padding:3px 8px; }
body.avos .lpApp .lpTr:hover{ background:var(--ink-hover); }
body.avos .lpApp .lpTr.lpTh{ cursor:default; position:sticky; top:0; z-index:2;
  background:var(--veil-window); border-radius:0;
  border-bottom:.5px solid var(--ink-line); }
body.avos .lpApp .lpTr.lpTh:hover{ background:var(--veil-window); }
body.avos .lpApp .lpTh span{ font:600 8.5px/1.5 var(--ui); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); }
body.avos .lpApp .lpTr > span{ min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  font:400 11px/1.5 ui-monospace,monospace; color:var(--ink-2); }
body.avos .lpApp .lpTr b{ font:600 11.5px/1.4 var(--ui); color:var(--ink); }
body.avos .lpApp .lpTblSm .lpTr b{ font-size:11px; }
body.avos .lpApp .lpTr em{ font:400 9.5px/1.3 var(--ui); font-style:normal;
  color:var(--ink-3); display:block; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lpApp .lpTr img{ width:22px; height:22px; border-radius:6px;
  object-fit:cover; display:block; }
body.avos .lpApp .lpTr i.lpNoLogo{ width:22px; height:22px; border-radius:6px;
  display:block; background:var(--ink-line); }
body.avos .lpApp .lpTr .lpSoon{ color:var(--amb) !important;
  background:none !important; border:0 !important; }
body.avos .lpApp .lpTr .lpLive{ color:var(--pos) !important;
  background:none !important; border:0 !important; }
/* the expanded card, sitting under the row it belongs to */
body.avos .lpApp .lpTrOpen{ background:var(--ink-sel); }
body.avos .lpApp .lpTblCard{ padding:0 0 4px; }
/* ⚠ the card carries its own colours inside the table; those rules are scoped
   to .lpApp so they already apply. Nothing to restate. */

/* NEW ARRIVALS. ⚠ On the row, not in a banner across the top: the point is to
   find the thing that just landed, and that means marking the thing. */
body.avos .lpApp .lpIsNew{ box-shadow:0 0 0 1.5px var(--acc-edge) inset; }
body.avos .lpApp .lpNew{ position:absolute; top:4px; left:4px; z-index:3;
  padding:1px 5px; border-radius:5px; background:var(--acc); color:#fff;
  font:700 8px/1.6 var(--ui); letter-spacing:.07em; }
body.avos .lpApp .lpCard .lpNew{ top:6px; left:auto; right:6px; }
body.avos .lpApp .lpTr .lpNew{ top:50%; left:-2px; transform:translateY(-50%);
  padding:0 3px; font-size:7px; }

/* ── LIVE: the mint tape ─────────────────────────────────────────────────
   🔴 WHAT ZUMO ACTUALLY LIKED ABOUT THE REFERENCE SITE, separated from its
   paint. He said the UI was amazing. Copying a competitor's stylesheet would
   both clash with the glass this whole OS is built on and be a copy, so what
   is taken is the INFORMATION DESIGN, which is the part that was good:

     * a pinned detail panel above a live list, so the thing you are watching
       never scrolls away from the thing you are reading
     * a progress bar as the hero, because "how much is left" is the only
       question anybody opens a mint tracker to answer
     * time-window chips rather than a dropdown, because switching between
       one minute and one hour is the main verb on the page
     * tabular numerals in a monospace face so digits do not jitter as they
       tick, which is what makes a live number feel live instead of broken
     * a pulse in the header that goes warm when the chain is busy

   All of it drawn in our own tokens.                                       */
body.avos .lvApp .lvHead{ display:flex; align-items:center; gap:8px;
  margin:0 0 9px; }
body.avos .lvApp .lvWins{ display:flex; gap:4px; }
body.avos .lvApp .lvWins button{ min-width:34px; padding:4px 7px;
  border-radius:7px; border:.5px solid var(--ink-line);
  background:var(--veil-sunk); color:var(--ink-3);
  font:600 10.5px/1.2 ui-monospace,monospace; cursor:pointer; }
body.avos .lvApp .lvWins button:hover{ background:var(--ink-hover); }
body.avos .lvApp .lvWins button.on{ background:var(--acc-wash);
  border-color:var(--acc-edge); color:var(--acc); }
body.avos .lvApp .lvPulse{ margin-left:auto; display:flex; align-items:center;
  gap:6px; font:500 10.5px/1.4 ui-monospace,monospace; color:var(--ink-3); }
body.avos .lvApp .lvPulse i{ width:7px; height:7px; border-radius:50%;
  background:var(--ink-line); flex:0 0 auto; }
/* ⚠ the dot only animates while the chain is actually busy. A pulse that
   always pulses is decoration; one that stops means something. */
body.avos .lvApp .lvPulse.lvHot i{ background:var(--pos);
  animation:lvBeat 1.6s ease-in-out infinite; }
body.avos .lvApp .lvPulse.lvHot .lvRate{ color:var(--ink-2); }
@keyframes lvBeat{ 0%,100%{ opacity:1; transform:scale(1); }
                   50%{ opacity:.45; transform:scale(.72); } }
@media (prefers-reduced-motion:reduce){
  body.avos .lvApp .lvPulse.lvHot i{ animation:none; } }

body.avos .lvApp .lvDetail{ margin:0 0 10px; }
body.avos .lvApp .lvPick{ padding:16px 12px; border-radius:11px;
  background:var(--veil-sunk); border:.5px dashed var(--ink-line);
  color:var(--ink-3); font:400 11.5px/1.5 var(--ui); text-align:center; }
body.avos .lvApp .lvCard{ padding:11px; border-radius:12px;
  background:var(--veil-sunk); border:.5px solid var(--ink-line); }
body.avos .lvApp .lvCardTop{ display:flex; align-items:center; gap:9px; }
body.avos .lvApp .lvBig{ width:38px; height:38px; border-radius:10px;
  object-fit:cover; flex:0 0 auto; background:var(--ink-line); display:block; }
body.avos .lvApp .lvWho{ min-width:0; flex:1 1 auto; }
body.avos .lvApp .lvWho b{ display:block; font:600 13px/1.3 var(--ui);
  color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lvApp .lvWho code{ display:block;
  font:400 9.5px/1.4 ui-monospace,monospace; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.avos .lvApp .lvOpen{ flex:0 0 auto; padding:4px 9px; border-radius:7px;
  border:.5px solid var(--acc-edge); background:var(--acc-wash);
  color:var(--acc); font:500 10.5px/1.3 var(--ui); cursor:pointer; }

body.avos .lvApp .lvProg{ margin-top:10px; }
body.avos .lvApp .lvProgTop{ display:flex; justify-content:space-between;
  align-items:baseline; font:600 11.5px/1.4 ui-monospace,monospace;
  color:var(--ink); }
body.avos .lvApp .lvBar{ height:7px; border-radius:4px; margin:4px 0 3px;
  background:var(--ink-line-2); overflow:hidden; }
body.avos .lvApp .lvBar i{ display:block; height:100%; border-radius:4px;
  background:var(--pos); transition:width 420ms ease-out; }
body.avos .lvApp .lvProgFoot{ font:400 10px/1.4 var(--ui);
  color:var(--ink-3); }
body.avos .lvApp .lvFacts{ display:flex; flex-wrap:wrap; gap:5px;
  margin-top:9px; }
body.avos .lvApp .lvFacts span{ display:inline-flex; align-items:baseline;
  gap:5px; padding:3px 8px; border-radius:7px; background:var(--veil-window);
  border:.5px solid var(--ink-line-2);
  font:500 11px/1.4 ui-monospace,monospace; color:var(--ink); }
body.avos .lvApp .lvFacts i{ font:600 8.5px/1.4 var(--ui); font-style:normal;
  letter-spacing:.06em; color:var(--ink-3); }

body.avos .lvApp .lvTabs{ display:flex; gap:5px; margin:0 0 9px;
  padding-bottom:9px; border-bottom:.5px solid var(--ink-line); }
body.avos .lvApp .lvTabs button{ padding:5px 11px; border-radius:8px;
  border:.5px solid var(--ink-line); background:var(--veil-sunk);
  color:var(--ink-2); font:500 11px/1.2 var(--ui); cursor:pointer; }
body.avos .lvApp .lvTabs button.on{ background:var(--acc-wash);
  border-color:var(--acc-edge); color:var(--acc); }

/* ⚠ ONE GRID FOR EVERY ROW so the columns line up down the whole board.
   Rows are separately clickable, which is why this is not a <table>. */
body.avos .lvApp .lvRow{ display:grid; align-items:center; gap:8px;
  grid-template-columns:20px 26px minmax(90px,1fr) 60px 74px 52px;
  padding:5px 7px; border-radius:8px; cursor:pointer; }
body.avos .lvApp .lvRow:hover{ background:var(--ink-hover); }
body.avos .lvApp .lvRow.on{ background:var(--acc-wash);
  box-shadow:0 0 0 1px var(--acc-edge) inset; }
body.avos .lvApp .lvRank{ font:600 9.5px/1.4 ui-monospace,monospace;
  color:var(--ink-3); }
body.avos .lvApp .lvLogo{ width:24px; height:24px; border-radius:7px;
  object-fit:cover; display:block; background:var(--ink-line); }
body.avos .lvApp .lvNoLogo{ background:var(--ink-line); }
body.avos .lvApp .lvName{ min-width:0; }
body.avos .lvApp .lvName b{ display:block; font:600 11.5px/1.35 var(--ui);
  color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lvApp .lvName em{ display:block; font:400 9.5px/1.3 var(--ui);
  font-style:normal; color:var(--ink-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* 🔴 MINTERS IS THE HEADLINE NUMBER, so it is the one drawn like a headline.
   Mints sits next to it in the muted colour, because on its own it is the
   number that lies. */
body.avos .lvApp .lvMinters{ text-align:right; }
body.avos .lvApp .lvMinters b{ display:block;
  font:600 13px/1.2 ui-monospace,monospace; color:var(--ink);
  font-variant-numeric:tabular-nums; }
body.avos .lvApp .lvMinters em{ display:block; font:600 7.5px/1.4 var(--ui);
  font-style:normal; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); }
body.avos .lvApp .lvMints{ text-align:right;
  font:500 11px/1.3 ui-monospace,monospace; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
body.avos .lvApp .lvMints em{ display:block; font:400 9px/1.35 var(--ui);
  font-style:normal; color:var(--ink-3); }
/* ⚠ eight tokens a wallet and up is one person loading, and it is marked.
   Nothing is hidden for it; the number simply stops looking like demand. */
body.avos .lvApp .lvLoaded{ color:var(--amb) !important; }
body.avos .lvApp .lvLoaded em{ color:var(--amb) !important; }
body.avos .lvApp .lvLast{ text-align:right;
  font:500 10px/1.3 ui-monospace,monospace; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
body.avos .lvApp .lvNow{ color:var(--pos) !important; }

body.avos .lvApp .lvTape1{ display:grid; align-items:center; gap:8px;
  grid-template-columns:22px minmax(90px,1fr) 78px 56px 52px;
  padding:3px 7px; border-radius:7px; cursor:pointer; }
body.avos .lvApp .lvTape1:hover{ background:var(--ink-hover); }
body.avos .lvApp .lvTok{ font:500 10.5px/1.3 ui-monospace,monospace;
  color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.avos .lvApp .lvType{ font:400 9px/1.3 var(--ui); color:var(--ink-3); }
body.avos .lvApp .mlEmpty{ padding:24px 4px; color:var(--ink-3);
  font:400 12.5px/1.6 var(--ui); }

/* ── unlocks: a row you can open, and a schedule bar ─────────────────── */
body.avos .unlockApp .unlHit{ cursor:pointer; }
body.avos .unlockApp .unlHit:hover{ background:var(--veil-menu); }
body.avos .unlockApp .unlBack{ margin:0 0 10px; }
body.avos .unlockApp .unlHead{ display:flex; align-items:baseline; gap:9px;
  margin:0 0 10px; padding-bottom:7px;
  border-bottom:.5px solid var(--ink-line); }
body.avos .unlockApp .unlHead b{ font:600 14px/1.2 var(--ui); color:var(--ink); }
body.avos .unlockApp .unlHead span{ font:400 11px/1.3 var(--ui); color:var(--ink-3); }
body.avos .unlockApp .unlBar{ height:4px; border-radius:3px; margin:4px 0 5px;
  background:var(--veil-sunk); overflow:hidden; }
body.avos .unlockApp .unlBar i{ display:block; height:100%; border-radius:3px;
  background:var(--acc); }

[data-live-symbol]{ transition:color 90ms linear; }
[data-live-symbol].lpUp{ color:#3FB27F; animation:lpFade 1.1s ease-out 1; }
[data-live-symbol].lpDown{ color:#E0605E; animation:lpFade 1.1s ease-out 1; }
@keyframes lpFade{ from{ opacity:.55; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  [data-live-symbol].lpUp, [data-live-symbol].lpDown{ animation:none; }
}

/* --- the control itself ---------------------------------------------------
   ⚠ A SETTINGS ROW IS A <div>, NOT A <button>, and that is already recorded:
   a button cannot contain a button and the segmented control fell out of its
   row. A range input is not a button, but it is a form control that must not
   inherit the row's click handler, so it stops the event itself.
   The two words are the whole legend. A percentage would be a number nobody
   can act on; "Crystal" and "Frosted" are what he asked for by name. */
body.avos .sSlide{ display:flex; align-items:center; gap:9px; flex:none; }
body.avos .sSlide b{
  font:400 10.5px/1 var(--ui); color:var(--ink-3); font-weight:400;
  white-space:nowrap; letter-spacing:0;
}
body.avos .sRange{
  -webkit-appearance:none; appearance:none; width:132px; height:16px;
  background:none; cursor:pointer; margin:0; padding:0;
}
body.avos .sRange::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--acc) 0 calc(var(--v, 69) * 1%),
                                    var(--ink-line) calc(var(--v, 69) * 1%) 100%);
}
body.avos .sRange::-moz-range-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--acc) 0 calc(var(--v, 69) * 1%),
                                    var(--ink-line) calc(var(--v, 69) * 1%) 100%);
}
body.avos .sRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-5px;
  border-radius:50%; background:#fff; border:.5px solid rgba(0,0,0,.14);
  box-shadow:0 1px 3px rgba(0,0,0,.30);
}
body.avos .sRange::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff;
  border:.5px solid rgba(0,0,0,.14); box-shadow:0 1px 3px rgba(0,0,0,.30);
}
body.avos .sRange:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
/* 🔴 ON A PHONE THE ROW DOES NOT FIT, AND THE ANSWER IS NOT TO HIDE THE
   WORDS. Measured at 375px: label + Crystal + track + Frosted needs 351px of
   351, so the first cut dropped the two captions -- which leaves a bare track
   with no way to know which end is which. This project has already shipped
   that mistake twice (the landing nav below 760px and the desktop icon grid
   below 700px, both switched off with nothing in their place). The control
   takes its own line instead, full width, with the captions under the ends
   they name. Nothing is removed. */
@media (max-width:700px){
  body.avos .sRow.sWrap{ flex-wrap:wrap; padding-bottom:12px; }
  /* the slider is inside the row's .sRt cell, so it is the CELL that has to
     take the second line, not the control inside it */
  body.avos .sRow.sWrap .sRt{
    order:3; width:100%; flex:1 0 100%; margin-top:4px;
  }
  body.avos .sRow.sWrap .sSlide{
    width:100%; justify-content:space-between; gap:10px;
  }
  body.avos .sRow.sWrap .sRange{ flex:1 1 auto; width:auto; min-width:0; }
}

   20. THE SETTINGS APPLICATION
   ────────────────────────────────────────────────────────────────────────── */
body.avos .setApp{ padding:22px 22px 26px; }
body.avos .setApp h1{
  margin:0 0 20px; text-align:center;
  font:600 26px/1.2 var(--ui); color:var(--ink); letter-spacing:-.025em;
}
body.avos .sMe{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin:0 0 22px;
  border-radius:11px; background:var(--veil-sunk);
  box-shadow:var(--edge-in);
}
body.avos .sAv{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--acc); color:#fff; font:500 14px/1 var(--ui); letter-spacing:.02em;
}
body.avos .sMeT{ min-width:0; }
body.avos .sMeT b{ display:block; font:600 14px/1.25 var(--ui); color:var(--ink); }
body.avos .sMeT i{
  display:block; margin-top:2px; font:400 11.5px/1.3 var(--ui); font-style:normal;
  color:var(--ink-3);
}
body.avos .sSec{
  padding:0 4px 7px; font:400 11.5px/1 var(--ui); color:var(--ink-3);
}
body.avos .sGrp{
  border-radius:11px; overflow:hidden; margin:0 0 20px;
  background:var(--veil-sunk); box-shadow:var(--edge-in);
}
body.avos .sRow{
  display:flex; align-items:center; gap:11px; width:100%; min-height:42px;
  padding:8px 13px; border:0; background:none; text-align:left;
  border-bottom:1px solid var(--ink-line-2); cursor:default; color:var(--ink);
  font:400 13px/1.35 var(--ui);
}
body.avos .sGrp .sRow:last-child{ border-bottom:0; }
body.avos .sRow[data-s]{ cursor:pointer; }
body.avos .sRow[data-s]:hover{ background:var(--ink-hover); }
body.avos .sIco{
  width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--acc); color:#fff;
}
body.avos .sLb{ flex:1; min-width:0; }
body.avos .sLb i{
  display:block; margin-top:2px; font:400 11px/1.4 var(--ui); font-style:normal;
  color:var(--ink-3);
}
body.avos .sRt{ display:flex; align-items:center; gap:7px; flex:none; color:var(--ink-3); }
body.avos .sV{ font:400 12.5px/1 var(--ui); color:var(--ink-3); font-variant-numeric:tabular-nums; }

body.avos .sSeg{
  display:inline-flex; padding:2px; gap:2px; border-radius:7px;
  background:var(--ink-hover); box-shadow:var(--edge-in);
}
body.avos .sSeg button{
  height:22px; padding:0 10px; border:0; border-radius:5px; cursor:pointer;
  background:none; color:var(--ink-3); font:450 11.5px/1 var(--ui); white-space:nowrap;
  transition:background 110ms ease, color 110ms ease;
}
body.avos .sSeg button:hover{ color:var(--ink-2); }
body.avos .sSeg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
body.avos[data-os="dark"] .sSeg button.on{ background:rgba(255,255,255,.18); box-shadow:none; }

body.avos .sSw{
  width:38px; height:22px; border-radius:11px; flex:none; cursor:pointer; position:relative;
  background:var(--ink-line); transition:background 160ms ease;
}
body.avos .sSw i{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform 160ms cubic-bezier(.2,.9,.3,1.2);
}
body.avos .sSw.on{ background:var(--acc); }
body.avos .sSw.on i{ transform:translateX(16px); }

body.avos .sSel{
  height:26px; padding:0 22px 0 8px; cursor:pointer; appearance:none; -webkit-appearance:none;
  border:.5px solid var(--ink-line); border-radius:var(--r-ctl);
  background:var(--veil-window); color:var(--ink-2); font:400 12.5px/1 var(--ui);
}
body.avos .sSel:focus{ outline:none; border-color:var(--acc); }

/* --- the wallpaper application ------------------------------------------- */
body.avos .wallAdd{ display:flex; align-items:center; gap:10px; margin:0 0 4px; }
body.avos .wallAdd label{ cursor:pointer; }
body.avos .wallSay{ font:400 11.5px/1.4 var(--ui); color:var(--ink-3); }
body.avos .wallGrid{ grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); }
body.avos .wallOpt .th{ position:relative; overflow:hidden; }
body.avos .wallX{
  position:absolute; top:4px; right:4px; width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center; opacity:0;
  background:rgba(0,0,0,.55); color:#fff; transition:opacity 120ms ease;
}
body.avos .wallOpt:hover .wallX{ opacity:1; }
body.avos .wallX:hover{ background:var(--neg); }

/* the settings row is a div, so it needs the button reset a button gave it */
body.avos .sRow{ box-sizing:border-box; }
body.avos .sRow[role="button"]:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }

/* --- the orb is a particle field now, so the CSS bead comes off ---------- */
body.avos #orb::after{ content:none; }
body.avos #orb canvas{
  width:34px; height:34px; display:block; border-radius:50%; pointer-events:none;
}
/* --- the analyst's microphone -------------------------------------------- */
body.avos .aicMic{
  position:absolute; right:52px; bottom:12px; width:28px; height:28px;
  display:grid; place-items:center; border-radius:var(--r-ctl); cursor:pointer;
  border:.5px solid var(--ink-line) !important; background:var(--veil-sunk) !important;
  color:var(--ink-2) !important; z-index:2;
}
body.avos .aicMic:hover{ background:var(--ink-hover) !important; color:var(--ink) !important; }
body.avos .aicMic.on{
  background:var(--neg) !important; border-color:var(--neg) !important; color:#fff !important;
  animation:micPulse 1.1s ease-in-out infinite;
}
@keyframes micPulse{ 50%{ opacity:.62 } }
body.avos .aic-in{ position:relative; }
body.avos .aicMic + textarea, body.avos .aic-in textarea{ padding-right:0; }
body.avos .aic-in:has(.aicMic) textarea{ padding-right:34px; }

/* ══════════════════════════════════════════════════════════════════════════
   21. THE HEADING SAT 9px LEFT OF EVERYTHING BELOW IT.
   Measured, not guessed: .opbar, .azpanel, .controls and .facets are all
   panels at L28 with `padding:8px 9px`, so their content starts at 37.
   .op-head and .stub-head have no panel and no padding, so the heading, the
   description and the count all started at 28. Nine pixels is exactly enough
   to read as "the O is right at the corner", which is what Zumo saw.
   ────────────────────────────────────────────────────────────────────────── */
body.avos .winBody.old .op-head,
body.avos .winBody.old .stub-head{
  padding:2px 9px 12px !important; border-radius:0 !important;
  gap:18px;
}
body.avos .winBody.old .op-head > div:first-child,
body.avos .winBody.old .stub-head > div:first-child{ min-width:0; }
body.avos .winBody.old .op-n{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  padding-top:3px;
}
/* the section counter the other apps get, aligned with the same 9px */
body.avos .winBody.old .sec-n{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   22. THE VOICE STRIP
   Narrow, low, and it sits where the orb is, because it is the orb speaking.
   ────────────────────────────────────────────────────────────────────────── */
body.avos #vstrip{
  position:fixed; left:50%; bottom:60px; z-index:340;
  transform:translateX(-50%) translateY(10px) scale(.96);
  opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px;
  width:min(460px, calc(100vw - 40px)); padding:9px 10px 9px 14px;
  border-radius:22px;
  background-color:var(--veil-pop);
  -webkit-backdrop-filter:var(--fx-heavy); backdrop-filter:var(--fx-heavy);
  box-shadow:var(--edge-top), var(--edge-line), var(--cast-pop);
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.3,1.1);
}
body.avos #vstrip.on{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
body.avos #vwave{ width:150px; height:34px; flex:none; display:block; }
body.avos #vstrip .vtext{ flex:1; min-width:0; }
body.avos #vstrip .vtext span{
  display:block; font:400 13px/1.35 var(--ui); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos #vstrip .vtext i{
  display:block; margin-top:1px; font:400 11px/1.3 var(--ui); font-style:normal;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.avos #vstrip .vtext span:empty + i{ margin-top:0; }
body.avos .vclose{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer; background:var(--ink-hover);
  color:var(--ink-3);
}
body.avos .vclose:hover{ background:var(--ink-sel); color:var(--ink); }
/* while it is listening the orb reads as live */
body.avos.voicing #orb{ background:rgba(255,255,255,.52); transform:scale(1.06); }
body.avos[data-os="dark"].voicing #orb{ background:rgba(255,255,255,.22); }
@media (max-width:700px){
  body.avos #vstrip{ bottom:66px; width:calc(100vw - 24px); }
  body.avos #vwave{ width:96px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   23. THE BOT
   static/bot.js injects its own stylesheet with its own palette, so it is the
   one application that arrives already dressed. Its classes are all b-prefixed
   and they are named here one at a time rather than matched with wildcards,
   because [class*="card"] also catches somebody else's card and misses
   `bRail`, which is the plate the whole console sits on.

   Same seam as the others: the material, the type and the ink over the top.
   Meant to be deleted when the bot itself is rebuilt.
   ────────────────────────────────────────────────────────────────────────── */
/* ⚠ #botHost carries the class `botUI` and its own stylesheet paints it
   rgb(11,17,32). That is the dark navy slab the console sat on, and it
   survived every class-level override because it is on the host itself. */
body.avos #botHost.botUI{
  background:none !important; color:var(--ink) !important; font-family:var(--ui);
}
body.avos #botHost *{ font-family:var(--ui) !important; letter-spacing:0 !important; }

/* the plates */
body.avos #botHost .bRail,
body.avos #botHost .bMain,
body.avos #botHost .bNav,
body.avos #botHost .bStat,
body.avos #botHost .bCard,
body.avos #botHost .bList,
body.avos #botHost .bRow,
body.avos #botHost .bItem,
body.avos #botHost .bNote,
body.avos #botHost .bStatRow{
  background:var(--veil-sunk) !important;
  border-color:var(--ink-line) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:var(--ink-2) !important;
}
body.avos #botHost .bRail, body.avos #botHost .bMain{
  background:none !important; border:0 !important;
}
body.avos #botHost .bSeg{
  background:var(--ink-hover) !important; border-radius:8px !important;
  border:0 !important; box-shadow:none !important;
}
body.avos #botHost .bCaution, body.avos #botHost .bWarn{
  background:rgba(199,154,82,.12) !important;
  border:.5px solid rgba(199,154,82,.34) !important;
  border-radius:10px !important; color:var(--ink-2) !important;
}

/* type */
body.avos #botHost .bHead, body.avos #botHost .bCardH,
body.avos #botHost h1, body.avos #botHost h2, body.avos #botHost h3, body.avos #botHost h4{
  color:var(--ink) !important; text-transform:none !important;
}
body.avos #botHost .bHead{ font:600 15px/1.3 var(--ui) !important; }
body.avos #botHost .bCardH{ font:600 13.5px/1.35 var(--ui) !important; }
body.avos #botHost .bBrand{ color:var(--ink) !important; }
body.avos #botHost .bBrand .sm, body.avos #botHost .bNavB .sm{
  color:var(--ink-3) !important; text-transform:none !important;
}
body.avos #botHost p, body.avos #botHost li, body.avos #botHost td,
body.avos #botHost label, body.avos #botHost .bNote{ color:var(--ink-2) !important; }
body.avos #botHost .sm, body.avos #botHost .n, body.avos #botHost .l{
  color:var(--ink-3) !important;
}

/* the rail's own navigation */
body.avos #botHost .bNavB{
  background:none !important; border-radius:8px !important;
  color:var(--ink-2) !important; border:0 !important;
}
body.avos #botHost .bNavB:hover{ background:var(--ink-hover) !important; color:var(--ink) !important; }
body.avos #botHost .bNavB.on{
  background:var(--acc-wash) !important; color:var(--acc) !important;
}
body.avos #botHost .bNavSplit{ background:var(--ink-line) !important; }

/* controls */
body.avos #botHost .bBtn, body.avos #botHost button{
  border-radius:var(--r-ctl) !important;
  border:.5px solid var(--ink-line) !important;
  background:var(--veil-window) !important;
  color:var(--ink-2) !important;
  box-shadow:none !important; text-shadow:none !important;
  font:450 12px/1 var(--ui) !important; min-height:28px; padding:0 11px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.avos #botHost .bBtn:hover, body.avos #botHost button:hover{
  background:var(--ink-hover) !important; color:var(--ink) !important;
}
/* the bot marks its one real action per screen with .pri; keep that weight */
body.avos #botHost .bBtn.pri, body.avos #botHost button.pri,
body.avos #botHost .bBtn.sign{
  background:var(--acc) !important; border-color:transparent !important; color:#fff !important;
}
body.avos #botHost .bBtn.pri:hover, body.avos #botHost button.pri:hover,
body.avos #botHost .bBtn.sign:hover{ background:var(--acc-hi) !important; color:#fff !important; }
body.avos #botHost input, body.avos #botHost select, body.avos #botHost textarea{
  border-radius:var(--r-ctl) !important;
  border:.5px solid var(--ink-line) !important;
  background:var(--veil-window) !important;
  color:var(--ink) !important; box-shadow:none !important;
  font:400 12.5px/1.4 var(--ui) !important; min-height:28px;
}
body.avos #botHost input:focus, body.avos #botHost select:focus,
body.avos #botHost textarea:focus{ outline:none; border-color:var(--acc) !important; }

/* tags, dots, meters */
body.avos #botHost .bTag{
  border-radius:4px !important; border:.5px solid var(--ink-line) !important;
  background:var(--veil-sunk) !important; color:var(--ink-3) !important;
  text-transform:none !important; font:450 10.5px/1 var(--ui) !important;
}
body.avos #botHost .bTag.on{
  color:var(--acc) !important; border-color:var(--acc-edge) !important;
  background:var(--acc-wash) !important;
}
body.avos #botHost .bDot{ background:var(--ink-3) !important; }
body.avos #botHost .bDot.on{ background:var(--pos) !important; }
body.avos #botHost .bMeter{
  background:var(--ink-line) !important; border-radius:2px !important; overflow:hidden;
}
body.avos #botHost .bMeter > *{ background:var(--acc) !important; }

body.avos #botHost code, body.avos #botHost pre{
  font-family:var(--num) !important; color:var(--ink-2) !important;
  background:var(--ink-hover) !important; border-radius:5px !important;
}
body.avos #botHost hr{ border-color:var(--ink-line) !important; }
body.avos #botHost a{ color:var(--acc) !important; }