/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-scroll-snap-strictness: proximity;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-content: ""
        }
    }
}

.pointer-events-auto {
    pointer-events: auto
}

.pointer-events-none {
    pointer-events: none
}

.collapse {
    visibility: collapse
}

.invisible {
    visibility: hidden
}

.visible {
    visibility: visible
}

.sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.relative {
    position: relative
}

.static {
    position: static
}

.sticky {
    position: sticky
}

.-top-\[400px\] {
    top: -400px
}

.top-1\/2 {
    top: 50%
}

.top-1\/3 {
    top: 33.3333%
}

.top-\[-10\%\] {
    top: -10%
}

.top-full {
    top: 100%
}

.-right-\[400px\] {
    right: -400px
}

.right-1\/4 {
    right: 25%
}

.right-\[-5\%\] {
    right: -5%
}

.bottom-\[-10\%\] {
    bottom: -10%
}

.left-1\/2 {
    left: 50%
}

.left-1\/4 {
    left: 25%
}

.left-\[-5\%\] {
    left: -5%
}

.left-\[calc\(50\%-11rem\)\] {
    left: calc(50% - 11rem)
}

.isolate {
    isolation: isolate
}

.-z-10 {
    z-index: calc(10 * -1)
}

.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-\[60\] {
    z-index: 60
}

.z-\[70\] {
    z-index: 70
}

.z-\[80\] {
    z-index: 80
}

.z-\[100\] {
    z-index: 100
}

.z-\[9999\] {
    z-index: 9999
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.col-span-1 {
    grid-column: span 1/span 1
}

.col-span-2 {
    grid-column: span 2/span 2
}

.col-span-full {
    grid-column: 1/-1
}

.container {
    width: 100%
}

.mx-auto {
    margin-inline: auto
}

.mt-auto {
    margin-top: auto
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.block {
    display: block
}

.contents {
    display: contents
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.inline {
    display: inline
}

.inline-block {
    display: inline-block
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.aspect-\[2\/3\] {
    aspect-ratio: 2/3
}

.aspect-\[1155\/678\] {
    aspect-ratio: 1155/678
}

.aspect-square {
    aspect-ratio: 1
}

.h-\[85vh\] {
    height: 85vh
}

.h-\[600px\] {
    height: 600px
}

.h-\[800px\] {
    height: 800px
}

.h-full {
    height: 100%
}

.h-px {
    height: 1px
}

.max-h-\[90vh\] {
    max-height: 90vh
}

.max-h-\[400px\] {
    max-height: 400px
}

.min-h-\[4rem\] {
    min-height: 4rem
}

.min-h-\[60px\] {
    min-height: 60px
}

.min-h-\[60vh\] {
    min-height: 60vh
}

.min-h-\[70vh\] {
    min-height: 70vh
}

.min-h-\[100px\] {
    min-height: 100px
}

.min-h-\[300px\] {
    min-height: 300px
}

.min-h-\[400px\] {
    min-height: 400px
}

.min-h-\[600px\] {
    min-height: 600px
}

.min-h-full {
    min-height: 100%
}

.min-h-screen {
    min-height: 100vh
}

.w-1\/2 {
    width: 50%
}

.w-1\/4 {
    width: 25%
}

.w-2\/3 {
    width: 66.6667%
}

.w-\[36\.125rem\] {
    width: 36.125rem
}

.w-\[600px\] {
    width: 600px
}

.w-\[800px\] {
    width: 800px
}

.w-full {
    width: 100%
}

.w-px {
    width: 1px
}

.max-w-\[150px\] {
    max-width: 150px
}

.max-w-\[200px\] {
    max-width: 200px
}

.max-w-none {
    max-width: none
}

.min-w-\[250px\] {
    min-width: 250px
}

.flex-1 {
    flex: 1
}

.flex-none {
    flex: none
}

.flex-shrink-0 {
    flex-shrink: 0
}

.shrink {
    flex-shrink: 1
}

.shrink-0 {
    flex-shrink: 0
}

.flex-grow,
.grow {
    flex-grow: 1
}

.origin-bottom-left {
    transform-origin: 0 100%
}

.origin-bottom-right {
    transform-origin: 100% 100%
}

.-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.scale-x-0 {
    --tw-scale-x: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.-rotate-6 {
    rotate: -6deg
}

.-rotate-12 {
    rotate: -12deg
}

.rotate-3 {
    rotate: 3deg
}

.rotate-12 {
    rotate: 12deg
}

.rotate-\[30deg\] {
    rotate: 30deg
}

.transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
}

.transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
}

.cursor-default {
    cursor: default
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.resize-none {
    resize: none
}

.resize-y {
    resize: vertical
}

.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
}

.snap-start {
    scroll-snap-align: start
}

.list-inside {
    list-style-position: inside
}

.list-decimal {
    list-style-type: decimal
}

.list-disc {
    list-style-type: disc
}

.list-none {
    list-style-type: none
}

.appearance-none {
    appearance: none
}

.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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.flex-row {
    flex-direction: row
}

.flex-wrap {
    flex-wrap: wrap
}

.items-baseline {
    align-items: baseline
}

.items-center {
    align-items: center
}

.items-end {
    align-items: flex-end
}

.items-start {
    align-items: flex-start
}

.justify-between {
    justify-content: space-between
}

.justify-center {
    justify-content: center
}

.justify-end {
    justify-content: flex-end
}

.self-start {
    align-self: flex-start
}

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.scroll-smooth {
    scroll-behavior: smooth
}

.rounded-\[2rem\] {
    border-radius: 2rem
}

.rounded-\[3rem\] {
    border-radius: 3rem
}

.rounded-\[20px\] {
    border-radius: 20px
}

.rounded-\[22px\] {
    border-radius: 22px
}

.rounded-full {
    border-radius: 3.40282e38px
}

.rounded-b-\[2\.5rem\] {
    border-bottom-right-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem
}

.rounded-b-\[3rem\] {
    border-bottom-right-radius: 3rem;
    border-bottom-left-radius: 3rem
}

.rounded-bl-\[100px\] {
    border-bottom-left-radius: 100px
}

.border {
    border-style: var(--tw-border-style);
    border-width: 1px
}

.border-0 {
    border-style: var(--tw-border-style);
    border-width: 0
}

.border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px
}

.border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px
}

.border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px
}

.border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px
}

.border-t-8 {
    border-top-style: var(--tw-border-style);
    border-top-width: 8px
}

.border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px
}

.border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px
}

.border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
}

.border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px
}

.border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px
}

.border-l-8 {
    border-left-style: var(--tw-border-style);
    border-left-width: 8px
}

.border-dashed {
    --tw-border-style: dashed;
    border-style: dashed
}

.border-none {
    --tw-border-style: none;
    border-style: none
}

.border-transparent {
    border-color: #0000
}

.bg-\[\#011627\] {
    background-color: #011627
}

.bg-\[\#F4ECD8\] {
    background-color: #f4ecd8
}

.bg-\[\#FFDD00\] {
    background-color: #fd0
}

.bg-\[\#f4ecd8\] {
    background-color: #f4ecd8
}

.bg-\[\#fcfbf9\] {
    background-color: #fcfbf9
}

.bg-transparent {
    background-color: #0000
}

.bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.bg-gradient-to-tr {
    --tw-gradient-position: to top right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/cubes\.png\'\)\] {
    background-image: url(https://www.transparenttextures.com/patterns/cubes.png)
}

.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/stardust\.png\'\)\] {
    background-image: url(https://www.transparenttextures.com/patterns/stardust.png)
}

.from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}

.via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops)
}

.to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
}

.fill-current {
    fill: currentColor
}

.object-cover {
    object-fit: cover
}

.object-center {
    object-position: center
}

.p-\[2px\] {
    padding: 2px
}

.pb-px {
    padding-bottom: 1px
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.font-\[\'Cookie\'\,cursive\] {
    font-family: Cookie, cursive
}

.text-\[10px\] {
    font-size: 10px
}

.text-\[10rem\] {
    font-size: 10rem
}

.text-\[12rem\] {
    font-size: 12rem
}

.text-\[14rem\] {
    font-size: 14rem
}

.text-\[15rem\] {
    font-size: 15rem
}

.leading-none {
    --tw-leading: 1;
    line-height: 1
}

.break-words {
    overflow-wrap: break-word
}

.whitespace-nowrap {
    white-space: nowrap
}

.whitespace-pre-wrap {
    white-space: pre-wrap
}

.text-\[\#1FA463\] {
    color: #1fa463
}

.text-\[\#433422\] {
    color: #433422
}

.text-\[\#D6DEEB\],
.text-\[\#d6deeb\] {
    color: #d6deeb
}

.text-transparent {
    color: #0000
}

.capitalize {
    text-transform: capitalize
}

.lowercase {
    text-transform: lowercase
}

.uppercase {
    text-transform: uppercase
}

.italic {
    font-style: italic
}

.line-through {
    text-decoration-line: line-through
}

.underline {
    text-decoration-line: underline
}

.decoration-wavy {
    text-decoration-style: wavy
}

.decoration-2 {
    text-decoration-thickness: 2px
}

.decoration-4 {
    text-decoration-thickness: 4px
}

.underline-offset-2 {
    text-underline-offset: 2px
}

.underline-offset-4 {
    text-underline-offset: 4px
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.opacity-0 {
    opacity: 0
}

.opacity-5 {
    opacity: .05
}

.opacity-10 {
    opacity: .1
}

.opacity-20 {
    opacity: .2
}

.opacity-30 {
    opacity: .3
}

.opacity-50 {
    opacity: .5
}

.opacity-60 {
    opacity: .6
}

.opacity-70 {
    opacity: .7
}

.opacity-75 {
    opacity: .75
}

.opacity-80 {
    opacity: .8
}

.opacity-90 {
    opacity: .9
}

.opacity-95 {
    opacity: .95
}

.opacity-100 {
    opacity: 1
}

.opacity-\[0\.03\] {
    opacity: .03
}

.mix-blend-multiply {
    mix-blend-mode: multiply
}

.mix-blend-overlay {
    mix-blend-mode: overlay
}

.shadow-\[0_-10px_40px_rgba\(0\,0\,0\,0\.2\)\] {
    --tw-shadow: 0 -10px 40px var(--tw-shadow-color, #0003);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.shadow-\[0_0_15px_rgba\(239\,68\,68\,0\.3\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #ef44444d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.shadow-\[0_0_20px_rgba\(79\,70\,229\,0\.5\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #4f46e580);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 8px 30px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.ring,
.ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
}

.blur-\[100px\] {
    --tw-blur: blur(100px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.drop-shadow-\[0_0_30px_rgba\(99\,102\,241\,0\.8\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 30px var(--tw-drop-shadow-color, #6366f1cc));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.drop-shadow-\[0_0_30px_rgba\(139\,92\,246\,0\.8\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 30px var(--tw-drop-shadow-color, #8b5cf6cc));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.drop-shadow-\[0_5px_5px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 5px 5px var(--tw-drop-shadow-color, #00000080));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.drop-shadow-none {
    --tw-drop-shadow: ;
    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, )
}

.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}

.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
}

.transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s
}

.duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s
}

.duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s
}

.duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s
}

.duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s
}

.duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s
}

.ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear
}

.outline-none {
    --tw-outline-style: none;
    outline-style: none
}

.ring-inset {
    --tw-ring-inset: inset
}

.group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 180deg
}

@media (hover:hover) {
    .group-hover\:block:is(:where(.group):hover *) {
        display: block
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .group-hover\:scale-x-100:is(:where(.group):hover *) {
        --tw-scale-x: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .group-hover\:rotate-6:is(:where(.group):hover *) {
        rotate: 6deg
    }

    .group-hover\:rotate-12:is(:where(.group):hover *) {
        rotate: 12deg
    }

    .group-hover\:underline:is(:where(.group):hover *) {
        text-decoration-line: underline
    }

    .group-hover\:opacity-10:is(:where(.group):hover *) {
        opacity: .1
    }

    .group-hover\:opacity-20:is(:where(.group):hover *) {
        opacity: .2
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
        opacity: 1
    }
}

.peer-focus\:ring-4:is(:where(.peer):focus~*) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.peer-focus\:outline-none:is(:where(.peer):focus~*) {
    --tw-outline-style: none;
    outline-style: none
}

.after\:absolute:after {
    content: var(--tw-content);
    position: absolute
}

.after\:top-\[4px\]:after {
    content: var(--tw-content);
    top: 4px
}

.after\:left-\[4px\]:after {
    content: var(--tw-content);
    left: 4px
}

.after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px
}

.after\:border:after {
    content: var(--tw-content);
    border-style: var(--tw-border-style);
    border-width: 1px
}

.after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s)
}

.after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content)
}

.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

@media (hover:hover) {
    .hover\:scale-105:hover {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .hover\:scale-110:hover {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .hover\:rotate-90:hover {
        rotate: 90deg
    }

    .hover\:border-\[\#5865F2\]:hover {
        border-color: #5865f2
    }

    .hover\:bg-\[\#0077b5\]:hover {
        background-color: #0077b5
    }

    .hover\:bg-\[\#5865F2\]:hover {
        background-color: #5865f2
    }

    .hover\:bg-\[\#ffe44d\]:hover {
        background-color: #ffe44d
    }

    .hover\:underline:hover {
        text-decoration-line: underline
    }

    .hover\:opacity-90:hover {
        opacity: .9
    }

    .hover\:opacity-100:hover {
        opacity: 1
    }

    .hover\:shadow-\[0_20px_40px_rgb\(0\,0\,0\,0\.1\)\]:hover {
        --tw-shadow: 0 20px 40px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .hover\:shadow-\[\#FFDD00\]\/30:hover {
        --tw-shadow-color: #ffdd004d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hover\:shadow-\[\#FFDD00\]\/30:hover {
            --tw-shadow-color: color-mix(in oklab, oklab(89.8694% -.0253819 .183924/.3) var(--tw-shadow-alpha), transparent)
        }
    }
}

.focus\:scale-105:focus {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.focus\:border-transparent:focus {
    border-color: #0000
}

.focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.focus\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
}

.focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none
}

.focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
}

.focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px
}

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

.active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.active\:scale-\[0\.98\]:active {
    scale: .98
}

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

.disabled\:opacity-30:disabled {
    opacity: .3
}

.disabled\:opacity-50:disabled {
    opacity: .5
}

.aria-selected\:scale-105[aria-selected=true] {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

@media (prefers-color-scheme:dark) {
    .dark\:opacity-\[0\.05\] {
        opacity: .05
    }

    .dark\:shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.2\)\] {
        --tw-shadow: 0 8px 30px var(--tw-shadow-color, #0003);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
}

@media print {
    .print\:hidden {
        display: none
    }
}

@font-face {
    font-family: Open Dyslexic;
    src: url(../fonts/OpenDyslexic/OpenDyslexic-Regular.otf)format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Open Dyslexic;
    src: url(../fonts/OpenDyslexic/OpenDyslexic-Bold.otf)format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Open Dyslexic;
    src: url(../fonts/OpenDyslexic/OpenDyslexic-Italic.otf)format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

.font-dyslexic {
    font-family: "Open Dyslexic", ui-sans-serif, system-ui, sans-serif !important;
}

.font-comicsans {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}

.announcement-fade {
    animation: announcementFade 0.5s ease-in-out;
}

@keyframes announcementFade {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

html {
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden
}

body {
    background-color: var(--color-base-bg);
    background-image: var(--site-bg-gradient);
    color: var(--color-text-default);
    font-size: var(--site-font-size, 1rem);
    line-height: var(--site-line-height, 1.6);
    letter-spacing: var(--site-letter-spacing, normal);
    word-spacing: var(--site-word-spacing, normal);
    min-height: 100vh;
    font-family: var(--site-font-family, "Outfit"), ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    background-size: cover;
    background-attachment: fixed;
    flex-direction: column;
    transition: background-color .5s, color .3s;
    animation: .5s ease-out forwards pageReveal;
    display: flex;
    overflow-x: hidden
}

.light {
    --color-primary: #4f46e5;
    --color-secondary: #ec4899;
    --color-accent: #06b6d4;
    --color-header-bg: #fffc;
    --color-link: #4338ca;
    --color-base-bg: #f8fafc;
    --color-content-bg: #fff;
    --color-text-default: #0f172a;
    --color-text-secondary: #64748b;
    --site-bg-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    --shadow-soft: 0 10px 40px -10px #00000014;
    --shadow-card: 0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008
}

.dark {
    --color-primary: #818cf8;
    --color-secondary: #f472b6;
    --color-accent: #22d3ee;
    --color-header-bg: #0f172acc;
    --color-base-bg: #0f172a;
    --color-content-bg: #1e293b;
    --color-text-default: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --site-bg-gradient: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    --shadow-soft: 0 10px 40px -10px #00000080;
    --shadow-card: 0 4px 6px -1px #0000004d, 0 2px 4px -1px #0003
}

.high-contrast {
    --color-primary: #ff0;
    --color-secondary: #0ff;
    --color-accent: #f0f;
    --color-header-bg: #000;
    --color-base-bg: #000;
    --color-content-bg: #000;
    --color-text-default: #ff0;
    --color-text-secondary: #fff;
    --site-bg-gradient: none;
    --shadow-soft: none;
    --shadow-card: 0 0 0 2px #ff0
}

.high-contrast a {
    text-decoration: underline;
    color: #0ff !important
}

.sepia {
    --color-primary: #8f5902;
    --color-secondary: #a06703;
    --color-accent: #ce5c00;
    --color-header-bg: #f4ecd8f2;
    --color-base-bg: #f4ecd8;
    --color-content-bg: #fdf6e3;
    --color-text-default: #433422;
    --color-text-secondary: #5c4118;
    --site-bg-gradient: linear-gradient(to bottom, #f4ecd8, #e8dbc3);
    --shadow-soft: 0 4px 6px -1px #8f59021a;
    --shadow-card: 0 10px 15px -3px #8f59021a
}

.midnight {
    --color-primary: #82aaff;
    --color-secondary: #c792ea;
    --color-accent: #89ddff;
    --color-header-bg: #011627e6;
    --color-base-bg: #011627;
    --color-content-bg: #062137;
    --color-text-default: #d6deeb;
    --color-text-secondary: #9aa9bd;
    --site-bg-gradient: linear-gradient(to bottom, #011627, #01101e);
    --shadow-soft: 0 4px 6px -1px #0000004d;
    --shadow-card: 0 10px 15px -3px #00000080
}

.cursor-large,
.cursor-large * {
    cursor: -webkit-image-set(url(https://cdn-icons-png.flaticon.com/512/5759/5759160.png) 2x) 24 24, auto !important
}

.hide-images img,
.hide-images video,
.hide-images .hide-on-no-img {
    opacity: 0 !important;
    visibility: hidden !important
}

.teacher-only {
    display: none
}

.teacher-mode .teacher-only {
    border: 2px dashed var(--color-accent);
    background: #ffe6001a;
    margin: 1rem 0;
    padding: 1rem;
    display: block
}

.focus-mode header,
.focus-mode #announcement-bar,
.focus-mode footer,
.focus-mode .fixed-tools-container {
    display: none !important
}

.focus-mode #main-content {
    margin-top: 2rem
}

#reading-mask {
    pointer-events: none;
    z-index: 50;
    background: #000000b3;
    position: fixed;
    inset: 0
}

#reading-guide {
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    cursor: row-resize;
    pointer-events: none;
    background: #ffffff26;
    width: 100%;
    height: 3rem;
    position: absolute;
    box-shadow: 0 0 0 9999px #000000b3
}

.highlight-links a {
    background-color: var(--color-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: underline !important
}

.highlight-headings h1,
.highlight-headings h2,
.highlight-headings h3,
.highlight-headings h4,
.highlight-headings h5,
.highlight-headings h6 {
    outline: 3px solid var(--color-accent);
    background: #ffffff1a;
    padding: 4px
}

.stop-animations *,
.stop-animations {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important
}

body {
    text-align: var(--site-text-align, left)
}

button,
.btn {
    border-radius: 9999px !important
}

.glass {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #fff9;
    border: 1px solid #ffffff4d;
    box-shadow: 0 4px 30px #0000001a
}

.dark .glass {
    background: #0f172a99;
    border: 1px solid #ffffff0d;
    box-shadow: 0 4px 30px #00000080
}

* {
    border-color: #0000000f
}

.dark * {
    border-color: #ffffff1a
}

#initial-loader {
    background: var(--color-base-bg);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    transition: opacity .5s;
    display: flex;
    position: fixed;
    inset: 0
}

.loader-spinner {
    border: 5px solid var(--color-primary);
    border-bottom-color: #0000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: 1s linear infinite rotation
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes pageReveal {
    to {
        opacity: 1
    }
}

.bg-aurora-glass {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.9), rgba(236, 72, 153, 0.8));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#announcement-bar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar {
    width: 12px
}

::-webkit-scrollbar-track {
    background: var(--color-base-bg)
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border: 3px solid var(--color-base-bg);
    border-radius: 6px
}

.glass-header {
    background: var(--color-header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #ffffff1a
}

.nav-link-animated {
    padding: .5rem 0;
    position: relative
}

.nav-link-animated:after {
    content: "";
    background-color: var(--color-primary);
    width: 0;
    height: 2px;
    transition: all .3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.nav-link-animated:hover:after,
.nav-link-animated.active:after {
    width: 100%
}

.footer-modern {
    background: linear-gradient(to top, var(--color-base-bg), var(--color-content-bg));
    border-top: 1px solid #0000000d
}

.dark .footer-modern {
    border-top: 1px solid #ffffff0d
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-scroll-snap-strictness {
    syntax: "*";
    inherits: false;
    initial-value: proximity
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

/* --- PERSONALITY REFINEMENT --- */
:root {
    --glass-opacity: 0.8;
    --noise-opacity: 0.05;
}

.light {
    --color-primary: #6366f1;
    /* Indigo */
    --color-secondary: #f43f5e;
    /* Rose */
    --color-accent: #10b981;
    /* Emerald */
    --color-base-bg: #f8fafc;
    --color-content-bg: #ffffff;
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark {
    --color-primary: #818cf8;
    --color-secondary: #fb7185;
    --color-accent: #34d399;
    --color-base-bg: #0f172a;
    --color-content-bg: #1e293b;
    --color-header-bg: rgba(15, 23, 42, 0.85);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Personality Utilities */
.mesh-gradient-indigo {
    background-color: var(--color-base-bg);
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0, transparent 50%),
        radial-gradient(at 50% 0%, rgba(244, 63, 94, 0.1) 0, transparent 50%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.1) 0, transparent 50%);
    background-size: 100% 100%;
}

.mesh-gradient-rose {
    background-color: var(--color-base-bg);
    background-image:
        radial-gradient(at 0% 0%, rgba(225, 29, 72, 0.15) 0, transparent 50%),
        radial-gradient(at 50% 0%, rgba(190, 24, 93, 0.1) 0, transparent 50%),
        radial-gradient(at 100% 0%, rgba(251, 113, 133, 0.1) 0, transparent 50%);
}

.noise-filter {
    position: relative;
}

.noise-filter::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--noise-opacity);
    pointer-events: none;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
}

.glass-premium {
    background: var(--color-header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-premium);
}

.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
}

.text-gradient-primary {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Typography Polish */
h1,
h2,
h3,
.font-outfit {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Entrance Animations */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-reveal {
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* --- Phase 3: Interactive Polish --- */


/* Scroll Progress */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 9999;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    width: 0%;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Magnetic Button Utility */
.magnetic-wrap {
    display: inline-block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-base-bg);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--color-primary), var(--color-secondary));
    border-radius: 5px;
    border: 2px solid var(--color-base-bg);
}

/* --- ODYSSEY REDESIGN: Premium Utilities --- */

.odyssey-bg {
    background: radial-gradient(circle at 0% 0%, var(--color-primary) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, var(--color-secondary) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, var(--color-accent) 0%, transparent 100%);
    background-size: 200% 200%;
    animation: odysseyGradient 15s ease infinite;
}

@keyframes odysseyGradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.glass-premium-v2 {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.dark .glass-premium-v2 {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.path-card {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.path-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
}

.path-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
}

.path-card:hover::before {
    transform: translateX(100%);
}

.level-card-v2 {
    border-radius: 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.level-card-v2:hover {
    transform: translateY(-4px);
}

.journey-path-active {
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 20px var(--color-primary);
}

/* Custom Text Gradient */
.text-glow {
    text-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.dark .text-glow {
    text-shadow: 0 0 20px rgba(129, 140, 248, 0.6);
}


/* --- MODAL REDESIGN: Knowledge Portal --- */

.portal-backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px) grayscale(0.2);
    -webkit-backdrop-filter: blur(12px) grayscale(0.2);
}

.doc-modal-content {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.modal-tab-pill {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.modal-tab-pill::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--color-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 99px;
    opacity: 0;
}

.modal-tab-pill.active {
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
}

.modal-tab-pill.active::after {
    width: 60%;
    opacity: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
}

/* Custom Scrollbar for Modal Body */
.custom-modal-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-modal-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-modal-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.dark .custom-modal-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* --- PRINT STYLES: Curriculum Portal --- */
@media print {
    body * {
        visibility: hidden;
    }

    #doc-modal,
    #doc-modal * {
        visibility: visible;
    }

    #doc-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none;
    }

    #modal-container {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: none !important;
        background: white !important;
        color: black !important;
    }

    button,
    i.fas.fa-times,
    .shrink-0 {
        display: none !important;
    }

    #modal-docs {
        display: block !important;
    }

    .modal-tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        page-break-after: auto;
        margin-bottom: 2rem;
    }

    .glass-premium-v2 {
        background: white !important;
        border: 1px solid #eee !important;
        color: black !important;
        backdrop-filter: none !important;
    }
}

/* --- COMPATIBILITY FIXES --- */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.line-clamp-6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.text-transparent {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Premium Refinements */
.glass-shine {
    position: relative;
    overflow: hidden;
}

.glass-shine::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    transition: none;
    pointer-events: none;
}

.glass-shine:hover::after {
    left: 140%;
    transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.noise-grain {
    position: relative;
}

.noise-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* Performance Optimizations */
.will-animate {
    will-change: transform, opacity;
}