/* =============================================================================
 * threed.css — OS-wide RED/BLUE anaglyph 3D. Behind body.threed (fully
 * reversible). Text inherits a red/blue ghost offset (= horizontal parallax =
 * depth through the glasses); foreground layers pop harder; panels + images get
 * an edge fringe. The 2nd channel hue is the var --mt-e2 (blue, default).
 * ===========================================================================*/
:root{ --mt-e1:#ff2a2a; --mt-e2:#2d8bff; }   /* red ; blue (default). cyan = #00e5ff */

body.threed{ text-shadow:-4px 0 0 var(--mt-e1), 4px 0 0 var(--mt-e2); }

/* keep form fields legible — no ghost on typed input */
body.threed input,body.threed select,body.threed textarea,body.threed .field{ text-shadow:none !important; }

/* DEEP pop — big foreground type sits forward */
body.threed .bg-row__track,
body.threed h1,body.threed h2,
body.threed .geo-h1,body.threed #bootos .logo,body.threed .logo,
body.threed .knm,body.threed .vs-mark,body.threed .vwin,
body.threed .cmp-side b,body.threed .sf-code,
body.threed .ov h1{
  -webkit-text-stroke:0 !important;
  text-shadow:-11px 0 0 var(--mt-e1), 11px 0 0 var(--mt-e2) !important;
}
/* MID pop — headings / titlebars / labels */
body.threed h3,body.threed .tt,body.threed .lbl,body.threed .geo-tag,
body.threed .kpr,body.threed .eyebrow,body.threed .bt{
  text-shadow:-7px 0 0 var(--mt-e1), 7px 0 0 var(--mt-e2) !important;
}

/* panels / cards / windows — red/cyan edge fringe gives them physical depth */
body.threed .win,body.threed .kit,body.threed .wcard,body.threed .box,
body.threed .cmp-out,body.threed .panel,body.threed .geo-inner,
body.threed .vchip,body.threed .cpanel,body.threed .bevel{
  box-shadow:-6px 0 0 color-mix(in srgb,var(--mt-e1) 55%,transparent),
              6px 0 0 color-mix(in srgb,var(--mt-e2) 55%,transparent) !important;
}
/* photos / svg icons pop via duplicated colored drop-shadows */
body.threed img,body.threed .gi,body.threed .kimg,body.threed .dicon .gi{
  filter:drop-shadow(-6px 0 0 color-mix(in srgb,var(--mt-e1) 60%,transparent))
         drop-shadow(6px 0 0 color-mix(in srgb,var(--mt-e2) 60%,transparent));
}

/* a tiny persistent reminder while 3D is on (OS shell only) */
body.threed #tray .d3{ color:#fff; background:linear-gradient(90deg,#ff2d2d 50%,#2d8bff 50%);
  padding:2px 7px;border-radius:3px;font-weight:800;text-shadow:none;cursor:pointer }
