/* HUD console look: core stylesheet (palette-free).
   Source of truth: ~/.claude/skills/hud-console/assets/hud-core.css. A site uses
   it unchanged and adds two things of its own: a palette block (scripts/palette.mjs)
   and a skin that maps its own selectors (see assets/hud-skin.example.css).

   Desktop only. Link it with media="(min-width:1024px) and (hover:hover) and
   (pointer:fine)"; every rule also sits inside that query, so phones, tablets and
   touch screens never see it. Body classes: .hxc on every page (header, footer,
   page shift), .hx on pages that take the full look, .hx-<family> per family.
   Every colour is a custom property: --hud-ink, --hud-ground, --hud-a1/2/3,
   --hud-muted, --hud-text-muted, --hud-ink-2, their -rgb triplets, and the two
   ground tints. Nothing here changes a text node; decoration is aria-hidden. */

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

/* ---------- tokens: neutral defaults; a site's palette block overrides them ---------- */
:where(.hxc,.hud){
  --hud-ink:#111827;--hud-ink-rgb:17,24,39;--hud-ink-2:#2b3448;
  --hud-ground:#fafafa;--hud-ground-rgb:250,250,250;--hud-ground-2:#e7e8ec;--hud-ground-3:#f5f6f8;
  --hud-a1:#2563eb;--hud-a1-rgb:37,99,235;--hud-a2:#e11d48;--hud-a2-rgb:225,29,72;--hud-a3:#f59e0b;--hud-a3-rgb:245,158,11;
  --hud-muted:#6b7280;--hud-muted-rgb:107,114,128;--hud-text-muted:#4b5563;--hud-smoke-rgb:156,163,175;
  --hud-tint:1 1 0;
}
.hxc{
  --hud-display:'Anton','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --hud-cjk:'Songti SC','STSong','Noto Serif SC','Source Han Serif SC','Noto Serif CJK SC','SimSun',serif;
  --hud-mono-f:var(--hud-mono,var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace));
  --hud-glass:rgba(var(--hud-ground-rgb),.8);--hud-card:rgba(var(--hud-ground-rgb),.9);--hud-solid:rgba(var(--hud-ground-rgb),.95);
  --hud-shadow:8px 10px 0 -2px rgba(var(--hud-ink-rgb),.1),0 22px 44px -22px rgba(var(--hud-ink-rgb),.45);
  --hud-cshadow:6px 7px 0 -1px rgba(var(--hud-ink-rgb),.1),0 16px 30px -18px rgba(var(--hud-ink-rgb),.45);
  --hud-bar:26px;--hud-gutter:var(--hud-pad,var(--pad,32px));
}

/* ---------- ground: static gradient under the WebGL marble (hud-bg.js) ---------- */
.hx{
  background:
    radial-gradient(1100px 680px at 72% 28%,rgba(var(--hud-a1-rgb),.22),rgba(var(--hud-a1-rgb),0) 62%),
    radial-gradient(900px 620px at 18% 78%,rgba(var(--hud-muted-rgb),.32),rgba(var(--hud-muted-rgb),0) 64%),
    radial-gradient(700px 500px at 88% 88%,rgba(var(--hud-a3-rgb),.28),rgba(var(--hud-a3-rgb),0) 60%),
    linear-gradient(158deg,var(--hud-ground) 0%,var(--hud-ground-2) 46%,var(--hud-ground-3) 100%);
  background-attachment:fixed;
}
.hud-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-3;display:block;pointer-events:none;opacity:0;transition:opacity .45s ease}
.hud-canvas.on{opacity:1}
/* a veil over the marble keeps the edges calm next to the reading panels */
.hx::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--hud-ground-rgb),.5) 0,rgba(var(--hud-ground-rgb),.22) 28%,rgba(var(--hud-ground-rgb),.08) 60%,rgba(var(--hud-ground-rgb),.26) 100%)}

/* ---------- fixed decoration: orbit ring, giant vertical word, iris ---------- */
.hx-fx{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hx-orbit{position:absolute;left:66%;top:60%;width:min(112vmin,1120px);aspect-ratio:1;translate:calc(-50% + var(--mx,0) * 10px) calc(-50% + var(--my,0) * 8px);opacity:.3}
.hx-orbit-a,.hx-orbit-b{position:absolute;inset:0;width:100%;height:100%}
.hx-orbit svg{display:block;width:100%;height:100%;overflow:visible}
.hx-orbit .r-text{font:400 13px var(--hud-display);letter-spacing:.08em;fill:var(--hud-ink-2)}
.hx-orbit .r-ticks{fill:none;stroke:var(--hud-ink);stroke-width:6;stroke-dasharray:1 7;opacity:.55}
.hx-orbit .r-thin{fill:none;stroke:var(--hud-ink);stroke-width:.8;opacity:.45}
.hx-orbit-b circle{fill:none;stroke:var(--hud-a2);stroke-width:3;stroke-dasharray:120 40 30 60 8 50;opacity:.7}
@keyframes hx-spin{to{rotate:360deg}}
@keyframes hx-spin-r{to{rotate:-360deg}}
.hx-orbit-a{animation:hx-spin 160s linear infinite}
.hx-orbit-b{animation:hx-spin-r 70s linear infinite}
html[data-exporting] .hx-orbit-a,html[data-exporting] .hx-orbit-b{animation-play-state:paused}
.hx-vword{position:absolute;right:-6px;top:52%;translate:calc(var(--mx,0) * -14px) calc(-50% + var(--my,0) * -10px);writing-mode:vertical-rl;font-family:var(--hud-display);font-weight:400;font-size:min(24vh,220px,calc(74vh / (.46 * var(--n))));line-height:.9;letter-spacing:.01em;color:var(--hud-a1);opacity:.82;text-shadow:0 1px 0 rgba(255,255,255,.4);white-space:nowrap}
.hx-kanji{display:none;position:absolute;right:-4px;top:52%;translate:calc(var(--mx,0) * -14px) calc(-50% + var(--my,0) * -10px);writing-mode:vertical-rl;font-family:var(--hud-cjk);font-weight:900;font-size:min(20vh,210px,calc(76vh / var(--n)));line-height:1;color:var(--hud-a1);opacity:.82}
.hx-kanji::before{content:attr(data-zh)}
.hx-kanji.hx-split::before{content:none}
html[lang^="zh"] .hx-kanji{display:block;white-space:nowrap}
html[lang^="zh"] .hx-vword{display:none}
.hx-vword i,.hx-kanji i{font-style:normal;display:inline-block}
.hx-iris{position:absolute;left:50%;top:50%;width:min(80vmin,720px);aspect-ratio:1;translate:-50% -50%;visibility:hidden;pointer-events:none}
.hx-iris svg{display:block;width:100%;height:100%;overflow:visible}
.hx-iris .i-text{font:400 17px var(--hud-display);letter-spacing:.06em;fill:var(--hud-ink)}
.hx-iris .i-ticks{fill:none;stroke:var(--hud-ink);stroke-width:8;stroke-dasharray:1.2 6;opacity:.7}
.hx-iris .i-red{fill:none;stroke:var(--hud-a2);stroke-width:16;stroke-dasharray:150 26 60 40 22 30;opacity:.8}
.hx-iris .i-red2{fill:none;stroke:var(--hud-a2);stroke-width:3;opacity:.55}
.hx-iris .i-mint{fill:rgba(var(--hud-a3-rgb),.92);stroke:var(--hud-ink);stroke-width:1.2}
.hx-iris .i-pupil{fill:var(--hud-ink)}
.hx-iris .i-glint{fill:#fff;opacity:.9}
.hx-iris .i-cross{fill:none;stroke:var(--hud-ink);stroke-width:2.5}
/* iris gradients: stops coloured from the palette (class on <stop>) */
.hx-iris .g-a1,.hud-iris .g-a1{stop-color:var(--hud-a1)}
.hx-iris .g-a2,.hud-iris .g-a2{stop-color:var(--hud-a2)}
.hx-iris .g-a3,.hud-iris .g-a3{stop-color:var(--hud-a3)}

/* ---------- header hook: .hx-head (the bar), .hx-nav (its links) ---------- */
.hxc .hx-head{z-index:30;background:rgba(var(--hud-ground-rgb),.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--hud-ink);view-transition-name:hx-chrome}
.hxc .hx-nav{font-family:var(--hud-display);font-size:17px;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--hud-ink)}
.hxc .hx-nav a{position:relative;isolation:isolate;padding:6px 8px 5px}
.hxc .hx-nav a:hover{color:var(--hud-a2)}
/* selected tab: an ink bar wipes in from the left, a pink offset tail behind it */
.hxc .hx-nav a:is(.active,[aria-current="page"]):not(.cta,.hx-cta){color:#fff}
.hxc .hx-nav a:is(.active,[aria-current="page"]):not(.cta,.hx-cta)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hud-ink);box-shadow:4px 4px 0 var(--hud-a2);transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .hxc .hx-nav a:is(.active,[aria-current="page"]):not(.cta,.hx-cta){animation:hx-tab-c .42s cubic-bezier(.16,1,.3,1) .14s backwards}
  .hxc .hx-nav a:is(.active,[aria-current="page"]):not(.cta,.hx-cta)::before{animation:hx-tab .42s cubic-bezier(.16,1,.3,1) .14s backwards}
}
@keyframes hx-tab{from{transform:scaleX(0);box-shadow:0 0 0 var(--hud-a2)}}
@keyframes hx-tab-c{from{color:var(--hud-ink)}}
/* hover: a thin pink underline sweeps in from the left */
.hxc .hx-nav a:not(.cta,.hx-cta,.active,[aria-current="page"])::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--hud-a2);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.hxc .hx-nav a:not(.cta,.hx-cta,.active,[aria-current="page"]):hover::after{transform:scaleX(1)}
.hxc .hx-head .hx-nav a:is(.cta,.hx-cta){background:var(--hud-a2);color:#fff;font-weight:400;padding:8px 13px 7px;box-shadow:4px 4px 0 var(--hud-ink);transition:background .2s,box-shadow .2s;overflow:hidden}
.hxc .hx-head .hx-nav a:is(.cta,.hx-cta):hover{background:var(--hud-ink);color:#fff;box-shadow:4px 4px 0 var(--hud-a2)}

/* ---------- band over the page head: outlined word, caption, live date ---------- */
.hx main{position:relative}
.hx-band{display:block;position:relative;z-index:0;height:132px;margin:0 var(--hud-gutter);pointer-events:none}
.hx-oword{position:absolute;left:-6px;bottom:-34px;translate:calc(var(--mx,0) * 8px) calc(var(--my,0) * 5px);font-family:var(--hud-display);font-weight:400;font-size:min(160px,calc(1000px / (.46 * var(--n))));line-height:.8;letter-spacing:-.005em;color:transparent;-webkit-text-stroke:2px var(--hud-ink);white-space:nowrap;opacity:.9}
.hx-cap{position:absolute;left:0;top:18px;font:400 9px/1.2 var(--hud-mono-f);letter-spacing:.16em;color:var(--hud-text-muted);text-transform:uppercase;white-space:nowrap}
.hx-cap::before{content:"";display:inline-block;width:8px;height:8px;background:var(--hud-a2);margin-right:8px;vertical-align:-1px}
.hx-caret{display:inline-block;width:.62em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:currentColor;animation:hx-blink 1s steps(1) infinite}
@keyframes hx-blink{50%{opacity:0}}
.hx-band .br{display:none}
.hx-date{position:absolute;right:0;top:18px;min-width:236px;padding:8px 12px 9px;background:var(--hud-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid var(--hud-ink);box-shadow:5px 5px 0 rgba(var(--hud-ink-rgb),.12);visibility:hidden}
.hx-js .hx-date{visibility:visible}
.hx-date .hd-top{display:flex;align-items:flex-end;gap:2px;font-family:var(--hud-display);line-height:.92;color:var(--hud-ink)}
.hx-date .hd-y{font-size:24px}
.hx-date .hd-top b{font-size:44px;font-weight:400;letter-spacing:.01em}
.hx-date .hd-top i{font:700 11px/1 var(--hud-mono-f);font-style:normal;letter-spacing:.08em;background:var(--hud-ink);color:#fff;padding:4px 6px;margin-left:auto;align-self:flex-start}
.hx-date .hd-stats{display:flex;gap:10px;margin-top:6px;padding-top:5px;border-top:1px solid var(--hud-ink);font:700 10px/1.3 var(--hud-mono-f);letter-spacing:.06em;color:var(--hud-ink)}
.hx-date .hd-stats b{color:var(--hud-a2)}
.hx-date .hd-stats span:last-child{margin-left:auto;font-weight:400;color:var(--hud-muted)}
.hx-date .hd-meter{height:3px;margin-top:6px;background:rgba(var(--hud-ink-rgb),.14)}
.hx-date .hd-meter i{display:block;height:100%;width:0;background:var(--hud-a2);transition:width .3s ease}

/* ---------- panel hook: .hx-panel (frosted, ink header bar, pink squares) ---------- */
.hx .hx-panel{position:relative;z-index:1;margin:0 var(--hud-gutter) 30px;padding:24px 34px 28px;max-width:none;
  background:var(--hud-solid);border:1.5px solid var(--hud-ink);border-top:var(--hud-bar) solid var(--hud-ink);border-radius:0;box-shadow:var(--hud-shadow)}
.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}
.hx .hx-panel::after{content:"";position:absolute;right:-1.5px;bottom:-1.5px;width:12px;height:12px;background:var(--hud-a2);pointer-events:none}
/* the main panel's own deco: corner brackets, bar label, number, barcode */
.hx-pd{display:block;position:absolute;left:-1.5px;right:-1.5px;top:calc(var(--hud-bar) * -1 - 1.5px);bottom:-1.5px;pointer-events:none;z-index:2}
.hx-pd .br{position:absolute;width:18px;height:18px;border:0 solid var(--hud-ink)}
.hx-pd .tl{left:-9px;top:-9px;border-left-width:2px;border-top-width:2px}
.hx-pd .tr{right:-9px;top:-9px;border-right-width:2px;border-top-width:2px}
.hx-pd .bl{left:-9px;bottom:-9px;border-left-width:2px;border-bottom-width:2px}
.hx-pd .brr{right:-9px;bottom:-9px;border-right-width:2px;border-bottom-width:2px}
.hx-pl{position:absolute;left:30px;top:7px;font:700 11px/14px var(--hud-mono-f);letter-spacing:.12em;color:#fff;text-transform:uppercase;white-space:nowrap}
.hx-pn{position:absolute;right:124px;top:7px;font:400 11px/14px var(--hud-mono-f);letter-spacing:.12em;color:var(--hud-a3)}
.hx-pd .hud-barcode{position:absolute;right:12px;top:7px;fill:#fff;opacity:.85}

/* ---------- card hook: .hx-card (frosted, ink bar, slight perspective tilt) ---------- */
.hx .hx-card{position:relative;border:1.5px solid var(--hud-ink);border-top:16px solid var(--hud-ink);border-radius:0;background:var(--hud-card);box-shadow:var(--hud-cshadow);
  transform:perspective(1000px) rotateX(2.5deg) rotateY(-3.5deg);transform-origin:50% 60%;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .2s}
.hx .hx-card::before{content:"";position:absolute;left:8px;top:-11px;width:6px;height:6px;background:var(--hud-a2);pointer-events:none}
.hx .hx-card::after{content:"";position:absolute;right:8px;top:-11px;width:44px;height:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 1px,transparent 1px 3px,rgba(255,255,255,.8) 3px 5px,transparent 5px 6px,rgba(255,255,255,.8) 6px 7px,transparent 7px 9px)}
.hx .hx-card:hover{transform:perspective(1000px) translateZ(14px) rotateX(0) rotateY(0);
  box-shadow:9px 11px 0 -2px rgba(var(--hud-a2-rgb),.45),0 24px 40px -20px rgba(var(--hud-ink-rgb),.5)}

/* ---------- button hook: .hx-btn (square, offset shadow, slash wipe on hover) ---------- */
.hx .hx-btn{border-radius:0;background:var(--hud-ink);border-color:var(--hud-ink);color:#fff;box-shadow:4px 4px 0 var(--hud-a2);transition:background .2s,box-shadow .2s,color .2s}
.hx .hx-btn:hover{background:var(--hud-a2);border-color:var(--hud-a2);color:#fff;box-shadow:4px 4px 0 var(--hud-ink)}
.hx .hx-btn.alt{background:var(--hud-a2);border-color:var(--hud-a2);box-shadow:4px 4px 0 var(--hud-ink)}
.hx .hx-btn.alt:hover{background:var(--hud-ink);border-color:var(--hud-ink);box-shadow:4px 4px 0 var(--hud-a2)}
/* the slash: a skewed bar crosses a button once as the pointer arrives (the
   state-change wipe from the reference). Put .hx-slash on anything else. */
.hx .hx-btn,.hx .hx-slash,.hxc .hx-nav a:is(.cta,.hx-cta){position:relative;overflow:hidden;isolation:isolate}
.hx .hx-btn::after,.hx .hx-slash::after,.hxc .hx-nav a:is(.cta,.hx-cta)::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:22px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 40%,rgba(255,255,255,.55) 60%,rgba(255,255,255,0));
  transform:skewX(-24deg);left:-40px;opacity:0}
.hx .hx-btn:hover::after,.hx .hx-slash:hover::after,.hxc .hx-nav a:is(.cta,.hx-cta):hover::after{animation:hx-slash .46s cubic-bezier(.45,0,.2,1)}
@keyframes hx-slash{0%{left:-40px;opacity:1}100%{left:calc(100% + 18px);opacity:1}}

/* ---------- click pulse: one ring at the pointer (hud-site.js) ---------- */
.hx-pulse{position:fixed;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border:1.5px solid var(--hud-a2);border-radius:50%;pointer-events:none;z-index:2147483000;opacity:0;
  box-shadow:0 0 0 5px rgba(var(--hud-a2-rgb),.12)}
.hx-pulse::after{content:"";position:absolute;inset:22px;border:1.5px solid var(--hud-ink);border-radius:50%}

/* ---------- footer hook: .hx-foot, and the status line .foot-hud ---------- */
.hxc .hx-foot{position:relative;z-index:2;max-width:none;background:rgba(var(--hud-ground-rgb),.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1.5px solid var(--hud-ink)}
.hxc .foot-hud{display:flex;align-items:center;gap:16px;flex:1 1 100%;padding-bottom:12px;border-bottom:1px solid rgba(var(--hud-ink-rgb),.22);font:400 9px/1 var(--hud-mono-f);letter-spacing:.16em;text-transform:uppercase;color:var(--hud-text-muted);white-space:nowrap}
.hxc .foot-hud .sq{display:inline-block;width:8px;height:8px;background:var(--hud-a2);margin-right:-8px;animation:hx-led 2.4s steps(1) infinite}
@keyframes hx-led{0%,62%{opacity:1}63%,70%{opacity:.25}71%,84%{opacity:1}85%,90%{opacity:.25}}
.hxc .foot-hud>span:nth-child(2){font:400 15px/1 var(--hud-display);letter-spacing:.06em;color:var(--hud-ink)}
.hxc .foot-hud .hud-barcode{fill:var(--hud-ink);margin-left:auto}
.hxc .foot-hud>span:last-child{color:var(--hud-ink);font-weight:700}

/* ---------- reduced motion: a still page ---------- */
@media (prefers-reduced-motion:reduce){
  .hx-orbit-a,.hx-orbit-b,.hxc .foot-hud .sq,.hx-caret{animation:none}
  .hud-canvas{transition:none}
  .hx .hx-card,.hxc .hx-nav a::after{transition:none}
  .hx .hx-btn:hover::after,.hx .hx-slash:hover::after,.hxc .hx-nav a:is(.cta,.hx-cta):hover::after{animation:none}
}

/* ---------- the shift between pages: cross-document view transitions ----------
   The old page zooms forward, blurs and fades; the new one arrives slightly
   rotated and scaled and settles; the iris passes through the centre. The
   header keeps its place. 680 ms in all. Browsers without cross-document view
   transitions simply navigate; reduced motion turns it off. Copy this block
   alone if a site only wants the shift. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:
    radial-gradient(1100px 680px at 72% 28%,rgba(var(--hud-a1-rgb),.22),rgba(var(--hud-a1-rgb),0) 62%),
    radial-gradient(700px 500px at 88% 88%,rgba(var(--hud-a3-rgb),.28),rgba(var(--hud-a3-rgb),0) 60%),
    linear-gradient(158deg,var(--hud-ground) 0%,var(--hud-ground-2) 46%,var(--hud-ground-3) 100%)}
  ::view-transition-old(root){animation:hx-vt-out .34s cubic-bezier(.55,0,.8,.25) both;transform-origin:50% 45%}
  ::view-transition-new(root){animation:hx-vt-in .58s cubic-bezier(.16,1,.3,1) .1s both;transform-origin:50% 45%}
  ::view-transition-group(hx-chrome){animation-duration:.3s}
  ::view-transition-old(hx-chrome),::view-transition-new(hx-chrome){animation-duration:.3s}
  .hx-iris{view-transition-name:hx-iris}
  html:active-view-transition .hx-iris{visibility:visible}
  ::view-transition-group(hx-iris){animation:none}
  ::view-transition-old(hx-iris){display:none}
  ::view-transition-new(hx-iris){animation:hx-vt-iris .68s cubic-bezier(.4,0,.2,1) both}
  @keyframes hx-vt-out{to{opacity:0;transform:scale(1.14) rotate(1.5deg);filter:blur(8px)}}
  @keyframes hx-vt-in{from{opacity:0;transform:perspective(1400px) translate3d(0,3%,0) rotateX(9deg) rotate(-4deg) scale(.88)}}
  @keyframes hx-vt-iris{
    0%{opacity:0;transform:scale(.22) rotate(0deg)}
    36%{opacity:1;transform:scale(.78) rotate(40deg)}
    60%{opacity:.92;transform:scale(1.4) rotate(70deg)}
    100%{opacity:0;transform:scale(3.3) rotate(110deg)}}
}

}
@media print{.hx-fx,.hx-band,.hx-pd,.foot-hud,.hud-canvas,.hx-pulse{display:none}}