/* Stackmoor website. Fonts: IBM Plex (SIL Open Font License, see fonts/OFL.txt). */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-Regular.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-Medium.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-SemiBold.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexSans-Bold.woff) format('woff')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff) format('woff')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-Medium.woff) format('woff')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-SemiBold.woff) format('woff')}
body{margin:0;background:#0c2f33}
html{scroll-behavior:smooth}
.f-skip{position:absolute;left:-9999px}.f-skip:focus{left:16px;top:16px;z-index:10;background:#f4e4c1;color:#0c2f33;padding:8px 12px}
:focus-visible{outline:2px solid #f4e4c1;outline-offset:3px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
a{color:#f4e4c1}a:hover{color:#ffffff}
.f-paper{background-color:#0c2f33;background-image:linear-gradient(rgba(150,220,205,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,205,.10) 1px,transparent 1px),linear-gradient(rgba(150,220,205,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,205,.05) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
@keyframes f-flow{to{stroke-dashoffset:-40}}
@keyframes f-on{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes f-type{from{width:0}to{width:100%}}
@keyframes f-show{from{opacity:0}to{opacity:1}}
@keyframes f-blink{50%{opacity:0}}
@keyframes f-grow{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
@keyframes f-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes f-run{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes f-step{0%,100%{background-color:transparent;color:#f4e4c1}50%{background-color:#f4e4c1;color:#0c2f33}}
.f-wire{stroke-dasharray:6 6;animation:f-flow 1.6s linear infinite}
.f-wire.slow{animation-duration:3.2s}
.f-led{animation:f-on 2.4s ease-in-out infinite}
.f-led.l2{animation-delay:.8s}.f-led.l3{animation-delay:1.6s}
.f-typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:f-type 2.4s steps(60) .4s both}
@keyframes f-reveal{0%,6%{opacity:0;transform:translateY(3px)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
.f-out{animation:f-reveal 8s ease-out infinite both}
.f-out.o1{animation-delay:.6s}.f-out.o2{animation-delay:1.2s}.f-out.o3{animation-delay:1.8s}.f-out.o4{animation-delay:2.4s}
.f-cursor{animation:f-blink 1s steps(1) infinite}
.f-bar{transform-origin:bottom;animation:f-grow .9s cubic-bezier(.2,.8,.2,1) both}
.f-bar:nth-child(2){animation-delay:.08s}.f-bar:nth-child(3){animation-delay:.16s}.f-bar:nth-child(4){animation-delay:.24s}
.f-bar:nth-child(5){animation-delay:.32s}.f-bar:nth-child(6){animation-delay:.4s}.f-bar:nth-child(7){animation-delay:.48s}
.f-bar:nth-child(8){animation-delay:.56s}.f-bar:nth-child(9){animation-delay:.64s}.f-bar:nth-child(10){animation-delay:.72s}
.f-ping{position:relative}
.f-ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:#6cc4ae;animation:f-ping 1.8s ease-out infinite}
.f-track{position:relative;overflow:hidden}
.f-track::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#f4e4c1,transparent);animation:f-run 3.2s linear infinite}
.f-num{animation:f-step 3.2s ease-in-out infinite}
.f-num.n2{animation-delay:.8s}.f-num.n3{animation-delay:1.6s}.f-num.n4{animation-delay:2.4s}
.f-cell{transition:background-color .2s ease}
.f-cell:hover{background-color:rgba(150,220,205,.07)}
.f-btn{transition:background-color .15s ease,color .15s ease}
.f-btn:hover{background-color:#f4e4c1;color:#0c2f33}
@media (min-width: 760px){.f-wide{grid-column:span 2}}
@media (prefers-reduced-motion: reduce){
  .f-wire,.f-led,.f-typed,.f-out,.f-cursor,.f-bar,.f-ping::after,.f-track::after,.f-num{animation:none !important}
  .f-typed{width:auto}
}
.f-tall-only{display:none}
@media (max-width: 640px){.f-wide-only{display:none !important}.f-tall-only{display:block}}
/* Comparison table becomes one card per feature on phones */
@media (max-width: 640px){
  .f-compare{min-width:0 !important}
  .f-compare thead{position:absolute;left:-9999px}
  .f-compare,.f-compare tbody,.f-compare tr,.f-compare th,.f-compare td{display:block;width:auto}
  .f-compare tr{border-bottom:1.5px solid rgba(220,239,234,.6);padding:6px 0 10px}
  .f-compare tr:last-child{border-bottom:0}
  .f-compare th{padding:10px 16px 6px !important;border:0 !important;font-weight:600 !important;color:#ffffff}
  .f-compare td{display:flex;justify-content:space-between;gap:12px;padding:4px 16px !important;border:0 !important}
  .f-compare td::before{content:attr(data-label);font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#8fbab2}
}