/* any2.video skin for the HUD console look. Loaded after public/hud-core.css
   (the palette-free core from ~/.claude/skills/hud-console), with the same
   media="(min-width:1024px) and (hover:hover) and (pointer:fine)", and every
   rule below sits inside that same query, so phones, tablets and touch screens
   render exactly as before. Body classes come from lib/html.mjs: .hxc on every
   page (header, footer, page shift), .hx on every page except /how/ (which keeps
   its own full-screen theme), .hx-<family> per page family.
   This file holds: the any2.video palette (scripts/palette.mjs output), the
   display face, and the map from this site's own selectors (.page-head, .tile,
   .btn, ...) onto the core's panel, card and button looks.
   Display face: Anton (OFL), self-hosted; body text stays JetBrains Mono. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@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){

/* ---------- palette: node ~/.claude/skills/hud-console/scripts/palette.mjs
   --a1 #1b5bff --a2 #ff3f8e --a3 #ffc31a --ink #0b1a4a --ground #fbfcff
   --pin muted=#6b7390 --pin text-muted=#4a5272 --pin ink-2=#2a3150
   --pin ground-2=#e6eaf5 --pin ground-3=#f6f8fd --pin smoke=#9ea6bf
   (pinned to the shades the site already used) ---------- */
.hxc{
  --hud-ink:#0b1a4a;--hud-ink-rgb:11,26,74;--hud-ink-2:#2a3150;
  --hud-ground:#fbfcff;--hud-ground-rgb:251,252,255;--hud-ground-2:#e6eaf5;--hud-ground-3:#f6f8fd;
  --hud-a1:#1b5bff;--hud-a1-rgb:27,91,255;
  --hud-a2:#ff3f8e;--hud-a2-rgb:255,63,142;
  --hud-a3:#ffc31a;--hud-a3-rgb:255,195,26;
  --hud-muted:#6b7390;--hud-muted-rgb:107,115,144;--hud-text-muted:#4a5272;
  --hud-a2-text:#e2005d;--hud-smoke-rgb:158,166,191;
  --hud-tint:1 1 0;
}
html[lang="ja"] .hxc{--hud-display:'Anton','Impact',var(--cjk-ja),sans-serif}
html[lang="zh-Hans"] .hxc{--hud-display:'Anton','Impact',var(--cjk-zh),sans-serif}
/* the marble leans toward one accent per family: a1 pools, a3 pools, a2 pools */
.hx-library,.hx-3d,.hx-tools{--hud-tint:1.25 .8 0}
.hx-resources,.hx-glossary,.hx-verifiedwalkthrough,.hx-aioperator{--hud-tint:.85 1.2 0}
.hx-sample,.hx-question,.hx-s{--hud-tint:.9 .9 .55}

/* ---------- header (lib/html.mjs adds the core's .hx-head / .hx-nav hooks) ---------- */
.hxc .chrome .dots{flex:none;white-space:nowrap}
.hxc .chrome .dots i{border-radius:0;width:10px;height:10px;margin-right:5px}
.hxc .chrome nav{gap:18px}
.hxc .chrome .nav-links{gap:6px}
.hxc .chrome .lang-switch{font:12px var(--mono);text-transform:none;letter-spacing:0;margin-left:8px}
.hxc .chrome .lang-btn{border-radius:0;border-color:var(--hud-ink);color:var(--hud-ink);padding:3px 8px}
.hxc .chrome .lang-menu{border-radius:0;border:1.5px solid var(--hud-ink);box-shadow:6px 6px 0 rgba(var(--hud-ink-rgb),.12)}
.hxc .chrome .lang-switch a::after,.hxc .chrome .lang-switch a::before{content:none}

.hx .i18n-note{position:relative;z-index:2;margin:0 calc(var(--pad) + 270px) 18px var(--pad);background:var(--hud-solid);border:1.5px dashed var(--hud-ink);border-radius:0}

/* ---------- panels: this site's blocks take the core .hx-panel look ---------- */
.hx main>.page-head,.hx article.res,.hx article.detail,.hx .res-body.glossary,.hx main>.cta-row,
.hx .terms-hub,.hx .bv-sec,.hx .cv-sec,.hx .v3d>section,.hx main>.sample-hs,.hx .sample-wrap>.sample,
.hx .law-contents,.hx main>form.sample,.hx .home-tool,.hx .why,.hx main>.hero,.hx .filters,
.hx main>.featured,.hx .shorts-page,.hx .bv-form,.hx .bv-stage{
  position:relative;z-index:1;margin:0 var(--pad) 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 main>.page-head::before,.hx article.res::before,.hx article.detail::before,.hx .res-body.glossary::before,.hx main>.cta-row::before,
.hx .terms-hub::before,.hx .bv-sec::before,.hx .cv-sec::before,.hx .v3d>section::before,.hx main>.sample-hs::before,.hx .sample-wrap>.sample::before,
.hx .law-contents::before,.hx main>form.sample::before,.hx .home-tool::before,.hx .why::before,.hx main>.hero::before,.hx .filters::before,
.hx main>.featured::before,.hx .shorts-page::before,.hx .bv-form::before,.hx .bv-stage::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 main>.page-head::after,.hx article.res::after,.hx article.detail::after,.hx .res-body.glossary::after,.hx main>.cta-row::after,
.hx .terms-hub::after,.hx .bv-sec::after,.hx .cv-sec::after,.hx .v3d>section::after,.hx main>.sample-hs::after,.hx .sample-wrap>.sample::after,
.hx .law-contents::after,.hx main>form.sample::after,.hx .home-tool::after,.hx .why::after,.hx main>.hero::after,.hx .filters::after,
.hx main>.featured::after,.hx .shorts-page::after,.hx .bv-form::after,.hx .bv-stage::after{
  content:"";position:absolute;right:-1.5px;bottom:-1.5px;width:12px;height:12px;background:var(--hud-a2);pointer-events:none}

/* panel sizes per family */
.hx main>.page-head{padding:22px 40px 30px}
.hx main>.page-head>p,.hx main>.page-head>.lib-channel{max-width:860px}
.hx article.res{max-width:840px;margin:0 auto 34px;padding:30px 56px 40px}
.hx .res-body.glossary{max-width:840px;margin:0 auto 34px;padding:28px 56px 36px}
.hx article.detail{padding:26px 40px 36px}
.hx .bv-sec,.hx .cv-sec .narrow{max-width:900px}
.hx main>.cta-row{padding:20px 34px 24px;align-items:center}
.hx .filters{padding:16px 34px 18px}
.hx main>.sample-hs{max-width:760px}

/* ---------- page titles in the display face ---------- */
.hx .page-head h1,.hx article.res h1,.hx article.detail h1{font-family:var(--hud-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;color:var(--hud-ink);overflow-wrap:break-word;hyphens:auto}
.hx .page-head h1{font-size:clamp(60px,6.2vw,100px);line-height:.92;margin:4px 0 18px;text-shadow:5px 5px 0 rgba(var(--hud-a3-rgb),.9)}
.hx article.res h1,.hx article.detail h1{font-size:clamp(40px,3.5vw,54px);line-height:.98;margin:8px 0 18px;text-shadow:3px 3px 0 rgba(var(--hud-a3-rgb),.9)}
html[lang="ja"] .hx :is(.page-head h1,article.res h1,article.detail h1),html[lang="zh-Hans"] .hx :is(.page-head h1,article.res h1,article.detail h1){font-weight:800;font-synthesis:none;letter-spacing:0;line-height:1.15}
.hx .prompt{font-size:12px;letter-spacing:.02em}
.hx .page-head>p{color:var(--hud-ink)}
.hx .page-head>p.muted{color:var(--hud-text-muted)}

/* section headings inside panels get the pink square */
.hx :is(.bv-sec,.cv-sec,.terms-hub,.law-contents,.shorts-page,.why,main>.featured,.home-tool)>h2::before,.hx .res-body>h2::before{content:"";display:inline-block;width:8px;height:8px;background:var(--hud-a2);margin-right:10px;vertical-align:.12em}

/* ---------- cards: this site's cards take the core .hx-card look ---------- */
.hx .tile,.hx .res-card,.hx .theme,.hx .claim,.hx .sample-side,.hx .watching,.hx .channel,.hx .lib-channel,.hx .spokes{
  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)}
.hx .tile::before,.hx .res-card::before,.hx .theme::before,.hx .claim::before,.hx .sample-side::before,.hx .watching::before,.hx .channel::before,.hx .lib-channel::before,.hx .spokes::before{
  content:"";position:absolute;left:8px;top:-11px;width:6px;height:6px;background:var(--hud-a2);pointer-events:none}
.hx .tile::after,.hx .res-card::after,.hx .theme::after,.hx .claim::after,.hx .sample-side::after,.hx .watching::after,.hx .channel::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 .tile,.hx .res-card,.hx .theme,.hx .claim,.hx .sample-side,.hx .channel{
  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 .tile:hover,.hx .res-card:hover,.hx .theme:hover,.hx .claim:hover,.hx .sample-side:hover,.hx .channel:hover{
  transform:perspective(1000px) translateZ(14px) rotateX(0) rotateY(0);border-color:var(--hud-ink);
  box-shadow:9px 11px 0 -2px rgba(var(--hud-a2-rgb),.45),0 24px 40px -20px rgba(var(--hud-ink-rgb),.5)}
.hx .watching{position:sticky;transform:perspective(1100px) rotateY(-4deg) rotateX(2deg);transform-origin:100% 50%;top:84px}
.hx .grid,.hx .res-grid{gap:22px}
.hx .wall{padding-left:var(--pad);padding-right:var(--pad)}
.hx .poster,.hx .poster.wide,.hx .poster.vertical{border-radius:0}
.hx .tile .poster{border:1px solid var(--hud-ink)}
.hx .tile-title,.hx .res-card h2{color:var(--hud-ink)}
.hx .badge{border-radius:0;border-color:var(--hud-ink);background:#fff;font-weight:700}
.hx .lib-channel{border-left-width:1.5px;margin-top:16px}
.hx .spokes{border-left-width:1.5px;background:#fff}

/* ---------- buttons, chips, fields: this site's .btn takes the core .hx-btn look ---------- */
.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 .btn:hover{background:var(--hud-a2);border-color:var(--hud-a2);color:#fff;box-shadow:4px 4px 0 var(--hud-ink)}
.hx .btn.pink{background:var(--hud-a2);border-color:var(--hud-a2);box-shadow:4px 4px 0 var(--hud-ink)}
.hx .btn.pink:hover{background:var(--hud-ink);border-color:var(--hud-ink);box-shadow:4px 4px 0 var(--hud-a2)}
.hx .btn.ghost{background:rgba(255,255,255,.75);color:var(--hud-ink);border-color:var(--hud-ink);box-shadow:none}
.hx .btn.ghost:hover{background:var(--hud-a3);color:var(--hud-ink)}
.hx .btn[disabled]{opacity:.6;cursor:default}
/* the slash wipe from the core, on this site's buttons */
.hx .btn{position:relative;overflow:hidden;isolation:isolate}
.hx .btn::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-40px;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);opacity:0}
.hx .btn.ghost::after{background:linear-gradient(90deg,rgba(var(--hud-a2-rgb),0),rgba(var(--hud-a2-rgb),.35) 40%,rgba(var(--hud-a2-rgb),.35) 60%,rgba(var(--hud-a2-rgb),0))}
.hx .btn:not([disabled]):hover::after{animation:hx-slash .46s cubic-bezier(.45,0,.2,1)}
.hx .chip{border-radius:0;border-color:var(--hud-ink);background:rgba(255,255,255,.85);color:var(--hud-ink)}
.hx .chip.on,.hx .chip[aria-pressed=true]{background:var(--hud-ink);color:#fff;box-shadow:3px 3px 0 var(--hud-a2)}
.hx .chips .muted{font-weight:700;color:var(--hud-ink)}
.hx .sample input,.hx .sample textarea,.hx .bv select{border-radius:0;border-color:rgba(var(--hud-ink-rgb),.45)}
.hx .status{border-radius:0}

/* ---------- reading: articles, tables, figures, FAQ ---------- */
.hx .res .lede,.hx .detail>.lede{color:var(--hud-ink)}
.hx .res-body h2{margin-top:34px}
.hx .res-body blockquote{background:#fff;border-left:4px solid var(--hud-a3);box-shadow:4px 4px 0 rgba(var(--hud-ink-rgb),.08)}
.hx .res-body pre{border-radius:0;border-color:var(--hud-ink);background:#fff}
.hx .res-fig img{border-radius:0;border-color:var(--hud-ink)}
.hx .res-fig.wide{margin-left:-28px;margin-right:-28px}
.hx .res-motion .sketch{border-radius:0;border-color:var(--hud-ink)}
.hx .table-wrap{border:1.5px solid var(--hud-ink);border-radius:0;background:#fff;box-shadow:6px 6px 0 rgba(var(--hud-ink-rgb),.08)}
.hx .table-wrap caption{color:var(--hud-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid var(--hud-ink)}
.hx .table-wrap thead th,.hx .cmp thead th{background:var(--hud-ink);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:0}
.hx .table-wrap thead th:last-child,.hx .cmp th:last-child{color:var(--hud-a3)}
.hx .table-wrap tbody tr:nth-child(even) td,.hx .table-wrap tbody tr:nth-child(even) th{background:rgba(var(--hud-ink-rgb),.03)}
.hx .res-cta{border-top:1.5px solid var(--hud-ink);padding-top:22px}
.hx .dl{border-radius:0;border-color:var(--hud-ink);border-left:4px solid var(--hud-a1);background:#fff}
.hx .trouble{border-radius:0;border-color:var(--hud-ink);border-left:4px solid var(--hud-a2)}
.hx .detail .log{border-radius:0;border-color:var(--hud-ink);background:#fff}
.hx .detail .yt,.hx .hero-panel{border-radius:0;border:1.5px solid var(--hud-ink);box-shadow:6px 6px 0 rgba(var(--hud-ink-rgb),.12)}
.hx .faq details{border-bottom:1px solid rgba(var(--hud-ink-rgb),.2);padding:12px 0}
.hx .faq summary{color:var(--hud-ink)}
.hx .faq summary::marker{color:var(--hud-a2)}
.hx .faq details[open] summary{color:var(--hud-a2)}
.hx .terms-list li{border-top-color:rgba(var(--hud-ink-rgb),.2)}
.hx .glossary h2 a,.hx .terms-list a{text-decoration:underline;text-decoration-color:var(--hud-a2);text-underline-offset:3px}

/* ---------- tools, forms, 3D: framed, never tilted ---------- */
.hx .bv{padding:0 var(--pad) 10px;gap:30px}
.hx .bv .bv-form,.hx .bv .bv-stage{margin:0}
.hx .bv-stage{top:76px}
.hx .bv-frame,.hx .bv-sample,.hx .bv-more{border-radius:0;border-color:var(--hud-ink)}
.hx .bv-cta{max-width:none}
.hx .sample-wrap{padding:0 var(--pad);gap:40px;grid-template-columns:minmax(0,680px) minmax(0,380px)}
.hx .sample-wrap>.sample{margin:0;max-width:none;padding:26px 30px 28px}
.hx .sample-side{position:sticky;margin:0;top:84px}
.hx main>.sample-hs{padding:26px 30px 28px}
.hx .v3d{max-width:none;padding:0}
.hx .v3d-hero{margin:0 var(--pad) 30px}
.hx .v3d section{margin:0 var(--pad) 30px}
.hx .v3d-clip video{border-radius:0;border:1.5px solid var(--hud-ink)}
.hx .v3d-hero video{box-shadow:var(--hud-shadow)}
.hx .cv-sec{max-width:none}
.hx .cv-sec.narrow{max-width:900px}
.hx .home-tool{max-width:none;border-radius:0}
.hx .feat .poster.wide,.hx .short .poster.vertical{border:1.5px solid var(--hud-ink)}

/* ---------- footer (lib/html.mjs adds the core's .hx-foot hook) ---------- */
.hxc .foot{margin:46px 0 0;padding:16px var(--pad) 26px;flex-wrap:wrap}
.hxc .foot .big{font:400 30px/1 var(--hud-display);letter-spacing:.02em;text-transform:uppercase;color:var(--hud-a2)}
.hxc .foot .big:hover{color:var(--hud-ink)}

/* ---------- the homepage story film keeps its own stage, framed ---------- */
.hx-home .s2v-film{background:transparent}
.hx-home .s2v-stage{inset:78px 30px 80px;border:1.5px solid var(--hud-ink);border-top:var(--hud-bar) solid var(--hud-ink);background:rgba(var(--hud-ground-rgb),.93);box-shadow:var(--hud-shadow)}
.hx-home .s2v-beat{padding:44px 56px 40px}
.hx-home .s2v-bar{background:rgba(var(--hud-ground-rgb),.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1.5px solid var(--hud-ink)}
.hx-home .s2v-logo img{background:transparent}
.hx-home .s2v-film.is-dark .s2v-logo,.hx-home .s2v-film.is-dark .s2v-logo-name{color:var(--hud-ink)}
.hx-home .s2v-film.is-dark .s2v-logo-sub{color:var(--hud-muted)}
.hx-home .hx-band{position:fixed;inset:0;z-index:35;height:auto;margin:0}
.hx-home .hx-oword{display:none}
.hx-home .hx-cap{position:fixed;left:50px;top:85px;color:#fff;font-weight:700;letter-spacing:.12em}
.hx-home .hx-date{position:fixed;top:8px;left:50%;right:auto;translate:-50% 0;min-width:0;padding:5px 10px 6px}
.hx-home .hx-date .hd-top b{font-size:30px}
.hx-home .hx-date .hd-y{font-size:18px}
.hx-home .hx-date .hd-meter{display:none}
.hx-home .hx-date .hd-stats{margin-top:4px;padding-top:4px}
.hx-home .hx-band .br{display:block;position:fixed;width:20px;height:20px;border:0 solid var(--hud-ink)}
.hx-home .hx-band .tl{left:20px;top:68px;border-left-width:2px;border-top-width:2px}
.hx-home .hx-band .tr{right:20px;top:68px;border-right-width:2px;border-top-width:2px}
.hx-home .hx-band .bl{left:20px;bottom:70px;border-left-width:2px;border-bottom-width:2px}
.hx-home .hx-band .brr{right:20px;bottom:70px;border-right-width:2px;border-bottom-width:2px}
.hx-home:has(.s2v-menu:not([hidden])) .hx-band{display:none}
.hx-home .s2v-film[data-vc-full]{background:var(--hud-ground-2)}
.hx-home:has(.s2v-film[data-vc-full]) .hx-band{display:none}

/* ---------- reduced motion: a still page ---------- */
@media (prefers-reduced-motion:reduce){
  .hx .tile,.hx .res-card,.hx .theme,.hx .claim,.hx .sample-side,.hx .channel{transition:none}
  .hx .btn:not([disabled]):hover::after{animation:none}
}

}