/* node_modules/katex/dist/katex.min.css */
@font-face {
  font-display: block;
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_AMS-Regular.woff2") format("woff2"),
    url("./media/KaTeX_AMS-Regular.woff") format("woff"),
    url("./media/KaTeX_AMS-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src:
    url("./media/KaTeX_Caligraphic-Bold.woff2") format("woff2"),
    url("./media/KaTeX_Caligraphic-Bold.woff") format("woff"),
    url("./media/KaTeX_Caligraphic-Bold.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Caligraphic-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Caligraphic-Regular.woff") format("woff"),
    url("./media/KaTeX_Caligraphic-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src:
    url("./media/KaTeX_Fraktur-Bold.woff2") format("woff2"),
    url("./media/KaTeX_Fraktur-Bold.woff") format("woff"),
    url("./media/KaTeX_Fraktur-Bold.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Fraktur-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Fraktur-Regular.woff") format("woff"),
    url("./media/KaTeX_Fraktur-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src:
    url("./media/KaTeX_Main-Bold.woff2") format("woff2"),
    url("./media/KaTeX_Main-Bold.woff") format("woff"),
    url("./media/KaTeX_Main-Bold.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src:
    url("./media/KaTeX_Main-BoldItalic.woff2") format("woff2"),
    url("./media/KaTeX_Main-BoldItalic.woff") format("woff"),
    url("./media/KaTeX_Main-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src:
    url("./media/KaTeX_Main-Italic.woff2") format("woff2"),
    url("./media/KaTeX_Main-Italic.woff") format("woff"),
    url("./media/KaTeX_Main-Italic.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Main-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Main-Regular.woff") format("woff"),
    url("./media/KaTeX_Main-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src:
    url("./media/KaTeX_Math-BoldItalic.woff2") format("woff2"),
    url("./media/KaTeX_Math-BoldItalic.woff") format("woff"),
    url("./media/KaTeX_Math-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src:
    url("./media/KaTeX_Math-Italic.woff2") format("woff2"),
    url("./media/KaTeX_Math-Italic.woff") format("woff"),
    url("./media/KaTeX_Math-Italic.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src:
    url("./media/KaTeX_SansSerif-Bold.woff2") format("woff2"),
    url("./media/KaTeX_SansSerif-Bold.woff") format("woff"),
    url("./media/KaTeX_SansSerif-Bold.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src:
    url("./media/KaTeX_SansSerif-Italic.woff2") format("woff2"),
    url("./media/KaTeX_SansSerif-Italic.woff") format("woff"),
    url("./media/KaTeX_SansSerif-Italic.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_SansSerif-Regular.woff2") format("woff2"),
    url("./media/KaTeX_SansSerif-Regular.woff") format("woff"),
    url("./media/KaTeX_SansSerif-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Script-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Script-Regular.woff") format("woff"),
    url("./media/KaTeX_Script-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Size1-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Size1-Regular.woff") format("woff"),
    url("./media/KaTeX_Size1-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Size2-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Size2-Regular.woff") format("woff"),
    url("./media/KaTeX_Size2-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Size3-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Size3-Regular.woff") format("woff"),
    url("./media/KaTeX_Size3-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Size4-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Size4-Regular.woff") format("woff"),
    url("./media/KaTeX_Size4-Regular.ttf") format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src:
    url("./media/KaTeX_Typewriter-Regular.woff2") format("woff2"),
    url("./media/KaTeX_Typewriter-Regular.woff") format("woff"),
    url("./media/KaTeX_Typewriter-Regular.ttf") format("truetype");
}
.katex {
  font:
    normal 1.21em KaTeX_Main,
    Times New Roman,
    serif;
  line-height: 1.2;
  position: relative;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.16.47";
}
.katex .katex-mathml {
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html > .newline {
  display: block;
}
.katex .base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .base,
.katex .strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,
.katex .mathbb,
.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,
.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,
.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,
.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,
.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,
.katex .mathsfit,
.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist > span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist > span > span {
  display: inline-block;
}
.katex .vlist > span > .pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .hbox {
  width: 100%;
}
.katex .hbox,
.katex .thinbox {
  display: inline-flex;
  flex-direction: row;
}
.katex .thinbox {
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac > span > span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .hdashline,
.katex .hline,
.katex .mfrac .frac-line,
.katex .overline .overline-line,
.katex .rule,
.katex .underline .underline-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .smash {
  display: inline;
  line-height: 0;
}
.katex .clap,
.katex .llap,
.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap > .inner,
.katex .llap > .inner,
.katex .rlap > .inner {
  position: absolute;
}
.katex .clap > .fix,
.katex .llap > .fix,
.katex .rlap > .fix {
  display: inline-block;
}
.katex .llap > .inner {
  right: 0;
}
.katex .clap > .inner,
.katex .rlap > .inner {
  left: 0;
}
.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .hline,
.katex .overline .overline-line,
.katex .underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt > .root {
  margin-left: .2777777778em;
  margin-right: -.5555555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,
.katex .sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,
.katex .sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,
.katex .sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,
.katex .sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,
.katex .sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,
.katex .sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,
.katex .sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,
.katex .sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,
.katex .sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,
.katex .sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,
.katex .sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,
.katex .sizing.reset-size2.size1 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,
.katex .sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,
.katex .sizing.reset-size2.size3 {
  font-size: 1.1666666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,
.katex .sizing.reset-size2.size4 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,
.katex .sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,
.katex .sizing.reset-size2.size6 {
  font-size: 1.6666666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,
.katex .sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,
.katex .sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,
.katex .sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,
.katex .sizing.reset-size2.size10 {
  font-size: 3.4566666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,
.katex .sizing.reset-size2.size11 {
  font-size: 4.1466666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,
.katex .sizing.reset-size3.size1 {
  font-size: .7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size2,
.katex .sizing.reset-size3.size2 {
  font-size: .8571428571em;
}
.katex .fontsize-ensurer.reset-size3.size3,
.katex .sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,
.katex .sizing.reset-size3.size4 {
  font-size: 1.1428571429em;
}
.katex .fontsize-ensurer.reset-size3.size5,
.katex .sizing.reset-size3.size5 {
  font-size: 1.2857142857em;
}
.katex .fontsize-ensurer.reset-size3.size6,
.katex .sizing.reset-size3.size6 {
  font-size: 1.4285714286em;
}
.katex .fontsize-ensurer.reset-size3.size7,
.katex .sizing.reset-size3.size7 {
  font-size: 1.7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size8,
.katex .sizing.reset-size3.size8 {
  font-size: 2.0571428571em;
}
.katex .fontsize-ensurer.reset-size3.size9,
.katex .sizing.reset-size3.size9 {
  font-size: 2.4685714286em;
}
.katex .fontsize-ensurer.reset-size3.size10,
.katex .sizing.reset-size3.size10 {
  font-size: 2.9628571429em;
}
.katex .fontsize-ensurer.reset-size3.size11,
.katex .sizing.reset-size3.size11 {
  font-size: 3.5542857143em;
}
.katex .fontsize-ensurer.reset-size4.size1,
.katex .sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,
.katex .sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,
.katex .sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,
.katex .sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,
.katex .sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,
.katex .sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,
.katex .sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,
.katex .sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,
.katex .sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,
.katex .sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,
.katex .sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,
.katex .sizing.reset-size5.size1 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,
.katex .sizing.reset-size5.size2 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,
.katex .sizing.reset-size5.size3 {
  font-size: .7777777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,
.katex .sizing.reset-size5.size4 {
  font-size: .8888888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,
.katex .sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,
.katex .sizing.reset-size5.size6 {
  font-size: 1.1111111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,
.katex .sizing.reset-size5.size7 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,
.katex .sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,
.katex .sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,
.katex .sizing.reset-size5.size10 {
  font-size: 2.3044444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,
.katex .sizing.reset-size5.size11 {
  font-size: 2.7644444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,
.katex .sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,
.katex .sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,
.katex .sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,
.katex .sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,
.katex .sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,
.katex .sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,
.katex .sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,
.katex .sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,
.katex .sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,
.katex .sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,
.katex .sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,
.katex .sizing.reset-size7.size1 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,
.katex .sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,
.katex .sizing.reset-size7.size3 {
  font-size: .5833333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,
.katex .sizing.reset-size7.size4 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,
.katex .sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,
.katex .sizing.reset-size7.size6 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,
.katex .sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,
.katex .sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,
.katex .sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,
.katex .sizing.reset-size7.size10 {
  font-size: 1.7283333333em;
}
.katex .fontsize-ensurer.reset-size7.size11,
.katex .sizing.reset-size7.size11 {
  font-size: 2.0733333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,
.katex .sizing.reset-size8.size1 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size8.size2,
.katex .sizing.reset-size8.size2 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,
.katex .sizing.reset-size8.size3 {
  font-size: .4861111111em;
}
.katex .fontsize-ensurer.reset-size8.size4,
.katex .sizing.reset-size8.size4 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,
.katex .sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,
.katex .sizing.reset-size8.size6 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,
.katex .sizing.reset-size8.size7 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,
.katex .sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,
.katex .sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,
.katex .sizing.reset-size8.size10 {
  font-size: 1.4402777778em;
}
.katex .fontsize-ensurer.reset-size8.size11,
.katex .sizing.reset-size8.size11 {
  font-size: 1.7277777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,
.katex .sizing.reset-size9.size1 {
  font-size: .2893518519em;
}
.katex .fontsize-ensurer.reset-size9.size2,
.katex .sizing.reset-size9.size2 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size9.size3,
.katex .sizing.reset-size9.size3 {
  font-size: .4050925926em;
}
.katex .fontsize-ensurer.reset-size9.size4,
.katex .sizing.reset-size9.size4 {
  font-size: .462962963em;
}
.katex .fontsize-ensurer.reset-size9.size5,
.katex .sizing.reset-size9.size5 {
  font-size: .5208333333em;
}
.katex .fontsize-ensurer.reset-size9.size6,
.katex .sizing.reset-size9.size6 {
  font-size: .5787037037em;
}
.katex .fontsize-ensurer.reset-size9.size7,
.katex .sizing.reset-size9.size7 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,
.katex .sizing.reset-size9.size8 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,
.katex .sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,
.katex .sizing.reset-size9.size10 {
  font-size: 1.2002314815em;
}
.katex .fontsize-ensurer.reset-size9.size11,
.katex .sizing.reset-size9.size11 {
  font-size: 1.4398148148em;
}
.katex .fontsize-ensurer.reset-size10.size1,
.katex .sizing.reset-size10.size1 {
  font-size: .2410800386em;
}
.katex .fontsize-ensurer.reset-size10.size2,
.katex .sizing.reset-size10.size2 {
  font-size: .2892960463em;
}
.katex .fontsize-ensurer.reset-size10.size3,
.katex .sizing.reset-size10.size3 {
  font-size: .337512054em;
}
.katex .fontsize-ensurer.reset-size10.size4,
.katex .sizing.reset-size10.size4 {
  font-size: .3857280617em;
}
.katex .fontsize-ensurer.reset-size10.size5,
.katex .sizing.reset-size10.size5 {
  font-size: .4339440694em;
}
.katex .fontsize-ensurer.reset-size10.size6,
.katex .sizing.reset-size10.size6 {
  font-size: .4821600771em;
}
.katex .fontsize-ensurer.reset-size10.size7,
.katex .sizing.reset-size10.size7 {
  font-size: .5785920926em;
}
.katex .fontsize-ensurer.reset-size10.size8,
.katex .sizing.reset-size10.size8 {
  font-size: .6943105111em;
}
.katex .fontsize-ensurer.reset-size10.size9,
.katex .sizing.reset-size10.size9 {
  font-size: .8331726133em;
}
.katex .fontsize-ensurer.reset-size10.size10,
.katex .sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,
.katex .sizing.reset-size10.size11 {
  font-size: 1.1996142719em;
}
.katex .fontsize-ensurer.reset-size11.size1,
.katex .sizing.reset-size11.size1 {
  font-size: .2009646302em;
}
.katex .fontsize-ensurer.reset-size11.size2,
.katex .sizing.reset-size11.size2 {
  font-size: .2411575563em;
}
.katex .fontsize-ensurer.reset-size11.size3,
.katex .sizing.reset-size11.size3 {
  font-size: .2813504823em;
}
.katex .fontsize-ensurer.reset-size11.size4,
.katex .sizing.reset-size11.size4 {
  font-size: .3215434084em;
}
.katex .fontsize-ensurer.reset-size11.size5,
.katex .sizing.reset-size11.size5 {
  font-size: .3617363344em;
}
.katex .fontsize-ensurer.reset-size11.size6,
.katex .sizing.reset-size11.size6 {
  font-size: .4019292605em;
}
.katex .fontsize-ensurer.reset-size11.size7,
.katex .sizing.reset-size11.size7 {
  font-size: .4823151125em;
}
.katex .fontsize-ensurer.reset-size11.size8,
.katex .sizing.reset-size11.size8 {
  font-size: .578778135em;
}
.katex .fontsize-ensurer.reset-size11.size9,
.katex .sizing.reset-size11.size9 {
  font-size: .6945337621em;
}
.katex .fontsize-ensurer.reset-size11.size10,
.katex .sizing.reset-size11.size10 {
  font-size: .8336012862em;
}
.katex .fontsize-ensurer.reset-size11.size11,
.katex .sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,
.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .accent > .vlist-t,
.katex .op-limits > .vlist-t {
  text-align: center;
}
.katex .accent .accent-body {
  position: relative;
}
.katex .accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .stretchy:after,
.katex .stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,
.katex .munder,
.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,
.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display > .katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display > .katex > .katex-html {
  display: block;
  position: relative;
}
.katex-display > .katex > .katex-html > .tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno > .katex > .katex-html > .tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn > .katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}

/* src/styles.css */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji";
    --font-mono:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
    --spacing: 0.25rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type=button], [type=reset], [type=submit]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden=until-found])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
  }
  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }
  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }
  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }
  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }
  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }
  .m-17 {
    margin: calc(var(--spacing) * 17);
  }
  .m-130 {
    margin: calc(var(--spacing) * 130);
  }
  .m-237 {
    margin: calc(var(--spacing) * 237);
  }
  .m-336 {
    margin: calc(var(--spacing) * 336);
  }
  .m-343 {
    margin: calc(var(--spacing) * 343);
  }
  .m-470 {
    margin: calc(var(--spacing) * 470);
  }
  .m-472 {
    margin: calc(var(--spacing) * 472);
  }
  .m-523 {
    margin: calc(var(--spacing) * 523);
  }
  .m-549 {
    margin: calc(var(--spacing) * 549);
  }
  .m-632 {
    margin: calc(var(--spacing) * 632);
  }
  .m-788 {
    margin: calc(var(--spacing) * 788);
  }
  .m-1028 {
    margin: calc(var(--spacing) * 1028);
  }
  .m-1146 {
    margin: calc(var(--spacing) * 1146);
  }
  .m-1410 {
    margin: calc(var(--spacing) * 1410);
  }
  .m-2300 {
    margin: calc(var(--spacing) * 2300);
  }
  .m-2813 {
    margin: calc(var(--spacing) * 2813);
  }
  .m-2997 {
    margin: calc(var(--spacing) * 2997);
  }
  .m-3298 {
    margin: calc(var(--spacing) * 3298);
  }
  .m-3384 {
    margin: calc(var(--spacing) * 3384);
  }
  .m-4300 {
    margin: calc(var(--spacing) * 4300);
  }
  .m-4412 {
    margin: calc(var(--spacing) * 4412);
  }
  .m-6954 {
    margin: calc(var(--spacing) * 6954);
  }
  .m-7690 {
    margin: calc(var(--spacing) * 7690);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow:
      var(--tw-inset-shadow),
      var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow),
      var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow),
      var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow),
      var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --p-bg: oklch(0.957 0.014 90);
  --p-bg-2: oklch(0.918 0.015 90);
  --p-surface: oklch(0.976 0.011 90);
  --p-surface-2: oklch(0.943 0.013 90);
  --p-ink: #0c1730;
  --p-ink-soft: #0c1730d9;
  --p-ink-mute: #0c17309e;
  --p-ink-faint: #0c173040;
  --p-line: #0c173026;
  --p-line-soft: #0c173014;
  --p-accent: #2c6fa6;
  --p-accent-soft: #2c6fa614;
  --p-caution: #e0750f;
  --p-caution-soft: #e0750f14;
  --p-good: #2f6b3a;
  --p-bad: #a82d10;
  --p-bad-soft: #a82d1014;
  --p-on-accent: var(--p-bg);
  --b-bg: oklch(0.235 0.024 248);
  --b-bg-2: oklch(0.205 0.024 248);
  --b-bg-3: oklch(0.165 0.024 248);
  --b-surface: oklch(0.285 0.024 248);
  --b-surface-2: oklch(0.245 0.024 248);
  --b-ink: #d8dce3;
  --b-ink-soft: #d8dce3cc;
  --b-ink-mute: #d8dce38a;
  --b-ink-faint: #d8dce338;
  --b-line: #d8dce328;
  --b-line-soft: #d8dce312;
  --b-accent: #f0972b;
  --b-accent-soft: #f0972b1f;
  --b-caution: #ff6a33;
  --b-caution-soft: #ff6a331f;
  --b-good: #6fcf8a;
  --b-bad: #e8624a;
  --b-bad-soft: #e8624a26;
  --b-on-accent: #0b1f3a;
}
html,
body {
  margin: 0;
  height: 100%;
  background-color: var(--p-bg);
}
html.app-dark,
html.app-dark body {
  background-color: var(--b-bg);
}
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.hf {
  --display:
    "Bricolage Grotesque",
    "Familjen Grotesk",
    system-ui,
    sans-serif;
  --body:
    "IBM Plex Sans",
    system-ui,
    sans-serif;
  --mono:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  --content-max: 1050px;
  font-family: var(--body);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-rendering: optimizeLegibility;
}
.hf * {
  box-sizing: border-box;
}
.hf .mono {
  font-family: var(--mono);
  font-feature-settings: "zero";
}
.hf .display {
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "opsz" 32;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.hf.paper {
  --bg: var(--p-bg);
  --bg-2: var(--p-bg-2);
  --surface: var(--p-surface);
  --surface-2: var(--p-surface-2);
  --ink: var(--p-ink);
  --ink-soft: var(--p-ink-soft);
  --ink-mute: var(--p-ink-mute);
  --ink-faint: var(--p-ink-faint);
  --line: var(--p-line);
  --line-soft: var(--p-line-soft);
  --accent: var(--p-accent);
  --accent-soft: var(--p-accent-soft);
  --caution: var(--p-caution);
  --caution-soft: var(--p-caution-soft);
  --good: var(--p-good);
  --bad: var(--p-bad);
  --bad-soft: var(--p-bad-soft);
  --on-accent: var(--p-on-accent);
  --str-0: #c8c0aa;
  --str-1: #8d9bb0;
  --str-2: #5f86a8;
  --str-3: #4f9690;
  --str-4: #4e9565;
  --str-5: #2f6b3a;
  --str-track: #0c17300f;
  background-color: var(--p-bg);
  background-image:
    radial-gradient(
      circle at 18% 28%,
      rgba(12, 23, 48, 0.022),
      transparent 55%),
    radial-gradient(
      circle at 82% 72%,
      rgba(44, 111, 166, 0.018),
      transparent 45%);
}
.hf.blueprint {
  --bg: var(--b-bg);
  --bg-2: var(--b-bg-2);
  --surface: var(--b-surface);
  --surface-2: var(--b-surface-2);
  --ink: var(--b-ink);
  --ink-soft: var(--b-ink-soft);
  --ink-mute: var(--b-ink-mute);
  --ink-faint: var(--b-ink-faint);
  --line: var(--b-line);
  --line-soft: var(--b-line-soft);
  --accent: var(--b-accent);
  --accent-soft: var(--b-accent-soft);
  --caution: var(--b-caution);
  --caution-soft: var(--b-caution-soft);
  --good: var(--b-good);
  --bad: var(--b-bad);
  --bad-soft: var(--b-bad-soft);
  --on-accent: var(--b-on-accent);
  --str-0: #34496b;
  --str-1: #5d7ba2;
  --str-2: #6f9fc4;
  --str-3: #57bcae;
  --str-4: #5fc489;
  --str-5: #7ad79a;
  --str-track: #e6edf514;
  background-color: var(--b-bg);
  background-image:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(216, 220, 227, 0.04) 0%,
      transparent 50%),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(5, 17, 39, 0.55) 0%,
      transparent 65%);
}
.hf h1,
.hf h2,
.hf h3,
.hf h4 {
  font-family: var(--display);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.hf p {
  margin: 0;
}
.hf .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hf .eyebrow-strong {
  color: var(--ink-soft);
}
.hf .section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hf .section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.hf .section-rule .right {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.hf .surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.hf .surface-flat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.hf .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  line-height: 1;
  white-space: nowrap;
}
.hf .pill.solid {
  background: var(--surface-2);
}
.hf .pill.accent {
  border-color: var(--accent);
  color: var(--accent);
}
.hf .pill.accent.solid {
  background: var(--accent-soft);
}
.hf .pill.caution {
  border-color: var(--caution);
  color: var(--caution);
}
.hf .pill.caution.solid {
  background: var(--caution-soft);
}
.hf .pill.good {
  color: var(--good);
  border-color: var(--good);
}
.hf .new-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 6px;
  text-transform: uppercase;
  line-height: 1.4;
}
.hf .new-pill.lg {
  font-size: 10px;
  padding: 1px 7px;
}
.hf .btn {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s,
    transform 0.06s;
}
.hf .btn:hover {
  background: var(--surface-2);
  border-color: var(--ink-faint);
}
.hf .btn:active {
  transform: translateY(0.5px);
}
.hf .btn:disabled,
.hf .btn:disabled:hover,
.hf .btn:disabled:active {
  background: var(--bg);
  color: var(--ink-mute);
  border-color: var(--line);
  cursor: default;
  opacity: 1;
  transform: none;
}
.hf .btn.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.hf .btn.primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}
.hf .btn.accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.hf .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-mute);
}
.hf .btn.ghost:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .btn.sm {
  font-size: 11.5px;
  padding: 5px 9px;
}
.hf .btn.xs {
  font-size: 10.5px;
  padding: 4px 7px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hf .kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-mute);
  line-height: 1;
  display: inline-block;
}
.hf .chalk {
  color: var(--ink);
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hf[data-density=airy] .row {
  padding: 16px 18px;
}
.hf[data-density=balanced] .row {
  padding: 12px 16px;
}
.hf[data-density=dense] .row {
  padding: 8px 14px;
}
.hf[data-density=airy] .rowgap {
  gap: 14px;
}
.hf[data-density=balanced] .rowgap {
  gap: 10px;
}
.hf[data-density=dense] .rowgap {
  gap: 6px;
}
.hf .scroller {
  overflow: auto;
  height: 100%;
}
.hf .scroller::-webkit-scrollbar {
  width: 8px;
}
.hf .scroller::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.hf .scroller::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}
.hf ::selection {
  background: var(--accent);
  color: var(--on-accent);
}
.hf .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.hf .nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.hf .nav-item.active {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.hf .nav-item .num {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  width: 18px;
  flex-shrink: 0;
}
.hf .nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 32px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink-mute);
  font-family: var(--body);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
  margin-top: 1px;
  position: relative;
}
.hf .nav-subitem:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .nav-subitem .nav-sub-dot {
  position: absolute;
  left: 22px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink-faint);
}
.hf .nav-subitem.active {
  color: var(--ink);
  background: var(--surface);
}
.hf .nav-subitem.active::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.hf .nav-subitem.active .nav-sub-dot {
  background: var(--accent);
}
.hf .area-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--body);
  color: var(--ink-soft);
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.hf .area-tile:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.hf .area-tile.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-faint);
}
.hf .area-tile.active .area-bar > i {
  background: var(--accent);
}
.hf .area-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hf .area-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.hf .area-pct {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.hf .area-bar {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hf .area-bar > i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--ink-mute);
}
.hf .area-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hf .stream-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.12s;
}
.hf .stream-row:hover {
  background: var(--surface-2);
}
.hf .stream-row:last-child {
  border-bottom: none;
}
.hf .stream-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-align: right;
  letter-spacing: 0.05em;
}
.hf .stream-title {
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hf .stream-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.hf .stream-sub .sep {
  opacity: 0.4;
  margin: 0 6px;
}
.hf .check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hf .check.done {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.hf .session-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.hf .session-bar .pips {
  display: flex;
  gap: 3px;
}
.hf .session-bar .pips i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  display: block;
}
.hf .session-bar .pips i.on {
  background: var(--ink-soft);
}
.hf .session-bar .pips i.again {
  background: var(--accent);
  opacity: 0.7;
}
.hf .reveal-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.hf.blueprint .reveal-card {
  background:
    linear-gradient(
      180deg,
      rgba(230, 237, 245, 0.018),
      transparent 30%),
    var(--b-surface);
  box-shadow:
    inset 0 0 0 1px rgba(230, 237, 245, 0.04),
    0 30px 60px -20px rgba(0, 0, 0, 0.5),
    0 8px 20px -8px rgba(0, 0, 0, 0.35);
}
.hf.paper .reveal-card {
  box-shadow: 0 30px 60px -28px rgba(12, 23, 48, 0.32), 0 8px 20px -10px rgba(12, 23, 48, 0.16);
}
.hf .reveal-prompt {
  padding: 24px 28px;
}
.hf .reveal-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px dashed transparent;
}
.hf .reveal-card.is-open .reveal-answer-wrap {
  grid-template-rows: 1fr;
  border-top-color: var(--line);
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hf .reveal-answer-inner {
  overflow: hidden;
  min-height: 0;
}
.hf .reveal-answer {
  padding: 22px 28px 24px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s 0.12s, transform 0.4s 0.12s;
}
.hf .reveal-card.is-open .reveal-answer {
  opacity: 1;
  transform: translateY(0);
}
.hf .fc-deck {
  position: relative;
  padding-bottom: 14px;
}
.hf .card-wrap {
  border-radius: 6px;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hf .card-wrap-behind {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  touch-action: none;
}
.hf .card-wrap-front {
  position: relative;
  z-index: 300;
  touch-action: none;
}
.hf .card-wrap-ghost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  touch-action: none;
  transform-origin: 50% 50%;
}
.hf .fc-stamp {
  position: absolute;
  top: 18px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 4px 10px;
  pointer-events: none;
  background: var(--surface);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fc-stamp {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
}
.hf .fc-stamp-good {
  left: 18px;
  transform: rotate(-11deg);
}
.hf .fc-stamp-again {
  right: 18px;
  transform: rotate(11deg);
}
.hf .card-wrap-ghost .reveal-answer-wrap {
  transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), border-top-color 0.28s;
}
.hf :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hf .lesson-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 28px 26px;
  position: relative;
  scroll-margin-top: 28px;
}
.hf.paper .lesson-card {
  box-shadow: 0 24px 50px -28px rgba(12, 23, 48, 0.18), 0 4px 10px -6px rgba(12, 23, 48, 0.08);
}
.hf.blueprint .lesson-card {
  box-shadow: inset 0 0 0 1px rgba(230, 237, 245, 0.04), 0 24px 50px -22px rgba(0, 0, 0, 0.45);
}
.hf .lesson-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 18px;
}
.hf .lesson-card p:last-child {
  margin-bottom: 0;
}
.hf .lesson-card .lesson-list {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.hf .lesson-card .lesson-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
}
.hf .lesson-card .lesson-list li:last-child {
  margin-bottom: 0;
}
.hf .lesson-card .lesson-list li::before {
  content: "\2013";
  position: absolute;
  left: 4px;
  color: var(--ink-mute);
}
.hf .lesson-card .lesson-table,
.hf .lesson-card .scenario,
.hf .lesson-card .steps,
.hf .lesson-card .formula,
.hf .lesson-card .lesson-figure,
.hf .lesson-card .lesson-viz,
.hf .lesson-card .rabbithole {
  margin-bottom: 18px;
}
.hf .lesson-viz {
  width: 100%;
}
.hf .lesson-viz-mount {
  width: 100%;
  min-height: 320px;
}
.hf .lesson-viz .figure-cap {
  margin-top: 8px;
  margin-bottom: 0;
}
.hf .airflow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hf .airflow-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
}
.hf .airflow-canvas {
  display: block;
  width: 100%;
  height: auto;
}
.hf .airflow-eyebrow {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.hf .airflow-status {
  position: absolute;
  right: 12px;
  top: 11px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 8px;
  background: var(--surface);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .airflow-status {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
}
.hf .airflow-status.stall {
  color: var(--caution);
  border-color: var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .airflow-status.stall {
    border-color: color-mix(in srgb, var(--caution) 55%, transparent);
  }
}
.hf .airflow-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.hf .airflow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hf .airflow-row .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.hf .airflow-row .val {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
}
.hf .airflow-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.hf .airflow-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 4px;
}
.hf .airflow-ticks .crit {
  color: var(--caution);
}
.hf .airflow-liftbar {
  height: 6px;
  border-radius: 3px;
  background: var(--str-track);
  overflow: hidden;
}
.hf .airflow-liftbar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.25s, background 0.25s;
}
.hf .airflow-liftbar > i.stall {
  background: var(--caution);
}
.hf .airflow-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 8px;
  letter-spacing: 0;
}
.hf .viz-wing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hf .viz-wing-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
  line-height: 0;
}
.hf .viz-wing-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hf .viz-wing-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s;
}
.hf .viz-wing-iconbtn:hover {
  background: var(--surface-2);
  border-color: var(--ink-faint);
}
.hf .viz-wing-shape {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.hf .viz-wing-shape .lbl {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hf .viz-wing-shape select {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
  cursor: pointer;
}
.hf .viz-wing-shape select:hover {
  border-color: var(--ink-faint);
}
.hf .viz-wing-speed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}
.hf .viz-wing-speed .lbl {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.hf .viz-wing-speed button {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.hf .viz-wing-speed button:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .viz-wing-speed button.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.hf .viz-wing-toggles {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-mute);
}
.hf .viz-wing-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.hf .viz-wing-toggles input {
  accent-color: var(--accent);
  cursor: pointer;
}
.hf .viz-wing-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
}
@media (max-width: 600px) {
  .hf .airflow-controls {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.hf .ap-viz {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hf .ap-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 14px 16px 20px;
}
.hf .ap-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
  overflow: visible;
}
.hf .ap-svg [data-part] {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 0.15s ease, opacity 0.15s ease;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ap-svg [data-part] {
    fill: color-mix(in srgb, var(--ink) 7%, var(--surface));
  }
}
.hf .ap-svg .ap-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.hf .ap-svg .ap-dashed {
  stroke-dasharray: 3 3;
}
.hf .ap-svg .ap-surface {
  fill: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ap-svg .ap-surface {
    fill: color-mix(in srgb, var(--accent) 16%, var(--surface));
  }
}
.hf .ap-svg [data-hinge=left] {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.5s ease;
}
.hf .ap-svg.dim [data-part] {
  opacity: 0.32;
}
.hf .ap-svg [data-part].is-active {
  opacity: 1;
  fill: var(--accent);
  stroke: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ap-svg [data-part].is-active {
    fill: color-mix(in srgb, var(--accent) 22%, var(--surface));
  }
}
.hf .ap-svg [data-part].is-active .ap-line {
  stroke: var(--accent);
}
.hf .ap-svg .ap-art,
.hf .ap-svg .ap-art path {
  fill: currentColor;
  stroke: none;
}
.hf .ap-svg .ap-marker {
  cursor: pointer;
}
.hf .ap-svg .ap-marker circle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.6;
}
.hf .ap-svg .ap-marker text {
  fill: var(--accent);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 15px;
  font-weight: 500;
}
.hf .ap-svg .ap-marker.is-active circle {
  fill: var(--accent);
}
.hf .ap-svg .ap-marker.is-active text {
  fill: var(--bg);
}
.hf .ap-caption {
  position: absolute;
  left: 16px;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  min-height: 12px;
}
.hf .ap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hf .ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hf .ap-chip:hover,
.hf .ap-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.hf .ap-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ap-dot {
    background: color-mix(in srgb, var(--ink) 20%, var(--surface));
  }
}
.hf .ap-chip:hover .ap-dot,
.hf .ap-chip.is-active .ap-dot {
  background: var(--accent);
}
.hf .ap-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hf .ap-field,
.hf .ap-views {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hf .ap-field .lbl,
.hf .ap-views .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.hf .ap-field select {
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.hf .ap-views button,
.hf .ap-playbtn {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.hf .ap-views button.active {
  border-color: var(--accent);
  color: var(--accent);
}
.hf .ap-views button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.hf .ap-playbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hf .ap3-viz {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hf .ap3-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  height: clamp(320px, 50vw, 520px);
  overflow: hidden;
}
.hf .ap3-stage:fullscreen {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.hf .ap3-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.hf .ap3-stage canvas:active {
  cursor: grabbing;
}
.hf .ap3-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  pointer-events: none;
}
.hf .ap3-badge.error {
  color: var(--bad);
}
.hf .ap3-caption {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  pointer-events: none;
}
.hf .ap3-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hf .ap3-controls button {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.hf .ap3-controls button.active {
  border-color: var(--accent);
  color: var(--accent);
}
.hf .ap3-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hf .ap3-views .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.hf .ap3-sliders {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.hf .ap3-sliders label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.hf .ap3-sliders input[type=range] {
  width: 120px;
  accent-color: var(--accent);
}
.hf .ap3-bar {
  z-index: 5;
  gap: 12px;
}
.hf .ap3-bar-grp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.hf .ap3-bar input[type=range] {
  width: 96px;
  accent-color: var(--accent);
  cursor: pointer;
}
@media (max-width: 560px) {
  .hf .ap3-bar input[type=range] {
    width: 70px;
  }
}
.hf .aa-viz {
  --aa-accent: var(--accent);
  width: 100%;
}
.hf .aa-stage {
  position: relative;
  height: clamp(340px, 56vw, 560px);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 110% at 50% 22%,
      #423d36 0%,
      #2a251f 45%,
      #15120d 100%);
  color: #f3efe9;
}
.hf .aa-stage:fullscreen {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.hf .aa-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.hf .aa-stage canvas:active {
  cursor: grabbing;
}
.hf .aa-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hf .aa-leader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hf .aa-leader line {
  stroke: var(--aa-accent);
  stroke-width: 1.25;
  opacity: 0.85;
  display: none;
  transition: opacity 0.3s ease;
}
.hf .aa-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aa-accent);
  box-shadow: 0 0 0 4px var(--aa-accent);
  transform: translate(-50%, -50%);
  display: none;
  transition: opacity 0.3s ease;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .aa-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--aa-accent) 22%, transparent);
  }
}
.hf .aa-callout {
  position: absolute;
  display: none;
  max-width: 244px;
  padding: 11px 14px 13px;
  border-radius: 11px;
  background: rgba(26, 22, 17, 0.92);
  color: #f3efe9;
  box-shadow: 0 8px 26px rgba(20, 30, 45, 0.28);
  transition: opacity 0.3s ease;
}
.hf .aa-c-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.hf .aa-c-blurb {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(243, 239, 233, 0.7);
  text-wrap: pretty;
}
.hf .aa-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.hf .aa-loading.error {
  color: var(--bad);
}
.hf .aa-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(36, 31, 25, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 6px 24px rgba(20, 30, 45, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  max-width: calc(100% - 28px);
}
.hf .aa-ctrls {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hf .aa-ico {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f0ece6;
  transition: background 0.15s;
}
.hf .aa-ico:hover {
  background: rgba(255, 255, 255, 0.12);
}
.hf .aa-ico svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.hf .aa-play {
  width: 34px;
  height: 34px;
  background: var(--aa-accent);
  color: #fff;
}
.hf .aa-play:hover {
  background: var(--aa-accent);
  filter: brightness(1.06);
}
.hf .aa-play .aa-pause-ico {
  display: none;
}
.hf .aa-play[data-playing="1"] .aa-pause-ico {
  display: block;
}
.hf .aa-play[data-playing="1"] .aa-play-ico {
  display: none;
}
.hf .aa-fs .aa-fs-exit {
  display: none;
}
.hf .aa-fs[data-fs="1"] .aa-fs-exit {
  display: block;
}
.hf .aa-fs[data-fs="1"] .aa-fs-enter {
  display: none;
}
.hf .aa-scrub {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hf .aa-scrub-dot {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: transform 0.15s, background 0.15s;
}
.hf .aa-scrub-dot:hover {
  transform: scale(1.35);
}
.hf .aa-scrub-dot.active {
  background: var(--aa-accent);
  transform: scale(1.45);
}
.hf .aa-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  min-width: 92px;
  white-space: nowrap;
}
.hf .aa-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 560px) {
  .hf .aa-label {
    display: none;
  }
  .hf .aa-bar {
    gap: 12px;
  }
}
.hf .ab-viz {
  --aa-accent: var(--accent);
  --ab-paper: #e7dcc1;
  --ab-line: #6e5836;
  width: 100%;
}
.hf.paper .ab-viz {
  --ab-paper: #e7dcc1;
  --ab-line: #6e5836;
}
.hf.blueprint .ab-viz {
  --ab-paper: #103a5d;
  --ab-line: #eef5fc;
}
.hf .ab-stage {
  position: relative;
  height: clamp(300px, 46vw, 460px);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.06),
      transparent 60%),
    linear-gradient(
      160deg,
      var(--ab-paper),
      var(--ab-paper) 55%,
      var(--ab-paper));
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ab-stage {
    background:
      radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.06),
        transparent 60%),
      linear-gradient(
        160deg,
        color-mix(in srgb, var(--ab-paper) 88%, #fff 12%),
        var(--ab-paper) 55%,
        color-mix(in srgb, var(--ab-paper) 78%, #000 22%));
  }
}
.hf .ab-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image:
    linear-gradient(
      to right,
      var(--ab-line) 1px,
      transparent 1px),
    linear-gradient(
      to bottom,
      var(--ab-line) 1px,
      transparent 1px);
  background-size: 32px 32px;
}
.hf .ab-stage:fullscreen {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.hf .ab-stage canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}
.hf .sp-viz {
  --sp-accent: var(--accent);
  --sp-pitot: #38bdf8;
  --sp-gyro: #c084fc;
  width: 100%;
}
.hf .sp-stage {
  position: relative;
  border-radius: 6px;
  padding: 16px 16px 72px;
  background:
    radial-gradient(
      130% 120% at 50% 0%,
      #2b2f36 0%,
      #1a1d22 55%,
      #0e1013 100%);
  color: #eef1f4;
  overflow: hidden;
}
.hf .sp-stage:fullscreen {
  height: 100%;
  width: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hf .sp-readout {
  position: absolute;
  top: 12px;
  left: 16px;
  max-width: min(340px, calc(100% - 32px));
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(10, 12, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
}
.hf .sp-r-name {
  font-size: 14px;
  font-weight: 600;
}
.hf .sp-r-q {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(238, 241, 244, 0.72);
  text-wrap: pretty;
}
.hf .sp-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 1.4vw, 14px);
  max-width: 600px;
  margin: 64px auto 0;
}
.hf .sp-cell {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  transition: opacity 0.25s ease, transform 0.2s ease;
}
.hf .sp-cell svg {
  display: block;
  width: 100%;
  height: auto;
}
.hf .sp-cell::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.2s ease;
  pointer-events: none;
}
.hf .sp-cell.is-sel::after,
.hf .sp-panel.show-tee .sp-cell.is-tee::after {
  box-shadow: 0 0 0 3px var(--sp-accent), 0 0 22px var(--sp-accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sp-cell.is-sel::after,
  .hf .sp-panel.show-tee .sp-cell.is-tee::after {
    box-shadow: 0 0 0 3px var(--sp-accent), 0 0 22px color-mix(in srgb, var(--sp-accent) 50%, transparent);
  }
}
.hf .sp-panel.has-sel .sp-cell:not(.is-sel),
.hf .sp-panel.show-tee .sp-cell:not(.is-tee) {
  opacity: 0.4;
}
.hf .sp-cell:hover {
  transform: translateY(-2px);
}
.hf .sp-cap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(238, 241, 244, 0.88);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.hf .sp-cell:hover .sp-cap,
.hf .sp-cell.is-sel .sp-cap {
  opacity: 1;
}
.hf .sp-panel.fam-on .sp-cell.fam-pitot::after {
  box-shadow: 0 0 0 3px var(--sp-pitot), 0 0 20px var(--sp-pitot);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sp-panel.fam-on .sp-cell.fam-pitot::after {
    box-shadow: 0 0 0 3px var(--sp-pitot), 0 0 20px color-mix(in srgb, var(--sp-pitot) 45%, transparent);
  }
}
.hf .sp-panel.fam-on .sp-cell.fam-gyro::after {
  box-shadow: 0 0 0 3px var(--sp-gyro), 0 0 20px var(--sp-gyro);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sp-panel.fam-on .sp-cell.fam-gyro::after {
    box-shadow: 0 0 0 3px var(--sp-gyro), 0 0 20px color-mix(in srgb, var(--sp-gyro) 45%, transparent);
  }
}
.hf .sp-panel.fam-on.has-sel .sp-cell:not(.is-sel) {
  opacity: 0.55;
}
.hf .sp-flag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--bad);
  padding: 3px 8px;
  border-radius: 4px;
  display: none;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hf .sp-cell.is-fail .sp-flag {
  display: block;
}
.hf .sp-cell.is-fail .sp-instr {
  filter: grayscale(0.5) brightness(0.66);
}
.hf .sp-legend {
  display: none;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px auto 0;
  font-size: 11.5px;
}
.hf .sp-panel.fam-on ~ .sp-legend {
  display: flex;
}
.hf .sp-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(238, 241, 244, 0.82);
}
.hf .sp-leg i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.hf .sp-leg.fam-pitot i {
  background: var(--sp-pitot);
}
.hf .sp-leg.fam-gyro i {
  background: var(--sp-gyro);
}
.hf .sp-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20, 23, 28, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}
.hf .sp-ico {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #eef1f4;
  transition: background 0.15s;
}
.hf .sp-ico:hover {
  background: rgba(255, 255, 255, 0.12);
}
.hf .sp-ico svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.hf .sp-play {
  background: var(--sp-accent);
  color: #fff;
}
.hf .sp-play:hover {
  background: var(--sp-accent);
  filter: brightness(1.06);
}
.hf .sp-play .sp-pause-ico {
  display: none;
}
.hf .sp-play[data-playing="1"] .sp-pause-ico {
  display: block;
}
.hf .sp-play[data-playing="1"] .sp-play-ico {
  display: none;
}
.hf .sp-fs .sp-fs-exit {
  display: none;
}
.hf .sp-fs[data-fs="1"] .sp-fs-exit {
  display: block;
}
.hf .sp-fs[data-fs="1"] .sp-fs-enter {
  display: none;
}
.hf .sp-toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #eef1f4;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.hf .sp-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}
.hf .sp-toggle[aria-pressed=true] {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #fff;
}
.hf .sp-toggle.sp-warn[aria-pressed=true] {
  background: var(--bad);
  border-color: var(--bad);
}
.hf .sp-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 560px) {
  .hf .sp-readout {
    position: static;
    margin-bottom: 8px;
    max-width: none;
  }
  .hf .sp-panel {
    margin-top: 8px;
  }
}
.hf .tp-viz {
  --tp-accent: var(--accent);
  --tp-dw: #f0972b;
  --tp-fin: #4ade80;
}
.hf .tp-stage {
  position: relative;
  width: 100%;
  margin: 8px 0;
  padding: 16px 16px 64px;
  border-radius: 14px;
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      #16202b 0%,
      #0c1218 70%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: clamp(280px, 52vw, 440px);
}
.hf .tp-stage:fullscreen {
  align-items: center;
  padding: 24px;
}
.hf .tp-svg {
  width: clamp(260px, 72vw, 400px);
  height: auto;
  touch-action: none;
}
.hf .tp-svg.is-draggable {
  cursor: grab;
}
.hf .tp-svg.is-draggable:active {
  cursor: grabbing;
}
.hf .tp-rose-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
}
.hf .tp-tick {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}
.hf .tp-tick-big {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
}
.hf .tp-card {
  fill: rgba(255, 255, 255, 0.7);
  font: 600 12px/1 system-ui, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
}
.hf .tp-runway {
  fill: #2b3540;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}
.hf .tp-centerline {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}
.hf .tp-thr-stripe {
  fill: rgba(255, 255, 255, 0.75);
}
.hf .tp-knob {
  fill: var(--tp-accent);
  stroke: #fff;
  stroke-width: 1.5;
  cursor: grab;
}
.hf .tp-track {
  fill: rgba(44, 111, 166, 0.06);
  stroke: var(--tp-accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.7;
}
.hf .tp-arrow line {
  stroke-width: 2;
  stroke-linecap: round;
}
.hf .tp-arrow path {
  stroke: none;
}
.hf .tp-arrow-dw line {
  stroke: var(--tp-dw);
}
.hf .tp-arrow-dw path {
  fill: var(--tp-dw);
}
.hf .tp-arrow-fin line {
  stroke: var(--tp-fin);
}
.hf .tp-arrow-fin path {
  fill: var(--tp-fin);
}
.hf .tp-leg {
  fill: rgba(255, 255, 255, 0.42);
  font: 600 9.5px/1 system-ui, sans-serif;
  transition: fill 0.15s;
}
.hf .tp-leg.is-on {
  fill: #fff;
  font-weight: 800;
}
.hf .tp-plane {
  fill: var(--tp-accent);
  stroke: #fff;
  stroke-width: 0.8;
}
.hf .tp-readout {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(8, 12, 16, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.hf .tp-r-title {
  font: 700 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.hf .tp-r-line {
  font: 500 13px/1.35 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}
.hf .tp-r-big {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  margin-top: 2px;
}
.hf .tp-r-hint {
  margin-top: 8px;
  font: 400 11px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.hf .tp-r-hint em {
  color: var(--tp-dw);
  font-style: normal;
  font-weight: 600;
}
.hf .tp-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.hf .tp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.hf .tp-ico:hover {
  background: rgba(255, 255, 255, 0.2);
}
.hf .tp-ico svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.hf .tp-fs svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hf .tp-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font: 600 12px/1 system-ui, sans-serif;
  padding: 7px 12px;
  cursor: pointer;
}
.hf .tp-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.hf .tp-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}
.hf .tp-i-pause,
.hf .tp-i-close {
  display: none;
}
.hf .tp-stage[data-playing="1"] .tp-i-play {
  display: none;
}
.hf .tp-stage[data-playing="1"] .tp-i-pause {
  display: inline;
}
.hf .tp-stage[data-fs="1"] .tp-i-open {
  display: none;
}
.hf .tp-stage[data-fs="1"] .tp-i-close {
  display: inline;
}
@media (max-width: 560px) {
  .hf .tp-readout {
    position: static;
    max-width: none;
    margin-bottom: 8px;
  }
  .hf .tp-stage {
    flex-direction: column;
    align-items: center;
  }
}
.hf .txm-viz {
  width: 100%;
}
.hf .txm-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 64vw, 520px);
  background: #d7e6ee;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.hf .txm-stage.is-diagram-only {
  background: #232c39;
}
.hf .txm-stage:fullscreen {
  border-radius: 0;
  height: 100%;
}
.hf .txm-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hf .txm-diagram {
  display: block;
  position: absolute;
  inset: 0;
  background: #232c39;
  opacity: 0;
  visibility: hidden;
}
.hf .txm-diagram.is-on {
  opacity: 1;
  visibility: visible;
}
.hf .txm-diagram svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hf .txm-stage .dot {
  cursor: pointer;
  outline: none;
}
.hf .txm-stage .dot:focus-visible .core {
  stroke: #8db8e8;
  stroke-width: 0.8;
}
.hf .txm-stage .dot .core {
  fill: #1a6fc4;
  stroke: #fcfbf7;
  stroke-width: 0.4;
}
.hf .txm-stage .dot .ring {
  fill: none;
  stroke: #1a6fc4;
  stroke-width: 0.35;
  opacity: 0;
}
.hf .txm-stage .dot.on .core {
  fill: #fcfbf7;
  stroke: #1a6fc4;
  stroke-width: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .hf .txm-stage .dot .ring {
    animation: txm-dotring 2.4s ease-out infinite;
  }
  @keyframes txm-dotring {
    0% {
      r: 1.7;
      opacity: 0.7;
    }
    70% {
      r: 4.2;
      opacity: 0;
    }
    100% {
      r: 4.2;
      opacity: 0;
    }
  }
}
.hf .txm-callout {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  max-width: min(300px, calc(100% - 24px));
  background: #1a6fc4;
  color: #fff;
  border-radius: 11px;
  padding: 8px 13px 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 18px rgba(12, 23, 48, 0.3);
  cursor: pointer;
  border: none;
  appearance: none;
  text-align: center;
  font-family: inherit;
}
.hf .txm-stage.is-diagram-only .txm-callout {
  bottom: 18px;
}
.hf .txm-callout .txm-c-name {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hf .txm-callout .txm-c-desc {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  max-width: 276px;
  text-wrap: pretty;
}
.hf .txm-callout[hidden] {
  display: none;
}
.hf .txm-bar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 20px));
  background: rgba(22, 19, 15, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hf .txm-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #1a6fc4;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hf .txm-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #d8dce3;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hf .txm-text {
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hf .txm-play:focus-visible,
.hf .txm-ico:focus-visible,
.hf .txm-segbar:focus-visible {
  outline: 2px solid #8db8e8;
  outline-offset: 2px;
}
.hf .txm-segbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 6px;
}
.hf .txm-segbar .seg {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.hf .txm-segbar .seg .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #1a6fc4;
  border-radius: 3px;
}
.hf .txm-segbar .seg.past .fill {
  width: 100%;
  opacity: 0.55;
}
.hf .txm-phase {
  flex: 0 0 auto;
  width: 88px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 244, 240, 0.9);
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 480px) {
  .hf .txm-phase {
    display: none;
  }
}
.hf .tf-viz {
  --tf-accent: var(--accent);
  --tf-up: #4ade80;
  --tf-turn: #f0972b;
}
.hf .tf-stage {
  position: relative;
  width: 100%;
  margin: 8px 0;
  padding: 16px 16px 64px;
  border-radius: 14px;
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      #18222e 0%,
      #0c1218 72%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: clamp(280px, 56vw, 440px);
}
.hf .tf-stage:fullscreen {
  align-items: center;
  padding: 24px;
}
.hf .tf-svg {
  width: clamp(280px, 80vw, 440px);
  height: auto;
}
.hf .tf-ground {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.hf .tf-wing {
  stroke: #e7edf3;
  stroke-width: 4;
  stroke-linecap: round;
}
.hf .tf-wing-tip {
  stroke: #e7edf3;
  stroke-width: 3;
  stroke-linecap: round;
}
.hf .tf-fuse {
  fill: #2b3540;
  stroke: #e7edf3;
  stroke-width: 1.5;
}
.hf .tf-fin,
.hf .tf-stab {
  stroke: #e7edf3;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hf .tf-arrow-line {
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.hf .tf-arrow-head {
  stroke: none;
}
.hf .tf-lift.tf-arrow-line {
  stroke: var(--tf-accent);
}
.hf .tf-lift.tf-arrow-head {
  fill: var(--tf-accent);
}
.hf .tf-vert.tf-arrow-line {
  stroke: var(--tf-up);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}
.hf .tf-vert.tf-arrow-head {
  fill: var(--tf-up);
}
.hf .tf-horiz.tf-arrow-line {
  stroke: var(--tf-turn);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}
.hf .tf-horiz.tf-arrow-head {
  fill: var(--tf-turn);
}
.hf .tf-weight.tf-arrow-line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.5;
}
.hf .tf-weight.tf-arrow-head {
  fill: rgba(255, 255, 255, 0.45);
}
.hf .tf-guide {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.hf .tf-lab {
  font: 600 10px/1 system-ui, sans-serif;
}
.hf .tf-lab-lift {
  fill: var(--tf-accent);
}
.hf .tf-lab-vert {
  fill: var(--tf-up);
}
.hf .tf-lab-horiz {
  fill: var(--tf-turn);
  transition: opacity 0.15s;
}
.hf .tf-lab-weight {
  fill: rgba(255, 255, 255, 0.6);
}
.hf .tf-dial {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}
.hf .tf-dial-tick {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
}
.hf .tf-dial-tick-key {
  stroke: var(--tf-turn);
  stroke-width: 2;
}
.hf .tf-dial-num {
  fill: rgba(255, 255, 255, 0.6);
  font: 600 9px/1 system-ui, sans-serif;
}
.hf .tf-dial-num-key {
  fill: var(--tf-turn);
  font-weight: 800;
}
.hf .tf-needle {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
.hf .tf-dial-hub {
  fill: #fff;
}
.hf .tf-dial-label {
  fill: rgba(255, 255, 255, 0.5);
  font: 500 8.5px/1 system-ui, sans-serif;
}
.hf .tf-tube,
.hf .tf-tube-mark {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
}
.hf .tf-ball {
  fill: #fff;
  transition: cx 0.15s;
}
.hf .tf-readout {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: 190px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(8, 12, 16, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.hf .tf-r-title {
  font: 700 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.hf .tf-r-line {
  font: 500 13px/1.5 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}
.hf .tf-r-big {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}
.hf .tf-r-hint {
  margin-top: 8px;
  font: 400 11px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.hf .tf-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.hf .tf-slider-lab {
  font: 600 12px/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
}
.hf .tf-slider {
  width: clamp(90px, 28vw, 160px);
  accent-color: var(--tf-accent);
}
.hf .tf-slider-val {
  font: 700 12px/1 system-ui, sans-serif;
  color: #fff;
  min-width: 30px;
}
.hf .tf-toggle {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font: 600 11px/1 system-ui, sans-serif;
  padding: 6px 10px;
  cursor: pointer;
}
.hf .tf-toggle.is-on {
  background: var(--tf-up);
  border-color: var(--tf-up);
  color: #fff;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .tf-toggle.is-on {
    background: color-mix(in srgb, var(--tf-up) 28%, transparent);
  }
}
.hf .tf-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.hf .tf-ico:hover {
  background: rgba(255, 255, 255, 0.2);
}
.hf .tf-fs svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hf .tf-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}
.hf .tf-i-close {
  display: none;
}
.hf .tf-stage[data-fs="1"] .tf-i-open {
  display: none;
}
.hf .tf-stage[data-fs="1"] .tf-i-close {
  display: inline;
}
@media (max-width: 560px) {
  .hf .tf-readout {
    position: static;
    max-width: none;
    margin-bottom: 8px;
  }
  .hf .tf-stage {
    flex-direction: column;
    align-items: center;
  }
  .hf .tf-slider-lab {
    display: none;
  }
}
.hf .pc-gauge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 188px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .pc-gauge {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
}
.hf .pc-gauge-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink);
}
.hf .pc-gauge-row .pc-k {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.hf .pc-bar {
  position: relative;
  height: 8px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.hf .pc-bar span {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.12s ease-out;
}
.hf .pc-note {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.hf .pc-val {
  min-width: 30px;
  color: var(--accent);
  font-size: 10px;
}
.hf .pt-viz {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hf .pt-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(
      180deg,
      var(--surface) 0%,
      var(--surface-2) 100%);
  height: clamp(420px, 78vw, 620px);
  overflow: hidden;
}
.hf .pt-stage:fullscreen {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.hf .pt-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.hf .pt-stage canvas:active {
  cursor: grabbing;
}
.hf .pt-gauge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .pt-gauge {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
}
.hf .pt-total {
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.hf .pt-total span {
  font-weight: 600;
}
.hf .pt-total [data-temp] {
  display: inline-block;
  min-width: 4.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hf .pt-total-k {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin: 3px 0 10px;
}
.hf .pt-stack {
  display: flex;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.hf .pt-seg-air {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .pt-seg-air {
    background: color-mix(in srgb, var(--accent) 45%, var(--surface));
  }
}
.hf .pt-seg-water {
  background: var(--accent);
}
.hf .pt-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-soft);
}
.hf .pt-legend b {
  color: var(--ink);
  font-weight: 600;
}
.hf .pt-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 5px;
}
.hf .pt-dot-air {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .pt-dot-air {
    background: color-mix(in srgb, var(--accent) 45%, var(--surface));
  }
}
.hf .pt-dot-water {
  background: var(--accent);
}
.hf .pt-ring-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 5px;
  vertical-align: middle;
}
.hf .pt-ring-dot.blue {
  background: #3380d9;
}
.hf .pt-ring-dot.red {
  background: #d9442f;
}
.hf .pt-total .pt-cold {
  color: #3380d9;
}
.hf .pv-viz {
  width: 100%;
}
.hf .pv {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: clamp(380px, 64vw, 520px);
  background: #211d18;
}
.hf .pv:fullscreen {
  height: 100%;
  border-radius: 0;
}
.hf .pv-stage {
  position: absolute;
  inset: 0;
}
.hf .pv-stage canvas {
  display: block;
  cursor: grab;
}
.hf .pv[data-grabbing="1"] .pv-stage canvas {
  cursor: grabbing;
}
.hf .pv-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hf .pv-label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  appearance: none;
  border: none;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(252, 251, 247, 0.88);
  color: #4a5468;
  box-shadow: 0 0 0 1px rgba(28, 41, 64, 0.14), 0 1px 3px rgba(28, 41, 64, 0.1);
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.hf .pv-label.is-active {
  display: flex;
  background: #1a6fc4;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(26, 111, 196, 0.45);
  z-index: 3;
  font-weight: 700;
}
.hf .pv-label-desc {
  display: none;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  width: 200px;
  line-height: 1.45;
  opacity: 0.92;
}
.hf .pv-label.is-active .pv-label-desc {
  display: block;
}
.hf .pv-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 36px));
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(22, 19, 15, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 9px 16px 9px 9px;
  z-index: 5;
}
.hf .pv-play {
  appearance: none;
  border: none;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #1a6fc4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hf .pv-play svg {
  fill: #fff;
}
.hf .pv-play .i-play {
  display: none;
}
.hf .pv[data-playing="0"] .pv-play .i-pause {
  display: none;
}
.hf .pv[data-playing="0"] .pv-play .i-play {
  display: block;
}
.hf .pv-scrub {
  position: relative;
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: center;
  height: 18px;
  cursor: pointer;
}
.hf .pv-seg {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  transition: background 0.2s;
}
.hf .pv-seg.is-active {
  background: #5db2ff;
}
.hf .pv-playhead {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: #ffffff;
  pointer-events: none;
}
.hf .pv-segname {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfd4da;
  flex: 0 0 96px;
  text-align: center;
}
.hf .pv-reset {
  appearance: none;
  border: none;
  background: none;
  color: #aab2bc;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.hf .pv-reset:hover {
  color: #fff;
}
@media (max-width: 600px) {
  .hf .pv-segname {
    display: none;
  }
}
.hf .ff-viz {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hf .ff-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(
      180deg,
      #5b93d6 0%,
      #8fbbe8 55%,
      #c3dbf5 100%);
  height: clamp(320px, 46vw, 480px);
  overflow: hidden;
}
.hf .ff-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  pointer-events: none;
}
.hf .ff-badge.error {
  color: var(--bad);
}
.hf .ff-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.hf .ff-stage canvas:active {
  cursor: grabbing;
}
.hf .ff-inst {
  position: absolute;
  bottom: 12px;
  width: 104px;
  text-align: center;
  pointer-events: none;
}
.hf .ff-asi {
  left: 14px;
  width: 165px;
}
.hf .ff-alt {
  right: 14px;
  width: 165px;
}
.hf .ff-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hf .ff-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  white-space: nowrap;
  text-shadow:
    0 0 4px #fff,
    0 0 4px #fff,
    0 0 2px #fff;
}
.hf .ff-label.lift {
  color: #0d9e57;
}
.hf .ff-label.weight {
  color: #2b303b;
}
.hf .ff-label.thrust {
  color: #5c33c7;
}
.hf .ff-label.drag {
  color: #db781c;
}
.hf .ff-status {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ff-status {
    background: color-mix(in srgb, var(--surface) 84%, transparent);
  }
}
.hf .ff-status.level {
  color: var(--accent);
}
.hf .ff-status.climb {
  color: var(--caution);
}
.hf .ff-status-h {
  right: auto;
  left: 14px;
}
.hf .ff-debug-sliders .ff-wide {
  flex-basis: 100%;
}
.hf .ff-debug-sliders .ff-wide input[type=range] {
  flex: 1;
  width: auto;
}
.hf .ff-warn {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 56%;
  display: none;
  padding: 7px 14px;
  border: 1px solid var(--caution);
  border-radius: 6px;
  background: var(--caution);
  color: var(--caution);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ff-warn {
    background: color-mix(in srgb, var(--caution) 16%, var(--surface));
  }
}
.hf .ff-limit {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 6;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ff-limit {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
  }
}
.hf .ff-limit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 78%;
  padding: 18px 22px;
  border: 1px solid var(--caution);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}
.hf .ff-limit-msg {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.hf .ff-reset {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 7px 18px;
  border: 1px solid var(--caution);
  border-radius: 5px;
  background: var(--caution);
  color: var(--bg);
  cursor: pointer;
}
.hf .ff-debug {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font-size: 9.5px;
  color: var(--ink-soft);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .ff-debug {
    background: color-mix(in srgb, var(--surface) 84%, transparent);
  }
}
.hf .ff-bar {
  z-index: 5;
  gap: 12px;
}
.hf .ff-bar-grp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.hf .ff-bar input[type=range] {
  width: 88px;
  accent-color: var(--accent);
  cursor: pointer;
}
@media (max-width: 560px) {
  .hf .ff-bar input[type=range] {
    width: 64px;
  }
  .hf .ff-stage {
    height: clamp(440px, 132vw, 620px);
  }
  .hf .ff-asi,
  .hf .ff-alt {
    bottom: 66px;
  }
  .hf .ff-asi {
    left: auto;
    right: calc(50% + 6px);
  }
  .hf .ff-alt {
    right: auto;
    left: calc(50% + 6px);
  }
  .hf .ff-status-h {
    left: 10px;
    top: 8px;
  }
  .hf .ff-status {
    left: 10px;
    right: auto;
    top: 40px;
  }
}
.hf .lesson-viz-aside {
  float: right;
  width: min(340px, 42%);
  margin: 2px 0 14px 24px;
}
@media (max-width: 640px) {
  .hf .lesson-viz-aside {
    float: none;
    width: 100%;
    margin: 8px 0 14px;
  }
}
.hf .viz-tech {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-width: 116px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .viz-tech {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
  }
}
.hf .viz-tech-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hf .viz-tech-row span:first-child {
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}
.hf .lesson-figure {
  padding: 16px 18px;
}
.hf.blueprint .lesson-figure {
  background-color: #0b1f3c;
  background-image:
    linear-gradient(rgba(230, 237, 245, 0.07) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(230, 237, 245, 0.07) 1px,
      transparent 1px);
  background-size: 18px 18px;
  border-color: color-mix(in srgb, #7fa8cf 26%, transparent);
  color: #e9eef6;
}
.hf.blueprint .lesson-figure .chalk {
  color: #e9eef6;
}
.hf.blueprint .lesson-figure text {
  color: #e9eef6;
  fill: currentColor;
}
.hf.blueprint .lesson-figure .figure-cap {
  color: color-mix(in srgb, #e9eef6 60%, transparent);
}
.hf .memo p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
  margin: 0;
}
.hf .scenario p {
  font-size: 15px;
  color: var(--ink);
  max-width: none;
  margin: 0;
}
.hf .scenario-tag,
.hf .formula-tag,
.hf .figure-cap {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.hf .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid transparent;
}
.hf .lesson-table {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.hf .cloze {
  background: var(--accent-soft);
  color: transparent;
  border-radius: 999px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 0.18s, color 0.18s;
}
.hf .revealed .cloze {
  background: transparent;
  color: var(--accent);
  user-select: auto;
  -webkit-user-select: auto;
}
.hf .reveal-card:not(.is-open) .cloze {
  color: transparent;
  transition: none;
}
.hf .fc-collection-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.hf .fc-collection-row:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.hf .fc-collection-meta {
  font-size: 9.5px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.hf .streak-heatmap {
  display: flex;
  gap: 3px;
  overflow-x: auto;
}
.hf .streak-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: transparent;
  flex-shrink: 0;
}
.hf .streak-cell.baseline {
  background: var(--accent);
  border-color: var(--accent);
}
.hf .streak-cell.stretch {
  background: var(--good);
  border-color: var(--good);
}
.hf .streak-cell.today {
  outline: 1px solid var(--ink-faint);
  outline-offset: 1px;
}
.hf .lesson-table table {
  width: 100%;
  border-collapse: collapse;
}
.hf .lesson-table th,
.hf .lesson-table td {
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.hf .lesson-table tbody tr:last-child td {
  border-bottom: none;
}
.hf .lesson-table th {
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lesson-table th {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
}
.hf .memo {
  padding: 14px 16px 16px;
  border-top: 1px dashed var(--line);
  background: var(--accent-soft);
}
.hf .memo-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hf .cue-row {
  display: grid;
  grid-template-columns: 14px minmax(140px, 1fr) 18px 2fr;
  gap: 12px;
  align-items: start;
  padding: 11px 4px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
  line-height: 1.5;
}
.hf .cue-row:last-child {
  border-bottom: none;
}
.hf .cue-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.hf .cue-cue {
  color: var(--ink);
}
.hf .cue-arrow {
  font-family: var(--mono);
  color: var(--ink-faint);
  text-align: center;
  padding-top: 1px;
}
.hf .cue-mean {
  color: var(--ink-soft);
}
.hf .scenario {
  padding: 14px 16px;
  background: var(--surface-2);
  border-left: 2px solid var(--ink-faint);
  border-radius: 0 4px 4px 0;
  margin-bottom: 20px;
}
.hf .rabbithole {
  padding: 13px 16px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  background: var(--ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .rabbithole {
    background: color-mix(in srgb, var(--ink) 3%, transparent);
  }
}
.hf .rabbithole > summary.rabbithole-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin: 0;
}
.hf .rabbithole > summary.rabbithole-tag::-webkit-details-marker {
  display: none;
}
.hf .rabbithole > summary.rabbithole-tag:hover {
  color: var(--ink-soft);
}
.hf .rabbithole > summary.rabbithole-tag::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.15s ease;
}
.hf .rabbithole[open] > summary.rabbithole-tag::after {
  transform: translateY(1px) rotate(-135deg);
}
.hf .rabbithole[open] > summary.rabbithole-tag {
  margin-bottom: 9px;
}
.hf .rabbithole-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}
.hf .rabbithole p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: none;
  margin: 0;
}
.hf .rabbithole-link,
.hf .ext-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hf .ext-link {
  word-break: break-word;
}
.hf mark.hl {
  background: var(--caution-soft);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.hf .rabbithole-ref {
  border-bottom: 1px dotted var(--ink-mute);
  cursor: pointer;
}
.hf .rabbithole-ref:hover {
  border-bottom-color: var(--ink-soft);
  color: var(--ink);
}
.hf .steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hf .steps > li {
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.hf .steps > li:first-child {
  border-top: none;
  padding-top: 4px;
}
.hf .step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.hf .step-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "opsz" 32;
  font-size: 18px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.hf .step-title {
  font-family: var(--display);
  font-size: 15.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hf .step-body {
  padding-left: 38px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hf .step-body p {
  margin: 0;
}
.hf .step-body p + p {
  margin-top: 6px;
}
.hf .quiz-option {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.14s,
    border-color 0.14s,
    opacity 0.2s;
  width: 100%;
}
.hf .quiz-option:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-faint);
}
.hf .quiz-option:disabled {
  cursor: default;
}
.hf .quiz-letter {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  background: var(--surface-2);
  flex-shrink: 0;
}
.hf .quiz-label {
  min-width: 0;
}
.hf .quiz-state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.hf .quiz-option.is-picked {
  border-color: var(--ink);
  background: var(--surface-2);
}
.hf .quiz-option.is-picked .quiz-letter {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg);
}
.hf .quiz-option.is-correct {
  border-color: var(--good);
  background: var(--good);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .quiz-option.is-correct {
    background: color-mix(in srgb, var(--good) 8%, var(--surface));
  }
}
.hf .quiz-option.is-correct .quiz-letter {
  border-color: var(--good);
  color: var(--bg);
  background: var(--good);
}
.hf .quiz-option.is-correct .quiz-state {
  color: var(--good);
}
.hf .quiz-option.is-wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.hf .quiz-option.is-wrong .quiz-letter {
  border-color: var(--bad);
  color: var(--bg);
  background: var(--bad);
}
.hf .quiz-option.is-wrong .quiz-state {
  color: var(--bad);
}
.hf .quiz-option.is-dim {
  opacity: 0.5;
}
.hf .feedback {
  border-radius: 4px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.hf .feedback-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--ink);
}
.hf .feedback-good .feedback-head {
  color: var(--good);
}
.hf .feedback-bad .feedback-head {
  color: var(--bad);
}
.hf .feedback-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hf .feedback-body p {
  margin: 0;
}
.hf .feedback-body p + p {
  margin-top: 8px;
}
.hf .lesson-reveal-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hf .lesson-reveal-wrap.is-open {
  grid-template-rows: 1fr;
}
.hf .lesson-reveal-inner {
  overflow: hidden;
  min-height: 0;
}
.hf .answer-body {
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hf .answer-body p {
  margin: 0;
}
.hf .answer-body p + p {
  margin-top: 8px;
}
.hf .lesson-header {
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.hf .lesson-header.sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lesson-header.sticky {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }
}
.hf.blueprint .lesson-header.sticky {
  background: var(--bg);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf.blueprint .lesson-header.sticky {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
  }
}
.hf .lesson-header.focus,
.hf .flowcards-header.focus {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lesson-header.focus,
  .hf .flowcards-header.focus {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
  }
}
.hf .lesson-header.focus > *:last-child,
.hf .flowcards-header.focus > *:last-child {
  justify-self: end;
}
.hf .focus-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 280px;
}
.hf .focus-title .display {
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.hf .focus-progress {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.hf .focus-progress-bar {
  width: 100%;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  margin-top: 2px;
}
.hf .focus-progress-bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hf .lesson-body.focus {
  padding-top: 40px;
}
.hf .lesson-body.focus .lesson-col {
  max-width: 720px;
}
@media (max-width: 600px) {
  .hf .lesson-header.focus .label-md,
  .hf .flowcards-header.focus .label-md {
    display: none;
  }
  .hf .lesson-header.focus,
  .hf .flowcards-header.focus {
    grid-template-columns: auto 1fr auto;
    padding: 12px 14px;
    gap: 14px;
  }
  .hf .focus-title {
    min-width: 0;
  }
  .hf .focus-title .display {
    font-size: 14px;
  }
}
.hf .lesson-header.desktop {
  display: flex;
  flex-direction: column;
  padding: 14px 28px 12px;
}
.hf .lesson-header.desktop .lh-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.hf .lh-progress-row {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}
.hf .lh-progress-segments {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hf .lh-seg {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hf .lh-seg-num {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.hf .lh-seg.current .lh-seg-num {
  color: var(--accent);
}
.hf .lh-seg-pips {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hf .lh-pip {
  width: 16px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.hf .lh-pip.on {
  background: var(--accent);
}
.hf .lh-seg.current .lh-pip:not(.on) {
  background: var(--ink-faint);
}
.hf .lh-pip.active {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
@media (max-width: 900px) {
  .hf .lh-progress-segments {
    width: min(360px, 100%);
    gap: 0;
  }
  .hf .lh-seg-num {
    display: none;
  }
  .hf .lh-seg {
    flex: 1;
    gap: 0;
  }
  .hf .lh-seg-pips {
    gap: 2px;
    flex: 1;
  }
  .hf .lh-pip {
    flex: 1;
    width: auto;
    min-width: 4px;
  }
}
.hf .lesson-crumbs {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hf .lesson-title {
  font-size: 22px;
  line-height: 1.1;
  margin-top: 4px;
}
.hf .avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.hf .lesson-header.phone {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
}
.hf .lesson-header.phone .lesson-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hf .lesson-header.phone .lesson-header-titles {
  padding: 10px 4px 12px;
}
.hf .lesson-header.phone .lesson-crumbs {
  font-size: 9.5px;
}
.hf .lesson-header.phone .lesson-title {
  font-size: 18px;
  line-height: 1.15;
  margin-top: 3px;
}
.hf .lesson-progress-strip {
  position: relative;
  height: 2px;
  background: var(--line);
  margin: 0 -14px;
}
.hf .lps-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
}
.hf .btn.icon-only {
  padding: 6px;
  width: 30px;
  height: 30px;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .hf .lesson-card {
    padding: 18px 16px 20px;
  }
  .hf .cue-row {
    grid-template-columns: 14px 1fr;
    grid-template-areas: "dot cue" ".   mean";
    row-gap: 6px;
    column-gap: 10px;
    padding: 12px 4px;
  }
  .hf .cue-dot {
    grid-area: dot;
    margin-top: 5px;
  }
  .hf .cue-cue {
    grid-area: cue;
  }
  .hf .cue-arrow {
    display: none;
  }
  .hf .cue-mean {
    grid-area: mean;
  }
  .hf .lesson-table th,
  .hf .lesson-table td {
    padding: 9px 12px;
    font-size: 12.5px;
  }
  .hf .lesson-table th {
    font-size: 9px;
  }
  .hf .scenario {
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .hf .step-body {
    padding-left: 0;
    font-size: 13.5px;
  }
  .hf .step-head {
    gap: 10px;
  }
  .hf .step-num {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
  .hf .step-title {
    font-size: 14.5px;
  }
  .hf .quiz-option {
    padding: 10px 12px;
    font-size: 13.5px;
    grid-template-columns: 24px 1fr 16px;
    gap: 10px;
  }
  .hf .quiz-letter {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
  }
}
.hf .lesson-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px 4px;
}
.hf .lesson-foot .foot-status {
  margin-left: auto;
  margin-right: auto;
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-align: center;
}
.hf .lesson-foot .foot-label {
  font-size: 12.5px;
}
@media (max-width: 600px) {
  .hf .lesson-foot .foot-label {
    display: none;
  }
}
.hf .edge-handle {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 44px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  z-index: 5;
}
.hf .sidebar:hover .edge-handle,
.hf .sidebar:focus-within .edge-handle,
.hf .edge-handle:focus-visible {
  opacity: 1;
}
.hf .edge-handle:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
  background: var(--surface-2);
}
@media (hover: none) {
  .hf .edge-handle {
    opacity: 0.55;
  }
}
.hf .sidebar.rail .rail-btn {
  padding: 8px;
  width: 36px;
  height: 36px;
  justify-content: center;
  color: var(--ink-mute);
  border: 1px solid transparent;
}
.hf .sidebar.rail .rail-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .sidebar.rail .rail-nav {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.hf .sidebar.rail .rail-nav:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .sidebar.rail .rail-nav.active {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.hf .sidebar.rail .rail-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.hf .sidebar.rail .rail-dot.accent {
  background: var(--accent);
}
.hf .sidebar.rail .rail-dot.caution {
  background: var(--caution);
}
.hf .sidebar.rail .rail-streak-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--good);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hf .sidebar.rail .rail-streak-ic.risk {
  background: var(--bg);
  border: 1.5px dashed var(--caution);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sidebar.rail .rail-streak-ic.risk {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--caution) 45%, transparent);
  }
}
.hf .sidebar.rail .rail-streak-ic svg {
  display: block;
}
.hf .sidebar.rail .rail-themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.hf .sidebar.rail .rail-themetoggle:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .area-tile.rail {
  width: 40px;
  height: 40px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  align-self: center;
  position: relative;
}
.hf .area-tile.rail .rail-bar {
  width: 22px;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.hf .area-tile.rail .rail-bar > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: block;
  background: var(--ink-mute);
}
.hf .area-tile.rail.active .rail-bar > i {
  background: var(--accent);
}
.hf .sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 40, 0.42);
  z-index: 80;
  border: none;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.24s ease;
}
.hf .sidebar-backdrop.dragging {
  transition: none;
}
.hf.blueprint .sidebar-backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.hf .sidebar-drawer-wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 81;
  box-shadow: 0 20px 60px -10px rgba(8, 18, 40, 0.35);
  animation: slide-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.hf .fb-scroller {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hf .fb-header {
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
  padding: 24px 36px 18px;
}
.hf .fb-header-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hf .fb-eyebrow {
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.hf .fb-title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.hf .fb-lede {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px;
  max-width: 66ch;
  line-height: 1.55;
}
.hf .fb-body {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 28px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hf .fb-start-card {
  padding: 24px 28px 22px;
  border-radius: 6px;
}
.hf .fb-start-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hf .fb-start-title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin-bottom: 18px;
}
.hf .fb-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding: 14px 0;
  margin: 6px 0 16px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
@media (max-width: 600px) {
  .hf .fb-breakdown {
    grid-template-columns: 1fr;
  }
}
.hf .fb-break {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hf .fb-break-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hf .fb-break-name {
  font-family: var(--display);
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hf .fb-more {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  transition: color 0.12s;
}
.hf .fb-more:hover {
  color: var(--ink);
}
.hf .fb-more-tag {
  color: var(--accent);
}
.hf .fb-break-due {
  font-size: 10.5px;
  color: var(--caution);
  letter-spacing: 0.08em;
}
.hf .fb-break-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.hf .fb-break-bar > i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  display: block;
}
.hf .fb-break-meta {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hf .fb-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hf .fb-cta-primary {
  padding: 10px 18px;
  font-size: 14.5px;
  font-family: var(--display);
  letter-spacing: -0.005em;
}
.hf .fb-cta-hint {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hf .fb-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hf .fb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hf .fb-sessions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.hf .fb-session {
  display: grid;
  grid-template-columns: 130px 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.hf .fb-sess-when {
  line-height: 1.15;
}
.hf .fb-sess-day {
  font-size: 13.5px;
  color: var(--ink);
}
.hf .fb-sess-time {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
}
.hf .fb-sess-bar {
  height: 3px;
  background: var(--line);
  border-radius: 1.5px;
  position: relative;
  overflow: hidden;
}
.hf .fb-sess-bar > i {
  position: absolute;
  inset: 0;
  background: var(--ink-mute);
  display: block;
}
.hf .fb-sess-bar > i.good {
  background: var(--good);
}
.hf .fb-sess-stats {
  display: flex;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hf .fb-sess-stats .accent {
  color: var(--accent);
}
.hf .fb-sess-stats .mute {
  color: var(--ink-mute);
}
.hf .fb-sess-mix {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hf .fb-session {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 4px;
  }
  .hf .fb-sess-bar {
    display: none;
  }
  .hf .fb-sess-mix {
    text-align: left;
    font-size: 12px;
  }
}
.hf .pace-block {
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.hf .pace-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.hf .pace-track {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.hf .pace-cell {
  flex: 1;
  height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.hf .pace-cell.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.hf .pace-note {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .hf .fb-header {
    padding: 16px 14px 14px;
  }
  .hf .fb-title {
    font-size: 28px;
  }
  .hf .fb-body {
    padding: 16px 14px 32px;
    gap: 18px;
  }
  .hf .fb-start-card {
    padding: 16px 16px 18px;
  }
  .hf .fb-start-title {
    font-size: 18px;
  }
  .hf .fb-cta-hint {
    display: none;
  }
  .hf .pace-cell {
    height: 20px;
  }
}
.hf .today {
  --page-x: 36px;
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}
.hf .today-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px var(--page-x) 20px;
}
.hf .today-header-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.hf .today-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.hf .today-greeting {
  font-size: 40px;
  line-height: 1;
}
.hf .today-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 10px;
  max-width: 64ch;
}
.hf .today-lede .mono {
  color: var(--ink);
}
.hf .today-stat {
  text-align: right;
  flex-shrink: 0;
}
.hf .today-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.hf .today-stat-value {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-top: 7px;
}
.hf .today-stat-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 7px;
}
@media (max-width: 899px) {
  .hf .today-stat {
    display: none;
  }
}
.hf .feed-section {
  padding: 24px var(--page-x) 12px;
}
.hf .completed-section {
  padding: 24px var(--page-x) 40px;
}
.hf .feed-section .section-rule,
.hf .completed-section .section-rule {
  margin-bottom: 18px;
}
.hf .feed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  padding: 22px 24px 20px;
}
.hf .feed-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.hf .feed-hero-eyebrow .mono {
  font-size: 11px;
  color: var(--ink-mute);
}
.hf .feed-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.hf .feed-hero-title {
  font-size: 30px;
  line-height: 1.08;
  margin-bottom: 12px;
  max-width: 32ch;
}
.hf .feed-hero-teaser {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 20px;
}
.hf .feed-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hf .feed-hero-actions .spacer {
  flex: 1;
}
.hf .feed-sample {
  border-left: 1px dashed var(--line);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.hf .feed-sample-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.hf .feed-sample svg {
  width: 100%;
  height: auto;
  opacity: 0.85;
}
.hf .has-tip {
  position: relative;
}
.hf .tip {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  text-align: left;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.hf .has-tip:hover .tip,
.hf .has-tip:focus-within .tip {
  opacity: 1;
  transform: translateY(0);
}
.hf .tip-below-right {
  top: calc(100% + 8px);
  right: 0;
}
.hf .tip-punch {
  position: fixed;
  opacity: 1;
  transform: translate(-50%, calc(-100% - 8px));
  animation: tip-punch-in 0.12s ease both;
}
@keyframes tip-punch-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 4px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 8px));
  }
}
.hf .tip-line {
  white-space: nowrap;
}
.hf .tip-line + .tip-line {
  margin-top: 3px;
}
.hf .tip-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 5px;
}
.hf .tip-goal {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.hf .tip-goal + .tip-goal {
  margin-top: 4px;
}
.hf .tip-check {
  flex-shrink: 0;
  color: var(--good);
}
.hf .tip-check.undone {
  color: var(--ink-faint);
}
.hf .feed-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.hf .stream-row.is-review {
  background: var(--surface-2);
}
.hf .stream-row.is-review:hover {
  background: var(--ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .stream-row.is-review:hover {
    background: color-mix(in srgb, var(--ink) 5%, var(--surface-2));
  }
}
.hf .feed-marker {
  justify-self: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.hf .stream-row.is-review .feed-marker {
  color: var(--ink-mute);
}
.hf .feed-action {
  min-width: 104px;
  justify-content: center;
}
.hf .feed-marker.in-progress {
  position: relative;
  border-color: transparent;
  color: var(--accent);
}
.hf .feed-marker .feed-marker-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hf .feed-marker .prog-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hf .feed-marker .prog-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}
.hf .feed-marker .prog-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.45s ease;
}
.hf .feed-action.resume {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .feed-action.resume {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  }
}
.hf .feed-action.resume:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .feed-action.resume:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  }
}
.hf .feed-action.resume .resume-pct {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0;
}
.hf .feed-action.resume .resume-sep {
  color: var(--accent);
  margin: 0 -1px;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .feed-action.resume .resume-sep {
    color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}
.hf .stream-sub .resume-tag {
  color: var(--accent);
}
.hf .feed-note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 4px;
}
.hf .feed-note-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.hf .feed-note-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hf .completed-group {
  margin-bottom: 22px;
}
.hf .completed-grouphead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.hf .completed-grouphead h3 {
  font-size: 16px;
}
.hf .completed-grouphead .gh-date {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.hf .completed-grouphead .rule {
  flex: 1;
  border-top: 1px dashed var(--line);
  margin-left: 6px;
  position: relative;
  top: -3px;
}
.hf .completed-grouphead .count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.hf .completed-row {
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
}
.hf .completed-row .completed-check {
  justify-self: center;
}
.hf .completed-row .stream-title {
  font-size: 14px;
}
.hf .completed-row .completed-when {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  min-width: 72px;
  text-align: right;
}
.hf .grade {
  display: inline-flex;
  gap: 3px;
}
.hf .grade-sq {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.hf .feed-loadmore {
  display: flex;
  justify-content: center;
  padding: 12px 0 32px;
}
@media (max-width: 720px) {
  .hf .today {
    --page-x: 16px;
  }
  .hf .today-header {
    flex-direction: column;
    gap: 16px;
  }
  .hf .today-stat {
    text-align: left;
  }
  .hf .today-greeting {
    font-size: 30px;
  }
  .hf .feed-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hf .feed-sample {
    border-left: 0;
    border-top: 1px dashed var(--line);
    padding-left: 0;
    padding-top: 16px;
  }
}
@media (max-width: 600px) {
  .hf .completed-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    row-gap: 3px;
  }
  .hf .completed-row .completed-check {
    grid-row: 1 / span 2;
  }
  .hf .completed-row .completed-body {
    display: contents;
  }
  .hf .completed-row .completed-body .stream-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .hf .completed-row .completed-body .stream-sub {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
  }
  .hf .completed-row .grade {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
  }
  .hf .completed-row .completed-transcript {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .hf .completed-row:not(.flowcard-row) .completed-when {
    display: none;
  }
}
.hf .nx-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.hf .nx-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px 11px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.hf .nx-head.static {
  cursor: default;
}
.hf a.nx-head {
  text-decoration: none;
  color: var(--ink);
}
.hf .nx-head:hover:not(.static) {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-head:hover:not(.static) {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  }
}
.hf .nx-head.active {
  position: relative;
}
.hf .nx-head.filled {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-head.filled {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  }
}
.hf .nx-head.active .nx-head-ic,
.hf .nx-head.active .nx-head-name {
  color: var(--ink);
}
.hf .nx-headchip {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--caution);
  color: var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-headchip {
    border: 1px solid color-mix(in srgb, var(--caution) 50%, transparent);
  }
}
.hf .nx-head-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hf .nx-head-ic {
  display: flex;
  color: var(--ink);
  flex-shrink: 0;
}
.hf .nx-head-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf .nx-eta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hf .nx-eta svg {
  color: var(--ink-faint);
}
.hf .nx-ramp {
  display: flex;
  gap: 1px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--str-track);
}
.hf .nx-ramp > span {
  display: block;
  height: 100%;
}
.hf .nx-metarow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.hf .nx-metarow .pct {
  color: var(--ink);
  font-weight: 500;
}
.hf .nx-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  cursor: pointer;
  padding: 8px 13px;
  color: var(--ink);
  font-family: var(--body);
}
.hf .nx-row:hover {
  background: var(--surface-2);
}
.hf .nx-row .nm {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf .nx-row:hover .nm {
  color: var(--ink);
}
.hf .nx-row.active,
.hf .nx-coursegroup.active .nx-row {
  position: relative;
}
.hf .nx-head.active::before,
.hf .nx-row.active::before,
.hf .nx-coursegroup.active .nx-row::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
.hf .nx-head.active::before {
  top: 0;
}
.hf .nx-row.active::before,
.hf .nx-coursegroup.active .nx-row::before {
  top: -1px;
}
.hf .nx-row .pct {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.hf .nx-row .chev {
  color: var(--ink-faint);
  flex-shrink: 0;
  display: flex;
}
.hf button.nx-chev-btn {
  background: transparent;
  border: 0;
  padding: 2px;
  margin: -2px -3px -2px 1px;
  cursor: pointer;
  border-radius: 3px;
  color: var(--ink-faint);
}
.hf button.nx-chev-btn:hover {
  background: var(--surface-2);
  color: var(--ink-mute);
}
.hf .nx-row.dom {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 13px 9px;
}
.hf .nx-row.dom .dom-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hf .nx-row.dom .dom-top .nm {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 400;
}
.hf .nx-row.dom .dom-top .pct {
  font-size: 10px;
}
.hf .nx-row.sub {
  padding-left: 34px;
  background: var(--bg-2);
}
.hf .nx-row.sub .nm {
  font-size: 13px;
  color: var(--ink-soft);
}
.hf .nx-row.sub:hover {
  background: var(--surface-2);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-row.sub:hover {
    background: color-mix(in srgb, var(--surface-2) 70%, var(--bg-2));
  }
}
.hf .nx-grouphead {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 11px 13px 6px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.hf .nx-actions {
  display: flex;
  gap: 6px;
  padding: 6px 13px 10px;
  background: var(--bg-2);
}
.hf .nx-chip {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 999px;
  flex-shrink: 0;
}
.hf .nx-chip.due {
  color: var(--caution);
  border: 1px solid var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-chip.due {
    border: 1px solid color-mix(in srgb, var(--caution) 40%, transparent);
  }
}
.hf .nx-chip.new {
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .nx-chip.new {
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  }
}
.hf .nx-libtoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  cursor: pointer;
  padding: 9px 12px;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hf .nx-libtoggle:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .nx-libtoggle .chev {
  display: flex;
  opacity: 0.6;
}
.hf .sxe {
  position: relative;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px 12px;
}
.hf .sxe.risk {
  background: var(--caution);
  border-color: var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sxe.risk {
    background: color-mix(in srgb, var(--caution) 7%, var(--surface));
  }
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sxe.risk {
    border-color: color-mix(in srgb, var(--caution) 35%, transparent);
  }
}
.hf .sxe-eyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hf .sxe-ey {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hf .sxe-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hf .sxe-streak .flame {
  color: var(--caution);
  width: 8px;
  height: 10px;
}
.hf .sxe-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-items: center;
}
.hf .sxe-punch {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px dashed var(--ink-faint);
  background: var(--bg);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hf .sxe-punch.done {
  border: none;
  background: var(--good);
}
.hf .sxe-punch.today {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-faint);
}
.hf .sxe.risk .sxe-punch.today {
  border-color: var(--caution);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--caution);
}
.hf .sxe-punch svg {
  display: block;
}
.hf .prog-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.hf .prog-ring svg {
  display: block;
  overflow: visible;
}
.hf .prog-ring .trk {
  stroke: var(--ink-faint);
  opacity: 0.55;
}
.hf .prog-ring.at-risk .trk {
  stroke: var(--caution);
  opacity: 0.9;
}
.hf .prog-ring .arc {
  stroke: var(--good);
  transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.hf .prog-ring .fill {
  fill: var(--good);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.42s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.42s ease;
}
.hf .prog-ring.full .fill {
  opacity: 1;
  transform: scale(1);
}
.hf .prog-ring .chk {
  stroke: #fff;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  opacity: 0;
}
.hf .prog-ring.full .chk {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.34s ease 0.26s;
}
@media (prefers-reduced-motion: no-preference) {
  .hf .prog-ring.pulse-half svg {
    animation: streak-glow-half 1s ease-out;
  }
  .hf .prog-ring.pulse-full svg {
    animation: streak-glow-full 1.1s ease-out;
  }
}
.hf .sxe-ring {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-faint);
}
.hf .sxe-ring.at-risk {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--caution);
}
@keyframes streak-glow-half {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  45% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--good) 60%, transparent));
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
}
@keyframes streak-glow-full {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  35% {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--good) 85%, transparent));
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
}
.hf .sxe-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--caution);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .sxe-note {
    border-top: 1px dashed color-mix(in srgb, var(--caution) 28%, var(--line));
  }
}
.hf .sxe-note .ic {
  color: var(--caution);
  flex-shrink: 0;
  margin-top: 1px;
}
.hf .sxe-note b {
  color: var(--ink);
  font-weight: 600;
}
.hf .theme-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.hf .tt-track {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}
.hf .tt-ic {
  width: 11px;
  height: 11px;
  color: var(--ink-mute);
  display: flex;
  z-index: 1;
}
.hf .tt-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(8, 18, 40, 0.25);
  transition: transform 0.2s;
}
.hf.blueprint .tt-knob {
  transform: translateX(22px);
}
.hf .cmdk-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
}
.hf .cmdk-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: default;
  background: var(--bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .cmdk-backdrop {
    background: color-mix(in srgb, var(--bg) 30%, rgba(4, 10, 24, 0.55));
  }
}
.hf .help-root {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  justify-content: flex-end;
}
.hf .help-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: default;
  background: var(--bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .help-backdrop {
    background: color-mix(in srgb, var(--bg) 24%, rgba(4, 10, 24, 0.5));
  }
}
.hf .help-panel {
  position: relative;
  z-index: 1;
  width: min(440px, 94vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -34px rgba(4, 10, 24, 0.6), -1px 0 0 0 var(--line-soft);
}
.hf .help-grip {
  display: none;
}
.hf .help-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 16px;
}
.hf .help-head-titles {
  flex: 1;
  min-width: 0;
}
.hf .help-eyebrow {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 9px;
}
.hf .help-title {
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hf .help-close {
  padding: 7px;
  flex-shrink: 0;
}
.hf .help-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.hf .help-tabs::-webkit-scrollbar {
  display: none;
}
.hf .help-tabs.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}
.hf .help-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-mute);
  padding: 10px 8px 12px;
  cursor: pointer;
  position: relative;
  letter-spacing: 0;
  white-space: nowrap;
}
.hf .help-tab:hover {
  color: var(--ink-soft);
}
.hf .help-tab.on {
  color: var(--ink);
}
.hf .help-tab.on::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.hf .help-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 24px;
}
.hf .help-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 18px 0 4px;
  text-wrap: pretty;
}
.hf .help-block {
  display: flex;
  gap: 13px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.hf .help-block:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.hf .help-block-ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  margin-top: 1px;
}
.hf .help-block-main h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 1px 0 5px;
  letter-spacing: -0.005em;
}
.hf .help-block-main p {
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.hf .help-outro {
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  text-wrap: pretty;
}
.hf .help-kgroup {
  margin-top: 22px;
}
.hf .help-kgroup:first-child {
  margin-top: 14px;
}
.hf .help-kgroup-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding-bottom: 4px;
}
.hf .help-krow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.hf .help-krow .lab {
  font-size: 13px;
  color: var(--ink-soft);
}
.hf .help-keycaps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.hf .help-keycaps .sep {
  color: var(--ink-faint);
  font-size: 11px;
}
.hf .help-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.hf .help-foot-sp {
  flex: 1;
}
.hf .help-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.hf .help-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
@media (max-width: 720px) {
  .hf .help-root {
    flex-direction: column;
    justify-content: flex-end;
  }
  .hf .help-panel {
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -26px 70px -28px rgba(4, 10, 24, 0.55), 0 -1px 0 0 var(--line-soft);
    transition: transform 0.22s ease;
  }
  .hf .help-panel.dragging {
    transition: none;
  }
  .hf .help-panel .help-grip,
  .hf .help-panel .help-head {
    touch-action: none;
  }
  .hf .help-grip {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: var(--ink-faint);
    margin: 9px auto 0;
    flex-shrink: 0;
  }
  .hf .help-head {
    padding-top: 14px;
  }
  .hf .help-title {
    font-size: 23px;
  }
}
.hf .cmdk-panel {
  position: relative;
  z-index: 1;
  width: min(580px, 94vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 32px 80px -28px rgba(4, 10, 24, 0.7), 0 0 0 1px var(--line-soft);
  overflow: hidden;
  animation: cmdk-in 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes cmdk-in {
  from {
    transform: translateY(-8px) scale(0.985);
  }
  to {
    transform: none;
  }
}
.hf .cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.hf .cmdk-input-row svg {
  color: var(--ink-mute);
  flex-shrink: 0;
}
.hf .cmdk-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.hf .cmdk-input::placeholder {
  color: var(--ink-faint);
}
.hf .cmdk-esc {
  flex-shrink: 0;
}
.hf .cmdk-list {
  overflow-y: auto;
  padding: 6px;
}
.hf .cmdk-group-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 12px 5px;
}
.hf .cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--body);
}
.hf .cmdk-item.active {
  background: var(--surface-2);
}
.hf .cmdk-item.active .cmdk-go {
  opacity: 1;
}
.hf .cmdk-ic {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  background: var(--surface);
}
.hf .cmdk-item.active .cmdk-ic {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.hf .cmdk-main {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.hf .cmdk-title {
  font-size: 14px;
}
.hf .cmdk-title b {
  font-weight: 600;
  color: var(--accent);
  font-style: normal;
}
.hf .cmdk-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf .cmdk-meta {
  flex-shrink: 0;
}
.hf .cmdk-go {
  opacity: 0;
  color: var(--ink-mute);
  flex-shrink: 0;
  transition: opacity 0.1s;
}
.hf .cmdk-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}
.hf .cmdk-empty .mono {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.hf .cmdk-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.hf .cmdk-foot .sp {
  flex: 1;
}
.hf .cmdk-foot .k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hf .lc-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.hf .lc-card {
  width: min(540px, 100%);
}
.hf .lc-hero {
  text-align: center;
  margin-bottom: 26px;
}
.hf .lc-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--good);
  border: 1.5px solid var(--good);
  background: var(--good);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lc-check {
    border: 1.5px solid color-mix(in srgb, var(--good) 45%, transparent);
  }
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lc-check {
    background: color-mix(in srgb, var(--good) 12%, transparent);
  }
}
.hf .lc-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.hf .lc-title {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.hf .lc-grade {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hf .lc-squares {
  display: inline-flex;
  gap: 4px;
}
.hf .lc-sq {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--ink-faint);
  background: transparent;
}
.hf .lc-sq.on {
  background: var(--good);
  border-color: var(--good);
}
.hf .lc-perfect {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hf .lc-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hf .lc-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.hf .lc-row.accent {
  background: var(--surface-2);
}
.hf .lc-ic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hf .lc-ic.flame {
  background: var(--caution);
  color: var(--caution);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lc-ic.flame {
    background: color-mix(in srgb, var(--caution) 10%, var(--surface));
  }
}
.hf .lc-ic.good {
  background: var(--good);
  color: var(--good);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lc-ic.good {
    background: color-mix(in srgb, var(--good) 14%, transparent);
  }
}
.hf .lc-ic.lock {
  background: var(--accent);
  color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .lc-ic.lock {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }
}
.hf .lc-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.hf .lc-head {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
}
.hf .lc-detail {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.hf .lc-detail b {
  color: var(--ink);
  font-weight: 600;
}
.hf .lc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--accent);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
}
.hf .lc-link:hover {
  text-decoration: underline;
}
.hf .lc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.hf .lc-cta .btn.accent {
  padding: 11px 20px;
}
.hf .str-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.hf .str-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  background: transparent;
}
.hf .browse-grid {
  --bcard-w: 228px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bcard-w), 1fr));
  gap: 12px;
}
.hf .bcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 15px 16px 14px;
  min-height: 104px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  font-family: var(--body);
  transition:
    border-color 0.13s,
    box-shadow 0.13s,
    transform 0.06s;
}
.hf .bcard:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 8px 22px -16px rgba(8, 18, 40, 0.5);
}
.hf .bcard:active {
  transform: translateY(0.5px);
}
.hf .bcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hf .bcard-kind {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hf .bcard-front {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
}
.hf .bcard-back {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow: hidden;
}
.hf .bcard-back-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.1, 1);
}
.hf .bcard-back-wrap > div {
  min-height: 0;
  overflow: hidden;
}
.hf .browse-grid.revealed .bcard-back-wrap {
  grid-template-rows: 1fr;
}
.hf .bcard-sep {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 1px 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.hf .browse-grid.revealed .bcard-sep {
  opacity: 1;
}
.hf .browse-filter {
  display: inline-flex;
  gap: 2px;
}
.hf .fb-filter-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  cursor: pointer;
  text-transform: uppercase;
}
.hf .fb-filter-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.hf .fb-filter-btn.active {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.hf .ans-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 2px;
  gap: 2px;
}
.hf .ans-seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.13s;
}
.hf .ans-seg button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(8, 18, 40, 0.12);
}
.hf .ans-seg button.on .dot {
  background: var(--accent);
}
.hf .ans-seg .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}
@media (max-width: 600px) {
  .hf .browse-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .hf .bcard {
    min-height: 88px;
    padding: 12px 13px;
  }
}
.hf .fp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hf .fp-readout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.hf .fp-phase {
  font-family: var(--display);
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.hf .fp-phase-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.hf .fp-chart-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 8px 10px 4px;
}
.hf .fp-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hf .fp-grid {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.5;
}
.hf .fp-grid-lbl {
  fill: var(--ink-faint);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  text-anchor: end;
}
.hf .fp-band {
  fill: transparent;
}
.hf .fp-band:nth-of-type(even) {
  fill: var(--ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-band:nth-of-type(even) {
    fill: color-mix(in srgb, var(--ink) 3%, transparent);
  }
}
.hf .fp-band-hl {
  fill: var(--accent);
  pointer-events: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-band-hl {
    fill: color-mix(in srgb, var(--accent) 13%, transparent);
  }
}
.hf .fp-area {
  fill: var(--accent);
  stroke: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-area {
    fill: color-mix(in srgb, var(--accent) 9%, transparent);
  }
}
.hf .fp-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hf .fp-band-lbl {
  fill: var(--ink-faint);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-anchor: middle;
}
.hf .fp-band-lbl.active {
  fill: var(--accent);
  font-weight: 600;
}
.hf .fp-scrub {
  stroke: var(--ink-mute);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.hf .fp-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}
.hf .fp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hf .fp-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.hf .fp-play:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.hf .fp-range {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.hf .fp-instruments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.hf .fp-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hf .fp-dial,
.hf .fp-ai {
  width: 100%;
  max-width: 96px;
  height: auto;
}
.hf .fp-dial-face,
.hf .fp-ai-ring {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.4;
}
.hf .fp-ai-ring {
  fill: none;
  stroke-width: 2;
}
.hf .fp-tick {
  stroke: var(--ink-faint);
  stroke-width: 1.2;
}
.hf .fp-needle {
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.hf .fp-needle-hub {
  fill: var(--ink);
}
.hf .fp-ai-sky {
  fill: #4a90d9;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-ai-sky {
    fill: color-mix(in srgb, #4a90d9 70%, var(--surface));
  }
}
.hf .fp-ai-ground {
  fill: #8a6a3a;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-ai-ground {
    fill: color-mix(in srgb, #8a6a3a 70%, var(--surface));
  }
}
.hf .fp-ai-horizon {
  stroke: var(--surface);
  stroke-width: 1.4;
}
.hf .fp-ai-wing,
.hf .fp-ai-dot {
  stroke: var(--caution);
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: var(--caution);
}
.hf .fp-gauge-val {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink);
}
.hf .fp-gauge-lbl {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.hf .fp-throttle {
  width: 16px;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--str-track, var(--ink));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .hf .fp-throttle {
    background: var(--str-track, color-mix(in srgb, var(--ink) 8%, var(--surface)));
  }
}
.hf .fp-throttle > i {
  display: block;
  width: 100%;
  background: var(--accent);
  transition: height 0.25s ease;
}
@media (max-width: 600px) {
  .hf .fp-instruments {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lesson-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: currentColor;
  white-space: nowrap;
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status {
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  }
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
.lesson-status.status-idea {
  color: var(--ink-mute);
}
.lesson-status.status-drafting {
  color: var(--accent);
}
.lesson-status.status-in-review {
  color: var(--caution);
}
.lesson-status.status-signed-off {
  color: var(--good);
}
.lesson-status.status-published {
  color: var(--good);
  background: var(--good);
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status.status-published {
    background: color-mix(in srgb, var(--good) 20%, transparent);
  }
}
.lesson-status.status-completed {
  color: var(--accent);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status.status-completed {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
.lesson-status.status-unlocked {
  color: var(--good);
  background: var(--good);
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status.status-unlocked {
    background: color-mix(in srgb, var(--good) 18%, transparent);
  }
}
.lesson-status.status-locked {
  color: var(--ink-mute);
  background: var(--line);
}
@supports (color: color-mix(in lab, red, red)) {
  .lesson-status.status-locked {
    background: color-mix(in srgb, var(--line) 55%, transparent);
  }
}
.lesson-tier-stretch {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 1px 6px;
}
.board-row.is-outline {
  opacity: 0.6;
}
.board-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.board-issues {
  font-size: 10px;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
}
.board-issues.is-blocked {
  color: var(--bad);
}
.board-issues:hover {
  color: var(--accent);
}
.board-add {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.board-add:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.board-add:disabled {
  opacity: 0.4;
  cursor: default;
}
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */