/* Public-page tokens. The authenticated application keeps its existing styles. */
html:has(.landing-shell) { scroll-behavior: smooth; scroll-padding-top: 0; }
.landing-shell {
  --header-height: 4.5rem;
  --content-max-width: 90rem;
  --section-padding-x: clamp(1.25rem, 5vw, 5rem);
  --section-padding-y: clamp(4.5rem, 10svh, 8.75rem);
  --scene-bg: #fff;
  --scene-muted: #f4f7fb;
  --scene-ink: #0b192b;
  --scene-copy: #526175;
  --scene-line: #dce5ef;
  --scene-accent: #1976d2;
  --scene-tint: #e3f2fd;
  --scene-radius: 1.5rem;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--scene-bg);
  color: var(--scene-ink);
}
.dark .landing-shell, .landing-shell .scene-dark {
  --scene-bg: #07111f;
  --scene-muted: #0d1a2b;
  --scene-ink: #f2f6fc;
  --scene-copy: #acbacd;
  --scene-line: #24364b;
  --scene-accent: #90caf9;
  --scene-tint: #142b41;
}
.landing-shell .landing-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-height));
  padding: var(--section-padding-y) var(--section-padding-x);
  background: var(--scene-bg);
  color: var(--scene-ink);
  border-bottom: 1px solid var(--scene-line);
  scroll-margin-top: var(--header-height);
  scroll-snap-align: start;
}
.landing-shell .landing-section--compact { min-height: auto; }
.landing-shell .landing-wrap { width: 100%; max-width: var(--content-max-width); margin-inline: auto; padding-inline: 0; min-width: 0; }
.landing-shell .landing-wrap > *, .landing-shell article, .landing-shell .scene-split > * { min-width: 0; }
.landing-shell .scene-eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--scene-accent); font-size: .6875rem; line-height: 1.6; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.landing-shell .scene-eyebrow > span:first-child:not(.eyebrow-dot) { opacity: .65; }
.landing-shell .section-heading h2, .landing-shell .landing-section > .landing-wrap h2 {
  font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.landing-shell .section-heading h2 { margin-top: 1.4rem; max-width: 18ch; }
.landing-shell .scene-description { margin-top: 1.5rem; max-width: 37.5rem; color: var(--scene-copy); font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.75; }
.landing-shell .scene-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); }
.landing-shell .scene-heading-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.landing-shell .scene-heading-row > .scene-description { margin-top: 0; max-width: 28rem; }
.landing-shell .section-heading--center { max-width: 54rem; margin-inline: auto; text-align: center; }
.landing-shell .section-heading--center .scene-eyebrow { justify-content: center; }
.landing-shell .section-heading--center h2, .landing-shell .section-heading--center .scene-description { margin-inline: auto; }
.landing-shell .section-heading--center h2 { max-width: 23ch; }
.landing-shell :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--scene-accent); outline-offset: 5px; }
.landing-shell .scene-text-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; margin-top: 1.5rem; color: var(--scene-accent); font-size: .875rem; font-weight: 600; }
.landing-shell .scene-text-link svg { transition: transform 200ms ease; flex-shrink: 0; }
.landing-shell .scene-text-link:hover svg { transform: translateX(3px); }
.landing-shell .scene-icon { display: inline-grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 1rem; background: var(--scene-tint); color: var(--scene-accent); }

/* Integrated navigation stays in place during anchor and keyboard navigation. */
.landing-shell .landing-navbar { --scene-accent: #90caf9; background: #07111f; border-bottom: 1px solid rgb(144 202 249 / 10%); animation: sceneFade 500ms ease both; }
.landing-shell .landing-navbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(7 17 31 / 90%); backdrop-filter: blur(16px); opacity: 0; transition: opacity 200ms ease; }
.landing-shell .landing-navbar[data-scrolled="true"] { background: transparent; }
.landing-shell .landing-navbar[data-scrolled="true"]::before { opacity: 1; }
.landing-nav-wrap { display: flex; height: var(--header-height); max-width: calc(var(--content-max-width) + 2 * var(--section-padding-x)); padding-inline: var(--section-padding-x); margin-inline: auto; gap: 1rem; }
.landing-nav-link { position: relative; padding-block: .75rem; }
.landing-nav-link::after { content: ''; position: absolute; bottom: .25rem; left: 0; right: 0; height: 1px; background: #90caf9; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }
.landing-nav-link:hover::after, .landing-nav-link:focus-visible::after { transform: scaleX(1); }
.landing-mobile-menu { position: absolute; top: 100%; inset-inline: 0; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
.landing-shell #kontak { scroll-margin-top: var(--header-height); }

/* Opening scene: typography and the existing device composition share the stage. */
.landing-shell .landing-hero { overflow: clip; background: #07111f; padding-top: clamp(3rem, 7svh, 6rem); padding-bottom: 2rem; }
.hero-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 45%, rgb(33 150 243 / 11%), transparent 48%); }
.landing-shell .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; position: relative; }
.landing-shell .hero-copy > * { opacity: 1; animation: sceneRise 650ms var(--motion-ease) both; }
.landing-shell .hero-copy > h1 { animation: none; }
.landing-shell .hero-copy h1 { font-size: clamp(3.25rem, 5vw, 5.25rem); line-height: 1.015; font-weight: 600; letter-spacing: -.055em; margin-top: 1.5rem; }
.hero-line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-line-mask > span { display: block; animation: heroLineIn 750ms 100ms var(--motion-ease) both; }
.hero-line-mask + .hero-line-mask > span { animation-delay: 200ms; }
.hero-accent { color: #90caf9; }
.eyebrow-dot { width: .4rem; height: .4rem; border-radius: 50%; background: #90caf9; flex-shrink: 0; }
.landing-shell .hero-description { font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.75; max-width: 33rem; margin-top: 1.75rem; color: #acbacd; animation-delay: 300ms; }
.landing-shell .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; animation-delay: 380ms; }
.landing-shell .landing-button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font-size: .875rem; font-weight: 600; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.landing-shell .landing-button--primary { color: #07111f; background: #90caf9; }
.landing-shell .landing-button--outline { color: #eef5fc; border-color: #34465a; }
.landing-shell .hero-copy > :nth-child(3) { animation-delay: 300ms; }
.landing-shell .hero-copy > :nth-child(4) { animation-delay: 380ms; }
.landing-shell .hero-copy > :nth-child(5) { animation-delay: 460ms; }
.landing-shell .hero-support { display: flex; gap: .6rem; align-items: center; font-size: .75rem; line-height: 1.6; color: #8fabc3; margin-top: 1.5rem; animation-delay: 460ms; }
.hero-support svg { flex-shrink: 0; }
.landing-shell .hero-visual { min-width: 0; opacity: 1; animation: none; position: relative; }
.device-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; transform: translateY(var(--scroll-offset, 0px)); filter: drop-shadow(0 24px 30px rgb(0 0 0 / 22%)); }
.device-layer { position: absolute; inset: 0; animation: deviceEnter 800ms 480ms var(--motion-ease) both; }
.device-layer img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
.device-layer--laptop { clip-path: polygon(0 0,100% 0,100% 37%,82.1% 37%,82.1% 100%,39.9% 100%,39.9% 37%,0 37%); }
.device-layer--tablet { clip-path: inset(37% 60% 0 0); --device-x: -14px; animation-delay: 600ms; }
.device-layer--phone { clip-path: inset(37% 0 0 82%); --device-x: 14px; animation-delay: 720ms; }
.device-glow { position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgb(66 165 245 / 13%), transparent 68%); }
.device-caption { display: flex; justify-content: center; align-items: center; gap: .6rem; color: #8fabc3; font-size: .6875rem; letter-spacing: .05em; margin-top: .5rem; }
.device-caption span { height: 1px; width: 2rem; background: #416681; }
.hero-baseline { position: relative; margin-top: clamp(3rem, 7svh, 6rem); padding-top: 1.5rem; border-top: 1px solid #233347; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: #90a4ba; font-size: .75rem; line-height: 1.8; }
.hero-baseline strong { font-weight: 500; color: #d8e4ef; }
.hero-baseline a { display: flex; align-items: center; gap: 1rem; color: #90caf9; }

/* Problems use an editorial split; features use a generous grid. */
.landing-shell .scene-problems { background: var(--scene-bg); }
.problem-resolution { margin-top: 2.25rem; font-size: 1.125rem; line-height: 1.75; font-weight: 600; }
.problem-resolution span { font-weight: 400; color: var(--scene-copy); }
.problem-stack { display: grid; gap: 1rem; }
.problem-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; border: 1px solid var(--scene-line); border-radius: var(--scene-radius); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--scene-muted); }
.problem-number { font-size: .75rem; color: var(--scene-accent); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.problem-card svg { color: var(--scene-accent); }
.problem-card h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; margin-top: 1rem; }
.problem-card p { font-size: .875rem; line-height: 1.75; color: var(--scene-copy); margin-top: .5rem; }
.problem-example summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .75rem; color: var(--scene-accent); margin-top: 1rem; list-style: none; }
.problem-example summary::-webkit-details-marker { display: none; }
.landing-shell .scene-features, .landing-shell .scene-roles, .landing-shell .scene-reports { background: var(--scene-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.showcase-card { padding: clamp(1.5rem, 2.3vw, 2rem); border: 1px solid var(--scene-line); border-radius: var(--scene-radius); background: var(--scene-bg); display: flex; flex-direction: column; align-items: flex-start; }
.showcase-card h3 { font-size: 1.1875rem; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; margin-top: 1.75rem; }
.showcase-card > p { color: var(--scene-copy); font-size: .875rem; line-height: 1.8; margin-top: .75rem; margin-bottom: 1.75rem; }
.feature-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--scene-copy); font-size: .625rem; line-height: 1.65; letter-spacing: .04em; font-weight: 600; text-transform: uppercase; margin-top: auto; }
.feature-status > span { width: 5px; height: 5px; border-radius: 50%; background: #8b9eb0; flex-shrink: 0; }
.feature-status[data-available="true"] { color: var(--scene-accent); }
.feature-status[data-available="true"] > span { background: var(--scene-accent); }

/* One transform-based sequence, with a vertical equivalent on smaller screens. */
.process-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 6rem); }
.process-timeline > li { position: relative; min-width: 0; }
.process-node { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--scene-tint); border: 1px solid var(--scene-accent); color: var(--scene-accent); font-size: .8125rem; font-weight: 600; position: relative; z-index: 1; }
.process-line { position: absolute; top: 1.5rem; left: 3rem; width: calc(100% - 1.5rem); height: 1px; background: var(--scene-line); }
.process-line > span { display: block; width: 100%; height: 100%; background: var(--scene-accent); transform-origin: left; }
.process-copy { padding-top: 2rem; }
.process-copy svg { color: var(--scene-accent); margin-bottom: 1rem; }
.process-copy h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.process-copy p { font-size: .8125rem; line-height: 1.8; color: var(--scene-copy); margin-top: .75rem; }
.process-footnote { display: flex; justify-content: center; gap: .65rem; align-items: center; margin-top: 3rem; font-size: .8125rem; color: var(--scene-copy); }
.process-footnote svg { color: var(--scene-accent); flex-shrink: 0; }
.process-timeline[data-reveal="pending"] .process-node, .process-timeline[data-reveal="pending"] .process-copy { opacity: 0; }
.process-timeline[data-reveal="pending"] .process-line > span { transform: scaleX(0); }
.process-timeline[data-reveal="visible"] .process-node, .process-timeline[data-reveal="visible"] .process-copy { animation: sceneRise 600ms calc(var(--step-index) * 160ms) var(--motion-ease) both; }
.process-timeline[data-reveal="visible"] .process-line > span { animation: processConnect 300ms calc(var(--step-index) * 160ms + 140ms) var(--motion-ease) both; }

/* A simple, explorable data flow, not an engineering diagram. */
.landing-shell .scene-connected { background: radial-gradient(ellipse at 80% 40%, #10243a, transparent 65%), #07111f; }
.connection-showcase { padding: clamp(1.25rem, 4vw, 3.5rem); border: 1px solid var(--scene-line); border-radius: 2rem; background: rgb(13 26 43 / 75%); }
.connection-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.connection-controls button { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.125rem; min-height: 2.75rem; border: 1px solid var(--scene-line); border-radius: 999px; font-size: .8125rem; color: var(--scene-copy); }
.connection-controls button[aria-pressed="true"] { background: #90caf9; color: #07111f; border-color: #90caf9; }
.connection-detail { display: grid; }
.connection-path { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms ease, transform 220ms var(--motion-ease), visibility 0s 220ms; }
.connection-path.is-active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.connection-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-block: 2.5rem; }
.connection-stop { position: relative; min-width: 0; }
.connection-node { position: relative; padding: 2rem 1.25rem; border-radius: 1.25rem; border: 1px solid #344d68; background: #112238; min-height: 12rem; }
.connection-node > svg { color: #90caf9; }
.connection-node-number { position: absolute; right: 1.25rem; top: 1.25rem; color: #6e8da8; font-size: .6875rem; }
.connection-node h3 { font-size: clamp(1rem, 1.5vw, 1.375rem); font-weight: 500; margin-top: 1.25rem; }
.connection-status { display: block; font-size: .6875rem; color: #9eb5ca; margin-top: .625rem; }
.connection-arrow { display: grid; place-items: center; width: 3rem; height: 1px; background: #36536c; position: absolute; top: 50%; right: -3rem; color: #90caf9; }
.connection-arrow svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #0d1a2b; }
.flow-vertical { display: none; }
.connection-explanation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; border-top: 1px solid var(--scene-line); padding-top: 1.75rem; min-height: 8.5rem; }
.connection-explanation h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.5; max-width: 24ch; }
.connection-explanation p { font-size: .9375rem; color: var(--scene-copy); line-height: 1.8; }

/* Panels share a grid cell, reserving the tallest content to avoid layout shift. */
.landing-tabs { overflow-x: auto; scrollbar-width: none; padding: .375rem; margin: -.375rem; }
.landing-tabs::-webkit-scrollbar { display: none; }
.role-tab-track { display: flex; position: relative; width: -moz-max-content; width: max-content; min-width: 100%; gap: clamp(.5rem, 1.5vw, 1.5rem); border-bottom: 1px solid var(--scene-line); }
.role-tab-track button { flex-shrink: 0; position: relative; white-space: nowrap; padding: 1.125rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--scene-copy); }
.role-tab-track button[aria-selected="true"] { color: var(--scene-accent); }
.role-tab-indicator { position: absolute; bottom: -1px; left: 0; width: 1px; height: 2px; background: var(--scene-accent); transform-origin: left; transition: transform 220ms var(--motion-ease); }
.role-panels { display: grid; margin-top: 2rem; }
.role-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms ease, transform 220ms var(--motion-ease), visibility 0s 220ms; }
.role-panel.is-active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.role-overview { padding-block: 1rem; }
.role-overview h3 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; margin-top: 1.5rem; max-width: 25ch; }
.role-overview > p { font-size: 1rem; line-height: 1.8; color: var(--scene-copy); margin-top: 1rem; max-width: 34rem; }
.role-overview ul { display: grid; gap: .875rem; margin-top: 1.75rem; }
.role-overview li { display: flex; gap: .75rem; font-size: .875rem; line-height: 1.7; }
.role-overview li svg { flex-shrink: 0; margin-top: .2rem; color: var(--scene-accent); }
.role-usecase { padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--scene-line); border-radius: var(--scene-radius); background: var(--scene-bg); position: relative; }
.role-index { display: block; color: var(--scene-line); font-size: 4rem; line-height: 1; font-weight: 500; letter-spacing: -.06em; margin-bottom: 1.5rem; }
.role-usecase h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.03em; line-height: 1.3; margin-top: 1rem; font-weight: 500; }
.role-usecase > p:not(.scene-eyebrow) { color: var(--scene-copy); font-size: .875rem; line-height: 1.8; margin-top: 1rem; }
.role-usecase .role-roadmap { border-top: 1px solid var(--scene-line); padding-top: 1rem; font-size: .75rem !important; }

.landing-shell .scene-security { background: linear-gradient(150deg, #0b192a, #07111f); }
.security-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.security-points li { display: flex; align-items: flex-start; gap: .75rem; }
.security-points svg { color: #90caf9; flex-shrink: 0; margin-top: .15rem; }
.security-points h3 { font-size: .8125rem; line-height: 1.6; font-weight: 600; }
.security-points p { font-size: .75rem; line-height: 1.7; color: #9caec3; margin-top: .375rem; }
.security-visual { border: 1px solid #2a3e54; border-radius: 2rem; padding: clamp(1.5rem, 3.5vw, 3rem); background: radial-gradient(ellipse at 50% 0%, #1a324b, #0d1b2c 75%); }
.security-seal { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; color: #90caf9; border: 1px solid #456581; outline: 1px solid #263f55; outline-offset: .65rem; margin: 1rem 0 2.5rem; }
.security-visual > h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; margin-top: 1rem; }
.security-log { margin-top: 2rem; }
.security-log > div { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; border-top: 1px solid #2a3e54; padding-block: 1.25rem; font-size: .75rem; }
.security-log > div > span:first-child { color: #8299af; }
.log-status { color: #9bafc3; font-size: .625rem; }
.log-status[data-state="Tercatat"] { color: #90caf9; }
.log-status[data-state="Menunggu"] { color: #f1ce85; }
.security-caption { font-size: .75rem; line-height: 1.8; color: #9caec3; margin-top: .75rem; }
.report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.report-grid article { border-top: 1px solid var(--scene-line); padding-top: 1.5rem; }
.report-grid svg { color: var(--scene-accent); }
.report-grid h3 { font-size: 1.25rem; font-weight: 600; margin-block: 1rem .75rem; }
.report-grid ul { margin-top: 1rem; font-size: .8125rem; line-height: 1.8; color: var(--scene-copy); display: grid; gap: .5rem; }

/* Existing pricing, roadmap and FAQ keep their content and gain the shared scale. */
.landing-shell #harga, .landing-shell #faq { background: var(--scene-bg); }
.landing-shell #roadmap { background: var(--scene-muted); }
.landing-shell #harga h2, .landing-shell #roadmap h2, .landing-shell #faq h2 { color: var(--scene-ink); }
.landing-shell #harga article { border-radius: var(--scene-radius); background: var(--scene-muted); padding: 1.75rem; }
.landing-shell #harga article > button { margin-top: auto; }
.landing-shell #harga article > :nth-last-child(2) { margin-bottom: 1.5rem; }
.landing-shell [role="dialog"] { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.landing-shell #roadmap article { padding: 2rem; border-radius: var(--scene-radius); }
.landing-shell #faq { min-height: auto; }
.landing-shell .scene-final { background: radial-gradient(ellipse at 50% 100%, #173751, transparent 65%), #07111f; text-align: center; }
.scene-final .scene-eyebrow { justify-content: center; }
.landing-shell .scene-final h2 { max-width: 18ch; margin: 1.5rem auto; font-size: clamp(2.75rem, 5.5vw, 5.5rem) !important; }
.scene-final .scene-description { margin-inline: auto; }
.final-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.5rem; }
.final-note { font-size: .75rem; color: #8fa7bf; margin-top: 2rem; }

/* Reveals are progressive enhancement: default content stays visible. */
.landing-shell [data-reveal]:not([data-sequence]) { transition: opacity 650ms var(--motion-ease), transform 650ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); }
.landing-shell [data-reveal="pending"]:not([data-sequence]) { opacity: 0; transform: translateY(24px); }
.landing-shell [data-reveal="visible"]:not([data-sequence]) { opacity: 1; transform: none; }
.landing-shell [data-reveal="pending"]:focus-within { opacity: 1; transform: none; }
@keyframes sceneRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sceneFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroLineIn { from { opacity: 0; transform: translateY(102%); } to { opacity: 1; transform: none; } }
@keyframes deviceEnter { from { opacity: 0; transform: translateX(var(--device-x, 0px)) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes processConnect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .landing-shell .landing-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(144 202 249 / 12%); }
  .landing-shell :is(.showcase-card, .problem-card) { transition: transform 200ms ease, border-color 200ms ease; }
  .landing-shell :is(.showcase-card, .problem-card):hover, .landing-shell :is(.showcase-card, .problem-card)[data-reveal="visible"]:hover { transform: translateY(-4px); border-color: var(--scene-accent); transition: transform 200ms ease, border-color 200ms ease; }
  .landing-shell .scene-icon svg { transition: transform 200ms ease; }
  .landing-shell .showcase-card:hover .scene-icon svg { transform: translateY(-2px); }
}
@media (max-width: 1279px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-shell .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .landing-shell .hero-copy { max-width: 46rem; }
  .landing-shell .hero-copy h1 { max-width: 15ch; }
  .landing-shell .hero-visual { width: min(100%, 46rem); margin-inline: auto; }
  .hero-baseline-note { display: none; }
}
@media (max-width: 1023px) {
  .landing-shell .scene-split, .landing-shell .scene-heading-row { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .landing-shell .scene-heading-row > .scene-description { max-width: 37.5rem; }
  .landing-shell .section-heading h2 { max-width: 23ch; }
  .process-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 36rem; margin-inline: auto; }
  .process-timeline > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); -moz-column-gap: 1.5rem; column-gap: 1.5rem; padding-bottom: 2.5rem; }
  .process-timeline > li:last-child { padding-bottom: 0; }
  .process-copy { padding-top: .25rem; }
  .process-copy svg { display: none; }
  .process-line { top: 3rem; left: 1.5rem; width: 1px; height: calc(100% - 3rem); }
  .process-line > span { transform-origin: top; }
  .process-timeline[data-reveal="pending"] .process-line > span { transform: scaleY(0); }
  .process-timeline[data-reveal="visible"] .process-line > span { animation-name: processConnectVertical; }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes processConnectVertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 767px) {
  .landing-shell { --section-padding-y: clamp(3.5rem, 10vw, 5rem); }
  .landing-shell .landing-section:not(.landing-hero) { min-height: auto; }
  .landing-shell .role-panel, .connection-explanation { grid-template-columns: minmax(0, 1fr); }
  .connection-nodes { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .connection-node { min-height: auto; padding: 1.25rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem .75rem; align-items: center; }
  .connection-node h3 { margin-top: 0; padding-right: 1.5rem; }
  .connection-node .connection-status { grid-column: 2; margin: 0; }
  .connection-node-number { top: 1rem; right: 1rem; }
  .connection-arrow { width: 1px; height: 2rem; top: 100%; right: 50%; }
  .flow-horizontal { display: none; }
  .flow-vertical { display: block; }
  .connection-explanation { gap: .75rem; min-height: 14rem; }
  .connection-explanation h3 { max-width: none; }
  .connection-controls { gap: .5rem; }
  .connection-controls button { padding: .625rem .75rem; font-size: .75rem; }
  .role-tab-track button { font-size: .8125rem; }
}
@media (max-width: 639px) {
  .landing-shell { --header-height: 4rem; }
  .landing-shell .hero-copy h1 { font-size: clamp(2.625rem, 10.5vw, 3.5rem); }
  .landing-shell .section-heading h2, .landing-shell .landing-section > .landing-wrap h2 { font-size: clamp(2rem, 8vw, 2.625rem); }
  .feature-grid, .report-grid { grid-template-columns: minmax(0, 1fr); }
  .security-points { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { flex-direction: column; }
  .hero-baseline { align-items: flex-start; margin-top: 2rem; font-size: .6875rem; }
  .hero-baseline a { gap: .5rem; }
  .problem-card { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; }
  .showcase-card h3 { margin-top: 1.25rem; }
  .showcase-card > p { margin-bottom: 1.25rem; }
  .final-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.landing-shell) { scroll-behavior: auto; }
  .landing-shell *, .landing-shell *::before, .landing-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .landing-shell [data-reveal], .landing-shell .hero-copy > *, .landing-shell .hero-visual { opacity: 1 !important; transform: none !important; }
  .landing-shell .device-stage { transform: none; }
  .landing-shell .process-node, .landing-shell .process-copy { opacity: 1 !important; }
  .landing-shell .process-line > span { transform: none !important; }
}

/* Real sibling stacking. The main element is the shared sticky containing block;
   never put overflow hidden/auto or a transform on its ancestors. */
.landing-shell .landing-stack { position: relative; isolation: isolate; overflow: visible; }
.landing-shell .stack-scene { position: relative; z-index: var(--stack-index, 1); }
.landing-shell .stack-surface { position: relative; display: flow-root; background: var(--scene-bg); }
.landing-shell .landing-stack[data-stacked="true"] > .stack-scene[data-sticky="true"] { position: sticky; top: var(--stack-top, var(--header-height)); }
.landing-shell .landing-stack[data-stacked="true"] > .stack-scene:not(:first-child) > .stack-surface {
  border-radius: var(--stack-radius, 24px) var(--stack-radius, 24px) 0 0;
  overflow: clip;
  box-shadow: 0 -18px 50px -24px rgb(0 0 0 / 45%);
  border-top: 1px solid var(--scene-line);
}
.landing-shell .landing-stack[data-stacked="true"] .stack-surface {
  /* Keep every layer edge-to-edge: scaling the surface exposed older light
     layers as white rails. Scroll-driven shading and shadow provide depth. */
  transform: none;
}
.landing-shell .landing-stack[data-stacked="true"] .stack-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #020814;
  opacity: calc(var(--stack-progress, 0) * .16);
  pointer-events: none;
}
.landing-shell .stack-scene[data-covered="true"] { pointer-events: none; }
.landing-shell .landing-navbar { z-index: 50; }
@media (prefers-reduced-motion: reduce) {
  .landing-shell .landing-stack > .stack-scene { position: relative !important; top: auto !important; }
  .landing-shell .landing-stack .stack-surface { transform: none !important; border-radius: 0 !important; }
  .landing-shell .landing-stack .stack-surface::after { display: none; }
}
@media print {
  .landing-shell .landing-stack > .stack-scene { position: relative !important; top: auto !important; }
  .landing-shell .landing-stack .stack-surface { transform: none !important; }
}

/* Opaque navigation prevents old stacked headings from showing through it. */
.landing-shell:has(.landing-stack[data-stacked="true"]) .landing-navbar[data-scrolled="true"] { background: #07111f; }

/* Dark scenes retain their navy surface and edge in either theme. */
.landing-shell .landing-stack[data-stacked="true"] > .stack-scene > .stack-surface:has(> .scene-dark:first-child) { background: #07111f; border-top-color: #24364b; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(15 23 42 / 55%);
  backdrop-filter: blur(5px);
}
.modal-panel {
  --modal-paper: #ffffff;
  --modal-surface: #f6f8fc;
  --modal-text: #17243b;
  --modal-muted: #58677e;
  --modal-line: #dce3ee;
  --modal-accent: #2563eb;
  --modal-accent-soft: #eff5ff;
  --modal-error: #b4233d;
  --modal-error-bg: #fff1f3;
  --modal-success: #147454;
  --modal-success-bg: #eaf8f1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--modal-line);
  border-radius: 24px;
  background: var(--modal-paper);
  color: var(--modal-text);
  box-shadow: 0 28px 100px -24px rgb(0 0 0 / 45%);
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  color-scheme: light;
}
.dark .modal-panel {
  --modal-paper: #182232;
  --modal-surface: #202d40;
  --modal-text: #eef3fb;
  --modal-muted: #b0bfd3;
  --modal-line: #35455d;
  --modal-accent: #9bc2ff;
  --modal-accent-soft: #213552;
  --modal-error: #ffb4c0;
  --modal-error-bg: #402936;
  --modal-success: #94e3c0;
  --modal-success-bg: #203c36;
  color-scheme: dark;
}
.modal-panel--wide { max-width: 1120px; }
.modal-header { display: flex; align-items: flex-start; gap: 14px; padding: 26px 28px 20px; flex-shrink: 0; }
.modal-heading-icon { display: grid; place-items: center; flex-shrink: 0; border-radius: 16px; color: var(--modal-accent); background: var(--modal-accent-soft); width: 48px; height: 48px; }
.modal-header h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.modal-header p { margin-top: 3px; color: var(--modal-muted); font-size: 13px; }
.modal-panel h3 { font-size: 14px; font-weight: 650; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--modal-muted); flex-shrink: 0; }
.modal-close:hover { background: var(--modal-surface); color: var(--modal-text); }
.modal-body { padding: 0 28px 24px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-color: var(--modal-line) transparent; }
.modal-panel .modal-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--modal-line); border-radius: 10px; background: var(--modal-paper); color: var(--modal-text); font-size: 13px; font-weight: 600; transition: background-color 150ms, border-color 150ms; }
.modal-panel .modal-button:hover:not(:disabled) { border-color: var(--modal-accent); background: var(--modal-accent-soft); }
.modal-panel .modal-button--quiet { background: transparent; }
.modal-panel .modal-button--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.modal-panel .modal-button--primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.dark .modal-panel .modal-button--primary { background: #a9caff; border-color: #a9caff; color: #112744; }
.dark .modal-panel .modal-button--primary:hover:not(:disabled) { background: #c3daff; border-color: #c3daff; }
.modal-panel button:disabled { cursor: not-allowed; opacity: .55; }
.modal-panel .modal-button--primary:disabled { background: var(--modal-surface); color: var(--modal-muted); border-color: var(--modal-line); opacity: 1; }
.modal-panel :is(button, summary, input, [tabindex="0"]):focus-visible { outline: 3px solid var(--modal-accent); outline-offset: 3px; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 28px; border-top: 1px solid var(--modal-line); flex-shrink: 0; }
.modal-footer > p { color: var(--modal-muted); font-size: 12px; flex: 1; min-width: 140px; }
.modal-footer-actions { display: flex; gap: 8px; }
@media (max-width: 640px) {
.modal-overlay { padding: 12px; }
.modal-panel { max-height: calc(100dvh - 24px); border-radius: 20px; }
.modal-header { padding: 20px 18px 18px; gap: 10px; }
.modal-header h2 { font-size: 18px; }
.modal-heading-icon { width: 40px; height: 40px; border-radius: 12px; }
.modal-body { padding: 0 18px 18px; }
.modal-footer { padding: 16px 18px; }
.modal-footer > p { flex-basis: 100%; }
.modal-footer-actions { width: 100%; justify-content: flex-end; }
}
.import-dropzone-icon { display: grid; place-items: center; flex-shrink: 0; border-radius: 16px; color: var(--modal-accent); background: var(--modal-accent-soft); }
.import-template p, .import-preview-heading p { margin-top: 3px; color: var(--modal-muted); font-size: 13px; }
.import-content > * + * { margin-top: 18px; }
.import-template { padding: 18px; border-radius: 16px; background: var(--modal-surface); }
.import-template-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modal-panel .import-dropzone { width: 100%; display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 26px 20px; border: 1.5px dashed var(--modal-line); border-radius: 18px; background: var(--modal-paper); color: var(--modal-text); text-align: center; transition: border-color 150ms, background-color 150ms; }
.modal-panel .import-dropzone:hover:not(:disabled), .modal-panel .import-dropzone.is-dragging { border-color: var(--modal-accent); background: var(--modal-accent-soft); }
.import-dropzone-icon { width: 56px; height: 56px; margin-bottom: 7px; }
.import-dropzone strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.import-dropzone > span:not(.import-dropzone-icon) { font-size: 13px; color: var(--modal-muted); }
.import-dropzone > .import-dropzone-hint { font-size: 12px; }
.import-guide { border-bottom: 1px solid var(--modal-line); }
.import-guide summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 0 2px 13px; font-size: 13px; font-weight: 600; list-style: none; }
.import-guide summary::-webkit-details-marker { display: none; }
.import-guide[open] summary svg { transform: rotate(180deg); }
.import-guide-content { padding: 0 2px 16px; color: var(--modal-muted); font-size: 13px; }
.import-guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.import-guide dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--modal-text); }
.import-guide dt strong { overflow-wrap: anywhere; }
.import-guide dt span { font-size: 11px; color: var(--modal-muted); }
.import-guide dd { font-size: 12px; margin-top: 2px; }
.import-progress { display: flex; align-items: center; gap: 8px; color: var(--modal-muted); font-size: 13px; }
.import-message { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; font-size: 13px; }
.import-message svg { flex-shrink: 0; margin-top: 2px; }
.import-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.import-message--error { background: var(--modal-error-bg); color: var(--modal-error); }
.import-message--info { background: var(--modal-accent-soft); color: var(--modal-text); border: 1px solid var(--modal-line); }
.import-message--info > svg { color: var(--modal-accent); }
.import-preview > * + * { margin-top: 14px; }
.import-preview-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.import-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 10px; font-size: 12px; background: var(--modal-success-bg); color: var(--modal-success); }
.import-badge--error { background: var(--modal-error-bg); color: var(--modal-error); }
.import-error-hint { color: var(--modal-error); font-size: 13px; }
.import-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--modal-line); border-radius: 12px; scrollbar-color: var(--modal-line) transparent; }
.import-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 12px; }
.import-table thead { position: sticky; top: 0; z-index: 1; background: var(--modal-surface); color: var(--modal-text); }
.import-table th { padding: 12px; white-space: nowrap; font-weight: 600; }
.import-table td { padding: 12px; border-top: 1px solid var(--modal-line); max-width: 300px; min-width: 100px; white-space: pre-wrap; overflow-wrap: anywhere; }
.import-table .import-row--error { background: var(--modal-error-bg); color: var(--modal-error); }
.import-table .import-row-result { min-width: 220px; }
.import-valid { display: inline-flex; align-items: center; gap: 5px; color: var(--modal-success); }
.import-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--modal-muted); }
.import-review { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; background: var(--modal-surface); cursor: pointer; font-size: 13px; }
.import-review input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--modal-accent); }
.import-review.is-disabled { color: var(--modal-muted); cursor: not-allowed; }
@media (max-width: 640px) {
.import-guide dl { grid-template-columns: 1fr; }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::-moz-selection {
	background: transparent;
}
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
*, ::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.19 | 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: #e5e7eb; /* 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: "Inter", 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    margin: 0;
    width: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }
  body {
    margin: 0;
    min-width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--mui-background);
    color: var(--mui-text-primary);
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea {
    background-color: #ffffff !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
  textarea:disabled {
    cursor: not-allowed;
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1;
    color: #64748b;
    opacity: 1;
  }
  .dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .dark textarea {
    background-color: #1E1E1E !important;
    border-color: #393939;
    color: #f1f5f9;
  }
  .dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
  .dark textarea:disabled {
    background-color: #393939 !important;
    border-color: #393939;
    color: #e2e8f0 !important;
  }
  button,
  a[href] {
    -webkit-tap-highlight-color: transparent;
  }

  button:not(:disabled):not(.no-action-animation),
  a[href]:not(.no-action-animation) {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  button:not(:disabled):not(.no-action-animation):active,
  a[href]:not(.no-action-animation):active {
    transform: scale(0.96);
  }

  /* Full-screen drawer scrims must never inherit the global button press scale. */
  button[aria-label="Tutup detail"],
  button[aria-label="Tutup detail"]:active {
    transform: none !important;
    transition: none !important;
  }

  [aria-label="Detail pengajuan"] > button[aria-label="Tutup detail"] {
    transform: none !important;
    transform-origin: center !important;
  }

  [aria-label="Detail pengajuan"] > aside {
    max-width: none;
    animation: none !important;
  }

  .approval-table tbody tr:hover,
  .approval-table > [class*="divide-y"] > button:hover {
    background-color: rgb(239 246 255 / 0.5) !important;
  }

  .dark .approval-table tbody tr:hover,
  .dark .approval-table > [class*="divide-y"] > button:hover {
    background-color: rgba(144, 202, 249, 0.12) !important;
  }

  @media (min-width: 640px) {
    [aria-label="Detail pengajuan"] > aside {
      width: 55%;
    }
  }

  @media (min-width: 1024px) {
    [aria-label="Detail pengajuan"] > aside {
      width: 44%;
    }
  }

  @media (min-width: 1280px) {
    [aria-label="Detail pengajuan"] > aside {
      width: 33.333333%;
    }
  }

  [aria-label="Detail pengajuan"] dd,
  [aria-label="Detail pengajuan"] p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .approval-table table th,
  .approval-table table td {
    overflow: hidden;
  }

  /* Keep all management table cards stable as filtering changes row totals. */
  .data-table-card {
    display: flex;
    height: calc(100dvh - 104px);
    flex-direction: column;
  }

  /* Keep the card/footer stable when a larger rows-per-page value is selected. */
  .data-table-card > div:has(> table),
  .data-table-card > div.divide-y {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .data-table-card > div:has(> table) thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /* An empty table reserves only its header; feedback fills and centers in the body. */
  .data-table-card > div:has(> table tbody:empty) {
    flex: 0 0 auto;
    overflow-y: visible;
  }

  .data-table-card > footer {
    margin-top: auto;
    flex: 0 0 auto;
  }

  .data-table-card > .grid.place-items-center {
    flex: 1 1 auto;
    align-content: center;
    justify-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  @media (min-width: 640px) {
    .data-table-card {
      height: calc(100dvh - 120px);
    }
  }

  .approval-table table td > span {
    max-width: 100%;
  }

  /* Approval color hierarchy: neutral metadata, blue interaction, amber pending. */
  .approval-table tbody td:nth-child(3) > span,
  [aria-label="Detail pengajuan"] aside > div > div:first-child > span:last-child,
  [aria-label="Detail pengajuan"] aside > div > section:first-of-type > div:last-child span {
    border: 1px solid #e2e8f0;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
  }

  .approval-table thead th:nth-child(3),
  .approval-table tbody td:nth-child(3) {
    text-align: center;
  }

  .approval-table tbody td:nth-child(3) > span {
    display: inline-flex;
    width: auto;
    min-width: 6.75rem;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .dark .approval-table tbody td:nth-child(3) > span,
  .dark [aria-label="Detail pengajuan"] aside > div > div:first-child > span:last-child,
  .dark [aria-label="Detail pengajuan"] aside > div > section:first-of-type > div:last-child span {
    border-color: #475569;
    background-color: #29313d !important;
    color: #cbd5e1 !important;
  }

  [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="create"] {
    border-color: #bbf7d0 !important;
    background-color: #dcfce7 !important;
    color: #15803d !important;
  }

  [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="update"] {
    border-color: #ddd6fe !important;
    background-color: #ede9fe !important;
    color: #7c3aed !important;
  }

  [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="delete"] {
    border-color: #fecaca !important;
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
  }

  .dark [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="create"] {
    border-color: #166534 !important;
    background-color: #14532d !important;
    color: #86efac !important;
  }

  .dark [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="update"] {
    border-color: #6d28d9 !important;
    background-color: #4c1d95 !important;
    color: #c4b5fd !important;
  }

  .dark [aria-label="Detail pengajuan"] aside > div > div:first-child > span[data-approval-action="delete"] {
    border-color: #991b1b !important;
    background-color: #7f1d1d !important;
    color: #fca5a5 !important;
  }

  @media (min-width: 768px) {
    .approval-table > div:first-child label {
      min-width: 13rem;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .approval-table table th:nth-child(2),
    .approval-table table td:nth-child(2),
    .approval-table table th:nth-child(4),
    .approval-table table td:nth-child(4) {
      display: none;
    }

    .approval-table table th:nth-child(1) { width: 34% !important; }
    .approval-table table th:nth-child(3) { width: 16% !important; }
    .approval-table table th:nth-child(5) { width: 22% !important; }
    .approval-table table th:nth-child(6) { width: 28% !important; }
  }

  @media (min-width: 1024px) and (max-width: 1279px) {
    .approval-table table th:nth-child(4),
    .approval-table table td:nth-child(4) {
      display: none;
    }

    .approval-table table th:nth-child(1) { width: 28% !important; }
    .approval-table table th:nth-child(2) { width: 19% !important; }
    .approval-table table th:nth-child(3) { width: 13% !important; }
    .approval-table table th:nth-child(5) { width: 18% !important; }
    .approval-table table th:nth-child(6) { width: 22% !important; }
  }

  button:focus-visible,
  a[href]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }

  button:disabled {
    cursor: not-allowed;
  }
  ::-moz-selection {
    background-color: #90CAF9;
  }
  ::selection {
    background-color: #90CAF9;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
  .landing-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
  @media (min-width: 1024px) {

  .landing-wrap {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.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;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.-inset-8 {
  inset: -2rem;
}
.inset-0 {
  inset: 0px;
}
.inset-6 {
  inset: 1.5rem;
}
.inset-\[19\%\] {
  inset: 19%;
}
.inset-\[8\%\] {
  inset: 8%;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-bottom-40 {
  bottom: -10rem;
}
.-left-24 {
  left: -6rem;
}
.-left-3 {
  left: -0.75rem;
}
.-left-\[35px\] {
  left: -35px;
}
.-right-1 {
  right: -0.25rem;
}
.-right-3 {
  right: -0.75rem;
}
.-top-0 {
  top: -0px;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-3 {
  top: -0.75rem;
}
.-top-32 {
  top: -8rem;
}
.-top-6 {
  top: -1.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\] {
  bottom: max(1rem, env(safe-area-inset-bottom));
}
.left-1\/2 {
  left: 50%;
}
.left-10 {
  left: 2.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.left-\[13px\] {
  left: 13px;
}
.right-0 {
  right: 0px;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-10 {
  right: 2.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-3 {
  top: 0.75rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-7 {
  top: 1.75rem;
}
.top-9 {
  top: 2.25rem;
}
.top-\[calc\(100\%\+8px\)\] {
  top: calc(100% + 8px);
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[110\] {
  z-index: 110;
}
.z-\[120\] {
  z-index: 120;
}
.z-\[190\] {
  z-index: 190;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[300\] {
  z-index: 300;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.row-start-2 {
  grid-row-start: 2;
}
.float-right {
  float: right;
}
.m-0 {
  margin: 0px;
}
.m-3 {
  margin: 0.75rem;
}
.m-auto {
  margin: auto;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-12 {
  margin-top: -3rem;
}
.-mt-6 {
  margin-top: -1.5rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-\[21px\] {
  margin-left: 21px;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.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-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[340px\] {
  height: 340px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[calc\(100\%-1\.25rem\)\] {
  height: calc(100% - 1.25rem);
}
.h-\[calc\(100svh-73px\)\] {
  height: calc(100svh - 73px);
}
.h-auto {
  height: auto;
}
.h-dvh {
  height: 100dvh;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-\[280px\] {
  max-height: 280px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[44rem\] {
  max-height: 44rem;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[calc\(100dvh-2rem\)\] {
  max-height: calc(100dvh - 2rem);
}
.max-h-none {
  max-height: none;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-20 {
  min-height: 5rem;
}
.min-h-52 {
  min-height: 13rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-9 {
  min-height: 2.25rem;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[540px\] {
  min-height: 540px;
}
.min-h-\[76px\] {
  min-height: 76px;
}
.min-h-\[92px\] {
  min-height: 92px;
}
.min-h-dvh {
  min-height: 100dvh;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[14\%\] {
  width: 14%;
}
.w-\[16\%\] {
  width: 16%;
}
.w-\[18\%\] {
  width: 18%;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[20\%\] {
  width: 20%;
}
.w-\[24\%\] {
  width: 24%;
}
.w-\[26\%\] {
  width: 26%;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[calc\(100\%-2\.5rem\)\] {
  width: calc(100% - 2.5rem);
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-24 {
  min-width: 6rem;
}
.min-w-28 {
  min-width: 7rem;
}
.min-w-\[1100px\] {
  min-width: 1100px;
}
.min-w-\[1250px\] {
  min-width: 1250px;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-40 {
  max-width: 10rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[1680px\] {
  max-width: 1680px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[86vw\] {
  max-width: 86vw;
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.basis-full {
  flex-basis: 100%;
}
.table-fixed {
  table-layout: fixed;
}
.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-full {
  --tw-translate-x: -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));
}
.-translate-y-2 {
  --tw-translate-y: -0.5rem;
  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-6 {
  --tw-translate-y: -1.5rem;
  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));
}
.translate-x-0 {
  --tw-translate-x: 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-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));
}
.rotate-180 {
  --tw-rotate: 180deg;
  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-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 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));
}
.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-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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 fadeUp {

  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-\[fadeUp_150ms_ease-out\] {
  animation: fadeUp 150ms ease-out;
}
@keyframes slideInRight {

  0% {
    opacity: 0;
    transform: translateX(24px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-\[slideInRight_200ms_ease-out\] {
  animation: slideInRight 200ms ease-out;
}
@keyframes fadeUp {

  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fadeUp 0.6s ease-out forwards;
}
@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-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-pb-32 {
  scroll-padding-bottom: 8rem;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}
.grid-flow-col {
  grid-auto-flow: column;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[140px_1fr\] {
  grid-template-columns: 140px 1fr;
}
.grid-cols-\[140px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 140px minmax(0,1fr);
}
.grid-cols-\[28px_1fr\] {
  grid-template-columns: 28px 1fr;
}
.grid-cols-\[minmax\(0\2c 1fr\)_96px\] {
  grid-template-columns: minmax(0,1fr) 96px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-center {
  justify-items: center;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.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-2 {
  row-gap: 0.5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * 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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * 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));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-x-contain {
  overscroll-behavior-x: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\!whitespace-normal {
  white-space: normal !important;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2\.5rem\] {
  border-radius: 2.5rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/70 {
  border-color: rgb(252 211 77 / 0.7);
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-brand-100 {
  --tw-border-opacity: 1;
  border-color: rgb(187 222 251 / var(--tw-border-opacity, 1));
}
.border-brand-200 {
  --tw-border-opacity: 1;
  border-color: rgb(144 202 249 / var(--tw-border-opacity, 1));
}
.border-brand-500 {
  --tw-border-opacity: 1;
  border-color: rgb(33 150 243 / var(--tw-border-opacity, 1));
}
.border-brand-700 {
  --tw-border-opacity: 1;
  border-color: rgb(25 118 210 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-rose-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.border-rose-500 {
  --tw-border-opacity: 1;
  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-300 {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/60 {
  border-color: rgb(255 255 255 / 0.6);
}
.border-l-amber-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#05070c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#07111f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(7 17 31 / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200\/40 {
  background-color: rgb(191 219 254 / 0.4);
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/50 {
  background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-50\/60 {
  background-color: rgb(239 246 255 / 0.6);
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(227 242 253 / var(--tw-bg-opacity, 1));
}
.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(33 150 243 / var(--tw-bg-opacity, 1));
}
.bg-brand-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 136 229 / var(--tw-bg-opacity, 1));
}
.bg-brand-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(25 118 210 / var(--tw-bg-opacity, 1));
}
.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-fuchsia-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100\/60 {
  background-color: rgb(224 231 255 / 0.6);
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-pink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-100\/80 {
  background-color: rgb(241 245 249 / 0.8);
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-200\/40 {
  background-color: rgb(226 232 240 / 0.4);
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/50 {
  background-color: rgb(248 250 252 / 0.5);
}
.bg-slate-50\/70 {
  background-color: rgb(248 250 252 / 0.7);
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/30 {
  background-color: rgb(2 6 23 / 0.3);
}
.bg-slate-950\/40 {
  background-color: rgb(2 6 23 / 0.4);
}
.bg-slate-950\/60 {
  background-color: rgb(2 6 23 / 0.6);
}
.bg-slate-950\/70 {
  background-color: rgb(2 6 23 / 0.7);
}
.bg-slate-950\/80 {
  background-color: rgb(2 6 23 / 0.8);
}
.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/65 {
  background-color: rgb(255 255 255 / 0.65);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/\[\.06\] {
  background-color: rgb(255 255 255 / .06);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-50 {
  --tw-gradient-from: #E3F2FD var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(227 242 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-500\/20 {
  --tw-gradient-from: rgb(33 150 243 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(33 150 243 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand-400 {
  --tw-gradient-to: rgb(66 165 245 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #42A5F5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-brand-100 {
  --tw-gradient-to: #BBDEFB var(--tw-gradient-to-position);
}
.to-brand-500\/20 {
  --tw-gradient-to: rgb(33 150 243 / 0.2) var(--tw-gradient-to-position);
}
.to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.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-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.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;
}
.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-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-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-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[clamp\(2\.5rem\2c 5vw\2c 4\.5rem\)\] {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.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-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.06\] {
  line-height: 1.06;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}
.tracking-\[\.18em\] {
  letter-spacing: .18em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(66 165 245 / var(--tw-text-opacity, 1));
}
.text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(33 150 243 / var(--tw-text-opacity, 1));
}
.text-brand-600 {
  --tw-text-opacity: 1;
  color: rgb(30 136 229 / var(--tw-text-opacity, 1));
}
.text-brand-700 {
  --tw-text-opacity: 1;
  color: rgb(25 118 210 / var(--tw-text-opacity, 1));
}
.text-brand-900 {
  --tw-text-opacity: 1;
  color: rgb(13 71 161 / var(--tw-text-opacity, 1));
}
.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-950 {
  --tw-text-opacity: 1;
  color: rgb(2 44 34 / var(--tw-text-opacity, 1));
}
.text-fuchsia-700 {
  --tw-text-opacity: 1;
  color: rgb(162 28 175 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-\[0_18px_55px_-30px_rgba\(33\2c 150\2c 243\2c \.9\)\] {
  --tw-shadow: 0 18px 55px -30px rgba(33,150,243,.9);
  --tw-shadow-colored: 0 18px 55px -30px 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-card {
  --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 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);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-panel {
  --tw-shadow: 0 20px 60px -15px rgba(74, 70, 214, 0.35);
  --tw-shadow-colored: 0 20px 60px -15px 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-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 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-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-blue-600\/15 {
  --tw-shadow-color: rgb(37 99 235 / 0.15);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-900\/10 {
  --tw-shadow-color: rgb(30 58 138 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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-4 {
  --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(4px + 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-blue-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}
.ring-brand-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(187 222 251 / var(--tw-ring-opacity, 1));
}
.ring-slate-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}
.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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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-blur {
  --tw-backdrop-blur: blur(8px);
  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-blur-\[1px\] {
  --tw-backdrop-blur: blur(1px);
  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-blur-sm {
  --tw-backdrop-blur: blur(4px);
  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-blur-xl {
  --tw-backdrop-blur: blur(24px);
  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, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-height\2c margin\2c opacity\2c transform\] {
  transition-property: max-height,margin,opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c opacity\2c background-color\] {
  transition-property: transform,opacity,background-color;
  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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-\[1000ms\] {
  transition-duration: 1000ms;
}
.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);
}
  .reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  .reveal.is-visible {
    animation: landingReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
      opacity: 1;
      animation: none;
      transform: none;
    }
    html {
      scroll-behavior: auto;
      scroll-snap-type: none;
    }
  }
.\[background-image\:radial-gradient\(circle_at_70\%_20\%\2c \#1e88e5_0\2c transparent_35\%\)\] {
  background-image: radial-gradient(circle at 70% 20%,#1e88e5 0,transparent 35%);
}
.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

:root {
  --mui-primary: #1976d2;
  --mui-primary-light: #42a5f5;
  --mui-primary-dark: #1565c0;
  --mui-secondary: #9c27b0;
  --mui-background: #f7f9fc;
  --mui-paper: #ffffff;
  --mui-text-primary: rgba(0, 0, 0, 0.87);
  --mui-text-secondary: rgba(0, 0, 0, 0.60);
  --mui-divider: rgba(0, 0, 0, 0.12);
  --mui-success: #2e7d32;
  --mui-warning: #ed6c02;
  --mui-error: #d32f2f;
  --feedback-info-bg: #eff6ff;
  --feedback-info-border: #bfdbfe;
  --feedback-info-text: #1d4ed8;
  --feedback-success-bg: #ecfdf5;
  --feedback-success-border: #a7f3d0;
  --feedback-success-text: #047857;
  --feedback-warning-bg: #fffbeb;
  --feedback-warning-border: #fde68a;
  --feedback-warning-text: #b45309;
  --feedback-error-bg: #fff1f2;
  --feedback-error-border: #fecdd3;
  --feedback-error-text: #be123c;
}

input[name="last-education"]:checked + span > span {
  transform: scale(1);
}


.dark {
  --mui-primary: #90caf9;
  --mui-primary-light: #e3f2fd;
  --mui-primary-dark: #42a5f5;
  --mui-secondary: #ce93d8;
  --mui-background: #121212;
  --mui-paper: #1e1e1e;
  --mui-text-primary: rgba(255, 255, 255, 0.87);
  --mui-text-secondary: rgba(255, 255, 255, 0.60);
  --mui-divider: rgba(255, 255, 255, 0.12);
  --mui-success: #66bb6a;
  --mui-warning: #ffa726;
  --mui-error: #f44336;
  --feedback-info-bg: rgba(59, 130, 246, 0.16);
  --feedback-info-border: rgba(96, 165, 250, 0.48);
  --feedback-info-text: #bfdbfe;
  --feedback-success-bg: rgba(16, 185, 129, 0.16);
  --feedback-success-border: rgba(52, 211, 153, 0.45);
  --feedback-success-text: #a7f3d0;
  --feedback-warning-bg: rgba(245, 158, 11, 0.17);
  --feedback-warning-border: rgba(251, 191, 36, 0.48);
  --feedback-warning-text: #fde68a;
  --feedback-error-bg: rgba(244, 63, 94, 0.17);
  --feedback-error-border: rgba(251, 113, 133, 0.48);
  --feedback-error-text: #fecdd3;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landingReveal {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Landing-page motion: GPU-friendly transforms with a quiet, responsive feel. */
.hero-copy > * {
  opacity: 0;
  animation: heroEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-copy > :nth-child(2) { animation-delay: 90ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.hero-copy > :nth-child(4) { animation-delay: 270ms; }
.hero-copy > :nth-child(5) { animation-delay: 360ms; }
.hero-visual {
  --pointer-x: 0px;
  --pointer-y: 0px;
  opacity: 0;
  animation: visualEntrance 1s 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dashboard-float {
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: dashboardFloat 6s ease-in-out infinite;
}
.hero-chip { animation: chipFloat 4.5s ease-in-out infinite; }
.hero-chip-two { animation-delay: -2.2s; }
.hero-orb { animation: orbDrift 10s ease-in-out infinite alternate; }
.scroll-cue { animation: scrollCue 2s ease-in-out infinite; }

.feature-card,
.testimonial-card {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 350ms ease, box-shadow 350ms ease;
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgb(144 202 249);
  box-shadow: 0 22px 45px -24px rgba(30, 136, 229, 0.38);
}
.feature-card > span { transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover > span { transform: rotate(-6deg) scale(1.1); }
.feature-card a svg { transition: transform 200ms ease; }
.feature-card:hover a svg { transform: translateX(4px); }
.testimonial-card:hover { transform: translateY(-6px) rotate(0.4deg); box-shadow: 0 22px 50px -28px rgba(15, 23, 42, 0.35); }
.feature-card.reveal {
  filter: blur(8px);
  transform: translateY(90px) scale(.94);
}
.feature-card.reveal.is-visible {
  animation: cardCascade 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal:not(.is-visible) .stagger-grid > :not(.stagger-decoration) {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(90px) scale(.94);
}
.reveal.is-visible .stagger-grid > :not(.stagger-decoration) {
  animation: cardCascade 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal.is-visible .stagger-grid > :nth-child(1) { animation-delay: 250ms; }
.reveal.is-visible .stagger-grid > :nth-child(2) { animation-delay: 570ms; }
.reveal.is-visible .stagger-grid > :nth-child(3) { animation-delay: 890ms; }
.reveal.is-visible .stagger-grid > :nth-child(4) { animation-delay: 1210ms; }
.reveal.is-visible .stagger-grid > article:nth-of-type(1) { animation-delay: 250ms; }
.reveal.is-visible .stagger-grid > article:nth-of-type(2) { animation-delay: 570ms; }
.reveal.is-visible .stagger-grid > article:nth-of-type(3) { animation-delay: 890ms; }
.reveal.is-visible .stagger-grid > article:nth-of-type(4) { animation-delay: 1210ms; }
.cta-panel { background-size: 180% 180%; }
.cta-panel.is-visible { animation-duration: .75s, 8s; animation-name: landingReveal, gradientShift; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease; animation-fill-mode: forwards; animation-iteration-count: 1, infinite; }
.cta-glow { animation: glowDrift 6s ease-in-out infinite alternate; }

@keyframes heroEntrance { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes visualEntrance { from { opacity: 0; transform: translateX(36px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dashboardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes chipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes orbDrift { to { transform: translate(20%, -18%) scale(1.08); } }
@keyframes scrollCue { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 6px; } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glowDrift { to { transform: translate(-80px, 80px) scale(1.2); } }
@keyframes cardCascade { from { opacity: 0; filter: blur(8px); transform: translateY(90px) scale(.94); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }

.story-aurora {
  background:
    radial-gradient(circle at var(--story-position) 45%, color-mix(in srgb, var(--story-color) 28%, transparent), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(30, 136, 229, .12), transparent 32%);
  filter: saturate(1.2);
  transition: background 500ms ease;
}
.story-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  pointer-events: none;
}
.story-ring { transition: border-color 500ms ease; will-change: transform; }
@media (max-width: 767px) {
  .landing-card { padding: 1.25rem; }
}
.story-chapter-bg {
  background:
    radial-gradient(circle at 72% 45%, color-mix(in srgb, var(--story-color) 26%, transparent), transparent 30%),
    radial-gradient(circle at 15% 75%, rgba(30, 136, 229, .1), transparent 34%);
}
.story-chapter-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.story-chapter-copy { animation: storyCopyIn .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes storyCopyIn { from { opacity: 0; filter: blur(8px); transform: translateY(44px); } to { opacity: 1; filter: blur(0); transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-visual, .dashboard-float, .hero-chip, .hero-orb, .scroll-cue, .cta-panel, .cta-glow {
    opacity: 1;
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
  .feature-card:hover, .testimonial-card:hover { transform: none; }
  .reveal .stagger-grid > * { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .story-chapter { height: auto; min-height: 100vh; }
  .story-ring { transform: none !important; }
}

#root {
  margin: 0;
  min-height: 100dvh;
  width: 100%;
}

.drawer-panel {
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.drawer-panel.is-visible {
  transform: translateX(0);
}

.drawer-backdrop {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  will-change: opacity;
}

.drawer-backdrop.is-visible {
  opacity: 1;
}

.drawer-scrim {
  background-color: rgba(0, 0, 0, 0.42);
}

/* Approval progress: completed work recedes while the active decision stands out. */
[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div {
  border-left-color: #cbd5e1 !important;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > span {
  background-color: #94a3b8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px #f1f5f9;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > p {
  color: #64748b !important;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > p:first-of-type {
  color: #475569 !important;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div {
  padding-bottom: 0.25rem;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span {
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px #dbeafe, 0 0 0 5px #93c5fd;
  overflow: visible;
  transform-origin: center;
  will-change: transform, box-shadow;
  animation: approvalNodePulse 1.25s ease-in-out infinite !important;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span::after {
  position: absolute;
  inset: -3px;
  z-index: 2;
  border: 3px solid #60a5fa;
  border-radius: 9999px;
  pointer-events: none;
  transform-origin: center;
  will-change: opacity, transform;
  content: "";
  animation: approvalCurrentPulse 1.4s ease-out infinite;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > p:first-of-type {
  color: #1d4ed8 !important;
  font-weight: 700;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > p:last-of-type {
  color: #64748b !important;
  font-weight: 500;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div::after {
  position: absolute;
  top: 1.75rem;
  bottom: -1rem;
  left: -1.55rem;
  border-left: 2px dashed #93c5fd;
  content: "";
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div {
  border-left-color: #475569 !important;
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > span {
  background-color: #64748b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 0 0 4px #1e293b;
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > p:first-of-type {
  color: #94a3b8 !important;
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > p,
.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > p:last-of-type {
  color: #64748b !important;
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span {
  background-color: #60a5fa !important;
  color: #0f172a !important;
  box-shadow: 0 0 0 4px #172554, 0 0 0 5px #3b82f6;
}

@keyframes approvalCurrentPulse {
  0% {
    opacity: 0.95;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes approvalNodePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35), 0 0 0 5px rgba(59, 130, 246, 0.18);
  }
  50% {
    transform: scale(1.22);
    box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.48), 0 0 0 10px rgba(59, 130, 246, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span::after {
    animation: none;
    display: none;
  }

  [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span {
    animation: none !important;
  }
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > p:first-of-type {
  color: #93c5fd !important;
}

/* Timeline runs from the active step at the top to completed history below. */
[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div {
  display: flex;
  flex-direction: column;
  border-left: 0 !important;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div::before {
  position: absolute;
  z-index: 0;
  top: 0.75rem;
  bottom: 1.75rem;
  left: -1px;
  width: 2px;
  background: linear-gradient(to bottom, #60a5fa 0 48%, #cbd5e1 48% 100%);
  content: "";
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div[data-past-note]:not([data-past-note=""])::after {
  order: 2;
  margin-top: 0.65rem;
  border-left: 2px solid #cbd5e1;
  border-radius: 0.25rem;
  background-color: #f8fafc;
  padding: 0.55rem 0.75rem;
  color: #64748b;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.25rem;
  content: "Catatan: " attr(data-past-note);
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div {
  order: -1;
  margin-top: 0 !important;
  margin-bottom: 1.75rem;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div::after {
  display: none;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > span {
  z-index: 1;
  top: auto !important;
  bottom: 1.05rem;
  left: -0.75rem;
}

[aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div > div > span {
  z-index: 1;
  left: -2.25rem;
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div::before {
  background: linear-gradient(to bottom, #60a5fa 0 48%, #475569 48% 100%);
}

.dark [aria-label="Detail pengajuan"] aside > div > section:nth-of-type(3) > div[data-past-note]:not([data-past-note=""])::after {
  border-left-color: #475569;
  background-color: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
}

[data-theme="dark"] .drawer-scrim {
  background-color: rgba(0, 0, 0, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled),
  a[href] {
    transition: none;
  }

  button:not(:disabled):active,
  a[href]:active {
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  button.action-lift:not(:disabled):hover,
  a.action-lift:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px -6px rgba(15, 23, 42, 0.35);
  }
}

/* Keep the QR workspace stacked on tablets and small laptops. At this width the
   application sidebar leaves too little room for three tabs beside the summary. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .qr-dashboard-shell {
    display: block !important;
  }

  .qr-dashboard-shell > aside,
  .qr-dashboard-shell > div > aside {
    margin-top: 1.25rem;
  }

  .qr-dashboard-shell > .qr-workspace-surface:first-child button {
    min-width: 0;
    flex: 1 1 0%;
  }
}

/* Dark palette: midnight navy surfaces, cool slate text, blue + teal accents. */
.dark body,
.dark .bg-slate-50 {
  background-color: var(--mui-background);
  color: var(--mui-text-primary);
}

.dark .bg-white,
.dark .bg-white\/90,
.dark .bg-white\/80 {
  background-color: var(--mui-paper);
}

.dark .bg-slate-100,
.dark .bg-slate-100\/80,
.dark .hover\:bg-slate-50:hover {
  background-color: #2a2a2a;
}

.dark .bg-slate-50\/50 {
  background-color: rgba(255, 255, 255, 0.035);
}

.dark .bg-slate-50\/50 .bg-white {
  background-color: #242424;
}

.dark .bg-slate-50\/50 .hover\:bg-slate-100:hover {
  background-color: #303030;
}

.dark .bg-brand-50,
.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-blue-50\/50:hover {
  background-color: rgba(144, 202, 249, 0.12);
}

.dark .hover\:bg-emerald-50:hover {
  background-color: rgba(16, 185, 129, 0.14);
}

.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14); }
.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.14); }
.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.14); }

/* Shared semantic feedback palette. These mappings keep alerts, banners,
   validation messages, and status callouts readable throughout the app. */
.bg-blue-50 { background-color: var(--feedback-info-bg); }
.border-blue-200,
.border-blue-300 { border-color: var(--feedback-info-border); }
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800 { color: var(--feedback-info-text); }

.bg-emerald-50,
.bg-emerald-100 { background-color: var(--feedback-success-bg); }
.border-emerald-200,
.border-emerald-300 { border-color: var(--feedback-success-border); }
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800 { color: var(--feedback-success-text); }

.bg-amber-50,
.bg-amber-100 { background-color: var(--feedback-warning-bg); }
.border-amber-200,
.border-amber-300 { border-color: var(--feedback-warning-border); }
.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800 { color: var(--feedback-warning-text); }

.bg-rose-50,
.bg-rose-100 { background-color: var(--feedback-error-bg); }
.border-rose-200,
.border-rose-300 { border-color: var(--feedback-error-border); }
.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-rose-800 { color: var(--feedback-error-text); }

/* Timeline circles must be opaque so connector lines stop at their edges. */
.dark .approval-timeline-node-cutout {
  background-color: var(--mui-paper) !important;
}

.dark .text-blue-600,
.dark .text-brand-600,
.dark .text-brand-700 { color: var(--mui-primary); }

.dark .text-purple-600 { color: var(--mui-secondary); }
.dark .text-emerald-500,
.dark .text-emerald-600 { color: var(--mui-success); }
.dark .text-orange-500 { color: var(--mui-warning); }
.dark .text-rose-500,
.dark .text-rose-600 { color: var(--mui-error); }

.dark .bg-blue-600,
.dark .bg-brand-600 {
  background-color: var(--mui-primary);
  color: rgba(0, 0, 0, 0.87);
}

.dark .hover\:bg-blue-700:hover,
.dark .hover\:bg-brand-700:hover { background-color: var(--mui-primary-dark); }

.dark .text-slate-950,
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-gray-900 { color: var(--mui-text-primary); }

.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-gray-700,
.dark .text-gray-600 { color: rgba(255, 255, 255, 0.74); }

.dark .text-slate-500,
.dark .text-gray-500 { color: var(--mui-text-secondary); }

.dark .text-slate-400,
.dark .text-gray-400 { color: rgba(255, 255, 255, 0.44); }

/* Keep shared interactive text readable when light-theme hover utilities fire. */
.dark .hover\:text-slate-900:hover,
.dark .hover\:text-slate-800:hover,
.dark .hover\:text-slate-700:hover,
.dark .hover\:text-slate-600:hover {
  color: rgba(255, 255, 255, 0.92);
}

.dark .hover\:text-slate-500:hover {
  color: rgba(255, 255, 255, 0.62);
}

.dark .hover\:text-blue-600:hover,
.dark .hover\:text-brand-600:hover,
.dark .hover\:text-brand-700:hover {
  color: var(--mui-primary);
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-brand-100,
.dark .border-brand-200,
.dark .border-brand-300,
.dark .border-b,
.dark .border-t,
.dark .border-r,
.dark .border {
  border-color: var(--mui-divider);
}

@media (max-width: 767px) {
  .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
  .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 639px) {
  main footer.grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  main footer.grid > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  main footer.grid > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  main footer.grid > :last-child {
    grid-column: 2;
    grid-row: 1;
  }
}

.menu-hint {
  position: fixed;
  z-index: 100;
  max-width: min(280px, calc(100vw - 340px));
  transform: translateY(-50%);
  transform-origin: left center;
  animation: menu-hint-enter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 12px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 12px rgb(15 23 42 / 18%);
  pointer-events: none;
}

.menu-hint::before {
  content: "";
  position: absolute;
  left: -5px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background: #0f172a;
  transform: rotate(45deg);
}

@keyframes menu-hint-enter {
  from {
    opacity: 0;
    transform: translate(-8px, -50%) scale(0.94);
  }
  70% {
    opacity: 1;
    transform: translate(1px, -50%) scale(1.015);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-hint {
    animation: none;
  }
}

.sidebar-toggle {
  border-color: #1d4ed8;
  background-color: #2563eb;
  color: #ffffff;
}

.sidebar-toggle:hover {
  border-color: #1e40af;
  background-color: #1d4ed8;
}

#root > .h-dvh {
  height: 100dvh;
  margin-top: 0;
  transition: height 1000ms ease-in-out, margin-top 1000ms ease-in-out;
}

#root.network-banner-visible > .h-dvh {
  height: calc(100dvh - 2rem);
  margin-top: 2rem;
}

.offline-banner {
  right: 0;
  left: 0;
  margin: 0;
  width: 100% !important;
  max-width: none;
}

#root > .h-dvh aside.fixed {
  top: 0;
  transition-property: top, transform, width;
  transition-duration: 1000ms, 500ms, 500ms;
  transition-timing-function: ease-in-out;
}

#root.network-banner-visible > .h-dvh aside.fixed {
  top: 2rem;
}

@media (min-width: 1024px) {
  #root > .h-dvh aside.fixed,
  #root.network-banner-visible > .h-dvh aside.fixed {
    top: auto;
  }
}

.qr-preview,
.qr-module-empty {
  background-color: #ffffff;
}

.qr-module-active {
  background-color: #020617;
}

.qr-page .shadow-card,
.qr-page .qr-preview {
  box-shadow: none;
}

.dark .qr-recent-list > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.06);
}

.qr-scan-avatar {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #2563eb;
}

.dark .qr-scan-avatar {
  background: linear-gradient(135deg, #2563eb, #4338ca);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22);
}

.qr-role-pill {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.dark .qr-role-pill {
  background-color: rgba(37, 99, 235, 0.3);
  color: #bfdbfe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}

.scanner-stage {
  background: linear-gradient(145deg, #eff6ff, #e2e8f0);
}

.scanner-placeholder {
  color: #64748b;
}

.dark .scanner-stage {
  background: linear-gradient(145deg, #0f172a, #020617);
}

.dark .scanner-placeholder {
  color: rgba(255, 255, 255, 0.34);
}

@media (min-width: 1024px) {
  .dark .qr-dashboard-shell {
    background-color: transparent;
  }

  .dark .qr-workspace-surface {
    background-color: var(--mui-paper);
    border-color: var(--mui-divider);
  }

  .qr-workspace-surface {
    border-color: var(--mui-divider);
  }
}

.dark .sidebar-toggle {
  border-color: #3b82f6;
  background-color: #2563eb;
  color: #ffffff;
}

.dark .sidebar-toggle:hover {
  background-color: #1d4ed8;
}

.dark input:not(.dropdown-trigger),
.dark select[data-dropdown-custom],
.dark textarea {
  border-color: rgba(255, 255, 255, 0.23);
  background-color: #242424;
  color: var(--mui-text-primary);
}

.dark input::-moz-placeholder, .dark textarea::-moz-placeholder { color: #A7A7A7; }

.dark input::placeholder,
.dark textarea::placeholder { color: #A7A7A7; }

.dark .shadow-card,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark .shadow-panel {
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.8);
}

.dark .qr-page .shadow-card,
.dark .qr-page .qr-preview {
  box-shadow: none;
}

.dark .drawer-panel { background-color: var(--mui-paper); }

.dark .from-brand-50 {
  --tw-gradient-from: #121212 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 18 18 / 0) var(--tw-gradient-to-position);
}

.dark .via-white {
  --tw-gradient-to: rgb(30 30 30 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e1e1e var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark .to-brand-100 {
  --tw-gradient-to: #252525 var(--tw-gradient-to-position);
}

.dark ::-moz-selection {
  background-color: #90caf9;
  color: rgba(0, 0, 0, 0.87);
}

.dark ::selection {
  background-color: #90caf9;
  color: rgba(0, 0, 0, 0.87);
}

/* The data attribute is the source of truth if a stale dark class is restored by a cache/extension. */
[data-theme="light"] .login-page {
  background-color: #f7f9fc !important;
  background-image: linear-gradient(135deg, #e3f2fd 0%, #ffffff 50%, #bbdefb 100%) !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

[data-theme="light"] .login-card {
  border-color: rgba(25, 118, 210, 0.10) !important;
  background-color: #ffffff !important;
  box-shadow: 0 20px 60px -20px rgba(25, 118, 210, 0.30) !important;
}

[data-theme="light"] .login-title { color: #0d47a1 !important; }
[data-theme="light"] .login-subtitle { color: #1976d2 !important; }
[data-theme="light"] .login-divider-label {
  background-color: #ffffff !important;
  color: #1976d2 !important;
}

[data-theme="light"] .login-submit {
  background-color: #1976d2 !important;
  color: #ffffff !important;
}

[data-theme="light"] .login-submit:not(:disabled):hover {
  background-color: #1565c0 !important;
}

[data-theme="dark"] .login-submit {
  background-color: #90caf9 !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

[data-theme="dark"] .login-submit:not(:disabled):hover {
  background-color: #64b5f6 !important;
}

[data-theme="light"] .login-signup-link {
  border-color: #1976d2 !important;
  background-color: transparent !important;
  color: #1976d2 !important;
}

[data-theme="light"] .login-signup-link:hover {
  background-color: rgba(25, 118, 210, 0.08) !important;
  box-shadow: 0 4px 12px -8px rgba(25, 118, 210, 0.7);
}

[data-theme="dark"] .login-signup-link {
  border-color: #90caf9 !important;
  background-color: transparent !important;
  color: #90caf9 !important;
}

[data-theme="dark"] .login-signup-link:hover {
  background-color: rgba(144, 202, 249, 0.10) !important;
}

.login-home-link {
  border-color: #bbdefb;
  background-color: rgba(255, 255, 255, 0.8);
  color: #1565c0;
}

.login-home-link:hover {
  border-color: #1976d2;
  background-color: #e3f2fd;
  color: #0d47a1;
}

[data-theme="dark"] .login-home-link {
  border-color: rgba(144, 202, 249, 0.4);
  background-color: #1e293b;
  color: #90caf9;
}

[data-theme="dark"] .login-home-link:hover {
  border-color: #90caf9;
  background-color: #263b53;
  color: #e3f2fd;
}

[data-theme="light"] .login-footer { color: #455a64 !important; }
[data-theme="light"] .login-footer a { color: #1565c0 !important; }
[data-theme="light"] .login-footer a:hover { color: #0d47a1 !important; }
[data-theme="dark"] .login-footer { color: rgba(255, 255, 255, 0.64) !important; }
[data-theme="dark"] .login-footer a { color: #90caf9 !important; }
[data-theme="dark"] .login-footer a:hover { color: #e3f2fd !important; }

.remember-box {
  position: relative;
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  overflow: visible;
  border: 2px solid #90a4ae;
  border-radius: 6px;
  background: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

.checkbox-label {
  color: var(--mui-primary);
}

.checkbox-label:hover {
  color: var(--mui-primary-dark);
}

.remember-box::before {
  position: absolute;
  width: 36px;
  height: 36px;
  content: '';
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.16);
  opacity: 0;
  transform: scale(0.35);
}

.remember-box::after {
  width: 5px;
  height: 10px;
  margin-top: -2px;
  content: '';
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  opacity: 0;
  transform: rotate(45deg) scale(0.2);
  transition: opacity 120ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-label:hover .remember-box {
  border-color: var(--mui-primary);
  transform: translateY(-1px);
}

.peer:focus-visible + .remember-box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-primary) 22%, transparent);
}

.peer:checked + .remember-box {
  border-color: var(--mui-primary);
  background-color: var(--mui-primary);
  animation: rememberBoxPop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.peer:checked + .remember-box::before {
  animation: rememberRipple 420ms ease-out;
}

.peer:checked + .remember-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.peer:disabled + .remember-box {
  cursor: not-allowed;
  opacity: 0.5;
}

[data-theme="dark"] .checkbox-label,
[data-theme="dark"] .checkbox-label:hover {
  color: #90caf9 !important;
}

[data-theme="dark"] .checkbox-label:hover .remember-box {
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.12);
}

[data-theme="dark"] .checkbox-label .peer:checked + .remember-box {
  border-color: #90caf9;
  background-color: #90caf9;
}

[data-theme="dark"] .checkbox-label .peer:checked + .remember-box::after {
  border-color: rgba(0, 0, 0, 0.87);
}

@keyframes rememberBoxPop {
  0% { transform: scale(0.78); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes rememberRipple {
  0% { opacity: 1; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1); }
}

.confirm-dialog {
  animation: confirmDialogIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.confirm-backdrop {
  animation: drawerBackdropIn 200ms ease-out both;
}

@keyframes confirmDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drawerBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .remember-box,
  .remember-box::after {
    transition: none;
    animation: none !important;
  }
}

[data-theme="light"] .login-card label { color: rgba(0, 0, 0, 0.78); }
[data-theme="light"] .login-card input:not([type="checkbox"]) {
  border-color: #90caf9 !important;
  background-color: #f8fbff !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

[data-theme="light"] .login-card input:not([type="checkbox"]):focus {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

/* Keep interactive table rows legible against dark surfaces. The utility
   focus background is intentionally overridden here because its light-theme
   feedback color is too bright for dark tables. */
[data-theme="dark"] .data-table-card tbody tr {
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

[data-theme="dark"] .data-table-card tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.18) !important;
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.72);
}

[data-theme="dark"] .data-table-card tbody tr:focus,
[data-theme="dark"] .data-table-card tbody tr:focus-visible,
[data-theme="dark"] .data-table-card tbody tr:focus-within {
  background-color: rgba(59, 130, 246, 0.28) !important;
  box-shadow:
    inset 3px 0 0 #60a5fa,
    inset 0 0 0 1px rgba(96, 165, 250, 0.42);
}

/* Transform-only employee timeline and directional content transitions. */
.wizard-timeline {
  --step-width: 34%;
  height: 100px;
  overflow: hidden;
  padding-top: 8px;
}
.wizard-timeline-track {
  display: flex;
  width: 100%;
  transform: translate3d(calc(50% - var(--step-width) / 2 - var(--active-index) * var(--step-width)), 0, 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wizard-timeline-item { position: relative; flex: 0 0 var(--step-width); min-width: 0; }
.wizard-timeline-label { white-space: nowrap; transition: color 900ms ease; }
.wizard-timeline-node { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), background-color 900ms ease, box-shadow 900ms ease; }
.wizard-timeline-item .wizard-timeline-node { transform: scale(.8); }
.wizard-timeline-item[data-state="active"] .wizard-timeline-node { transform: scale(1.12); }
.wizard-node-number, .wizard-node-check { transition: opacity 650ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.wizard-node-check { opacity: 0; transform: scale(.5); }
.wizard-timeline-item[data-state="completed"] .wizard-node-check { opacity: 1; transform: scale(1); }
.wizard-timeline-item[data-state="completed"] .wizard-node-number { opacity: 0; transform: scale(.5); }
.wizard-connector { position: absolute; top: 23px; left: 50%; width: 100%; height: 3px; }
.wizard-connector > span { display: block; height: 100%; transform-origin: left; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.wizard-content-viewport { min-width: 0; overflow-x: clip; overflow-y: visible; }
.wizard-content-motion { padding: 4px 2px; }
.wizard-content-motion[data-phase="exit"] { animation: wizardContentExit 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.wizard-content-motion[data-phase="enter"] { animation: wizardContentEnter 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes wizardContentExit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(calc(-32px * var(--step-direction)), 0, 0); }
}
@keyframes wizardContentEnter {
  from { opacity: 0; transform: translate3d(calc(32px * var(--step-direction)), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 380px) {
  .wizard-timeline { --step-width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-timeline-track, .wizard-timeline-node, .wizard-node-number, .wizard-node-check,
  .wizard-timeline-label, .wizard-connector > span { transition: none; }
  .wizard-content-motion[data-phase="exit"] { animation: wizardContentFadeOut 100ms ease both; }
  .wizard-content-motion[data-phase="enter"] { animation: wizardContentFadeIn 100ms ease both; }
}
@keyframes wizardContentFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes wizardContentFadeIn { from { opacity: 0; } to { opacity: 1; } }

.teacher-staff-view-transition {
  --view-direction: 1;
  min-width: 0;
  animation: teacherStaffViewEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.teacher-staff-view-transition[data-view="detail"] { --view-direction: -1; }
@keyframes teacherStaffViewEnter {
  from { opacity: 0; transform: translateX(calc(16px * var(--view-direction))); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .teacher-staff-view-transition { animation: wizardContentFadeIn 120ms ease backwards; }
}

.auth-splash {
  --auth-splash-blur: 12px;
  backdrop-filter: blur(var(--auth-splash-blur));
  -webkit-backdrop-filter: blur(var(--auth-splash-blur));
  animation: authSplashFadeIn 3000ms ease-out;
}
.dark .auth-splash { --auth-splash-blur: 24px; }
.auth-splash-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: authSplashGearSpin 1.5s linear infinite;
}
.auth-splash-logo-glow {
  background: radial-gradient(circle, rgb(147 197 253 / 55%) 0%, rgb(96 165 250 / 35%) 40%, transparent 72%);
  filter: blur(16px);
  transform-origin: center;
  will-change: transform, opacity;
  animation: authSplashLogoGlow 2.4s ease-in-out infinite;
}
@keyframes authSplashLogoGlow {
  0%, 100% { transform: scale(.75); opacity: .35; }
  50% { transform: scale(1.65); opacity: .65; }
}
@keyframes authSplashGearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes authSplashFadeIn {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(var(--auth-splash-blur)); -webkit-backdrop-filter: blur(var(--auth-splash-blur)); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-splash { animation-duration: 100ms; }
  .auth-splash-gear { animation-duration: 3s; }
  .auth-splash-logo-glow { animation-duration: 4s; }
}

.approval-carousel-slide { animation: teacherStaffViewEnter 240ms ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
  .approval-carousel-slide { animation: wizardContentFadeIn 100ms ease backwards; }
}

/* Shared neutral placeholders for native fields and custom dropdowns. */
:root { --input-placeholder-color: #737373; }
.dark { --input-placeholder-color: #a3a3a3; }
input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--input-placeholder-color) !important;
  opacity: 1;
}
input::placeholder,
textarea::placeholder,
[data-placeholder="true"] {
  color: var(--input-placeholder-color) !important;
  opacity: 1;
}
/* Keep loading motion inside placeholders so the page itself stays steady. */
.page-skeleton {
  animation: skeletonEnter 180ms ease-out both;
}

.skeleton-block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.skeleton-shimmer {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 10%, rgb(255 255 255 / 80%) 50%, transparent 90%);
  transform: translateX(-100%);

}

.dark .skeleton-shimmer {
  background: linear-gradient(100deg, transparent 10%, rgb(255 255 255 / 22%) 50%, transparent 90%);
}

.page-content-reveal {
  animation: skeletonEnter 220ms ease-out both;
}

@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes skeletonEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-skeleton, .page-content-reveal { animation: none; }
  /* Keep the explicitly requested loading indicator visible, at a gentler speed. */

}

/* Shared dropdown design. Use Select for identical popup rendering across browsers.
   Native selects inherit the trigger style; data-dropdown-custom opts out. */
.dropdown-trigger,
select:not([data-dropdown-custom]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--mui-divider);
  border-radius: 0.5rem;
  background-color: var(--mui-paper);
  color: var(--mui-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.dropdown-trigger--large { height: 3rem; padding-inline: 0.875rem; }
.dropdown-trigger--rich { height: auto; min-height: 3rem; padding: 0.625rem 0.875rem; }
.dropdown-trigger--search { padding-right: 2.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select:not([data-dropdown-custom]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.dropdown-trigger:hover:not(:disabled),
select:not([data-dropdown-custom]):hover:not(:disabled) { border-color: var(--mui-primary); }
.dropdown-trigger:focus-visible,
select:not([data-dropdown-custom]):focus-visible {
  border-color: var(--mui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-primary) 18%, transparent);
}
.dropdown-trigger[aria-invalid="true"],
select:not([data-dropdown-custom])[aria-invalid="true"] { border-color: var(--mui-error); }
.dropdown-trigger:disabled,
.dropdown-trigger[aria-disabled="true"],
select:not([data-dropdown-custom]):disabled { cursor: not-allowed; opacity: 0.6; }
.dropdown-menu {
  padding: 0.375rem;
  border: 1px solid var(--mui-divider);
  border-radius: 0.75rem;
  background-color: var(--mui-paper);
  color: var(--mui-text-primary);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.16);
}
.dropdown-option {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--mui-text-primary);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.dropdown-option:hover,
.dropdown-option:focus-visible { background: color-mix(in srgb, var(--mui-primary) 8%, var(--mui-paper)); }
.dropdown-option:focus-visible { outline: 2px solid var(--mui-primary); outline-offset: -2px; }
.dropdown-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--mui-primary) 12%, var(--mui-paper));
  color: var(--mui-primary);
  font-weight: 600;
}
@keyframes notification-slide-up {
  from { opacity: 0; transform: translateY(var(--notification-enter-offset, calc(100% + 32px))); }
  to { opacity: 1; transform: translateY(0); }
}

.notification-slide-up {
  animation: notification-slide-up 2s ease-in-out both;
}

@keyframes notification-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.notification-fade-out {
  animation: notification-fade-out 600ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .notification-slide-up {
    --notification-enter-offset: 12px;
  }
}

@media (min-width: 1024px) {

  .data-table-card > .lg\:grid.place-items-center {
    flex: 1 1 auto;
    align-content: center;
    justify-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.backdrop\:bg-slate-950::backdrop {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  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\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-brand-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(144 202 249 / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100\/60:hover {
  background-color: rgb(219 234 254 / 0.6);
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50\/50:hover {
  background-color: rgb(239 246 255 / 0.5);
}

.hover\:bg-blue-50\/60:hover {
  background-color: rgb(239 246 255 / 0.6);
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(66 165 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 242 253 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 118 210 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200\/60:hover {
  background-color: rgb(226 232 240 / 0.6);
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-600:hover {
  --tw-text-opacity: 1;
  color: rgb(30 136 229 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-700:hover {
  --tw-text-opacity: 1;
  color: rgb(25 118 210 / var(--tw-text-opacity, 1));
}

.hover\:text-rose-700:hover {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:shadow-card:hover {
  --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 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);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-brand-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(33 150 243 / var(--tw-border-opacity, 1));
}

.focus\:border-rose-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-blue-50:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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\:ring-blue-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500\/20:focus {
  --tw-ring-color: rgb(59 130 246 / 0.2);
}

.focus\:ring-brand-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(144 202 249 / var(--tw-ring-opacity, 1));
}

.focus\:ring-brand-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(33 150 243 / var(--tw-ring-opacity, 1));
}

.focus\:ring-rose-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity, 1));
}

.focus-visible\:border-blue-500:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-blue-500:focus-visible {
  outline-color: #3b82f6;
}

.focus-visible\:outline-brand-600:focus-visible {
  outline-color: #1E88E5;
}

.focus-visible\:ring-2: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(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\:ring-blue-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-current:focus-visible {
  --tw-ring-color: currentColor;
}

.focus-visible\:ring-slate-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-4:focus-visible {
  --tw-ring-offset-width: 4px;
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:cursor-wait:disabled {
  cursor: wait;
}

.disabled\:bg-gray-50:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-50:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.disabled\:text-slate-300:disabled {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.disabled\:text-slate-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.disabled\:hover\:text-slate-500:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  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-1 {
  --tw-translate-y: -0.25rem;
  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-1 {
  --tw-translate-x: 0.25rem;
  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-brand-400\/50 {
  border-color: rgb(66 165 245 / 0.5);
}

.group:hover .group-hover\:text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}

.group:active .group-active\: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));
}

.peer:checked ~ .peer-checked\: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));
}

.peer:checked ~ .peer-checked\:border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\: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);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-blue-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes fadeUp {

    0% {
      opacity: 0;
      transform: translateY(16px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .motion-safe\:animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:animate-none {
    animation: none;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }

  .motion-reduce\:\[animation-duration\:3s\] {
    animation-duration: 3s;
  }
}

.dark\:block:is(.dark *) {
  display: block;
}

.dark\:divide-slate-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.dark\:divide-slate-800:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
}

.dark\:divide-white\/10:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:border-amber-400\/20:is(.dark *) {
  border-color: rgb(251 191 36 / 0.2);
}

.dark\:border-amber-400\/40:is(.dark *) {
  border-color: rgb(251 191 36 / 0.4);
}

.dark\:border-amber-500\/40:is(.dark *) {
  border-color: rgb(245 158 11 / 0.4);
}

.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-900\/60:is(.dark *) {
  border-color: rgb(120 53 15 / 0.6);
}

.dark\:border-blue-400\/15:is(.dark *) {
  border-color: rgb(96 165 250 / 0.15);
}

.dark\:border-blue-400\/20:is(.dark *) {
  border-color: rgb(96 165 250 / 0.2);
}

.dark\:border-blue-400\/30:is(.dark *) {
  border-color: rgb(96 165 250 / 0.3);
}

.dark\:border-blue-500\/60:is(.dark *) {
  border-color: rgb(59 130 246 / 0.6);
}

.dark\:border-blue-500\/70:is(.dark *) {
  border-color: rgb(59 130 246 / 0.7);
}

.dark\:border-blue-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-900\/60:is(.dark *) {
  border-color: rgb(30 58 138 / 0.6);
}

.dark\:border-brand-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(13 71 161 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-400\/20:is(.dark *) {
  border-color: rgb(52 211 153 / 0.2);
}

.dark\:border-emerald-400\/40:is(.dark *) {
  border-color: rgb(52 211 153 / 0.4);
}

.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-rose-400\/50:is(.dark *) {
  border-color: rgb(251 113 133 / 0.5);
}

.dark\:border-rose-500\/70:is(.dark *) {
  border-color: rgb(244 63 94 / 0.7);
}

.dark\:border-rose-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(136 19 55 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}

.dark\:border-violet-400\/50:is(.dark *) {
  border-color: rgb(167 139 250 / 0.5);
}

.dark\:border-white\/10:is(.dark *) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:border-white\/15:is(.dark *) {
  border-color: rgb(255 255 255 / 0.15);
}

.dark\:border-white\/20:is(.dark *) {
  border-color: rgb(255 255 255 / 0.2);
}

.dark\:border-white\/5:is(.dark *) {
  border-color: rgb(255 255 255 / 0.05);
}

.dark\:border-l-amber-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.dark\:bg-\[\#0b1220\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 18 32 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#1e1e1e\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#242424\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(36 36 36 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#292929\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(41 41 41 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#2a2a2a\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[color-mix\(in_srgb\2c var\(--mui-paper\)_40\%\2c transparent\)\]:is(.dark *) {
  background-color: color-mix(in srgb,var(--mui-paper) 40%,transparent);
}

.dark\:bg-\[var\(--mui-paper\)\]:is(.dark *) {
  background-color: var(--mui-paper);
}

.dark\:bg-amber-400\/10:is(.dark *) {
  background-color: rgb(251 191 36 / 0.1);
}

.dark\:bg-amber-400\/15:is(.dark *) {
  background-color: rgb(251 191 36 / 0.15);
}

.dark\:bg-amber-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}

.dark\:bg-blue-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-400\/10:is(.dark *) {
  background-color: rgb(96 165 250 / 0.1);
}

.dark\:bg-blue-400\/5:is(.dark *) {
  background-color: rgb(96 165 250 / 0.05);
}

.dark\:bg-blue-500\/15:is(.dark *) {
  background-color: rgb(59 130 246 / 0.15);
}

.dark\:bg-blue-600\/10:is(.dark *) {
  background-color: rgb(37 99 235 / 0.1);
}

.dark\:bg-blue-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-950\/30:is(.dark *) {
  background-color: rgb(23 37 84 / 0.3);
}

.dark\:bg-blue-950\/50:is(.dark *) {
  background-color: rgb(23 37 84 / 0.5);
}

.dark\:bg-brand-900\/20:is(.dark *) {
  background-color: rgb(13 71 161 / 0.2);
}

.dark\:bg-cyan-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(8 51 68 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-400\/10:is(.dark *) {
  background-color: rgb(52 211 153 / 0.1);
}

.dark\:bg-emerald-400\/15:is(.dark *) {
  background-color: rgb(52 211 153 / 0.15);
}

.dark\:bg-emerald-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-500\/15:is(.dark *) {
  background-color: rgb(16 185 129 / 0.15);
}

.dark\:bg-emerald-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
}

.dark\:bg-fuchsia-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(74 4 78 / var(--tw-bg-opacity, 1));
}

.dark\:bg-indigo-600\/10:is(.dark *) {
  background-color: rgb(79 70 229 / 0.1);
}

.dark\:bg-orange-400\/10:is(.dark *) {
  background-color: rgb(251 146 60 / 0.1);
}

.dark\:bg-orange-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(67 20 7 / var(--tw-bg-opacity, 1));
}

.dark\:bg-rose-500\/15:is(.dark *) {
  background-color: rgb(244 63 94 / 0.15);
}

.dark\:bg-rose-500\/25:is(.dark *) {
  background-color: rgb(244 63 94 / 0.25);
}

.dark\:bg-rose-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
}

.dark\:bg-rose-950\/40:is(.dark *) {
  background-color: rgb(76 5 25 / 0.4);
}

.dark\:bg-slate-500\/35:is(.dark *) {
  background-color: rgb(100 116 139 / 0.35);
}

.dark\:bg-slate-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700\/30:is(.dark *) {
  background-color: rgb(51 65 85 / 0.3);
}

.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-800\/70:is(.dark *) {
  background-color: rgb(30 41 59 / 0.7);
}

.dark\:bg-slate-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-950\/60:is(.dark *) {
  background-color: rgb(2 6 23 / 0.6);
}

.dark\:bg-teal-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(4 47 46 / var(--tw-bg-opacity, 1));
}

.dark\:bg-transparent:is(.dark *) {
  background-color: transparent;
}

.dark\:bg-violet-400\/15:is(.dark *) {
  background-color: rgb(167 139 250 / 0.15);
}

.dark\:bg-violet-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(46 16 101 / var(--tw-bg-opacity, 1));
}

.dark\:bg-white\/10:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}

.dark\:bg-white\/5:is(.dark *) {
  background-color: rgb(255 255 255 / 0.05);
}

.dark\:bg-white\/\[0\.025\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.025);
}

.dark\:bg-white\/\[0\.055\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.055);
}

.dark\:bg-white\/\[0\.06\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.06);
}

.dark\:from-\[\#0b1220\]:is(.dark *) {
  --tw-gradient-from: #0b1220 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 18 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:via-\[\#121212\]:is(.dark *) {
  --tw-gradient-to: rgb(18 18 18 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #121212 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:to-\[\#111827\]:is(.dark *) {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.dark\:text-amber-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-brand-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(187 222 251 / var(--tw-text-opacity, 1));
}

.dark\:text-brand-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(144 202 249 / var(--tw-text-opacity, 1));
}

.dark\:text-cyan-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-fuchsia-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(240 171 252 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-950:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:text-white\/45:is(.dark *) {
  color: rgb(255 255 255 / 0.45);
}

.dark\:text-white\/80:is(.dark *) {
  color: rgb(255 255 255 / 0.8);
}

.dark\:text-white\/85:is(.dark *) {
  color: rgb(255 255 255 / 0.85);
}

.dark\:shadow-\[0_20px_60px_-20px_rgba\(0\2c 0\2c 0\2c 0\.9\)\]:is(.dark *) {
  --tw-shadow: 0 20px 60px -20px rgba(0,0,0,0.9);
  --tw-shadow-colored: 0 20px 60px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:ring-blue-500\/10:is(.dark *) {
  --tw-ring-color: rgb(59 130 246 / 0.1);
}

.dark\:placeholder\:text-slate-500:is(.dark *)::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.dark\:placeholder\:text-slate-500:is(.dark *)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-blue-400:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-\[\#333333\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-900\/40:hover:is(.dark *) {
  background-color: rgb(120 53 15 / 0.4);
}

.dark\:hover\:bg-blue-400\/10:hover:is(.dark *) {
  background-color: rgb(96 165 250 / 0.1);
}

.dark\:hover\:bg-rose-950\/30:hover:is(.dark *) {
  background-color: rgb(76 5 25 / 0.3);
}

.dark\:hover\:bg-slate-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-slate-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-white\/10:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}

.dark\:hover\:bg-white\/5:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.05);
}

.dark\:hover\:text-blue-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-slate-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.dark\:focus\:border-blue-300:focus:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.dark\:focus\:border-blue-400:focus:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.dark\:focus\:ring-blue-400\/20:focus:is(.dark *) {
  --tw-ring-color: rgb(96 165 250 / 0.2);
}

.dark\:focus\:ring-blue-950:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(23 37 84 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-blue-950\/40:focus:is(.dark *) {
  --tw-ring-color: rgb(23 37 84 / 0.4);
}

.dark\:focus\:ring-rose-950:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(76 5 25 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-rose-950\/50:focus:is(.dark *) {
  --tw-ring-color: rgb(76 5 25 / 0.5);
}

.dark\:focus-visible\:ring-offset-slate-900:focus-visible:is(.dark *) {
  --tw-ring-offset-color: #0f172a;
}

.dark\:focus-visible\:ring-offset-slate-950:focus-visible:is(.dark *) {
  --tw-ring-offset-color: #020617;
}

.dark\:disabled\:bg-slate-700:disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:disabled\:text-white\/20:disabled:is(.dark *) {
  color: rgb(255 255 255 / 0.2);
}

.peer:checked ~ .dark\:peer-checked\:border-blue-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

@media (min-width: 640px) {

  .sm\:bottom-5 {
    bottom: 1.25rem;
  }

  .sm\:bottom-6 {
    bottom: 1.5rem;
  }

  .sm\:left-6 {
    left: 1.5rem;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:top-6 {
    top: 1.5rem;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:row-start-auto {
    grid-row-start: auto;
  }

  .sm\:-mx-7 {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
  }

  .sm\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .sm\:mt-5 {
    margin-top: 1.25rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-28 {
    height: 7rem;
  }

  .sm\:h-\[380px\] {
    height: 380px;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-\[72\%\] {
    width: 72%;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:basis-auto {
    flex-basis: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:pb-7 {
    padding-bottom: 1.75rem;
  }

  .sm\:pt-7 {
    padding-top: 1.75rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 768px) {

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-\[62\%\] {
    width: 62%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {

  .lg\:static {
    position: static;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-24 {
    width: 6rem;
  }

  .lg\:w-\[16\%\] {
    width: 16%;
  }

  .lg\:w-\[280px\] {
    width: 280px;
  }

  .lg\:w-\[46\%\] {
    width: 46%;
  }

  .lg\:max-w-0 {
    max-width: 0px;
  }

  .lg\:max-w-56 {
    max-width: 14rem;
  }

  .lg\:max-w-80 {
    max-width: 20rem;
  }

  .lg\:max-w-\[190px\] {
    max-width: 190px;
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 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));
  }

  .lg\:translate-x-4 {
    --tw-translate-x: 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));
  }

  .lg\:translate-x-\[15px\] {
    --tw-translate-x: 15px;
    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));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[\.85fr_1\.15fr\] {
    grid-template-columns: .85fr 1.15fr;
  }

  .lg\:grid-cols-\[1\.4fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .lg\:grid-cols-\[1fr_\.9fr\] {
    grid-template-columns: 1fr .9fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.65fr\)_minmax\(340px\2c \.92fr\)\] {
    grid-template-columns: minmax(0,1.65fr) minmax(340px,.92fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_300px\] {
    grid-template-columns: minmax(0,1fr) 300px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(240px\2c 0\.9fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(240px,0.9fr);
  }

  .lg\:grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .lg\:opacity-100 {
    opacity: 1;
  }

  .lg\:shadow-card {
    --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 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);
  }

  .lg\: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);
  }
}

@media (min-width: 1280px) {

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:w-\[38\%\] {
    width: 38%;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[280px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 280px minmax(0,1fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 1\.3fr\)_minmax\(300px\2c \.7fr\)\] {
    grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 2fr\)\] {
    grid-template-columns: minmax(0,3fr) minmax(0,2fr);
  }

  .xl\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1536px) {

  .\32xl\:w-1\/3 {
    width: 33.333333%;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
  display: none;
}

.\[\&\>button\:only-child\]\:col-span-2>button:only-child {
  grid-column: span 2 / span 2;
}