/* mrplanb.com skin for the HUD console look (hud-console skill). Loaded after
   hud-core.css with the same desktop media query. Only pages in the HUD theme
   get body.hxc/.hx (set by the inline script at the top of <body> and by
   src/components/HudConsole.tsx), so bright and dark never see these rules.
   HUD is a dark theme, so the palette is inverted against the core's light
   default: hex colours are the bright UI colours, the -rgb triplets are the
   dimmed tones the WebGL marble and the glass are mixed from. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){

/* (1) palette */
.hxc{
  --hud-ink:#a9eef9;--hud-ink-2:#6fb8cc;--hud-on-ink:#041320;
  --hud-ground:#040b16;--hud-ground-2:#071a2c;--hud-ground-3:#050f1e;
  --hud-a1:#2fdcef;--hud-a2:#ffb21f;--hud-a3:#3d8bff;
  --hud-muted:#6f93a8;--hud-text-muted:#8fb3c6;
  --hud-ground-rgb:4,11,22;--hud-smoke-rgb:14,36,56;--hud-ink-rgb:0,3,8;
  --hud-a1-rgb:16,92,110;--hud-a2-rgb:255,178,31;--hud-a3-rgb:20,52,120;--hud-muted-rgb:26,56,82;
  --hud-tint:1 .8 0;
  --hud-solid:rgba(6,16,30,.94);--hud-card:rgba(6,16,30,.9);--hud-glass:rgba(4,11,22,.8);
  --hud-shadow:8px 10px 0 -2px rgba(47,220,239,.08),0 22px 44px -22px rgba(0,0,0,.8);
  --hud-cshadow:6px 7px 0 -1px rgba(47,220,239,.07),0 16px 30px -18px rgba(0,0,0,.8);
  --hud-gutter:0px;
}
.hx-blog{--hud-tint:1.1 .7 0}
.hx-ledger{--hud-tint:.8 1.2 0}
.hx-tools{--hud-tint:.9 .9 .35}

/* ground: keep the HUD grid on the veil above the marble */
.hx::before{background:
  linear-gradient(hsl(187 92% 58%/.035) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,hsl(187 92% 58%/.035) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(4,11,22,.62) 0,rgba(4,11,22,.4) 30%,rgba(4,11,22,.3) 62%,rgba(4,11,22,.5) 100%)}
.hx .blog-control-room-backdrop{display:none}
/* opaque page wrappers would hide the marble: let it through, cards stay solid */
.hx main .min-h-screen:is(.bg-background,[class*="from-background"]){background:transparent}

/* inverted bars: text and barcodes on the light ink bars are dark */
.hx-pl{color:var(--hud-on-ink)}
.hx-pn{color:#0d4a5e}
.hx-pd .hud-barcode{fill:var(--hud-on-ink)}
.hx-date .hd-top i{color:var(--hud-on-ink)}
.hx-date .hd-meter{background:rgba(169,238,249,.14)}
.hx-vword{opacity:.5;text-shadow:0 0 28px rgba(47,220,239,.35)}
.hx-orbit{opacity:.22}
.hx-orbit .r-text{fill:var(--hud-ink-2)}
.hxc .foot-hud{border-bottom-color:rgba(169,238,249,.18);margin-bottom:28px}

/* big words come from data-w (a pseudo element), so the giant type is never a
   Largest Contentful Paint candidate */
.hx-vword::before,.hx-oword::before{content:attr(data-w)}
@media (prefers-reduced-motion:no-preference){
  .hx-vword{animation:hx-mp-vword .9s cubic-bezier(.16,1,.3,1) .15s backwards}
}
@keyframes hx-mp-vword{from{opacity:0;clip-path:inset(0 0 100% 0);translate:calc(var(--mx,0) * -14px + 40%) calc(-50% + var(--my,0) * -10px)}}

/* band: lies over reserved space, so it never moves the page */
.hx main{padding-top:132px}
.hx main>.hx-band{position:absolute;top:0;left:max(16px,calc((100vw - 1400px) / 2 + 32px));right:max(16px,calc((100vw - 1400px) / 2 + 32px));margin:0;z-index:-1}
.hx-oword{-webkit-text-stroke:1.5px rgba(169,238,249,.55)}
.hx-cap{top:22px}
.hx-date{top:22px}

/* header and footer hooks */
.hxc .hx-head{background:rgba(4,11,22,.86);border-bottom:1.5px solid rgba(169,238,249,.5);box-shadow:0 1px 0 rgba(47,220,239,.12),0 12px 40px rgba(0,0,0,.45)}
.hxc .hx-foot{background:rgba(4,11,22,.92);border-top:1.5px solid rgba(169,238,249,.5)}

/* (3) panels: the blog post card, Ledger report body */
.hx .blog-control-room-card:has(>.hx-pd),.hx .hx-panel{position:relative;z-index:1;border:1.5px solid var(--hud-ink) !important;border-top:var(--hud-bar) solid var(--hud-ink) !important;border-radius:0;background:var(--hud-solid);box-shadow:var(--hud-shadow);overflow:visible}
.hx .blog-control-room-card:has(>.hx-pd)::before,.hx .hx-panel::before{content:"";position:absolute;left:12px;top:calc(var(--hud-bar) * -1 + 9px);width:8px;height:8px;background:var(--hud-a2);pointer-events:none;z-index:3}
.hx .blog-control-room-card:has(>.hx-pd)::after,.hx .hx-panel::after{content:"";position:absolute;right:-1.5px;bottom:-1.5px;width:12px;height:12px;background:var(--hud-a2);pointer-events:none}
.hx .blog-control-room-card img{border-radius:0}

/* cards: shadcn <Card> inside the page gets the console frame, no tilt (reading first) */
.hx main .rounded-lg.border.bg-card{position:relative;border-radius:0;border:1.5px solid rgba(169,238,249,.42);border-top:8px solid rgba(169,238,249,.78);background:var(--hud-card);box-shadow:var(--hud-cshadow);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .2s}
.hx main .rounded-lg.border.bg-card:hover{transform:translateY(-2px);border-color:rgba(169,238,249,.7);box-shadow:7px 9px 0 -2px rgba(255,178,31,.35),0 22px 36px -20px rgba(0,0,0,.85)}
.hx main a:hover>.rounded-lg.border.bg-card,.hx main .rounded-lg.border.bg-card:has(a:hover){border-top-color:var(--hud-a2)}

/* page titles: display shadow in the highlight colour, words untouched */
.hx main h1{text-shadow:4px 4px 0 rgba(61,139,255,.35),0 0 18px rgba(47,220,239,.18)}

/* theme switched away mid-visit: nothing of the console stays */
body:not(.hxc) :is(.hud-canvas,.hx-pulse){display:none !important}

@media (prefers-reduced-motion:reduce){.hx main .rounded-lg.border.bg-card{transition:none}}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  body:not(.hx) .hx-pd{display:none !important}
  .hx-pn{right:14px}
}
/* the all-sizes "hidden" rule in the site CSS loads after this file: win on specificity */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hx .hx-fx,.hx .hx-band,.hx .hx-pd{display:block}
  .hxc .foot-hud{display:flex}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hx-ring-text{position:absolute;inset:0;width:100%;height:100%;color:var(--hud-ink-2);pointer-events:none}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* the outlined word sits wholly inside the band: many pages start with an opaque hero */
  .hx main>.hx-band .hx-oword{bottom:6px;font-size:min(104px,calc(820px / (.46 * var(--n))))}
}