@import url(https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap);
@charset "UTF-8";
/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
@tailwind base;
/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;
/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */
/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;
/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */
/* ====================================================================
   SEMANTIC COLOUR TOKENS

   The values behind `bg-surface`, `text-ink`, `border-line` and the rest
   of the semantic aliases in tailwind.config.js. The ramp itself lives in
   the config and reaches this file as `--n-*` custom properties; what a
   step MEANS lives here, because meaning is the part that changes between
   the platform shell and the two chromes the lab browser has to render.

   Three scopes, and every one of them uses the same names:

   Three border rungs, because a hairline's weight depends on what it sits on
   and not on the property it fills:

     --line          on the region's ground   (~11 points above it)
     --line-panel    inside a raised panel    (~8 - deliberately under --line,
                                               because a frame outranks the
                                               rules drawn inside it)
     --line-strong   hover and focus only

   `--line` on a panel is only five points up and reads as nothing; reaching
   for `--line-strong` instead overcorrects, because that is the emphasis
   step and a resting divider is not emphasis.

     :root            the platform shell - dark, and only dark
     .browser         the lab browser's light chrome
     .browser .dark   the lab browser's dark chrome

   The third scope works because the browser stamps `.dark` on each themed
   element rather than on one root, and a custom property is visible to the
   element that declares it. No component has to change for these to take
   effect - and when the chrome is later refactored to carry the mode once
   on `.browser`, these rules keep working unchanged.
   ==================================================================== */
:root {
  --surface: var(--n-11); /* the ground a region sits on */
  --surface-panel: var(--n-17); /* chrome bars, cards, raised panels
   - the browser topbar colour, now
   the platform's panel too */
  --surface-field: var(--n-14); /* inputs, wells, tracks */
  --line: var(--n-22); /* hairline - Δ11.5 above the n-11 ground */
  --line-panel: var(--n-25); /* a divider INSIDE a panel - Δ8 on the
   panel, deliberately under the frame's Δ11 */
  --line-strong: var(--n-37); /* hairline on hover or focus */
  --ink: var(--n-93); /* primary text */
  --ink-2: var(--n-71); /* secondary            7.94:1 */
  --ink-3: var(--n-58); /* tertiary - AA floor  4.78:1 */
  --ink-4: var(--n-48); /* quiet numerals and counts - still information */
  --ink-inert: var(--n-37); /* disabled, decorative only */
  --on-accent: var(--n-11); /* text on an accent fill */
  /* --track is the groove a progress bar or meter runs in: passive, shows
     a value, never interactive. It is L22 - deliberately quiet, because
     the fill on top of it is the thing being read.

     It is NOT: a switch's inactive track (that is --control, L33, and it
     has to read as something you can hit), and NOT a separator dot or any
     other small glyph (those are ink - --ink-inert, L37). Both have been
     put here by mistake, and both went invisible, because the name sounds
     structural and the value is calibrated for something else. If what you
     are colouring is a thing the reader looks AT rather than a channel
     something else sits IN, this is the wrong token.

     Legitimate users: a progress bar's groove, and the unfilled dots of a
     segmented meter (the difficulty meter on /labs) - those dots are the
     channel, not glyphs, which is why they belong here and the separator
     dot beside them does not. */
  --track: var(--n-25);
  --track-hover: var(--n-33);
  --control: var(--n-33); /* a switch's inactive track - interactive,
   so it has to read as a thing you can hit */
  --control-hover: var(--n-37);
  --wash: var(--n-19); /* hover fill on a known surface */
  --wash-strong: var(--n-27);
}

/* Light chrome. Only the lab browser needs it now - a lab simulates a real
   website and plenty of those are light.

   This block used to also carry `body:not(.dark)`, from when the lesson page
   had a light theme. That theme is gone, but the selector outlived it - and
   every standalone auth document (login, register, verify, both password
   pages) sets no `dark` class on its body, so all five silently rendered in
   the light scope: n-90 hairlines and n-27 ink on a dark design. */
.browser {
  --surface: var(--n-97); /* the well behind page content */
  --surface-panel: var(--n-95); /* toolbar and tab strip */
  --surface-field: var(--n-100); /* the address field */
  --line: var(--n-90); /* Δ5 below the n-95 chrome */
  --line-panel: var(--n-86); /* a divider INSIDE a panel */
  --line-strong: var(--n-79); /* separators, firmed borders */
  --ink: var(--n-27);
  --ink-2: var(--n-53); /* control labels and icon rest */
  --ink-3: var(--n-65); /* quiet icons */
  --ink-4: var(--n-71); /* quiet numerals and counts - still information */
  --ink-inert: var(--n-79);
  --on-accent: var(--n-100);
  --track: var(--n-86);
  --track-hover: var(--n-79);
  --control: var(--n-79);
  --control-hover: var(--n-71);
  --wash: var(--n-90);
  --wash-strong: var(--n-86);
}

.browser .dark {
  --surface: var(--n-14); /* the well behind page content */
  --surface-panel: var(--n-17); /* chrome, a step above the well */
  --surface-field: var(--n-14); /* the field matches the well here */
  --line: var(--n-22); /* the platform hairline, unchanged in
   here. Against the page ground the
   browser's outer frame reads Δ11.5,
   the same as every other panel edge;
   against the n-17 chrome its internal
   dividers fall to Δ5, which is the
   hierarchy you want anyway - a frame
   should outrank the rules inside it. */
  --line-panel: var(--n-25); /* a divider INSIDE a panel - Δ8 on the
   panel, deliberately under the frame's Δ11 */
  --line-strong: var(--n-37);
  --ink: var(--n-93);
  --ink-2: var(--n-71);
  --ink-3: var(--n-58);
  --ink-4: var(--n-48); /* quiet numerals and counts - still information */
  --ink-inert: var(--n-37);
  --on-accent: var(--n-11);
  --track: var(--n-27);
  --track-hover: var(--n-37);
  --control: var(--n-33);
  --control-hover: var(--n-37);
  --wash: var(--n-19);
  --wash-strong: var(--n-27);
}

html {
  font-family: "Figtree", system-ui, sans-serif;
}

/* The two reading surfaces. Long-form passages a learner sits with, as
   opposed to the interface they operate. */
.lesson-content,
.hands-on-box {
  font-family: "Open Sans", system-ui, sans-serif;
}

html, body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  -moz-osx-font-smoothing: grayscale;
  /* Kept as a literal: this paints before any stylesheet has resolved a
     custom property, and a flash of white behind the app is worse than
     one duplicated value. It is n-11. */
  background: #040404;
}

.ct-60 {
  margin-top: -7rem;
}

:root {
  --oldblack: #11141b; /* Default light mode value */
  /* Motion curves. The built-in CSS easings are too weak to read as
     deliberate, so UI motion uses these rather than `ease-out`/`ease-in-out`
     directly. Entering and exiting take --ease-out; movement on screen takes
     --ease-in-out; panels take the iOS drawer curve. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

.dark {
  --oldblack: #131417; /* Different value for dark mode */
}

@media screen and (max-width: 768px) {
  .ct-60 {
    margin-top: 0px;
    padding-top: 3rem;
  }
  .container-menu {
    width: 100%;
  }
}
.bgfw-container {
  width: 100%;
  overflow: hidden;
  display: block;
}

.bg {
  width: 100.5% !important;
  margin-bottom: -1px;
  margin-left: -1px;
  box-sizing: border-box;
  display: block;
  background: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.scale {
  transform: scale(1.1, 0.85); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: left;
}

.heading {
  max-width: 300px;
}
.heading .icon {
  width: 87px;
  min-width: 87px;
  height: 87px;
  max-height: 87px;
  border-width: 4px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
}

.icon-blue {
  background: rgb(4, 190, 254);
  background: linear-gradient(to top, rgb(4, 190, 254) 0%, rgb(68, 129, 235) 100%);
}

.icon-green {
  background: #27ae60;
  background: linear-gradient(to bottom, #27ae60 0%, #2ecc71 100%);
}

.icon-pink {
  background: #8b60ed;
  background: linear-gradient(to bottom, #8b60ed 0%, #b372be 100%);
}

.bb-nav {
  border-bottom: 1px solid #ebebeb;
}

.icon-red {
  background: #ec454f;
  background: linear-gradient(to bottom, #eb3b5a 0%, #f44881 100%);
}

.icon-orange {
  background: rgb(255, 172, 68);
  background: linear-gradient(to bottom, rgb(252, 96, 45) 0%, rgb(255, 172, 68) 100%);
}

.icon-yellow {
  background: #ffc63b;
  background: linear-gradient(to top, #ffc63b 0%, #f19a1a 100%);
}

.mw-250 {
  max-width: 260px;
}

.lline {
  height: 7px;
  border: 1px;
  background: rgba(255, 255, 255, 0.3);
}

@media screen and (max-width: 768px) {
  .heading {
    max-width: 240px;
  }
  .heading .icon {
    width: 67px;
    min-width: 67px;
    height: 67px;
    max-height: 67px;
  }
}
@media screen and (max-width: 640px) {
  .heading {
    max-width: 100%;
  }
  .heading .icon {
    width: 77px;
    min-width: 77px;
    height: 77px;
    max-height: 77px;
  }
  .mw-250 {
    max-width: 100%;
  }
}
section#course-header {
  position: relative;
  overflow: hidden;
}

.lesson-number {
  width: 70px;
  min-width: 70px;
  height: 70px;
  max-height: 70px;
  border-width: 4px;
}

@media screen and (max-width: 640px) {
  .lesson-number {
    width: 55px;
    min-width: 55px;
    height: 55px;
    max-height: 55px;
    border-width: 4px;
  }
}
.lesson-number-big {
  width: 100px;
  min-width: 100px;
  height: 100px;
  max-height: 100px;
  border-width: 4px;
}

.hands-on-sidebar {
  width: 460px;
}

.learn-sidebar {
  width: 285px;
}
.learn-sidebar ul li h2 {
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875em;
}
.learn-sidebar ul li h2:hover {
  transform: translate3d(5px, 0, 0);
}
.learn-sidebar ul a.is-active li ul {
  display: block;
}

.bullet {
  width: 7px;
  height: 7px;
  display: block;
  transition: all 0.05s linear;
}

.lesson-content:not(.lesson-content .hands-on) {
  max-width: 42rem;
}
.lesson-content:not(.lesson-content .hands-on) p:not(.hands-on p, .quiz-box p) {
  line-height: 1.8rem;
  margin-bottom: 2rem;
}
.lesson-content:not(.lesson-content .hands-on) h2:not(.hands-on h2), .lesson-content:not(.lesson-content .hands-on) h3:not(.hands-on h3), .lesson-content:not(.lesson-content .hands-on) h4:not(.hands-on h4) {
  font-weight: bold;
  color: var(--ink);
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.lesson-content:not(.lesson-content .hands-on) h2 {
  line-height: 2.3rem;
  font-size: 1.875rem;
}
.lesson-content:not(.lesson-content .hands-on) h3 {
  font-size: 1.125rem;
}
.lesson-content:not(.lesson-content .hands-on) h4:not(.hands-on h4) {
  font-size: 1rem;
}
.lesson-content:not(.lesson-content .hands-on) h2:not(h2:first-child) {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 640px) {
  .lesson-content h2:not(.hands-on h2) {
    line-height: 2.3rem;
    font-size: 1.375rem;
  }
}
a.is-active li > h2 {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.quiz-box .answer {
  cursor: pointer;
  transition: 0.3s all ease;
}
.quiz-box .answer * {
  transition: 0.3s all ease;
}
.quiz-box .answer:hover span {
  color: var(--ink-3);
}
.quiz-box .answer:hover > div:not(.border-green-1) {
  border-color: var(--ink-3);
}
.quiz-box .custom-answer {
  background: var(--surface-panel);
  width: 120px;
  height: 120px;
  border: 2px solid var(--surface-panel);
  border-radius: 10px;
  transition: 0.3s all ease;
}
.quiz-box .custom-answer.active {
  border: 2px solid var(--accent);
}
.quiz-box .custom-answer:hover {
  border: 2px solid var(--accent);
}
.quiz-box p {
  margin-bottom: 0px;
  line-height: 1.8rem;
}
.quiz-box .quiz-bullet {
  width: 20px;
  height: 20px;
}
.quiz-box .quiz-bullet .inner-bullet {
  width: 8px;
  height: 8px;
  transition: 0.3s all ease;
}

pre {
  word-wrap: normal;
  white-space: pre-wrap;
  margin-bottom: 40px !important;
}

.code-playground pre {
  white-space: pre;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}

.code-playground code {
  padding: 20px 25px !important;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: none;
  line-height: 2;
}

pre.hljs::-moz-selection,
pre.hljs ::-moz-selection,
code.hljs::-moz-selection,
code.hljs ::-moz-selection {
  text-shadow: none;
  background-color: #5a5f80;
}

pre.hljs::-moz-selection, pre.hljs ::-moz-selection, code.hljs::-moz-selection, code.hljs ::-moz-selection {
  text-shadow: none;
  background-color: #5a5f80;
}

pre.hljs::selection,
pre.hljs ::selection,
code.hljs::selection,
code.hljs ::selection {
  text-shadow: none;
  background-color: #5a5f80;
}

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre.line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid var(--ink-4);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: var(--ink-4);
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

pre > code {
  font-family: Inconsolata, monospace !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  vertical-align: middle !important;
  line-height: 1.8 !important;
  box-shadow: 4px 4px 15px 0 var(--wash);
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #282a36;
  border-radius: 10px;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #50fa7b;
}

.hljs-keyword {
  color: #ff79c6;
}

.hljs-attribute {
  color: #ffb86c;
}

.hljs,
.hljs-subst, .hljs-selector-id {
  color: #f8f8f2;
}

.hljs-title,
.hljs-attr,
.hljs-meta-keyword {
  font-style: italic;
  color: #50fa7b;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #f1fa8c;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-literal,
.hljs-number {
  color: #bd93f9;
}

.hljs-emphasis {
  font-style: italic;
}

.code-playground .hljs:not(.checkcode) {
  background: #1d1e1f;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.switch .toggle-track.disabled {
  cursor: not-allowed !important;
}

.toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: #d1d6ee;
  border-radius: 11px;
  transition: background 0.15s linear;
}

.toggle-circle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s ease-in-out;
}

.toggle-track:hover {
  background: #cacfe6;
}

.toggle-circle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease-in-out;
  filter: drop-shadow(0 0.5px 0.5px rgba(0, 9, 61, 0.1));
}

.switch.active .toggle-circle {
  transform: translateX(18px);
}

.switch.active .toggle-track {
  background: #275efe;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ---------------------------------------------------------------- browser
   Chrome (tab strip + toolbar) drawn as one flat, true-neutral surface on the
   #040404 shell: one hairline frames it, tabs are centred pills, controls are
   28px ghosts. No tinted greys - the blue-leaning #131417 family belongs to
   the lab content, not to the chrome around it. */
.browser {
  /* The launch screen sits on the page well, a shade under the chrome, so the
     panel it holds reads as content rather than as more chrome. */
  /* The nav group sits under the traffic lights, so the thing that has to
     line up with the red dot is the ARROW - not the 36px hover square around
     it. The square is 17px wider than the glyph, which left the arrow 8px
     right of the dot above it. Pull the group left by that difference and
     hand the same 8px back on the right, so the glyph lands on the dot's
     centre and nothing downstream of it moves. */
  /* Every icon control in the chrome - back, forward, refresh, theme - is
     the same 32px ghost square: no filled plates, colour and a faint wash on
     hover carry the affordance. Icon colours are solid hex, never alpha:
     translucent strokes double-darken where an icon's lines cross. */
  /* Vertical hairline between control groups on the toolbar - the only
     divider the chrome keeps. */
  /* Height carries the controls; the extra sits in padding-bottom so the
     toolbar gains air against the page below it without reopening the seam
     to the tab strip above. Flex centring works on the content box, so the
     controls stay put. */
  /* ------------------------------------------------------------- tab strip
     Tabs are centred 32px pills, not trapezoids merging into the toolbar:
     the chrome is one surface now, so a tab only has to say "current", not
     bridge two differently-coloured rows. Three slots - favicon, label,
     close - and the label truncates against the close button. */
  /* A step behind the label rather than level with it - via a solid colour,
     not opacity, so the mark's overlapping strokes stay clean. */
  /* Reserved on every tab so switching never changes a width, and lit only
     where it can act. Opacity only hides/shows it; the visible state is a
     solid colour so the crossing strokes of the X stay uniform. */
  /* A hairline in the gap between two inactive tabs, inset so it reads as a
     separator rather than as a rule. */
  /* The new-tab affordance: a slightly smaller ghost than the tabs beside
     it, so it reads as an action, not a tab. */
  /* Reset confirmation: the launch panel's card, shrunk to a popover. The
     destructive action is the filled one and it says what it resets, so the
     two buttons are never a coin toss. */
}
.browser .proxy {
  /* Compact 38x22 track. Active state is the platform green - proxy ON
     is a functional state, the one place the accent is earned. */
}
.browser .proxy .proxy-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.browser .proxy .proxy-link:hover {
  color: var(--ink);
}
.browser .proxy .switch,
.browser .proxy .toggle-track {
  width: 40px;
  height: 24px;
}
.browser .proxy .toggle-track {
  background: var(--control);
  border-radius: 12px;
}
.browser .proxy .toggle-track:hover {
  background: var(--control-hover);
}
.browser .proxy .toggle-circle {
  width: 20px;
  height: 20px;
  filter: none;
}
.browser .proxy .switch.active .toggle-circle {
  transform: translateX(16px);
}
.browser .proxy .switch.active .toggle-track {
  background: var(--accent);
}
.browser .proxy.dark .proxy-link {
  color: var(--ink-2);
}
.browser .proxy.dark .proxy-link:hover {
  color: var(--ink);
}
.browser .proxy.dark .toggle-track {
  background: var(--control);
}
.browser .proxy.dark .toggle-track:hover {
  background: var(--control-hover);
}
.browser .proxy.dark .switch .toggle-circle {
  background-color: var(--n-79);
  transition: 0.15s all ease-in-out;
}
.browser .proxy.dark .toggle-track:hover .toggle-circle {
  background-color: var(--n-90);
}
.browser .proxy.dark .switch.active .toggle-track {
  background: var(--accent);
}
.browser .proxy.dark .switch.active .toggle-track .toggle-circle {
  background-color: var(--n-100);
}
.browser .browser-content.dark {
  border-color: var(--line);
  border-top: none;
}
.browser iframe, .browser .start-page {
  margin-top: -1px;
  border-top: 1px solid var(--line);
  background-color: var(--n-90);
}
.browser iframe.dark, .browser .start-page.dark {
  background: var(--surface);
  border-top: none;
}
.browser .start-page {
  background: var(--surface);
  padding: 24px;
}
.browser .start-page.dark {
  background: var(--surface);
}
.browser .browser-nav {
  margin-left: -8px;
  margin-right: 20px;
}
.browser .browser-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  /* Inert: nothing in that direction of history. Present but quiet. */
}
.browser .browser-btn:hover {
  background: var(--wash);
  color: var(--ink);
}
.browser .browser-btn.dark {
  color: var(--ink-2);
}
.browser .browser-btn.dark:hover {
  background: var(--wash-strong);
  color: var(--ink);
}
.browser .browser-btn.btn-inert {
  color: var(--ink-inert);
}
.browser .browser-btn.btn-inert:hover {
  background: transparent;
  color: var(--ink-inert);
}
.browser .browser-btn.dark.btn-inert {
  color: var(--ink-inert);
}
.browser .browser-btn.dark.btn-inert:hover {
  background: transparent;
  color: var(--ink-inert);
}
.browser .browser-btn.btn-disabled {
  cursor: not-allowed;
  color: var(--ink-inert);
}
.browser .browser-btn.btn-disabled:hover {
  background: transparent;
  color: var(--ink-inert);
}
.browser .browser-btn.dark.btn-disabled {
  color: var(--ink-inert);
}
.browser .browser-btn.dark.btn-disabled:hover {
  background: transparent;
  color: var(--ink-inert);
}
.browser .chrome-sep {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  background: var(--line-strong);
}
.browser .chrome-sep.dark {
  background: var(--line);
}
.browser .searchbar {
  height: 68px;
  padding-bottom: 10px;
  letter-spacing: 0.1px;
  background: var(--surface-panel);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  /* Reset: a quiet bordered ghost, same 36px rhythm as the icon
     buttons. */
  /* A floor, so the address stays a field at narrow widths instead of
     collapsing to nothing and leaving the lock sitting against the proxy
     toggle. */
  /* Both axes pinned here rather than by utility classes. As an
     absolutely positioned child the lock is not a flex item, so the
     wrapper's `items-center` never applied to it, and its `left-3` is
     purged out of the build - so it was sitting at its static position,
     high and flush against the field's left edge. */
  /* The address field: a 40px inset well one step darker than the
     chrome, hairline border, no glow on focus - the border just firms
     up. */
}
.browser .searchbar.dark {
  border-left-color: var(--line);
  border-right-color: var(--line);
  border-bottom: 1px solid var(--line);
}
.browser .searchbar .settings {
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease;
}
.browser .searchbar .settings:not(.cursor-not-allowed):hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.browser .searchbar .settings.dark {
  border-color: var(--line);
  color: var(--ink-2);
}
.browser .searchbar .settings.dark:not(.cursor-not-allowed):hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.browser .searchbar .search-wrap {
  min-width: 150px;
}
.browser .searchbar .search-wrap .search-lock {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
}
.browser .searchbar .search-wrap.dark .search-lock {
  color: var(--ink-3);
}
.browser .searchbar .search-input {
  height: 40px;
  border: 1px solid var(--line);
  background: var(--surface-field);
  color: var(--ink);
  box-shadow: none;
}
.browser .searchbar .search-input:hover {
  border-color: var(--line-strong);
}
.browser .searchbar .search-input:focus {
  background: var(--surface-field);
  border-color: var(--line-strong);
  box-shadow: none;
  outline: none;
}
.browser .searchbar .search-input.dark {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.browser .searchbar .search-input.dark:hover {
  border-color: var(--line-strong);
}
.browser .searchbar .search-input.dark:focus {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: none;
  outline: none;
}
.browser .topbar {
  background: var(--surface-panel);
  height: 50px;
  border: 1px solid transparent;
  border-bottom: 0;
  /* The macOS window buttons. Deliberately literal: these are not
     brand colour, they are a reproduction of an OS artifact, and the
     illusion that this is a real browser is the whole point of the
     component. Same argument as leaving the Dracula code theme alone. */
}
.browser .topbar.dark {
  border-color: var(--line);
  border-bottom: 0;
}
.browser .topbar .controllers span {
  width: 12px;
  height: 12px;
}
.browser .topbar .controllers span > span {
  width: 4px;
  height: 4px;
}
.browser .topbar .controllers .red {
  background: #EC6A5E;
}
.browser .topbar .controllers .yellow {
  background: #F4BF4F;
}
.browser .topbar .controllers .green {
  background: #61C554;
}
.browser .tab-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  min-width: 152px;
  max-width: 236px;
  height: 36px;
  margin: 0 2px;
  padding: 0 8px 0 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.browser .tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.browser .current-tab .tab-icon {
  color: var(--ink-2);
}
.browser .tab-shell.dark .tab-icon {
  color: var(--ink-3);
}
.browser .tab-shell.dark.current-tab .tab-icon {
  color: var(--ink-2);
}
.browser .tab-label {
  /* Open Sans: a tab carries a page title, which is content the learner
     reads, not a control they operate. */
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser .tab-close {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.browser .tab-close.is-available {
  opacity: 1;
  pointer-events: auto;
}
.browser .tab-close.is-available:hover {
  color: var(--ink);
  background: var(--wash-strong);
}
.browser .tab-close.is-available:active {
  transform: scale(0.94);
}
.browser .tab-shell.dark .tab-close {
  color: var(--ink-3);
}
.browser .tab-shell.dark .tab-close.is-available:hover {
  color: var(--ink);
  background: var(--line);
}
.browser .current-tab {
  background: var(--surface-field);
  color: var(--ink);
}
.browser .current-tab.dark {
  background: var(--wash-strong);
  /* The brightest thing in the strip - it is the tab you are on. */
  color: var(--ink);
}
.browser .tab {
  background: transparent;
  color: var(--ink-2);
}
.browser .tab:hover {
  background: var(--wash);
  color: var(--ink);
}
.browser .tab:hover .tab-delimiter, .browser .tab:hover + .tab-shell .tab-delimiter {
  opacity: 0;
}
.browser .tab.dark {
  color: var(--ink-3);
}
.browser .tab.dark:hover {
  background: var(--n-22);
  color: var(--n-79);
}
.browser .tab-delimiter {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 1px;
  height: 18px;
  margin-top: -9px;
  background: var(--line-strong);
  transition: opacity 150ms ease;
}
.browser .tab-shell.dark .tab-delimiter {
  background: var(--line);
}
.browser .new-tab {
  width: 32px;
  height: 32px;
  /* The tabs are 36px and this is 32px, so it has to be told to centre
     itself - a flex item with a fixed cross size otherwise sits at the
     start of the line and rides 2px high. Margin matches the tabs' own
     2px so the gap beside it equals the gap between them. */
  align-self: center;
  margin-left: 2px;
  border-radius: 9px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.browser .new-tab:hover {
  background: var(--n-22);
  color: var(--ink);
}
.browser .new-tab.dark {
  color: var(--ink-3);
}
.browser .new-tab.dark:hover {
  /* Same fill as an inactive tab's hover - it is the same
     gesture on the same row. The ink goes UP on hover: this
     used to reach for --line-strong, which is n-37 and darker
     than the n-58 it starts from, so the + dimmed on hover. */
  background: var(--n-22);
  color: var(--ink);
}
.browser .theme-switcher .svg-box {
  display: flex;
  align-items: center;
}
.browser .reset-confirm {
  width: 320px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-panel);
}
.browser .reset-confirm-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.browser .reset-confirm.dark .reset-confirm-title {
  color: var(--ink);
}
.browser .reset-confirm-body {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.browser .reset-confirm.dark .reset-confirm-body {
  color: var(--ink-2);
}
.browser .reset-confirm-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.browser .reset-confirm-cancel,
.browser .reset-confirm-go {
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.browser .reset-confirm-cancel {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
}
.browser .reset-confirm-cancel:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.browser .reset-confirm.dark .reset-confirm-cancel {
  border-color: var(--line);
  color: var(--ink-2);
}
.browser .reset-confirm.dark .reset-confirm-cancel:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.browser .reset-confirm-go {
  border: 1px solid transparent;
  background: var(--danger);
  color: var(--n-100);
}
.browser .reset-confirm-go:hover {
  background: var(--danger-deep);
}
.browser.browser-sm .topbar {
  height: 42px;
}
.browser.browser-sm .searchbar {
  height: 58px;
  padding-bottom: 6px;
}
.browser.browser-sm .tab-shell {
  height: 30px;
  min-width: 124px;
  font-size: 12.5px;
}
.browser.browser-sm .search-input {
  height: 34px;
}
.browser.browser-sm .browser-btn,
.browser.browser-sm .settings {
  height: 30px;
}
.browser.browser-sm .browser-btn {
  width: 30px;
}
.browser.browser-sm .topbar .controllers > span {
  width: 9px;
  height: 9px;
}

/* Kept global: PracticalQuiz builds its own chrome from these classes. */
.btn-disabled {
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.3);
}

.top-100 {
  top: 100px;
}

.learn-sidebar ul h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.3);
}

.upnext {
  max-width: 1035px;
}

@media screen and (max-width: 1023px) {
  .learn-sidebar {
    width: 0px;
  }
  .learn-sidebar > ul {
    display: none;
  }
  .learn-sidebar.mobile {
    width: 100vw;
    position: fixed;
    top: 0;
    padding-left: 100px;
    bottom: 0;
    left: -30px;
    background: var(--ink);
    transform: translateX(-100vw);
    height: 100%;
    overflow-y: scroll;
    background: #040404;
  }
  .learn-sidebar.mobile > ul {
    display: block;
  }
  .learn-sidebar.mobile > ul li {
    color: #fff;
  }
  .learn-sidebar.mobile > ul h4 {
    color: var(--ink-3);
  }
  .learn-sidebar.mobile .mod-heading {
    color: rgba(255, 255, 255, 0.3);
  }
  .learn-sidebar.mobile .mod-heading h3 {
    color: #fff;
  }
  .learn-sidebar.mobile .mod-heading span {
    color: rgba(255, 255, 255, 0.3);
  }
  .learn-sidebar.mobile .chapter-pills {
    color: #fff;
    color: var(--ink-3);
  }
  .learn-sidebar.mobile .chapter-pills .active {
    color: #000;
    color: var(--ink-3);
  }
}
.slideOut {
  animation-name: slideOut;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: forwards;
}

.slideIn {
  animation-name: slideIn;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: forwards;
}
@keyframes slideIn {
  0% {
    left: 0;
  }
  to {
    left: calc(100vw - 56px);
  }
}
@keyframes slideOut {
  0% {
    left: calc(100vw - 56px);
  }
  to {
    left: 0;
  }
}
.fixed {
  width: 100%;
  position: fixed !important;
}

.icon-more {
  fill: var(--accent);
  width: 4px;
  height: 18px;
}

.icon-close {
  transition: 0.3s all ease;
  fill: var(--ink);
  width: 14px;
  height: 14px;
}

.icon-close:hover {
  transform: scale(1.15);
}

.mobile-lesson-nav.slideIn {
  height: 100%;
  background: #fff;
  transition: background 0.7s, height 0.1 linear 0.5s;
  background: #040404;
}

.mobile-lesson-nav.hidden {
  transform: translate3d(0, 0, 0);
  transition: 0.1s all ease-out;
}

.icon-test {
  background: #2c3e50;
  background: linear-gradient(to bottom, #34495e 0%, #2c3e50 100%);
}

.nav-logo {
  height: 45px;
}

.footer-logo {
  height: 45px;
  margin-top: -15px;
}

.custom-container {
  max-width: 1400px;
}

.container-menu {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1663px) {
  .cmr {
    margin-right: 0px;
  }
}
.showwq {
  display: none;
  transition: all 1s ease-in;
}

.showq {
  display: block;
}

.quizPFadeOut-enter-active, .quizPFadeOut-leave-active {
  transition: opacity 0.7s ease-in;
}

.quizPFadeOut-enter, .quizPFadeOut-leave-to {
  transition: opacity 0.4s ease-out;
  opacity: 0;
}

.fadeBtn-enter-active, .fadeBtn-leave-active {
  transition: opacity 0.7s ease;
  transition-delay: 0.81s;
}

.fadeBtn-enter, .fadeBtn-leave-to {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.fade-enter-active, .fade-leave-active, .fadefeedback-enter-active, .fadefeedback-leave-active {
  transition: opacity 0.7s ease-in;
}

.fade-enter, .fade-leave-to, .fadefeedback-enter, .fadefeedback-leave-to {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.fadeFast-enter-active, .fadeFast-leave-active {
  transition: opacity 0.15s ease-in;
}

.fadeFast-enter, .fadeFast-leave-to {
  transition: opacity 0.2s ease-out;
  opacity: 0;
}

.fadefeedback-leave-active {
  display: none;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter {
  transform: translateX(35px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(-15px);
  opacity: 0;
}

.expand-enter-active, .expand-leave-active {
  transition: all 1s ease;
  overflow: hidden;
}

.expand-enter, .expand-leave-to {
  opacity: 0;
}

.quiz-box {
  transition: all 3s ease;
}

.pb {
  transition: all 2s ease;
}

.shows {
  display: block !important;
}

.nav-avatar {
  width: 40px;
  height: 40px;
}

.large-av {
  width: 100px;
  height: 100px;
  margin: auto;
}

.dashboard-av {
  width: 100px;
  height: 100px;
}

.mid-av, .forum-av {
  min-width: 60px;
  min-height: 60px;
  max-height: 60px;
  min-width: 60px;
}

.forum-av {
  margin: auto;
}

.forum-av-sm {
  min-width: 50px;
  min-height: 50px;
  max-height: 50px;
  min-width: 50px;
  margin: auto;
}

.badge {
  width: 65px;
  height: 65px;
}

.bell-tip {
  top: 9px;
  right: 13px;
}

.notification.label {
  width: 70px;
}

span.l {
  text-align: center;
  min-width: 70px;
  max-width: 70px;
  width: 70px;
}

.notification-bell {
  left: -4px;
  top: 13px;
}

.quiz-title {
  line-height: 39px;
}

/* Forum */
.fixed-sidebar-forum {
  width: 350px;
}

.labline {
  width: 25px;
  height: 3px;
  margin-top: 9px;
}

.labstart {
  border: 0px;
  margin-right: -1px;
  margin-bottom: -1px;
  border-bottom-right-radius: 1.2rem;
  border-top-left-radius: 1.2rem;
}

.labcard, .lab-chapter, .labline, .labstart {
  transition: all 0.3s ease;
}

abbr {
  position: relative;
}
abbr span:not(.intext-tooltip) {
  white-space: nowrap;
  text-decoration-line: none;
  text-decoration-style: initial;
  text-decoration-color: initial;
  text-decoration: none;
  cursor: help;
  position: relative;
  background-color: var(--accent-wash);
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: var(--accent);
  background-color: inherit;
}
abbr .intext-tooltip {
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0px;
  pointer-events: none;
  opacity: 0;
  white-space: normal;
  line-height: 1.5;
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateY(1rem) translateX(-50%);
  top: 100%;
  margin-top: 0.5rem;
  width: 12rem;
  background-color: var(--surface-panel);
  color: rgb(255, 255, 255);
  padding: 1rem;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px, rgba(0, 0, 0, 0.247059) 0px 4px 8px;
  transition-duration: 200ms, 500ms;
  transition-timing-function: ease-in-out, cubic-bezier(0.2, 1, 0.2, 1);
  transition-delay: initial, initial;
  transition-property: opacity, transform;
}
abbr .intext-tooltip.image {
  padding: 0px;
}
abbr .intext-tooltip.image img {
  border-radius: 20px;
}

abbr:hover span.intext-tooltip, abbr:active span.intext-tooltip, abbr:focus span.intext-tooltip, abbr.abbr-active span.intext-tooltip {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0rem) translateX(-50%);
}

div.intext-img span {
  text-align: center;
  width: 100%;
  display: block;
  margin-top: 1rem;
  margin-bottom: 40px;
  font-size: 0.875rem;
}

div.intext-redirect {
  padding: 1.5rem 1rem;
  border-left: 1px solid var(--line);
  background-color: var(--surface-panel);
  margin-top: 1rem;
  margin-bottom: 40px;
  font-size: 0.9rem;
}
div.intext-redirect span, div.intext-redirect a {
  display: block;
}
div.intext-redirect a {
  margin-top: 1rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  font-weight: 600;
}
div.intext-redirect svg {
  margin-left: 15px;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-delay: initial;
  transition-property: transform;
}
div.intext-redirect a:hover svg {
  transform: translateX(0.5rem);
}

/* ------------------------------------------------- lesson callout blocks ----
   Notes and quotes are one container: the platform's panel. --surface-panel
   inside a --line hairline at 12px - the same card the drills exhibit and the
   lab sidebar are built from - so a block set into the prose reads as the same
   object the rest of the platform uses, at prose scale.

   Both used to carry a coloured stripe down the left edge instead of a border:
   the note a 4px --accent bar over an --accent-wash fill, the quote a 5px
   --line bar. A stripe is a border on one side only, which leaves the other
   three edges undefined and the box sitting on the page rather than in it -
   and the note's green said "success" about text that was usually just an
   aside. One hairline, all four sides, no colour. */
/* `.lesson-content blockquote`, not bare `blockquote`: Tailwind's preflight
   zeroes blockquote margins, and preflight is emitted a second time from
   `resources/css/app.css`, which loads after this stylesheet - so an
   equal-specificity rule here loses on order and the quote lost its bottom
   margin. One class of context outranks it without an !important. */
div.intext-note,
.lesson-content blockquote {
  /* Declared once because the note's bleed is derived from both below. */
  --block-pad-x: 24px;
  --block-border: 1px;
  margin: 1.75rem 0 2rem;
  padding: 20px var(--block-pad-x);
  border: var(--block-border) solid var(--line);
  border-radius: 12px;
  background: var(--surface-panel);
}

div.intext-note {
  /* A step under the 16px body copy. A note is an aside - it should read as
     set apart from the passage, not as another paragraph of it - and the
     smaller size does that without needing a colour or a rule to say so.
     Alignment is unaffected: the bleed is derived from the padding and the
     border, both in px, so the type can move without the box moving. */
  font-size: 15px;
  line-height: 1.75;
  /* The opening `<b>Note:</b><br>` is the block's title. As a block element
     it can own the space under itself, which a <br> cannot - so the break
     that follows it is dropped rather than adding a second one. */
}
div.intext-note b, div.intext-note strong {
  color: var(--ink);
}
div.intext-note > b:first-child,
div.intext-note > strong:first-child {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
div.intext-note > b:first-child + br,
div.intext-note > strong:first-child + br {
  display: none;
}

/* A note is an aside, so it steps out of the reading column a little on both
   sides instead of sitting inside it - wide enough to read as a separate
   object, not so wide that it stops being part of the passage.

   Gated on the breakpoint rather than applied everywhere: the column is
   `max-width: 42rem`, so below that width it is the viewport (less page
   padding) that sets the measure, and 5% of it on each side is bleed the page
   has no gutter for - the note would run off the screen. From here up the
   column has stopped growing and the margin beside it is real. */
/* Both callouts step out of the reading column by the same amount, so their
   edges line up with each other down the page.

   The bleed is exactly the padding plus the border, which is what makes the
   note's first character land on the same vertical as the body copy above and
   below it. The border counts because it sits outside the padding box - bleed
   by the padding alone and the text is 1px shy. A percentage cannot do this:
   it scales with the column while the padding stays put, so the text inside
   drifts out of alignment at every width but one.

   The quote reads differently by design: its left padding is the room for the
   hung mark, so its words sit indented past it while the mark itself falls
   into the bleed - which is what a hanging quotation mark is for. */
@media screen and (min-width: 1024px) {
  div.intext-note,
  .lesson-content blockquote {
    --block-bleed: calc(var(--block-pad-x) + var(--block-border));
    width: calc(100% + var(--block-bleed) * 2);
    margin-left: calc(var(--block-bleed) * -1);
  }
}
.bgg {
  border: 1px solid rgb(237, 240, 242);
}

.arrow {
  --active: #000;
  --border: rgba(0, 0, 0, .12);
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
}
.arrow.left {
  transform: scaleX(-1);
}
.arrow i {
  display: block;
  position: absolute;
  margin: -10px 0 0 -10px;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
}
.arrow i:before, .arrow i:after {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--active);
  margin: -1px 0 0 -5px;
  display: block;
  transform-origin: 9px 50%;
}
.arrow i:before {
  transform: rotate(-40deg);
}
.arrow i:after {
  transform: rotate(40deg);
}
.arrow:before, .arrow:after {
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.arrow svg {
  width: 44px;
  height: 44px;
  display: block;
  position: relative;
  z-index: 1;
  color: var(--active);
  stroke-width: 2px;
  stroke-dashoffset: 126;
  stroke-dasharray: 126 126 0;
  transform: rotate(0deg);
}

/* Inline code in prose and lab instructions.

   One rule now. It used to be a light base, a `.dark` modifier and a `.dark &`
   ancestor variant all declaring the same four properties - three ways to
   reach the same treatment, left over from when the lesson page had a light
   theme. With one theme there is one rule.

   The border is n-27 rather than --line: it composites over the chip's own
   fill, not over the page, so the hairline calibrated against the ground
   lands at Δ3 in here and the chip goes flat. Δ8 is where it was. */
.intext-code {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 3px;
  padding: 3px 8px;
  border: 1px solid var(--n-27);
  background-color: var(--wash);
  border-radius: 6px;
  color: var(--ink);
}
.intext-code.green {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--on-accent) !important;
  padding: 3px 10px !important;
  font-weight: 600 !important;
}

.g-text-shadow {
  text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
}

.btn-text-shadow {
  text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
}

/* The steps panel.
 *
 * It used to unfold from `scaleY(0)` on a `cubic-bezier(.3, 0, 0, 1.3)` curve -
 * a full collapse plus an overshoot past 1. Two problems, both of which is why
 * it read as rubbery rather than smooth: scaling a box of text vertically from
 * nothing stretches every line inside it on the way in, and the overshoot then
 * stretched them again past their real height before settling. Nothing in the
 * world appears from nothing, and a list of step titles least of all.
 *
 * It now arrives from six pixels up at 98% - enough to feel like it comes from
 * the trigger directly above it, small enough that no line of text visibly
 * changes size. The origin stays at the top for the same reason.
 *
 * `visibility` is what `scaleY(0)` used to do for free: at zero height the panel
 * could not be clicked, but a panel that is merely transparent still swallows
 * everything under it. It is delayed out by the length of the transition so the
 * panel stays visible while it leaves, and switched in immediately on the way
 * back. */
/* Behaviour only - the panel's surface (background, border, radius) lives
   with the component in HeaderSteps.vue. The old hardcoded rgb(24,28,38)
   was a blue-grey from no palette we own. */
.hands-on-progress {
  list-style-type: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
  /* Anchored to the trigger's row rather than to magic offsets, so the
     panel stays put whatever size the trigger is. */
}
.hands-on-progress.isShown {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: all;
  /* Opening is the deliberate half, so it is the longer one. */
  transition: opacity 180ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}
.hands-on-progress.top.under {
  top: calc(100% + 10px);
  left: 0px;
}
.hands-on-progress.top.left {
  top: 0px;
  left: calc(100% + 10px);
}

/* The panel still fades - that is what says it arrived - but it stops moving. */
@media (prefers-reduced-motion: reduce) {
  .hands-on-progress {
    transform: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
  }
  .hands-on-progress.isShown {
    transform: none;
    transition: opacity 150ms ease, visibility 0s;
  }
}
.handsOnIn-enter-active, .handsOnIn-leave-active {
  opacity: 1;
  transform: translateX(0px);
  transition: opacity 0.1s, transform 0.28s cubic-bezier(0.3, 0, 0, 1);
}

.handsOnIn-enter-from, .handsOnIn-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.handsOnIn-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.hands-on-box {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #292C31 transparent;
  scrollbar-width: thin;
}

.hands-on-box::-webkit-scrollbar {
  width: 18px;
}

.hands-on-box::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 100px;
}

.hands-on-box::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 5px solid transparent;
  background-clip: content-box;
  background-color: rgba(31, 36, 51, 0.5);
}

.bullet-point-delimiter {
  width: 2px;
  margin-left: 3px;
}

.lesson-h-table {
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 36px;
}
.lesson-h-table strong, .lesson-h-table td {
  color: var(--ink-2);
}
.lesson-h-table tr {
  border-bottom: 1px solid var(--line);
}
.lesson-h-table td {
  line-height: 1.5;
  padding: 16px 24px 16px 0;
  vertical-align: top;
  min-width: 120px;
  text-align: left;
}
.lesson-h-table td ul li:not(ul li:last-child) {
  margin-bottom: 10px;
}
.lesson-h-table td:first-child:not(.lesson-h-table.in-text-table td:first-child) {
  font-weight: 600;
}
.lesson-h-table tr {
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-top: 0;
  height: 48px;
}
.lesson-h-table tr:nth-child(2) td:last-child {
  line-height: 1.8;
}

@media screen and (max-width: 640px) {
  .lesson-h-table tr {
    padding: 28px 0px;
  }
  .lesson-h-table tr:first-child {
    border-top: 1px solid var(--line);
  }
  .lesson-h-table td {
    display: block;
  }
  .lesson-h-table td:first-child {
    margin-bottom: -20px;
    padding-top: 22px;
    font-size: 20px;
  }
  .lesson-h-table td:last-child {
    margin-bottom: 8px;
  }
}
.lesson-content a:not(.quiz-box a, .hands-on a) {
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  outline: none;
  color: var(--accent);
}
.lesson-content a.nolink:not(.hands-on a.nolink) {
  color: var(--ink-2);
  text-decoration: none;
  font-style: italic;
  color: var(--ink-2);
}
.lesson-content p:not(.checkp, .quiz-box p, .hands-on p) {
  color: var(--ink-2);
}
.lesson-content p:not(.checkp, .quiz-box p, .hands-on p) strong {
  color: var(--ink-2);
}
.lesson-content a:hover:not(.quiz-box a, .hands-on a) {
  color: var(--ink-3);
  color: #fff;
}
.lesson-content .tldr-ul {
  margin-left: -1.5rem;
}

.lesson-content {
  /* List items are body copy, so they take the body's ink. Paragraphs get
     --ink-2 from `.lesson-content p:not(...)`, but no rule ever gave it to
     `li` - it simply inherited whatever the ancestor was, which is why a
     list read brighter than the prose around it. `strong` is the emphasis
     inside that, so it goes UP to --ink rather than down. */
  /* A drawn dot, not the BLACK CIRCLE glyph. As text, U+25CF renders at the
     paragraph's own font-size, which is roughly three times the size of a
     real list marker - hence the oversized bullet. A box is sized in px and
     stays put when the surrounding type changes. */
}
.lesson-content > ol > li, .lesson-content .quiz-box ol > li {
  list-style: none;
  line-height: 1.8rem;
  margin-left: 1.5rem;
  margin-bottom: 0.2rem;
  counter-increment: li;
  color: var(--ink-2);
}
.lesson-content > ol > li strong, .lesson-content > ol > li b, .lesson-content .quiz-box ol > li strong, .lesson-content .quiz-box ol > li b {
  color: var(--ink);
}
.lesson-content > ul > li {
  color: var(--ink-2);
}
.lesson-content > ul > li strong, .lesson-content > ul > li b {
  color: var(--ink);
}
.lesson-content > ol > li::before, .lesson-content .quiz-box ol > li::before, .lesson-content .hands-on-box ol > li::before {
  content: counter(li, decimal) ".";
  margin-bottom: 1.5rem;
  left: -1.5rem;
  margin-right: 7px;
  font-weight: 600;
  color: var(--ink-2);
}
.lesson-content > ul, .lesson-content > ol, .lesson-content .quiz-box ol, .lesson-content .quiz-box ul {
  margin-bottom: 1.6rem;
  margin-top: 0.5rem;
  margin-top: -10px;
}
.lesson-content > ul > li::before, .lesson-content .quiz-box ul > li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* Structure, not content: the dot sits a step under the words it
     introduces rather than being the brightest thing on the line. */
  background: var(--ink-3);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 10px;
}
.lesson-content > ul > li, .lesson-content .quiz-box ol > li {
  list-style: none;
  line-height: 1.8rem;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ink-2);
}
.lesson-content .quiz-box ol > li::before {
  color: var(--ink-2);
}
.lesson-content .quiz-box ul > li::before {
  background: var(--ink-3);
}
.lesson-content .quiz-box ol > li, .lesson-content .quiz-box ul > li {
  margin-left: 0px;
}

.hands-on-box ol > li {
  counter-increment: li;
}

.hands-on-box ol > li::before {
  content: counter(li, decimal) ".";
  margin-bottom: 1.5rem;
  left: -1.5rem;
  margin-right: 7px;
  font-weight: 600;
  color: inherit;
}

.hands-on-progress ul li::before {
  content: none;
}

.hands-on-box ul li, .hands-on-box ol li {
  margin-bottom: 0.8rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.hands-on-box ol > li::before, .hands-on-box ul li::before {
  color: #fff;
}

.hands-on-box ol li > ul li {
  margin-left: 50px;
}

.hands-on-box ul li {
  list-style: disc;
  margin-left: 20px;
}

.hands-on-box p {
  line-height: 1.6 !important;
}

/* The container is declared with the note above; what is left here is what
   makes a quote a quote. The rule this replaces set border-left twice,
   margin-bottom three times and colour twice (the first a black left over
   from the light theme, dead behind an !important).

   A quote is set as a quote, not as a note with slanted text: the mark hangs
   in the left margin the way it does in print, the words are the largest type
   in the block rather than the greyest, and the attribution sits under them.
   The italic went with the stripe - it was doing the job the mark does now,
   and a UI face set at 13px in italic reads as damaged rather than quoted. */
.lesson-content blockquote {
  position: relative;
  padding-left: 62px;
  /* The attribution. An em dash rather than a label, because the name is
     already obviously a name. */
}
.lesson-content blockquote p {
  margin-bottom: 0 !important;
  font-size: 16.5px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink) !important;
}
.lesson-content blockquote span {
  display: block;
  margin-top: 15px;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-4);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-content blockquote span::before {
  content: "— ";
}

/* Hung in the margin, in a serif - the UI face has no proper quotation glyph
   at this size and renders a pair of commas. n-25 is one step off the
   hairline: present as texture, never competing with the words. */
.lesson-content blockquote:not(.urls-dark)::before {
  content: "“";
  position: absolute;
  top: 6px;
  left: 20px;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  font-size: 52px;
  line-height: 1;
  color: var(--n-25);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* The URL anatomy exercise borrows <blockquote> for a data panel, so it takes
   the frame but none of the quotation: no mark, no hanging indent, and its
   own smaller type. */
.lesson-content blockquote.urls-dark {
  padding-left: 24px;
}
.lesson-content blockquote.urls-dark p {
  font-size: inherit;
  line-height: inherit;
  color: var(--ink-3) !important;
}

@media screen and (max-width: 640px) {
  .lesson-content blockquote {
    padding-left: 48px;
  }
  .lesson-content blockquote:not(.urls-dark)::before {
    left: 14px;
    font-size: 44px;
  }
}
/* ------------------------------------------------------------- pull quote ----
   The other kind of quote in the library: a line lifted out of the passage and
   set on its own, centred, with no attribution. Three of them exist, all
   written as `<div class="... text-blackop-5 dark:text-white text-3xl italic
   text-center my-10 ...">` - utilities baked into seeded content, on a legacy
   token, so the styling is corrected here rather than by rewriting the rows.

   It is deliberately NOT the boxed <blockquote>: that one is an object you
   read as separate from the passage, this one IS the passage, at its loudest
   moment. What ties them together is the language - the same serif mark, the
   same upright type at --ink - not the same frame. Boxing this would take the
   emphasis away, and 30px italic is the shout it no longer needs to be. */
.lesson-content div.italic.text-center {
  max-width: 34ch;
  margin: 3rem auto;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lesson-content div.italic.text-center::before {
  content: "“";
  display: block;
  margin-bottom: -6px;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  color: var(--n-25);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media screen and (max-width: 640px) {
  .lesson-content div.italic.text-center {
    margin: 2.25rem auto;
    font-size: 19px;
  }
}
.h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 25px;
}

.tw-text-transparent-25 {
  background: hsla(0, 0%, 100%, 0.15);
  margin-top: 1px;
}

/* The hover/press utility, on ~170 elements. It used to be
   `transition: all .18s ease-in-out`, which animated whatever happened to
   change - layout properties included, off the GPU - and spent its first half
   accelerating, which is the wrong shape for a hover.

   The line drawn here is paint, not layout: every property below is composited
   or painted, and the ones deliberately left out - width, height, padding,
   margin, inset, font-size - are the ones that force a reflow and should be
   animated with a transform instead. A first pass at this listed only six and
   silently dropped the lab proxy's border-width and the SVG fill/stroke the lab
   chrome animates, so the set is now the full paint list rather than a guess at
   which of them are in use.

   (Unprefixed: `transition` has needed no prefix for over a decade, and three
   copies of this list would only rot.) */
.t25eo {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, border-width 0.18s ease, outline-color 0.18s ease, box-shadow 0.18s ease, fill 0.18s ease, stroke 0.18s ease, opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

#lesson-widget-modal {
  width: 0px;
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.35s;
}

.socials i {
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  outline: none;
}

.socials a:hover i {
  color: #fff;
}
@keyframes mouseanim {
  from {
    top: 10px;
  }
  to {
    top: 4px;
  }
}
.mouse {
  position: relative;
  width: 1.4rem;
  height: 2.15rem;
  border: 2px solid var(--accent);
  border-radius: 1rem;
}

.mouse::before {
  content: "";
  display: block;
  position: absolute;
  left: 7px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--accent);
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: initial;
  animation-play-state: initial;
  animation-name: mouseanim;
}

@media screen and (min-width: 1024px) {
  .mw600 {
    width: 580px;
  }
}
a.link {
  color: var(--ink-2);
  text-decoration: underline;
  cursor: auto;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  outline: none;
}

.last-update {
  text-transform: none !important;
}

.feedback-modal {
  background-image: url("/images/feedback.svg");
  background-size: cover;
}

.placeholderwh::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.placeholderwh::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.leaderboard-level {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -2px;
  right: 5px;
}

@media screen and (max-width: 640px) {
  .footerpl {
    padding-left: 0px;
  }
}
@media screen and (max-width: 380px) {
  .footermtpl {
    padding-left: 0px !important;
  }
}
.courses-bg {
  bottom: -2px;
}

.toggle-switch[data-s125] {
  flex-shrink: 0;
}

.toggle-switch[data-s124] {
  width: 40px;
  height: 24px;
  position: relative;
  display: inline-block;
}

.toggle-switch input[data-s124] {
  width: 0;
  height: 0;
  opacity: 0;
}

input:checked + .slider[data-s124] {
  background-color: transparent;
  border: 2px solid var(--accent);
}

.slider.round[data-s124] {
  border-radius: 34px;
}

.slider[data-s124] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.4s;
}

input:checked + .slider[data-s124]:before {
  background-color: var(--accent);
  transform: translateX(16px);
}

.slider.round[data-s124]:before {
  border-radius: 50%;
}

.slider[data-s124]:before {
  height: 16px;
  width: 16px;
  position: absolute;
  left: 2px;
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
  transition: 0.4s;
}

.post-body {
  line-height: 2;
  color: rgba(31, 36, 51, 0.8);
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .html-body h1, .html-body h2, .html-body h3, .html-body h4, .html-body h5 {
  font-weight: 700;
  color: rgb(31, 36, 51);
}
.markdown-preview h1, .post-body h1, .html-body h1 {
  font-size: 1.25rem;
}
.markdown-preview h2, .post-body h2, .html-body h2 {
  font-size: 1.125rem;
}
.markdown-preview h3, .post-body h3, .html-body h3 {
  font-size: 1.07rem;
}
.markdown-preview h4, .markdown-preview h5, .post-body h4, .post-body h5, .html-body h4, .html-body h5 {
  font-size: 1rem;
}

.post-footer .post-footer-actions {
  visibility: hidden;
}

.reply.answer:hover .post-footer-actions {
  visibility: visible;
}

.trending-label {
  color: #fff;
  font-size: 15px;
  padding: 6px 8px;
  margin-left: 15px;
}

.channel-label {
  width: 145px;
}
.channel-label.blue {
  border-color: rgb(4, 190, 254);
  color: rgb(4, 190, 254);
}
.channel-label.blue:hover {
  background: rgb(4, 190, 254);
}
.channel-label.green {
  border-color: #27ae60;
  color: #27ae60;
}
.channel-label.green:hover {
  background: #27ae60;
}
.channel-label.red {
  border-color: #ec454f;
  color: #ec454f;
}
.channel-label.red:hover {
  background: #ec454f;
}
.channel-label.yellow {
  border-color: #ffc63b;
  color: #ffc63b;
}
.channel-label.yellow:hover {
  background: #ffc63b;
}
.channel-label:hover {
  color: #fff;
}

.board-search {
  font-size: 15px;
  width: 280px;
}
.board-search input::-moz-placeholder {
  color: rgba(31, 36, 51, 0.5);
}
.board-search input::placeholder {
  color: rgba(31, 36, 51, 0.5);
}

.rotate {
  transform: scale(-1, 1);
  margin-bottom: -3px;
}

.animate__wobble {
  display: inline-block;
  background: rgb(183, 21, 64);
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
  85% {
    background: rgba(183, 21, 64, 0.8);
  }
  90% {
    background: rgba(183, 21, 64, 0.4);
  }
  100% {
    background: transparent;
  }
}
.animate__found {
  background: rgb(39, 174, 96);
  color: #fff;
  display: inline-block;
  line-height: 1.625;
  border-radius: 6px;
}

.animate_wobble_solid {
  background: rgb(183, 21, 64);
  color: #fff;
  line-height: 1.625;
  border-radius: 6px;
}

.animate__heartBeat {
  background: rgb(39, 174, 96);
  color: #fff;
  animation-name: heartBeat;
  animation-duration: 0.81s;
  animation-timing-function: ease-in-out;
}

.animate__heartBeatSm {
  animation-name: heartBeatSm;
  animation-duration: 0.81s;
  animation-timing-function: ease-in-out;
}
@keyframes heartBeatSm {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.05);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
.pg-metadata {
  background: #27292a;
  color: #717275;
}

.pg-item {
  border-left: 1px solid #1d1e1f;
}

.menu-dots {
  width: 20px;
  margin-left: auto;
  opacity: 0.6;
}
.menu-dots:hover {
  opacity: 1;
}

.vfm__container.thread-modal, .vfm__container.reply-modal {
  display: flex;
}

.thread-modal .vfm__content, .reply-modal .vfm__content {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  height: auto;
  width: 1200px;
  box-shadow: none;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  /* top: 100px !important; */
  background: #fff;
}

@media screen and (max-width: 640px) {
  .thread-modal .vfm__content, .reply-modal .vfm__content {
    width: 100% !important;
    left: 0px !important;
  }
  .modal-x {
    display: block;
    right: 27px;
  }
}
.vfm__overlay, .vfm--overlay {
  /* background: rgba(17,20,27, 0.65); */
  background: rgba(11, 14, 18, 0.75) !important;
}

.post-body, .markdown-preview {
  width: 100%;
  margin-top: 35px;
  resize: none;
  outline: none;
}

.markdown-preview {
  min-height: 132px;
  max-height: 352px;
}

.post-title::-moz-placeholder, .post-body::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  /* color: #787B84; */
  color: #b4b6b9;
  /* color: rgba(0,0,0,0.3); */
  opacity: 1; /* Firefox */
}

.post-title::placeholder, .post-body::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  /* color: #787B84; */
  color: #b4b6b9;
  /* color: rgba(0,0,0,0.3); */
  opacity: 1; /* Firefox */
}

.thread-modal-fade-enter,
.thread-modal-fade-leave-active {
  opacity: 0;
  transform: translateY(80px);
}

.thread-modal .modal-body, .reply-modal .modal-body {
  padding: 0px 100px;
  padding-top: 40px;
}

.texteditor-add {
  min-width: 105px;
}

.hljs-ln-numbers {
  color: #6e7681;
  padding-right: 15px !important;
}

.ͼ1.cm-focused {
  outline: none;
}

.cm-editor {
  max-width: 100%;
}

.container {
  max-width: 1200px !important;
}

.curr-bg {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  z-index: -1;
  width: 100%;
  --conic-size: 600px;
  height: var(--conic-size);
  margin-bottom: calc(-1 * var(--conic-size));
}

.curr-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, #040404);
}

.courses-img {
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.courses-img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, #040404 100%), linear-gradient(to right, #040404 0, transparent 20%, transparent 80%, #040404 100%), linear-gradient(150deg, #040404 20%, transparent 30%);
}

.heading-gradient {
  /* Deliberately sRGB. Authoring these stops as oklch changes the
     interpolation space, and a white-to-transparent ramp in oklab keeps
     its brightness through the midtones - the effect reads hard instead
     of soft. The space is part of the design here, so the values stay
     literal. */
  background: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, hsla(0, 0%, 100%, 0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: unset;
}

.tg {
  -webkit-box-decoration-break: clone;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: unset;
}

.tg1 {
  background-image: linear-gradient(106.62deg, rgb(232, 78, 56) 6.68%, rgb(186, 44, 184) 82.69%);
}

.tg2 {
  background-image: linear-gradient(124.31deg, rgb(70, 227, 183) 0.18%, rgb(82, 124, 172) 89.2%);
}

/* .tg3 {
    background-image: linear-gradient(106.62deg, #FA9892 6.68%, #F25C53 82.69%);
} */
.tg3 {
  background-image: linear-gradient(90deg, rgb(255, 248, 85) 0.04%, rgb(70, 227, 183) 100.04%);
}

.tg4 {
  background-image: linear-gradient(129.06deg, rgb(154, 106, 255) 0%, rgb(96, 255, 199) 88.16%);
}

.tg5 {
  background-image: linear-gradient(285.49deg, rgb(245, 55, 249) -14.61%, rgb(247, 190, 43) 106.06%);
}

.tg6 {
  background-image: linear-gradient(285.49deg, rgb(245, 255, 249) -14.61%, rgb(27, 190, 43) 106.06%);
}

.tg7 {
  background-image: linear-gradient(285.49deg, rgb(24, 221, 229) -14.61%, #FA9892 106.06%);
}

.button-bg {
  background: transparent;
  box-shadow: none;
  padding: 1px;
}

.button {
  background: transparent;
  border: 1px solid var(--line);
  letter-spacing: 0.35px;
}

.button-bg:hover .button {
  background: var(--wash);
  border-color: var(--line-strong);
}

/* ------------------------------------------------------------------ field ----
   Text inputs and textareas. Separate from `.button` on purpose: that class is
   the pill shell, and while the two shared it every state added for one landed
   on the other. A field is a thing you type into; a pill is a label. */
.field {
  background: transparent;
  border: 1px solid var(--line);
  letter-spacing: 0.35px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.field:hover {
  border-color: var(--line-strong);
}

.field:focus,
.field:focus-visible {
  border-color: var(--line-strong);
  outline: none;
}

.field::-moz-placeholder {
  color: var(--ink-4);
}

.field::placeholder {
  color: var(--ink-4);
}

/* A 1px rule drawn as a background rather than a border, so it can sit on an
   element that already owns its border box. These used to be dotted; the
   platform has one separator now and it is solid --line. Names follow. */
.rule-right {
  background-image: linear-gradient(var(--line), var(--line));
  background-position: 100%;
  background-repeat: repeat-y;
  background-size: 1px 100%;
}

.rule-top {
  background-image: linear-gradient(var(--line), var(--line));
  background-position: top;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

.rule-bottom {
  background-image: linear-gradient(var(--line), var(--line));
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

.imgx {
  max-width: none;
  width: 150%;
  height: auto;
  margin-left: -15%;
  margin-bottom: -25%;
  transform-style: preserve-3d;
}

.img-container::after {
  --color-bg-primary: rgb(4, 4, 4);
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, var(--color-bg-primary) 100%), linear-gradient(to right, var(--color-bg-primary) 0, transparent 20%, transparent 80%, var(--color-bg-primary) 100%), linear-gradient(150deg, var(--color-bg-primary) 20%, transparent 30%);
}

.rule-y {
  background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
  background-position: top, bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 100% 1px, 100% 1px;
}

.custom-bbb {
  --color-border: color-mix(in oklab, oklch(.274 .006 286.033) 60%, transparent);
  border-color: var(--color-border);
}

.dark .intext-img img:not(img.no-invert) {
  filter: invert(93%) hue-rotate(180deg);
}
.dark .intext-img span {
  color: var(--ink-2);
}

/* Global tooltip styling */
.v-popper__inner {
  background-color: var(--surface-panel) !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  /* Animation on inner element */
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
}

/* Hide arrows completely */
.v-popper__arrow-container {
  display: none !important;
}

/* Shown state - base */
.v-popper__popper:not(.v-popper__popper--hidden):not(.v-popper__popper--hide-to) .v-popper__inner {
  opacity: 1 !important;
  transform: scale(1) translateX(0) translateY(0) !important;
  filter: blur(0) !important;
}

/* Hidden states with directional transitions */
/* Bottom placement - slide from top */
.v-popper__popper--hidden[data-popper-placement^=bottom] .v-popper__inner,
.v-popper__popper--hide-to[data-popper-placement^=bottom] .v-popper__inner {
  opacity: 0 !important;
  transform: scale(0.9) translateY(-10px) !important;
  filter: blur(4px) !important;
}

/* Top placement - slide from bottom */
.v-popper__popper--hidden[data-popper-placement^=top] .v-popper__inner,
.v-popper__popper--hide-to[data-popper-placement^=top] .v-popper__inner {
  opacity: 0 !important;
  transform: scale(0.9) translateY(10px) !important;
  filter: blur(4px) !important;
}

/* Right placement - slide from left */
.v-popper__popper--hidden[data-popper-placement^=right] .v-popper__inner,
.v-popper__popper--hide-to[data-popper-placement^=right] .v-popper__inner {
  opacity: 0 !important;
  transform: scale(0.9) translateX(-10px) !important;
  filter: blur(4px) !important;
}

/* Left placement - slide from right */
.v-popper__popper--hidden[data-popper-placement^=left] .v-popper__inner,
.v-popper__popper--hide-to[data-popper-placement^=left] .v-popper__inner {
  opacity: 0 !important;
  transform: scale(0.9) translateX(10px) !important;
  filter: blur(4px) !important;
}

/* Fallback for any other placements */
.v-popper__popper--hidden .v-popper__inner,
.v-popper__popper--hide-to .v-popper__inner {
  opacity: 0 !important;
  transform: scale(0.9) !important;
  filter: blur(4px) !important;
}

/* ---------------------------------------------------- lab step content ----
   One border colour on the page, enforced where the markup is not ours to
   change. Lab steps are HTML stored in the database - 660 elements across
   the library carry `border-darkgray`, a legacy token that is both tinted
   and, because it doubles as a fill (`bg-darkgray`), not safely repointed
   at the utility level.

   Same for the fills and inks: ~5,900 class occurrences across the library
   name legacy tokens directly. Rewriting seeded content is a content
   migration, not a styling change, so the palette is enforced here instead.

   This is a bridge, not a home. The right fix is a step-button component
   plus a content migration, and when those land this whole block goes. */
.hands-on-box .border-darkgray,
[id^=instructions-] .border-darkgray {
  border-color: var(--line);
}
.hands-on-box .bg-darkgray,
[id^=instructions-] .bg-darkgray {
  background-color: var(--surface-panel);
}
.hands-on-box .bg-darkgray-2,
[id^=instructions-] .bg-darkgray-2 {
  background-color: var(--wash-strong);
}
.hands-on-box .hover\:bg-darkgray-2:hover,
[id^=instructions-] .hover\:bg-darkgray-2:hover {
  background-color: var(--wash-strong);
}
.hands-on-box .text-white,
[id^=instructions-] .text-white {
  color: var(--ink);
}
.hands-on-box .text-whiteop-8,
[id^=instructions-] .text-whiteop-8 {
  color: var(--ink);
}
.hands-on-box .text-whiteop-7,
[id^=instructions-] .text-whiteop-7 {
  color: var(--ink-2);
}
.hands-on-box .text-whiteop-3,
[id^=instructions-] .text-whiteop-3 {
  color: var(--ink-inert);
}
.hands-on-box .text-green-1,
[id^=instructions-] .text-green-1 {
  color: var(--accent);
}
.hands-on-box .text-red,
[id^=instructions-] .text-red {
  color: var(--danger);
}

/* ------------------------------------------------------- lab catalog rows ----
   A row rounds its corners when it lifts on hover, but the row above it is
   still drawing a bottom border straight across those new corners - the rule
   runs on past the curve and the join looks broken. The hovered row already
   drops its own border; this drops the one above it for the same reason. */
.lab-row:has(+ .lab-row:hover) {
  border-bottom-color: transparent;
}

/* Same fix for the drill log. The hover wash is rounded and the divider is
   not, so a drill row keeps them on separate elements - which means the rule
   has to reach the inner div rather than the row itself. */
.drill-row:has(+ .drill-row:hover) > div {
  border-bottom-color: transparent;
}

/* ------------------------------------------------------- step number chip ----
   The small numeral that heads a step in an explainer - the drills strip and
   the walkthrough's "How it works" both use it.

   Lifted off its band the way the platform lifts any raised surface: a
   hairline highlight along the top edge, and the ground colour dropped
   underneath. Not a soft shadow - on a near-black page a dark blur has
   nothing to darken and reads as nothing. The highlight is Δ3 over the chip,
   enough to catch the edge without drawing a line on it. */
.step-count {
  background: var(--n-22);
  box-shadow: inset 0 1px 0 var(--n-25), 0 1px 3px -1px var(--surface);
}
/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Figtree, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
:root {
  --n-11: oklch(11% 0 0);
  --n-12: oklch(12% 0 0);
  --n-14: oklch(14% 0 0);
  --n-15: oklch(15% 0 0);
  --n-17: oklch(17% 0 0);
  --n-19: oklch(19% 0 0);
  --n-22: oklch(22% 0 0);
  --n-25: oklch(25% 0 0);
  --n-27: oklch(27% 0 0);
  --n-33: oklch(33% 0 0);
  --n-37: oklch(37% 0 0);
  --n-48: oklch(48% 0 0);
  --n-53: oklch(53% 0 0);
  --n-58: oklch(58% 0 0);
  --n-65: oklch(65% 0 0);
  --n-71: oklch(71% 0 0);
  --n-79: oklch(79% 0 0);
  --n-86: oklch(86% 0 0);
  --n-90: oklch(90% 0 0);
  --n-93: oklch(93% 0 0);
  --n-95: oklch(95% 0 0);
  --n-97: oklch(97% 0 0);
  --n-100: oklch(100% 0 0);
  --accent: oklch(64.73% 0.151 158.2);
  --accent-bright: oklch(80% 0.15 158.2);
  --accent-mid: oklch(57.82% 0.136 157.6);
  --accent-deep: oklch(50% 0.115 158.9);
  --accent-line: color-mix(in srgb, oklch(64.73% 0.151 158.2) 27%, oklch(11% 0 0));
  --accent-wash: color-mix(in srgb, oklch(64.73% 0.151 158.2) 12%, oklch(11% 0 0));
  --accent-wash-strong: color-mix(in srgb, oklch(64.73% 0.151 158.2) 20%, oklch(11% 0 0));
  --danger: oklch(66% 0.18 25);
  --danger-bright: oklch(80% 0.15 25);
  --danger-deep: oklch(58% 0.18 26);
  --danger-line: oklch(26.4% 0.067 25);
  --danger-wash: oklch(16.1% 0.025 25);
  --warn: oklch(75% 0.14 78);
  --warn-bright: oklch(87% 0.15 85);
  --warn-line: oklch(30.1% 0.056 78);
  --warn-wash: oklch(15.5% 0.019 78);
  --cat-1: oklch(70% 0.13 25);
  --cat-2: oklch(70% 0.13 70);
  --cat-3: oklch(70% 0.13 120);
  --cat-4: oklch(70% 0.13 165);
  --cat-5: oklch(70% 0.13 205);
  --cat-6: oklch(70% 0.13 250);
  --cat-7: oklch(70% 0.13 292);
  --cat-8: oklch(70% 0.13 330);
  --cat-other: oklch(65% 0 0);
}

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */

.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 200px) {
  .\!container {
    max-width: 200px !important;
  }
  .container {
    max-width: 200px;
  }
}

@media (min-width: 380px) {
  .\!container {
    max-width: 380px !important;
  }
  .container {
    max-width: 380px;
  }
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1400px) {
  .\!container {
    max-width: 1400px !important;
  }
  .container {
    max-width: 1400px;
  }
}

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0;
}
.inset-x-0 {
  left: 0;
  right: 0;
}
.inset-y-0 {
  top: 0;
  bottom: 0;
}
.\!left-\[13\.5px\] {
  left: 13.5px !important;
}
.-bottom-\[2px\] {
  bottom: -2px;
}
.-right-\[9px\] {
  right: -9px;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.left-\[12px\] {
  left: 12px;
}
.left-\[14px\] {
  left: 14px;
}
.left-\[2px\] {
  left: 2px;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0;
}
.right-\[7px\] {
  right: 7px;
}
.top-0 {
  top: 0;
}
.top-\[2px\] {
  top: 2px;
}
.top-\[32px\] {
  top: 32px;
}
.top-\[50px\] {
  top: 50px;
}
.top-\[58px\] {
  top: 58px;
}
.top-\[60px\] {
  top: 60px;
}
.top-\[6px\] {
  top: 6px;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[10\] {
  z-index: 10;
}
.z-\[1200\] {
  z-index: 1200;
}
.z-\[40\] {
  z-index: 40;
}
.z-\[99\] {
  z-index: 99;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.m-0 {
  margin: 0px;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-8 {
  margin-left: -2rem;
  margin-right: -2rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-1 {
  margin-bottom: -0.25rem;
}
.-mb-4 {
  margin-bottom: -1rem;
}
.-mb-5 {
  margin-bottom: -1.25rem;
}
.-mb-6 {
  margin-bottom: -1.5rem;
}
.-mb-\[2px\] {
  margin-bottom: -2px;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-16 {
  margin-left: -4rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-ml-3 {
  margin-left: -0.75rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-ml-5 {
  margin-left: -1.25rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mr-7 {
  margin-right: -1.75rem;
}
.-mr-\[1px\] {
  margin-right: -1px;
}
.-mr-\[6px\] {
  margin-right: -6px;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.-mt-5 {
  margin-top: -1.25rem;
}
.-mt-8 {
  margin-top: -2rem;
}
.-mt-\[12px\] {
  margin-top: -12px;
}
.-mt-\[1px\] {
  margin-top: -1px;
}
.-mt-\[2px\] {
  margin-top: -2px;
}
.-mt-\[5px\] {
  margin-top: -5px;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-32 {
  margin-bottom: 8rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-48 {
  margin-bottom: 12rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[25px\] {
  margin-bottom: 25px;
}
.mb-\[2px\] {
  margin-bottom: 2px;
}
.mb-\[3px\] {
  margin-bottom: 3px;
}
.ml-0 {
  margin-left: 0px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-10 {
  margin-left: 2.5rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-16 {
  margin-left: 4rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-2\.5 {
  margin-left: 0.625rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-\[12px\] {
  margin-left: 12px;
}
.ml-\[2px\] {
  margin-left: 2px;
}
.ml-\[36px\] {
  margin-left: 36px;
}
.ml-\[40px\] {
  margin-left: 40px;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-10 {
  margin-right: 2.5rem;
}
.mr-16 {
  margin-right: 4rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-32 {
  margin-top: 8rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[13px\] {
  margin-top: 13px;
}
.mt-\[15px\] {
  margin-top: 15px;
}
.mt-\[1px\] {
  margin-top: 1px;
}
.mt-\[26px\] {
  margin-top: 26px;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-\[5px\] {
  margin-top: 5px;
}
.mt-auto {
  margin-top: auto;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[100px\] {
  height: 100px;
}
.h-\[104px\] {
  height: 104px;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[110px\] {
  height: 110px;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[160px\] {
  height: 160px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[23px\] {
  height: 23px;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[25px\] {
  height: 25px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[33px\] {
  height: 33px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[36px\] {
  height: 36px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[40px\] {
  height: 40px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[48px\] {
  height: 48px;
}
.h-\[4px\] {
  height: 4px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[61px\] {
  height: 61px;
}
.h-\[6px\] {
  height: 6px;
}
.h-\[70px\] {
  height: 70px;
}
.h-\[7px\] {
  height: 7px;
}
.h-\[8px\] {
  height: 8px;
}
.h-\[9px\] {
  height: 9px;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-\[55vh\] {
  max-height: 55vh;
}
.max-h-\[75\%\] {
  max-height: 75%;
}
.min-h-0 {
  min-height: 0;
}
.min-h-\[100px\] {
  min-height: 100px;
}
.min-h-\[132px\] {
  min-height: 132px;
}
.min-h-\[18px\] {
  min-height: 18px;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[220px\] {
  min-height: 220px;
}
.min-h-\[250px\] {
  min-height: 250px;
}
.min-h-\[377px\] {
  min-height: 377px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[46px\] {
  min-height: 46px;
}
.min-h-\[50px\] {
  min-height: 50px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/4 {
  width: 25%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/6 {
  width: 33.333333%;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/6 {
  width: 66.666667%;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/12 {
  width: 41.666667%;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-7\/12 {
  width: 58.333333%;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-9\/12 {
  width: 75%;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[116px\] {
  width: 116px;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[153px\] {
  width: 153px;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[16px\] {
  width: 16px;
}
.w-\[170px\] {
  width: 170px;
}
.w-\[17px\] {
  width: 17px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[23px\] {
  width: 23px;
}
.w-\[24px\] {
  width: 24px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[28px\] {
  width: 28px;
}
.w-\[2px\] {
  width: 2px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[33px\] {
  width: 33px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[350px\] {
  width: 350px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[40px\] {
  width: 40px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[52px\] {
  width: 52px;
}
.w-\[5px\] {
  width: 5px;
}
.w-\[60px\] {
  width: 60px;
}
.w-\[62px\] {
  width: 62px;
}
.w-\[6px\] {
  width: 6px;
}
.w-\[70\%\] {
  width: 70%;
}
.w-\[7px\] {
  width: 7px;
}
.w-\[98px\] {
  width: 98px;
}
.w-\[9px\] {
  width: 9px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[780px\] {
  min-width: 780px;
}
.min-w-\[90px\] {
  min-width: 90px;
}
.max-w-\[22ch\] {
  max-width: 22ch;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[270px\] {
  max-width: 270px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[38ch\] {
  max-width: 38ch;
}
.max-w-\[40px\] {
  max-width: 40px;
}
.max-w-\[46ch\] {
  max-width: 46ch;
}
.max-w-\[52ch\] {
  max-width: 52ch;
}
.max-w-\[54ch\] {
  max-width: 54ch;
}
.max-w-\[550px\] {
  max-width: 550px;
}
.max-w-\[60ch\] {
  max-width: 60ch;
}
.max-w-\[62ch\] {
  max-width: 62ch;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[64ch\] {
  max-width: 64ch;
}
.max-w-\[65ch\] {
  max-width: 65ch;
}
.max-w-\[68ch\] {
  max-width: 68ch;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[750px\] {
  max-width: 750px;
}
.max-w-\[860px\] {
  max-width: 860px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-top {
  transform-origin: top;
}
.origin-top-right {
  transform-origin: top right;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[9px\] {
  --tw-translate-x: 9px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-col-resize {
  cursor: col-resize;
}
.cursor-default {
  cursor: default;
}
.cursor-ew-resize {
  cursor: ew-resize;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-ns-resize {
  cursor: ns-resize;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.auto-cols-max {
  grid-auto-columns: max-content;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid-rows-\[1fr_auto\] {
  grid-template-rows: 1fr auto;
}
.grid-rows-subgrid {
  grid-template-rows: subgrid;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-11 {
  gap: 2.75rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-\[9px\] {
  gap: 9px;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.text-wrap {
  text-wrap: wrap;
}
.text-nowrap {
  text-wrap: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-custom {
  border-radius: 2.8rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-icon {
  border-radius: 1.2rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.85rem;
}
.rounded-b-full {
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-b-icon {
  border-bottom-right-radius: 1.2rem;
  border-bottom-left-radius: 1.2rem;
}
.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-t-icon {
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-t-xl {
  border-top-left-radius: 0.85rem;
  border-top-right-radius: 0.85rem;
}
.rounded-br-none {
  border-bottom-right-radius: 0;
}
.rounded-tl-none {
  border-top-left-radius: 0;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[2px\] {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[rgba\(247\2c 251\2c 255\2c 0\.1\)\] {
  border-color: rgba(247,251,255,0.1);
}
.border-\[var\(--accent-line\)\] {
  border-color: var(--accent-line);
}
.border-\[var\(--danger-line\)\] {
  border-color: var(--danger-line);
}
.border-\[var\(--line\)\] {
  border-color: var(--line);
}
.border-\[var\(--warn-line\)\] {
  border-color: var(--warn-line);
}
.border-accent-line {
  border-color: color-mix(in srgb, oklch(64.73% 0.151 158.2) 27%, oklch(11% 0 0));
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(4 4 4 / var(--tw-border-opacity));
}
.border-blackop-1 {
  border-color: rgba(31, 36, 51, 0.1);
}
.border-blackop-2 {
  border-color: rgba(31, 36, 51, 0.2);
}
.border-blackop-4 {
  border-color: rgba(31, 36, 51, 0.4);
}
.border-blackop-9 {
  border-color: rgba(31, 36, 51, 0.9);
}
.border-danger {
  --tw-border-opacity: 1;
  border-color: oklch(66% 0.18 25 / var(--tw-border-opacity));
}
.border-danger-line {
  --tw-border-opacity: 1;
  border-color: oklch(26.4% 0.067 25 / var(--tw-border-opacity));
}
.border-darkgray {
  --tw-border-opacity: 1;
  border-color: rgb(19 20 23 / var(--tw-border-opacity));
}
.border-green-1 {
  --tw-border-opacity: 1;
  border-color: rgb(0 169 106 / var(--tw-border-opacity));
}
.border-ink {
  border-color: var(--ink);
}
.border-line {
  border-color: var(--line);
}
.border-line-panel {
  border-color: var(--line-panel);
}
.border-line-strong {
  border-color: var(--line-strong);
}
.border-n-100\/50 {
  border-color: oklch(100% 0 0 / 0.5);
}
.border-n-100\/60 {
  border-color: oklch(100% 0 0 / 0.6);
}
.border-red {
  --tw-border-opacity: 1;
  border-color: rgb(245 72 72 / var(--tw-border-opacity));
}
.border-surface {
  border-color: var(--surface);
}
.border-transparent {
  border-color: transparent;
}
.border-warn\/20 {
  border-color: oklch(75% 0.14 78 / 0.2);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-whiteop-05 {
  border-color: rgba(255, 255, 255, 0.05);
}
.border-whiteop-1 {
  border-color: rgba(255, 255, 255, 0.1);
}
.border-whiteop-2 {
  border-color: rgba(255, 255, 255, 0.2);
}
.border-whiteop-3 {
  border-color: rgba(255, 255, 255, 0.3);
}
.border-whiteop-5 {
  border-color: rgba(255, 255, 255, 0.5);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-l-white {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-t-black {
  --tw-border-opacity: 1;
  border-top-color: rgb(4 4 4 / var(--tw-border-opacity));
}
.bg-\[\#000\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-\[\#00a96a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 169 106 / var(--tw-bg-opacity));
}
.bg-\[\#0A0A0A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
}
.bg-\[\#0D0E10\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 14 16 / var(--tw-bg-opacity));
}
.bg-\[\#0F0F0F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / var(--tw-bg-opacity));
}
.bg-\[\#0F1115\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 17 21 / var(--tw-bg-opacity));
}
.bg-\[\#0a0a0a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
}
.bg-\[\#10251d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(16 37 29 / var(--tw-bg-opacity));
}
.bg-\[\#1f2937\] {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-\[\#2b1111\] {
  --tw-bg-opacity: 1;
  background-color: rgb(43 17 17 / var(--tw-bg-opacity));
}
.bg-\[\#3B3C40\] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 60 64 / var(--tw-bg-opacity));
}
.bg-\[\#EBEDF0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(235 237 240 / var(--tw-bg-opacity));
}
.bg-\[\#F59E0B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.bg-\[\#fff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-\[rgba\(0\2c 169\2c 106\2c 0\.15\)\] {
  background-color: rgba(0,169,106,0.15);
}
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.03\)\] {
  background-color: rgba(255,255,255,0.03);
}
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
  background-color: rgba(255,255,255,0.06);
}
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
  background-color: rgba(255,255,255,0.15);
}
.bg-\[var\(--accent-wash\)\] {
  background-color: var(--accent-wash);
}
.bg-\[var\(--danger-wash\)\] {
  background-color: var(--danger-wash);
}
.bg-\[var\(--line\)\] {
  background-color: var(--line);
}
.bg-\[var\(--line-strong\)\] {
  background-color: var(--line-strong);
}
.bg-\[var\(--surface-panel\)\] {
  background-color: var(--surface-panel);
}
.bg-\[var\(--warn-wash\)\] {
  background-color: var(--warn-wash);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(64.73% 0.151 158.2 / var(--tw-bg-opacity));
}
.bg-accent-wash {
  background-color: color-mix(in srgb, oklch(64.73% 0.151 158.2) 12%, oklch(11% 0 0));
}
.bg-accent-wash-strong {
  background-color: color-mix(in srgb, oklch(64.73% 0.151 158.2) 20%, oklch(11% 0 0));
}
.bg-accent\/15 {
  background-color: oklch(64.73% 0.151 158.2 / 0.15);
}
.bg-accent\/20 {
  background-color: oklch(64.73% 0.151 158.2 / 0.2);
}
.bg-accent\/30 {
  background-color: oklch(64.73% 0.151 158.2 / 0.3);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(4 4 4 / var(--tw-bg-opacity));
}
.bg-blackop-05 {
  background-color: rgba(31, 36, 51, 0.05);
}
.bg-blackop-1 {
  background-color: rgba(31, 36, 51, 0.1);
}
.bg-blackop-5 {
  background-color: rgba(31, 36, 51, 0.5);
}
.bg-control {
  background-color: var(--control);
}
.bg-danger-wash {
  --tw-bg-opacity: 1;
  background-color: oklch(16.1% 0.025 25 / var(--tw-bg-opacity));
}
.bg-darkgray {
  --tw-bg-opacity: 1;
  background-color: rgb(19 20 23 / var(--tw-bg-opacity));
}
.bg-green-1 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 169 106 / var(--tw-bg-opacity));
}
.bg-green-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 118 74 / var(--tw-bg-opacity));
}
.bg-ink-2 {
  background-color: var(--ink-2);
}
.bg-ink-inert {
  background-color: var(--ink-inert);
}
.bg-line {
  background-color: var(--line);
}
.bg-n-100 {
  --tw-bg-opacity: 1;
  background-color: oklch(100% 0 0 / var(--tw-bg-opacity));
}
.bg-n-100\/20 {
  background-color: oklch(100% 0 0 / 0.2);
}
.bg-n-100\/\[0\.025\] {
  background-color: oklch(100% 0 0 / 0.025);
}
.bg-n-12 {
  --tw-bg-opacity: 1;
  background-color: oklch(12% 0 0 / var(--tw-bg-opacity));
}
.bg-n-15 {
  --tw-bg-opacity: 1;
  background-color: oklch(15% 0 0 / var(--tw-bg-opacity));
}
.bg-n-93 {
  --tw-bg-opacity: 1;
  background-color: oklch(93% 0 0 / var(--tw-bg-opacity));
}
.bg-oldblack {
  background-color: var(--oldblack);
}
.bg-red {
  --tw-bg-opacity: 1;
  background-color: rgb(245 72 72 / var(--tw-bg-opacity));
}
.bg-red\/15 {
  background-color: rgb(245 72 72 / 0.15);
}
.bg-surface {
  background-color: var(--surface);
}
.bg-surface-panel {
  background-color: var(--surface-panel);
}
.bg-track {
  background-color: var(--track);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warn {
  --tw-bg-opacity: 1;
  background-color: oklch(75% 0.14 78 / var(--tw-bg-opacity));
}
.bg-warn-wash {
  --tw-bg-opacity: 1;
  background-color: oklch(15.5% 0.019 78 / var(--tw-bg-opacity));
}
.bg-wash {
  background-color: var(--wash);
}
.bg-wash-strong {
  background-color: var(--wash-strong);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-whiteop-05 {
  background-color: rgba(255, 255, 255, 0.05);
}
.bg-whiteop-1 {
  background-color: rgba(255, 255, 255, 0.1);
}
.bg-whiteop-5 {
  background-color: rgba(255, 255, 255, 0.5);
}
.bg-\[linear-gradient\(110deg\2c var\(--surface\)\2c 45\%\2c var\(--line\)\2c 55\%\2c var\(--surface\)\)\] {
  background-image: linear-gradient(110deg,var(--surface),45%,var(--line),55%,var(--surface));
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-warn-bright {
  --tw-gradient-from: oklch(87% 0.15 85 / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: oklch(87% 0.15 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[rgba\(255\2c 255\2c 255\2c 0\.08\)\] {
  --tw-gradient-to: rgba(255, 255, 255, 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgba(255,255,255,0.08) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-warn {
  --tw-gradient-to: oklch(75% 0.14 78 / 1) var(--tw-gradient-to-position);
}
.bg-\[length\:200\%_100\%\] {
  background-size: 200% 100%;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[26px\] {
  padding: 26px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[26px\] {
  padding-left: 26px;
  padding-right: 26px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-\[1px\] {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}
.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-48 {
  padding-bottom: 12rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-64 {
  padding-bottom: 16rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[60px\] {
  padding-bottom: 60px;
}
.pl-0 {
  padding-left: 0px;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-20 {
  padding-left: 5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-0 {
  padding-right: 0px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-3\.5 {
  padding-right: 0.875rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-\[13px\] {
  padding-right: 13px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.pt-\[30px\] {
  padding-top: 30px;
}
.pt-\[54px\] {
  padding-top: 54px;
}
.pt-\[61px\] {
  padding-top: 61px;
}
.pt-\[80px\] {
  padding-top: 80px;
}
.pt-\[9px\] {
  padding-top: 9px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-\[\'Figtree\'\] {
  font-family: 'Figtree';
}
.font-\[\'Inconsolata\'\] {
  font-family: 'Inconsolata';
}
.font-\[family-name\:var\(--mono\)\] {
  font-family: var(--mono);
}
.font-mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.875rem;
}
.text-4ixl {
  font-size: 2.65rem;
}
.text-4xl {
  font-size: 2.25rem;
}
.text-5xl {
  font-size: 3rem;
}
.text-\[1\.25rem\] {
  font-size: 1.25rem;
}
.text-\[1\.3rem\] {
  font-size: 1.3rem;
}
.text-\[1\.45rem\] {
  font-size: 1.45rem;
}
.text-\[1\.5rem\] {
  font-size: 1.5rem;
}
.text-\[1\.7rem\] {
  font-size: 1.7rem;
}
.text-\[1\.9rem\] {
  font-size: 1.9rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15\.5px\] {
  font-size: 15.5px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16\.5px\] {
  font-size: 16.5px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17\.5px\] {
  font-size: 17.5px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[2\.6rem\] {
  font-size: 2.6rem;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[2rem\] {
  font-size: 2rem;
}
.text-\[3\.2rem\] {
  font-size: 3.2rem;
}
.text-\[clamp\(34px\2c 4\.4vw\2c 52px\)\] {
  font-size: clamp(34px,4.4vw,52px);
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-smp {
  font-size: 0.92rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.leading-\[1\.06\] {
  line-height: 1.06;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.12\] {
  line-height: 1.12;
}
.leading-\[1\.5\] {
  line-height: 1.5;
}
.leading-\[1\.66\] {
  line-height: 1.66;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[1\.8\] {
  line-height: 1.8;
}
.leading-loose {
  line-height: 2;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-relaxedp {
  line-height: 1.8;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-\.028em\] {
  letter-spacing: -.028em;
}
.tracking-\[-0\.005em\] {
  letter-spacing: -0.005em;
}
.tracking-\[-0\.012em\] {
  letter-spacing: -0.012em;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-\[-0\.022em\] {
  letter-spacing: -0.022em;
}
.tracking-\[-0\.028em\] {
  letter-spacing: -0.028em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}
.tracking-\[\.04em\] {
  letter-spacing: .04em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.2px\] {
  letter-spacing: 0.2px;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-\[color\:var\(--ink-3\)\] {
  color: var(--ink-3) !important;
}
.\!text-\[color\:var\(--ink-4\)\] {
  color: var(--ink-4) !important;
}
.text-\[\#00a96a\] {
  --tw-text-opacity: 1;
  color: rgb(0 169 106 / var(--tw-text-opacity));
}
.text-\[\#5EE0A0\] {
  --tw-text-opacity: 1;
  color: rgb(94 224 160 / var(--tw-text-opacity));
}
.text-\[\#6272a4\] {
  --tw-text-opacity: 1;
  color: rgb(98 114 164 / var(--tw-text-opacity));
}
.text-\[\#ABAFB4\] {
  --tw-text-opacity: 1;
  color: rgb(171 175 180 / var(--tw-text-opacity));
}
.text-\[\#F59E0B\] {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-\[\#ccc\] {
  --tw-text-opacity: 1;
  color: rgb(204 204 204 / var(--tw-text-opacity));
}
.text-\[\#ff7878\] {
  --tw-text-opacity: 1;
  color: rgb(255 120 120 / var(--tw-text-opacity));
}
.text-\[color\:var\(--ink-2\)\] {
  color: var(--ink-2);
}
.text-\[color\:var\(--ink-3\)\] {
  color: var(--ink-3);
}
.text-\[color\:var\(--ink-4\)\] {
  color: var(--ink-4);
}
.text-\[color\:var\(--ink-inert\)\] {
  color: var(--ink-inert);
}
.text-\[rgba\(171\2c 175\2c 180\2c 0\.5\)\] {
  color: rgba(171,175,180,0.5);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.3\)\] {
  color: rgba(255,255,255,0.3);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.35\)\] {
  color: rgba(255,255,255,0.35);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.4\)\] {
  color: rgba(255,255,255,0.4);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.5\)\] {
  color: rgba(255,255,255,0.5);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.7\)\] {
  color: rgba(255,255,255,0.7);
}
.text-\[rgba\(255\2c 255\2c 255\2c 0\.9\)\] {
  color: rgba(255,255,255,0.9);
}
.text-\[var\(--ink-4\)\] {
  color: var(--ink-4);
}
.text-\[var\(--warn\)\] {
  color: var(--warn);
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(64.73% 0.151 158.2 / var(--tw-text-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(4 4 4 / var(--tw-text-opacity));
}
.text-blackop-5 {
  color: rgba(31, 36, 51, 0.5);
}
.text-blackop-6 {
  color: rgba(31, 36, 51, 0.6);
}
.text-blackop-7 {
  color: rgba(31, 36, 51, 0.7);
}
.text-blackop-8 {
  color: rgba(31, 36, 51, 0.8);
}
.text-blackop-9 {
  color: rgba(31, 36, 51, 0.9);
}
.text-danger {
  --tw-text-opacity: 1;
  color: oklch(66% 0.18 25 / var(--tw-text-opacity));
}
.text-gray {
  --tw-text-opacity: 1;
  color: rgb(120 123 132 / var(--tw-text-opacity));
}
.text-green-1 {
  --tw-text-opacity: 1;
  color: rgb(0 169 106 / var(--tw-text-opacity));
}
.text-ink {
  color: var(--ink);
}
.text-ink-2 {
  color: var(--ink-2);
}
.text-ink-3 {
  color: var(--ink-3);
}
.text-ink-4 {
  color: var(--ink-4);
}
.text-ink-inert {
  color: var(--ink-inert);
}
.text-n-100\/80 {
  color: oklch(100% 0 0 / 0.8);
}
.text-on-accent {
  color: var(--on-accent);
}
.text-red {
  --tw-text-opacity: 1;
  color: rgb(245 72 72 / var(--tw-text-opacity));
}
.text-warn {
  --tw-text-opacity: 1;
  color: oklch(75% 0.14 78 / var(--tw-text-opacity));
}
.text-warn-bright {
  --tw-text-opacity: 1;
  color: oklch(87% 0.15 85 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-whiteop-3 {
  color: rgba(255, 255, 255, 0.3);
}
.text-whiteop-4 {
  color: rgba(255, 255, 255, 0.4);
}
.text-whiteop-5 {
  color: rgba(255, 255, 255, 0.5);
}
.text-whiteop-6 {
  color: rgba(255, 255, 255, 0.6);
}
.text-whiteop-7 {
  color: rgba(255, 255, 255, 0.7);
}
.text-whiteop-8 {
  color: rgba(255, 255, 255, 0.8);
}
.text-whiteop-9 {
  color: rgba(255, 255, 255, 0.9);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.decoration-line-strong {
  text-decoration-color: var(--line-strong);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-black\/30::-moz-placeholder {
  color: rgb(4 4 4 / 0.3);
}
.placeholder-black\/30::placeholder {
  color: rgb(4 4 4 / 0.3);
}
.placeholder-gray-2\/30::-moz-placeholder {
  color: rgba(171, 175, 180, 0.3);
}
.placeholder-gray-2\/30::placeholder {
  color: rgba(171, 175, 180, 0.3);
}
.placeholder-ink-4::-moz-placeholder {
  color: var(--ink-4);
}
.placeholder-ink-4::placeholder {
  color: var(--ink-4);
}
.placeholder-ink-inert::-moz-placeholder {
  color: var(--ink-inert);
}
.placeholder-ink-inert::placeholder {
  color: var(--ink-inert);
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow-\[0_0_8px_rgba\(0\2c 169\2c 106\2c 0\.5\)\] {
  --tw-shadow: 0 0 8px rgba(0,169,106,0.5);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-reasons {
  --tw-shadow: 0px 0px 40px 3px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 0px 40px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.outline-0 {
  outline-width: 0px;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-line {
  --tw-ring-color: var(--line);
}
.ring-line-strong {
  --tw-ring-color: var(--line-strong);
}
.ring-surface {
  --tw-ring-color: var(--surface);
}
.ring-warn\/40 {
  --tw-ring-color: oklch(75% 0.14 78 / 0.4);
}
.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: 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);
}
.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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c background-color\2c border-color\2c box-shadow\2c opacity\2c transform\] {
  transition-property: color,background-color,border-color,box-shadow,opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[height\2c width\2c background-color\] {
  transition-property: height,width,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-\[\.32s\] {
  transition-duration: .32s;
}
.duration-\[420ms\] {
  transition-duration: 420ms;
}
.ease-\[cubic-bezier\(\.4\2c 0\2c \.2\2c 1\)\] {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.ease-\[var\(--ease-out\)\] {
  transition-timing-function: var(--ease-out);
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

html {

}

/* Hide scrollbars on horizontal scroll strips (featured labs, category chips) */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.placeholder\:text-\[rgba\(255\2c 255\2c 255\2c 0\.35\)\]::-moz-placeholder {
  color: rgba(255,255,255,0.35);
}
.placeholder\:text-\[rgba\(255\2c 255\2c 255\2c 0\.35\)\]::placeholder {
  color: rgba(255,255,255,0.35);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0;
}
.after\:left-0::after {
  content: var(--tw-content);
  left: 0;
}
.after\:h-px::after {
  content: var(--tw-content);
  height: 1px;
}
.after\:w-full::after {
  content: var(--tw-content);
  width: 100%;
}
.after\:origin-bottom-right::after {
  content: var(--tw-content);
  transform-origin: bottom right;
}
.after\:scale-x-0::after {
  content: var(--tw-content);
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:bg-n-100::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: oklch(100% 0 0 / var(--tw-bg-opacity));
}
.after\:transition-transform::after {
  content: var(--tw-content);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.after\:duration-300::after {
  content: var(--tw-content);
  transition-duration: 300ms;
}
.after\:ease-in-out::after {
  content: var(--tw-content);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.focus-within\:border-line-strong:focus-within {
  border-color: var(--line-strong);
}
.focus-within\:opacity-100:focus-within {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hover\:-translate-y-\[1px\]:hover {
    --tw-translate-y: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .hover\:cursor-pointer:hover {
    cursor: pointer;
  }
  .hover\:rounded-lg:hover {
    border-radius: 0.5rem;
  }
  .hover\:border:hover {
    border-width: 1px;
  }
  .hover\:border-\[rgba\(245\2c 72\2c 72\2c 0\.3\)\]:hover {
    border-color: rgba(245,72,72,0.3);
  }
  .hover\:border-accent:hover {
    --tw-border-opacity: 1;
    border-color: oklch(64.73% 0.151 158.2 / var(--tw-border-opacity));
  }
  .hover\:border-danger\/30:hover {
    border-color: oklch(66% 0.18 25 / 0.3);
  }
  .hover\:border-green-1:hover {
    --tw-border-opacity: 1;
    border-color: rgb(0 169 106 / var(--tw-border-opacity));
  }
  .hover\:border-line:hover {
    border-color: var(--line);
  }
  .hover\:border-line-strong:hover {
    border-color: var(--line-strong);
  }
  .hover\:border-transparent:hover {
    border-color: transparent;
  }
  .hover\:border-white:hover {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
  }
  .hover\:border-whiteop-05:hover {
    border-color: rgba(255, 255, 255, 0.05);
  }
  .hover\:border-whiteop-2:hover {
    border-color: rgba(255, 255, 255, 0.2);
  }
  .hover\:bg-\[\#15181E\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 24 30 / var(--tw-bg-opacity));
  }
  .hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.03\)\]:hover {
    background-color: rgba(255,255,255,0.03);
  }
  .hover\:bg-accent:hover {
    --tw-bg-opacity: 1;
    background-color: oklch(64.73% 0.151 158.2 / var(--tw-bg-opacity));
  }
  .hover\:bg-accent-mid:hover {
    --tw-bg-opacity: 1;
    background-color: oklch(57.82% 0.136 157.6 / var(--tw-bg-opacity));
  }
  .hover\:bg-accent\/90:hover {
    background-color: oklch(64.73% 0.151 158.2 / 0.9);
  }
  .hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 4 4 / var(--tw-bg-opacity));
  }
  .hover\:bg-darkgray-2:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 32 37 / var(--tw-bg-opacity));
  }
  .hover\:bg-green-2:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 118 74 / var(--tw-bg-opacity));
  }
  .hover\:bg-n-100:hover {
    --tw-bg-opacity: 1;
    background-color: oklch(100% 0 0 / var(--tw-bg-opacity));
  }
  .hover\:bg-n-93:hover {
    --tw-bg-opacity: 1;
    background-color: oklch(93% 0 0 / var(--tw-bg-opacity));
  }
  .hover\:bg-surface-panel:hover {
    background-color: var(--surface-panel);
  }
  .hover\:bg-wash:hover {
    background-color: var(--wash);
  }
  .hover\:bg-wash-strong:hover {
    background-color: var(--wash-strong);
  }
  .hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }
  .hover\:\!text-\[color\:var\(--ink\)\]:hover {
    color: var(--ink) !important;
  }
  .hover\:text-accent:hover {
    --tw-text-opacity: 1;
    color: oklch(64.73% 0.151 158.2 / var(--tw-text-opacity));
  }
  .hover\:text-accent-bright:hover {
    --tw-text-opacity: 1;
    color: oklch(80% 0.15 158.2 / var(--tw-text-opacity));
  }
  .hover\:text-accent-deep:hover {
    --tw-text-opacity: 1;
    color: oklch(50% 0.115 158.9 / var(--tw-text-opacity));
  }
  .hover\:text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(4 4 4 / var(--tw-text-opacity));
  }
  .hover\:text-danger:hover {
    --tw-text-opacity: 1;
    color: oklch(66% 0.18 25 / var(--tw-text-opacity));
  }
  .hover\:text-green-1:hover {
    --tw-text-opacity: 1;
    color: rgb(0 169 106 / var(--tw-text-opacity));
  }
  .hover\:text-green-2:hover {
    --tw-text-opacity: 1;
    color: rgb(0 118 74 / var(--tw-text-opacity));
  }
  .hover\:text-ink:hover {
    color: var(--ink);
  }
  .hover\:text-ink-2:hover {
    color: var(--ink-2);
  }
  .hover\:text-ink-3:hover {
    color: var(--ink-3);
  }
  .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  .hover\:text-whiteop-7:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  .hover\:text-whiteop-9:hover {
    color: rgba(255, 255, 255, 0.9);
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
  .hover\:opacity-100:hover {
    opacity: 1;
  }
  .hover\:brightness-110:hover {
    --tw-brightness: brightness(1.1);
    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);
  }
  .hover\:after\:origin-bottom-left:hover::after {
    content: var(--tw-content);
    transform-origin: bottom left;
  }
  .hover\:after\:scale-x-100:hover::after {
    content: var(--tw-content);
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.focus\:border-accent:focus {
  --tw-border-opacity: 1;
  border-color: oklch(64.73% 0.151 158.2 / var(--tw-border-opacity));
}
.focus\:border-line:focus {
  border-color: var(--line);
}
.focus\:border-line-strong:focus {
  border-color: var(--line-strong);
}
.focus\:border-whiteop-2:focus {
  border-color: rgba(255, 255, 255, 0.2);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-accent:focus-visible {
  outline-color: oklch(64.73% 0.151 158.2 / 1);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(64.73% 0.151 158.2 / var(--tw-ring-opacity));
}
.focus-visible\:ring-line-strong:focus-visible {
  --tw-ring-color: var(--line-strong);
}
.focus-visible\:ring-whiteop-3:focus-visible {
  --tw-ring-color: rgba(255, 255, 255, 0.3);
}
.focus-visible\:ring-offset-4:focus-visible {
  --tw-ring-offset-width: 4px;
}
.focus-visible\:ring-offset-black:focus-visible {
  --tw-ring-offset-color: #040404;
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.disabled\:cursor-wait:disabled {
  cursor: wait;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
  .disabled\:hover\:border-line:hover:disabled {
    border-color: var(--line);
  }
  .disabled\:hover\:text-ink-2:hover:disabled {
    color: var(--ink-2);
  }
}
.group:last-child .group-last\:border-0 {
  border-width: 0px;
}
@media (hover: hover) and (pointer: fine) {
  .group:hover .group-hover\:\!h-\[34px\] {
    height: 34px !important;
  }
  .group:hover .group-hover\:-translate-x-\[2px\] {
    --tw-translate-x: -2px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:-translate-y-\[2px\] {
    --tw-translate-y: -2px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:translate-x-\[2px\] {
    --tw-translate-x: 2px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:scale-\[1\.02\] {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:border-line-strong {
    border-color: var(--line-strong);
  }
  .group:hover .group-hover\:border-transparent {
    border-color: transparent;
  }
  .group:hover .group-hover\:\!bg-ink-3 {
    background-color: var(--ink-3) !important;
  }
  .group:hover .group-hover\:bg-wash-strong {
    background-color: var(--wash-strong);
  }
  .group:hover .group-hover\:text-\[rgba\(255\2c 255\2c 255\2c 0\.7\)\] {
    color: rgba(255,255,255,0.7);
  }
  .group:hover .group-hover\:text-\[var\(--ink-2\)\] {
    color: var(--ink-2);
  }
  .group:hover .group-hover\:text-ink {
    color: var(--ink);
  }
  .group:hover .group-hover\:text-ink-2 {
    color: var(--ink-2);
  }
  .group:hover .group-hover\:text-ink-3 {
    color: var(--ink-3);
  }
  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }
}
.aria-pressed\:bg-wash-strong[aria-pressed="true"] {
  background-color: var(--wash-strong);
}
.aria-pressed\:text-ink[aria-pressed="true"] {
  color: var(--ink);
}
.aria-pressed\:opacity-100[aria-pressed="true"] {
  opacity: 1;
}
.dark\:border-line:is(.dark *) {
  border-color: var(--line);
}
.dark\:bg-n-100:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(100% 0 0 / var(--tw-bg-opacity));
}
.dark\:bg-surface-panel:is(.dark *) {
  background-color: var(--surface-panel);
}
.dark\:bg-wash-strong:is(.dark *) {
  background-color: var(--wash-strong);
}
.dark\:text-ink:is(.dark *) {
  color: var(--ink);
}
.dark\:text-ink-2:is(.dark *) {
  color: var(--ink-2);
}
.dark\:text-on-accent:is(.dark *) {
  color: var(--on-accent);
}
@media (hover: hover) and (pointer: fine) {
  .dark\:hover\:border-line:hover:is(.dark *) {
    border-color: var(--line);
  }
  .dark\:hover\:border-line-strong:hover:is(.dark *) {
    border-color: var(--line-strong);
  }
  .dark\:hover\:text-ink:hover:is(.dark *) {
    color: var(--ink);
  }
}
@media (max-width: 900px) {
  .max-\[900px\]\:pb-\[38px\] {
    padding-bottom: 38px;
  }
  .max-\[900px\]\:pt-10 {
    padding-top: 2.5rem;
  }
}
@media (min-width: 200px) {
  .xs\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .xs\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .xs\:text-3xl {
    font-size: 1.875rem;
  }
  .xs\:text-5xl {
    font-size: 3rem;
  }
  .xs\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
}
@media (min-width: 380px) {
  .xm\:p-6 {
    padding: 1.5rem;
  }
  .xm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .xm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .xm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .xm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .xm\:pl-1 {
    padding-left: 0.25rem;
  }
  .xm\:pr-10 {
    padding-right: 2.5rem;
  }
  .xm\:text-4xl {
    font-size: 2.25rem;
  }
}
@media (min-width: 640px) {
  .sm\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .sm\:mb-12 {
    margin-bottom: 3rem;
  }
  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .sm\:mb-8 {
    margin-bottom: 2rem;
  }
  .sm\:ml-0 {
    margin-left: 0px;
  }
  .sm\:ml-4 {
    margin-left: 1rem;
  }
  .sm\:mr-4 {
    margin-right: 1rem;
  }
  .sm\:mr-6 {
    margin-right: 1.5rem;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:mt-10 {
    margin-top: 2.5rem;
  }
  .sm\:mt-4 {
    margin-top: 1rem;
  }
  .sm\:mt-6 {
    margin-top: 1.5rem;
  }
  .sm\:mt-7 {
    margin-top: 1.75rem;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline-block {
    display: inline-block;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:w-1\/2 {
    width: 50%;
  }
  .sm\:w-2\/3 {
    width: 66.666667%;
  }
  .sm\:w-4\/6 {
    width: 66.666667%;
  }
  .sm\:w-48 {
    width: 12rem;
  }
  .sm\:w-\[200px\] {
    width: 200px;
  }
  .sm\:w-\[240px\] {
    width: 240px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-start {
    justify-content: flex-start;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:gap-5 {
    gap: 1.25rem;
  }
  .sm\:rounded-none {
    border-radius: 0;
  }
  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }
  .sm\:bg-none {
    background-image: none;
  }
  .sm\:p-8 {
    padding: 2rem;
  }
  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .sm\:pb-0 {
    padding-bottom: 0px;
  }
  .sm\:pb-32 {
    padding-bottom: 8rem;
  }
  .sm\:pr-10 {
    padding-right: 2.5rem;
  }
  .sm\:pr-5 {
    padding-right: 1.25rem;
  }
  .sm\:pt-10 {
    padding-top: 2.5rem;
  }
  .sm\:pt-24 {
    padding-top: 6rem;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-2xl {
    font-size: 1.5rem;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
  }
  .sm\:text-5xl {
    font-size: 3rem;
  }
  .sm\:text-base {
    font-size: 1rem;
  }
  .sm\:text-sm {
    font-size: 0.875rem;
  }
  .sm\:text-xs {
    font-size: 0.75rem;
  }
  .sm\:font-semibold {
    font-weight: 600;
  }
  .sm\:text-black {
    --tw-text-opacity: 1;
    color: rgb(4 4 4 / var(--tw-text-opacity));
  }
  .sm\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .sm\:shadow-reasons {
    --tw-shadow: 0px 0px 40px 3px rgba(0,0,0,0.06);
    --tw-shadow-colored: 0px 0px 40px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 768px) {
  .md\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .md\:mb-12 {
    margin-bottom: 3rem;
  }
  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .md\:ml-5 {
    margin-left: 1.25rem;
  }
  .md\:ml-\[60px\] {
    margin-left: 60px;
  }
  .md\:ml-auto {
    margin-left: auto;
  }
  .md\:mr-auto {
    margin-right: auto;
  }
  .md\:mt-0 {
    margin-top: 0px;
  }
  .md\:mt-14 {
    margin-top: 3.5rem;
  }
  .md\:mt-16 {
    margin-top: 4rem;
  }
  .md\:mt-20 {
    margin-top: 5rem;
  }
  .md\:mt-24 {
    margin-top: 6rem;
  }
  .md\:mt-28 {
    margin-top: 7rem;
  }
  .md\:mt-3 {
    margin-top: 0.75rem;
  }
  .md\:mt-32 {
    margin-top: 8rem;
  }
  .md\:mt-auto {
    margin-top: auto;
  }
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:h-\[220px\] {
    height: 220px;
  }
  .md\:w-1\/2 {
    width: 50%;
  }
  .md\:w-10\/12 {
    width: 83.333333%;
  }
  .md\:w-2\/6 {
    width: 33.333333%;
  }
  .md\:w-24 {
    width: 6rem;
  }
  .md\:w-4\/5 {
    width: 80%;
  }
  .md\:w-4\/6 {
    width: 66.666667%;
  }
  .md\:w-5\/12 {
    width: 41.666667%;
  }
  .md\:w-\[320px\] {
    width: 320px;
  }
  .md\:w-full {
    width: 100%;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-\[0\.9fr_1\.1fr\] {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .md\:grid-cols-\[1\.05fr_0\.95fr\] {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .md\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .md\:grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }
  .md\:grid-rows-subgrid {
    grid-template-rows: subgrid;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:border-b-0 {
    border-bottom-width: 0px;
  }
  .md\:border-l {
    border-left-width: 1px;
  }
  .md\:border-r {
    border-right-width: 1px;
  }
  .md\:border-t-0 {
    border-top-width: 0px;
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-11 {
    padding: 2.75rem;
  }
  .md\:p-12 {
    padding: 3rem;
  }
  .md\:p-16 {
    padding: 4rem;
  }
  .md\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  .md\:pb-32 {
    padding-bottom: 8rem;
  }
  .md\:pl-5 {
    padding-left: 1.25rem;
  }
  .md\:pr-12 {
    padding-right: 3rem;
  }
  .md\:pt-0 {
    padding-top: 0px;
  }
  .md\:pt-10 {
    padding-top: 2.5rem;
  }
  .md\:pt-12 {
    padding-top: 3rem;
  }
  .md\:pt-16 {
    padding-top: 4rem;
  }
  .md\:pt-20 {
    padding-top: 5rem;
  }
  .md\:pt-3 {
    padding-top: 0.75rem;
  }
  .md\:pt-32 {
    padding-top: 8rem;
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
  }
  .md\:text-4ixl {
    font-size: 2.65rem;
  }
  .md\:text-5xl {
    font-size: 3rem;
  }
  .md\:text-6xl {
    font-size: 4rem;
  }
  .md\:text-\[1\.6rem\] {
    font-size: 1.6rem;
  }
  .md\:text-\[2\.4rem\] {
    font-size: 2.4rem;
  }
  .md\:text-\[2rem\] {
    font-size: 2rem;
  }
  .md\:text-\[3\.25rem\] {
    font-size: 3.25rem;
  }
  .md\:text-\[3\.4rem\] {
    font-size: 3.4rem;
  }
  .md\:text-\[3\.5rem\] {
    font-size: 3.5rem;
  }
  .md\:text-\[3rem\] {
    font-size: 3rem;
  }
  .md\:text-base {
    font-size: 1rem;
  }
  .md\:text-lg {
    font-size: 1.125rem;
  }
  .md\:text-xl {
    font-size: 1.25rem;
  }
  .md\:font-bold {
    font-weight: 700;
  }
  .md\:font-normal {
    font-weight: 400;
  }
  .md\:leading-relaxedp {
    line-height: 1.8;
  }
  .md\:first\:border-l-0:first-child {
    border-left-width: 0px;
  }
}
@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }
  .lg\:top-0 {
    top: 0;
  }
  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .lg\:ml-0 {
    margin-left: 0px;
  }
  .lg\:ml-\[89px\] {
    margin-left: 89px;
  }
  .lg\:mt-0 {
    margin-top: 0px;
  }
  .lg\:mt-24 {
    margin-top: 6rem;
  }
  .lg\:mt-7 {
    margin-top: 1.75rem;
  }
  .lg\:block {
    display: block;
  }
  .lg\:inline-block {
    display: inline-block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:max-h-\[calc\(100vh-300px\)\] {
    max-height: calc(100vh - 300px);
  }
  .lg\:w-1\/2 {
    width: 50%;
  }
  .lg\:w-1\/3 {
    width: 33.333333%;
  }
  .lg\:w-10\/12 {
    width: 83.333333%;
  }
  .lg\:w-2\/3 {
    width: 66.666667%;
  }
  .lg\:w-3\/5 {
    width: 60%;
  }
  .lg\:w-4\/12 {
    width: 33.333333%;
  }
  .lg\:w-4\/5 {
    width: 80%;
  }
  .lg\:w-5\/12 {
    width: 41.666667%;
  }
  .lg\:w-6\/12 {
    width: 50%;
  }
  .lg\:w-8\/12 {
    width: 66.666667%;
  }
  .lg\:w-\[118px\] {
    width: 118px;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:grid-cols-\[0\.82fr_1\.18fr\] {
    grid-template-columns: 0.82fr 1.18fr;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:gap-\[60px\] {
    gap: 60px;
  }
  .lg\:overflow-scroll {
    overflow: scroll;
  }
  .lg\:bg-transparent {
    background-color: transparent;
  }
  .lg\:p-14 {
    padding: 3.5rem;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:pb-32 {
    padding-bottom: 8rem;
  }
  .lg\:pl-10 {
    padding-left: 2.5rem;
  }
  .lg\:pl-12 {
    padding-left: 3rem;
  }
  .lg\:pl-16 {
    padding-left: 4rem;
  }
  .lg\:pr-10 {
    padding-right: 2.5rem;
  }
  .lg\:pt-32 {
    padding-top: 8rem;
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-1xl {
    font-size: 1.30rem;
  }
  .lg\:text-3xl {
    font-size: 1.875rem;
  }
  .lg\:text-5xl {
    font-size: 3rem;
  }
  .lg\:text-base {
    font-size: 1rem;
  }
  .lg\:text-lg {
    font-size: 1.125rem;
  }
  .lg\:text-xl {
    font-size: 1.25rem;
  }
}
@media (min-width: 1280px) {
  .xl\:-ml-\[170px\] {
    margin-left: -170px;
  }
  .xl\:mt-32 {
    margin-top: 8rem;
  }
  .xl\:block {
    display: block;
  }
  .xl\:w-1\/3 {
    width: 33.333333%;
  }
  .xl\:w-6\/12 {
    width: 50%;
  }
  .xl\:w-8\/12 {
    width: 66.666667%;
  }
  .xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .xl\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .xl\:pb-0 {
    padding-bottom: 0px;
  }
  .xl\:pb-16 {
    padding-bottom: 4rem;
  }
  .xl\:pb-24 {
    padding-bottom: 6rem;
  }
  .xl\:pb-32 {
    padding-bottom: 8rem;
  }
  .xl\:pr-24 {
    padding-right: 6rem;
  }
  .xl\:pt-10 {
    padding-top: 2.5rem;
  }
  .xl\:pt-20 {
    padding-top: 5rem;
  }
  .xl\:pt-32 {
    padding-top: 8rem;
  }
  .xl\:pt-48 {
    padding-top: 12rem;
  }
  .xl\:text-3xl {
    font-size: 1.875rem;
  }
  .xl\:text-5xhl {
    font-size: 3.5rem;
  }
}
.\[\&_b\]\:font-medium b {
  font-weight: 500;
}
.\[\&_b\]\:font-semibold b {
  font-weight: 600;
}
.\[\&_b\]\:text-ink b {
  color: var(--ink);
}
.\[\&_em\]\:font-normal em {
  font-weight: 400;
}
.\[\&_em\]\:italic em {
  font-style: italic;
}
.\[\&_em\]\:text-ink-2 em {
  color: var(--ink-2);
}
.\[\&_p\]\:m-0 p {
  margin: 0px;
}