/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fredoka+One:wght@400&family=Bubblegum+Sans&family=Comic+Neue:wght@300;400;700&display=swap);
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle (1) ***!
  \**************************************************************************************************************************************************************************************************************************/
:root{--green:#0e9f6e;--orange:#ff8a00;--dark:#0f172a;--muted:#64748b;--bg:#f8fafc}

/* Global mobile overflow fixes */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

*{
  box-sizing: border-box;
  max-width: 100%;
}

html{font-size:16px;height:100%}
body{margin:0;font-family:'Inter','Helvetica Neue',Arial,sans-serif;color:var(--dark);background:var(--bg);line-height:1.5;min-height:100vh;display:flex;flex-direction:column;font-size:16px;font-weight:400}

/* Global Typography System with Inter Font */
* {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Base Typography */
html {
  font-size: 13.6px; /* 16px - 15% = 13.6px */
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.6px; /* 16px - 15% = 13.6px */
  font-weight: 400;
  line-height: 1.4; /* Adjusted for smaller text */
  color: var(--dark);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Heading Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: inherit;
}

h1 {
  font-size: 2.125rem; /* 34px - 15% reduction from 40px */
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 1.7rem; /* 27.2px - 15% reduction from 32px */
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-size: 1.275rem; /* 20.4px - 15% reduction from 24px */
  font-weight: 600;
  line-height: 1.2;
}

h4 {
  font-size: 1.0625rem; /* 17px - 15% reduction from 20px */
  font-weight: 500;
  line-height: 1.2;
}

h5 {
  font-size: 0.95625rem; /* 15.3px - 15% reduction from 18px */
  font-weight: 500;
  line-height: 1.2;
}

h6 {
  font-size: 0.85rem; /* 13.6px - 15% reduction from 16px */
  font-weight: 500;
  line-height: 1.2;
}

/* Body Text */
p, span, div, li, td, th {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.85rem; /* 13.6px - 15% reduction from 16px */
  font-weight: 400;
  line-height: 1.4; /* Adjusted for smaller text */
}

/* Interactive Elements */
button, .btn, input, textarea, select {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 500;
  line-height: 1.2;
}

button, .btn {
  font-weight: 500;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

/* Links */
a {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
}

/* Form Elements */
input, textarea, select, option {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.85rem; /* 13.6px - 15% reduction from 16px */
  font-weight: 400;
  line-height: 1.4; /* Adjusted for smaller text */
}

/* Navigation and Menu Items */
nav, .nav, .menu, .navbar {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

nav a, .nav a, .menu a, .navbar a {
  font-weight: 500;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

/* Cards and Tiles */
.card, .tile, .track-card {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.tile h1, .tile h2, .tile h3, .tile h4, .tile h5, .tile h6,
.track-card h1, .track-card h2, .track-card h3, .track-card h4, .track-card h5, .track-card h6 {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

.card p, .card span, .card div,
.tile p, .tile span, .tile div,
.track-card p, .track-card span, .track-card div {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Labels and Small Text */
label, small, .small {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

/* Strong and Bold Text */
strong, b, .bold {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600;
}

/* Emphasis and Italic Text */
em, i, .italic {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400;
  font-style: italic;
}

/* Code Elements */
code, pre, .code {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

/* Tables */
table, th, td {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

th {
  font-weight: 600;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

td {
  font-weight: 400;
  font-size: 0.74375rem; /* 11.9px - 15% reduction from 14px */
}

/* Responsive Typography */
@media (max-width: 768px) {
  /* Mobile Base */
  body {
    font-size: 14px;
  }
  
  /* Mobile Headings */
  h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
  }
  
  h3 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.3;
  }
  
  h4 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
  }
  
  h5 {
    font-size: 1rem; /* 16px */
    line-height: 1.3;
  }
  
  h6 {
    font-size: 0.875rem; /* 14px */
    line-height: 1.3;
  }
  
  /* Mobile Body Text */
  p, span, div, li, td, th {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
  }
  
  /* Mobile Interactive Elements */
  button, .btn {
    font-size: 0.8125rem; /* 13px */
  }
  
  input, textarea, select {
    font-size: 0.875rem; /* 14px */
  }
  
  /* Mobile Navigation */
  nav a, .nav a, .menu a, .navbar a {
    font-size: 0.8125rem; /* 13px */
  }
  
  /* Mobile Labels and Small Text */
  label, small, .small {
    font-size: 0.8125rem; /* 13px */
  }
  
  /* Mobile Code Elements */
  code, pre, .code {
    font-size: 0.8125rem; /* 13px */
  }
  
  /* Mobile Tables */
  th, td {
    font-size: 0.8125rem; /* 13px */
  }
}

/* Tablet Typography */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet Base */
  body {
    font-size: 15px;
  }
  
  /* Tablet Headings */
  h1 {
    font-size: 2.25rem; /* 36px */
  }
  
  h2 {
    font-size: 1.875rem; /* 30px */
  }
  
  h3 {
    font-size: 1.5rem; /* 24px */
  }
  
  h4 {
    font-size: 1.25rem; /* 20px */
  }
  
  h5 {
    font-size: 1.125rem; /* 18px */
  }
  
  h6 {
    font-size: 1rem; /* 16px */
  }
  
  /* Tablet Body Text */
  p, span, div, li, td, th {
    font-size: 0.9375rem; /* 15px */
  }
  
  /* Tablet Interactive Elements */
  button, .btn {
    font-size: 0.875rem; /* 14px */
  }
  
  input, textarea, select {
    font-size: 0.9375rem; /* 15px */
  }
}

/* Desktop Typography */
@media (min-width: 1025px) {
  /* Desktop Base */
  body {
    font-size: 16px;
  }
  
  /* Desktop Headings */
  h1 {
    font-size: 3rem; /* 48px */
    line-height: 1.1;
  }
  
  h2 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.2;
  }
  
  h3 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
  }
  
  h4 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.3;
  }
  
  h5 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
  }
  
  h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.3;
  }
  
  /* Desktop Body Text */
  p, span, div, li, td, th {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
  
  /* Desktop Interactive Elements */
  button, .btn {
    font-size: 0.875rem; /* 14px */
  }
  
  input, textarea, select {
    font-size: 1rem; /* 16px */
  }
  
  /* Desktop Navigation */
  nav a, .nav a, .menu a, .navbar a {
    font-size: 0.875rem; /* 14px */
  }
}
a{text-decoration:none;color:inherit}
.container{max-width:1150px;margin:0 auto;padding:0 12px;width:100%;overflow-x:hidden}
@media(min-width:768px){.container{padding:0 16px}}
@media(min-width:1024px){.container{padding:0 14px}}

/* Mobile text wrapping */
@media(max-width: 768px) {
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .code-block, .code-block pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}