:root, :host {--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;--color-red-500: oklch(63.7% 0.237 25.331);--color-gray-950: oklch(13% 0.028 261.692);--scrollbarBG: #00000000;--thumbBG: #90A4AE;--color-primary: #3b4247;--color-secondary: #1f2328;--accent-color: #234567;--text-xs: 0.75rem;--text-xs--line-height: calc(1 / 0.75);--text-sm: 0.875rem;--text-sm--line-height: calc(1.25 / 0.875);--text-lg: 1.125rem;--text-lg--line-height: calc(1.4 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--text-2xl: 1.5rem;--text-2xl--line-height: calc(2 / 1.5);--text-3xl: 1.875rem;--text-3xl--line-height: calc(2.25 / 1.875);--text-4xl: 3rem;--text-4xl--line-height: calc(3 / 2);--default-font-family: Roboto;--default-mono-font-family: var(--font-mono);--spacing: 0.5rem;--round: 0.2rem;}
*, ::after, ::before, ::backdrop, ::file-selector-button {box-sizing: border-box;margin: 0;padding: 0;border: 0 solid;}
html, :host {line-height: 1.5;-webkit-text-size-adjust: 100%;tab-size: 4;font-family: Roboto, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';font-feature-settings: normal;font-variation-settings: normal;-webkit-tap-highlight-color: transparent;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
hr {height: 0;color: inherit;border-top-width: 1px;}
abbr:where([title]) {-webkit-text-decoration: underline dotted;text-decoration: underline dotted;}
h1, h2, h3, h4, h5, h6 {font-size: inherit;font-weight: inherit;}
a {color: inherit;-webkit-text-decoration: inherit;text-decoration: inherit;}
b, strong {font-weight: bolder;}
code, kbd, samp, pre {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-feature-settings: normal;font-variation-settings: normal;font-size: 1em;}
small {font-size: 80%;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
table {text-indent: 0;border-color: inherit;border-collapse: collapse;}
:-moz-focusring {outline: auto;}
progress {vertical-align: baseline;}
summary {display: list-item;}
ol, ul, menu {list-style: none;}
img, svg, video, canvas, audio, iframe, embed, object {display: block;vertical-align: middle;}
img, video {max-width: 100%;height: auto;}
button, input, select, optgroup, textarea, ::file-selector-button {font: inherit;font-feature-settings: inherit;font-variation-settings: inherit;letter-spacing: inherit;color: inherit;border-radius: 0;background-color: transparent;opacity: 1;}
:where(select:is([multiple], [size])) optgroup {font-weight: bolder;}
:where(select:is([multiple], [size])) optgroup option {padding-inline-start: 20px;}
::file-selector-button {margin-inline-end: 4px;}
::placeholder {opacity: 1;}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {  ::placeholder {color: currentcolor;@supports (color: color-mix(in lab, red, red)) {color: color-mix(in oklab, currentcolor 50%, transparent);}}}
textarea {resize: vertical;}
::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-date-and-time-value {min-height: 1lh;text-align: inherit;}
::-webkit-datetime-edit {display: inline-flex;}
::-webkit-datetime-edit-fields-wrapper {padding: 0;}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {padding-block: 0;}
::-webkit-calendar-picker-indicator {line-height: 1;}
:-moz-ui-invalid {box-shadow: none;}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {appearance: button;}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {height: auto;}
[hidden]:where(:not([hidden='until-found'])) {display: none !important;}
.antialiased {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.scroll::-webkit-scrollbar {width: 11px;}
.scroll::-webkit-scrollbar-track {background: var(--scrollbarBG);}
.scroll::-webkit-scrollbar-thumb {background-color: var(--thumbBG) ;border-radius: 6px;border: 3px solid var(--scrollbarBG);}
.scroll {overflow-y: auto;scrollbar-width: thin;scrollbar-color: var(--thumbBG) var(--scrollbarBG);}
.flex {display: flex;}
.row {display: flex;flex-direction: row;}
.rowr {display: flex;flex-direction: row-reverse;}
.col {display: flex;flex-direction: column;}
.colr {display: flex;flex-direction: column-reverse;}
.icenter {align-items: center;}
.istart {align-items: start;}
.iend {align-items: end;}
.jstretch {justify-content: stretch;}
.jstart {justify-content: start;}
.jcenter {justify-content: center;}
.jend {justify-content: end;}
.grow {flex-grow: 1;}
.selfstart {align-self: start;}
.selfcenter {align-self: center;}
.selfend {align-self: end;}
.mauto {margin: auto;}
input, textarea {outline: none;}
textarea {field-sizing: content;}
@keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }
.spin {animation: spin 4s linear infinite;color: #495f72;}
.cur-point {cursor: pointer;}
.fit {width: fit-content;height: fit-content;}
.cur-auto {cursor: auto;}
.text-white {color: white;}
.text-black {color: black;}
.mt1 {margin-top: var(--spacing);}
.mt2 {margin-top: calc(var(--spacing)* 2);}
.mt3 {margin-top: calc(var(--spacing)* 3);}
.mt4 {margin-top: calc(var(--spacing)* 4);}
.hide {display: none}
.p1 {padding: calc(var(--spacing)* 1);}
.p2 {padding: calc(var(--spacing)* 2);}
.p3 {padding: calc(var(--spacing)* 3);}
.p4 {padding: calc(var(--spacing)* 4);}
.ph1 {padding-left: calc(var(--spacing)* 1);padding-right: calc(var(--spacing)* 1);}
.ph2 {padding-left: calc(var(--spacing)* 2);padding-right: calc(var(--spacing)* 1);}
.ph3 {padding-left: calc(var(--spacing)* 3);padding-right: calc(var(--spacing)* 1);}
.ph4 {padding-left: calc(var(--spacing)* 4);padding-right: calc(var(--spacing)* 1);}
.b1 { border: solid 1px;}
.b2 {border: solid 2px;}
.b3 {border: solid 3px;}
.b4 {border: solid 4px;}
.vh100 { height: 100vh;}
.vw100 { width: 100vw; }
.wfull {width: 100%;}
.hfull {height: 100%; }
.w0 {width: 0px; overflow: hidden; }
.w1 {width: calc(var(--spacing)* 3);}
.w2 {width: calc(var(--spacing)* 5);}
.w3 {width: calc(var(--spacing)* 7);}
.w4 {width: calc(var(--spacing)* 9);}
.w5 {width: calc(var(--spacing)* 11);}
.w6 {width: calc(var(--spacing)* 13);}
.w7 {width: calc(var(--spacing)* 15);}
.w8 {width: calc(var(--spacing)* 17);}
.w9 {width: calc(var(--spacing)* 19);}
.w10 {width: calc(var(--spacing)* 21);}
.w11 {width: calc(var(--spacing)* 23);}
.w12 {width: calc(var(--spacing)* 25);}
.w13 {width: calc(var(--spacing)* 27);}
.w14 {width: calc(var(--spacing)* 29);}
.w15 {width: calc(var(--spacing)* 31);}
.w16 {width: calc(var(--spacing)* 33);}
.w17 {width: calc(var(--spacing)* 35);}
.w18 {width: calc(var(--spacing)* 37);}
.w19 {width: calc(var(--spacing)* 39);}
.w20 {width: calc(var(--spacing)* 41);}
.w21 {width: calc(var(--spacing)* 43);}
.w22 {width: calc(var(--spacing)* 45);}
.w23 {width: calc(var(--spacing)* 47);}
.w24 {width: calc(var(--spacing)* 49);}
.w25 {width: calc(var(--spacing)* 51);}
.w26 {width: calc(var(--spacing)* 53);}
.w27 {width: calc(var(--spacing)* 55);}
.w28 {width: calc(var(--spacing)* 57);}
.mw1 {max-width: calc(var(--spacing)* 8);}
.mw2 {max-width: calc(var(--spacing)* 16);}
.mw3 {max-width: calc(var(--spacing)* 24);}
.mw4 {max-width: calc(var(--spacing)* 32);}
.mw5 {max-width: calc(var(--spacing)* 40);}
.mw6 {max-width: calc(var(--spacing)* 48);}
.mw7 {max-width: calc(var(--spacing)* 56);}
.mw8 {max-width: calc(var(--spacing)* 64);}
.mw9 {max-width: calc(var(--spacing)* 72);}
.mw10 {max-width: calc(var(--spacing)* 80);}
.ht1 {height: calc(var(--spacing)* 3);}
.ht2 {height: calc(var(--spacing)* 5);}
.ht3 {height: calc(var(--spacing)* 7);}
.ht4 {height: calc(var(--spacing)* 9);}
.ht5 {height: calc(var(--spacing)* 11);}
.ht6 {height: calc(var(--spacing)* 13);}
.ht7 {height: calc(var(--spacing)* 15);}
.ht8 {height: calc(var(--spacing)* 17);}
.ht9 {height: calc(var(--spacing)* 19);}
.ht10 {height: calc(var(--spacing)* 21);}
.g1 {gap: var(--spacing);}
.g2 {gap: calc(var(--spacing)* 2);}
.g3 {gap: calc(var(--spacing)* 3);}
.g4 {gap: calc(var(--spacing)* 4);}
.round {border-radius: 50%;}
.round1  { border-radius: var(--round); }
.round2  { border-radius: calc(var(--round)*2); }
.round3  { border-radius: calc(var(--round)*3); }
.round4  { border-radius: calc(var(--round)*4); }
.round5  { border-radius: calc(var(--round)*5); }
.round6  { border-radius: calc(var(--round)*6); }
.round7  { border-radius: calc(var(--round)*7); }
.bg-black {background-color: black;}
.bg-white {background-color: white;}
.bc-primary { border-color: var(--color-primary);}
.bc-secondary { border-color: var(--color-secondary);}
.bc-accent { border-color: var(--accent-color);}
.bg-primary { background-color: var(--color-primary);}
.bg-secondary { background-color: var(--color-secondary);}
.bg-accent { background-color: var(--accent-color);}
.hover-bg-primary:hover{ background-color: var(--color-primary);}
.hover-bg-secondary:hover{ background-color: var(--color-secondary);}
.hover-bg-accent:hover{ background-color: var(--accent-color);}
.h1 {font-size: var(--text-3xl); line-height: var(--text-3xl--line-height);}
.h2 {font-size: var(--text-2xl); line-height: var(--text-2xl--line-height);}
.h3 {font-size: var(--text-xl); line-height: var(--text-xl--line-height);}
.h4 {font-size: var(--text-lg); line-height: var(--text-lg--line-height);}
.h5 {font-size: var(--text-sm); line-height: var(--text-sm--line-height);}
.h6 {font-size: var(--text-xs); line-height: var(--text-xs--line-height);}
.h0 {font-size: var(--text-4xl); line-height: var(--text-4xl--line-height);}
.bold {font-weight: bold;}
.btn { transition: all 0.2s ease-in-out; cursor: pointer; display: block;}
.op1 {filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;}
.op2 {filter: alpha(opacity=90);-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;}
.op3 {filter: alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.op4 {filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;opacity: 0.7;}
.op5 {filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;}
.opout8:hover {filter: alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.opout7:hover {filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;opacity: 0.7;}
.opout6:hover {filter: alpha(opacity=60);-moz-opacity: 0.6;-khtml-opacity: 0.6;opacity: 0.6;}
.opout5:hover {filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;}
@media (min-width: 768px) {
    .tab-flex {display: flex;}
    .tab-block {display: block;}
    .tab-row { flex-direction: row;}
    .tab-col { flex-direction: column; }
    .tab-rowr { flex-direction: row-reverse;}
    .tab-colr { flex-direction: column-reverse; }
    .tab-h1 {font-size: var(--text-3xl); line-height: var(--text-3xl--line-height);}
    .tab-h2 {font-size: var(--text-2xl); line-height: var(--text-2xl--line-height);}
    .tab-h3 {font-size: var(--text-xl); line-height: var(--text-xl--line-height);}
    .tab-h4 {font-size: var(--text-lg); line-height: var(--text-lg--line-height);}
    .tab-h5 {font-size: var(--text-sm); line-height: var(--text-sm--line-height);}
    .tab-h6 {font-size: var(--text-xs); line-height: var(--text-xs--line-height);}
    .tab-h0 {font-size: var(--text-4xl); line-height: var(--text-4xl--line-height);}
    .tab-g1 {gap: var(--spacing);}
    .tab-g2 {gap: calc(var(--spacing)* 2);}
    .tab-g3 {gap: calc(var(--spacing)* 3);}
    .tab-g4 {gap: calc(var(--spacing)* 4);}
    .tab-hauto {height: auto;}
    .tab-w5 {width: calc(var(--spacing)* 11);}
    .tab-w10 {width: calc(var(--spacing)* 21);}
    .tab-w15 {width: calc(var(--spacing)* 31);}
    .tab-w20 {width: calc(var(--spacing)* 41);}
    .tab-w25 {width: calc(var(--spacing)* 51);}
    .tab-hide {display: none;}
}
@media (min-width: 1200px) {
    .desc-flex {display: flex;}
    .desc-block {display: block;}
    .desc-row { flex-direction: row;}
    .desk-col { flex-direction: column;}
    .desc-rowr { flex-direction: row-reverse;}
    .desk-colr { flex-direction: column-reverse;}
    .desk-h1 {font-size: var(--text-3xl); line-height: var(--text-3xl--line-height);}
    .desk-h2 {font-size: var(--text-2xl); line-height: var(--text-2xl--line-height);}
    .desk-h3 {font-size: var(--text-xl); line-height: var(--text-xl--line-height);}
    .desk-h4 {font-size: var(--text-lg); line-height: var(--text-lg--line-height);}
    .desk-h5 {font-size: var(--text-sm); line-height: var(--text-sm--line-height);}
    .desk-h6 {font-size: var(--text-xs); line-height: var(--text-xs--line-height);}
    .desk-h0 {font-size: var(--text-4xl); line-height: var(--text-4xl--line-height);}
    .desk-g1 {gap: var(--spacing);}
    .desk-g2 {gap: calc(var(--spacing)* 2);}
    .desk-g3 {gap: calc(var(--spacing)* 3);}
    .desk-g4 {gap: calc(var(--spacing)* 4);}
    .desk-hide {display: none;}
}