:root { --ff-main: 'Roboto Flex', sans-serif; --ff-accent: 'Roboto Flex', sans-serif; --fw-light: 100; --fw-regular: 300; --fw-semi-bold: 400; --fw-bold: 700; --fs-100: 0.625rem; --fs-200: 0.750rem; --fs-300: 0.875rem; --fs-400: 1.000rem; --fs-500: 1.125rem; --fs-600: 1.375rem; --fs-700: 1.750rem; --fs-800: 2.000rem; --fs-900: 2.500rem; --main-color_-5: oklch(0.7 0.9 75 / 1); --sec-color_-5: oklch(0.7 0 195 / 1); --accent-color_-5: oklch(0.6 0.85 315 / 1); --neutral-color_-5: oklch(1 0 0 / 1); --main-color_-4: oklch(0.65 0.85 75 / 1); --sec-color_-4: oklch(0.65 0 195 / 1); --accent-color_-4: oklch(0.57 0.79 315 / 1); --neutral-color_-4: oklch(0.97 0 0 / 1); --main-color_-3: oklch(0.6 0.8 75 / 1); --sec-color_-3: oklch(0.6 0 195 / 1); --accent-color_-3: oklch(0.54 0.73 315 / 1); --neutral-color_-3: oklch(0.94 0 0 / 1); --main-color_-2: oklch(0.55 0.75 75 / 1); --sec-color_-2: oklch(0.55 0.1 195 / 1); --accent-color_-2: oklch(0.51 0.67 315 / 1); --neutral-color_-2: oklch(0.91 0 0 / 1); --main-color_-1: oklch(0.5 0.7 75 / 1); --sec-color_-1: oklch(0.5 0.2 195 / 1); --accent-color_-1: oklch(0.48 0.61 315 / 1); --neutral-color_-1: oklch(0.88 0 0 / 1); --main-color_0: oklch(0.45 0.65 75 / 1); --sec-color_0: oklch(0.45 0.3 195 / 1); --accent-color_0: oklch(0.45 0.55 315 / 1); --neutral-color_0: oklch(0.85 0 0 / 1); --main-color_1: oklch(0.4 0.6 75 / 1); --sec-color_1: oklch(0.4 0.4 195 / 1); --accent-color_1: oklch(0.42 0.49 315 / 1); --neutral-color_1: oklch(0.82 0 0 / 1); --main-color_2: oklch(0.35 0.55 75 / 1); --sec-color_2: oklch(0.35 0.5 195 / 1); --accent-color_2: oklch(0.39 0.43 315 / 1); --neutral-color_2: oklch(0.79 0 0 / 1); --main-color_3: oklch(0.3 0.5 75 / 1); --sec-color_3: oklch(0.3 0.6 195 / 1); --accent-color_3: oklch(0.36 0.37 315 / 1); --neutral-color_3: oklch(0.76 0 0 / 1); --main-color_4: oklch(0.25 0.45 75 / 1); --sec-color_4: oklch(0.25 0.7 195 / 1); --accent-color_4: oklch(0.33 0.31 315 / 1); --neutral-color_4: oklch(0.73 0 0 / 1); --main-color_5: oklch(0.2 0.4 75 / 1); --sec-color_5: oklch(0.2 0.8 195 / 1); --accent-color_5: oklch(0.3 0.25 315 / 1); --neutral-color_5: oklch(0.7 0 0 / 1); interpolate-size: allow-keywords;}@media (prefers-color-scheme: dark) { :root { }}html { color-scheme: light; width: 100%; min-height: 100%; overflow: visible; accent-color: var(--col-accent-400); caret-color: var(--col-accent-400);}html, body { scrollbar-gutter: stable; touch-action: auto; }* { font-family: inherit; min-width: 0; min-height: 0; word-break: break-word;}input, select, textarea { min-width: 0;}html, :has(:target) { scroll-behavior: smooth; scroll-padding-top: 3rem;}body { min-height: 100vh; min-height: 100svh; overflow: hidden; font-family: var(--ff-main); font-weight: var(--fw-regular); font-size: var(--fs-300); line-height: 1.7; background-color: var(--neutral-color_2); color: var(--neutral-color_-5); direction: ltr; writing-mode: lr-tb;}.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); position: absolute; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;}input, select, textarea, button { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit;}h1, h2, h3, h4, h5, h6 { font-family: var(--ff-accent); line-height: 1.1; text-wrap: balance;}p { max-width: var(--chars-per-row, 70ch); text-wrap: pretty;}.accountBoxWrapper { background-color: rgba(30, 30, 30, 0.8);}.accountBoxWrapper > .accountBox { max-width: min(30rem, 100%); background-color: var(--main-color-bg); padding: 1em 1.5em; display: grid; grid-template-columns: auto 1fr auto; gap: 0.25em;}.accountBoxWrapper .title { grid-column: 1 / span 2; font-size: 1.3em; font-weight: bold; margin-bottom: 1em;}.accountBoxWrapper .icon-close { grid-column: 3;}.accountBoxWrapper .text { margin-bottom: 1em; grid-column: 1 / span 3;}.accountBoxWrapper .label { grid-column: 1; margin-right: 1em;}.accountBoxWrapper .label:after { content: ":";}.accountBoxWrapper input { grid-column: 2 / span 2;}.accountBoxWrapper .buttonBox { grid-column: 1 / span 3; margin-top: 1em; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: stretch; align-content: flex-start;}@media (max-width: 700px) { .accountBoxWrapper { background-color: var(--main-color-bg); } .accountBoxWrapper > .accountBox { width: 100%; max-width: 100%; }}.buttonStyle-1 { display: inline-block; transition: color 0.3s ease-out, background-color 0.3s ease-out, opacity 0.3s ease-out; cursor: pointer; background-color: rgba(0, 0, 0, 0.2); padding: 0.75em 1.5em; color: #eee;}.buttonStyle-1:focus,.buttonStyle-1:hover { background-color: rgba(0, 0, 0, 0.4); color: #fff;}.buttonStyle-1:not(.disabled).active,.buttonStyle-1:not(.disabled):active { background-color: rgba(0, 0, 0, 0.6); color: #fff;}.buttonStyle-1.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-2 { display: inline-block; transition: color 0.3s ease-out, background-color 0.3s ease-out, opacity 0.3s ease-out; cursor: pointer; background-color: rgba(255, 255, 255, 0.2); padding: 0.75em 1.5em; color: #eee;}.buttonStyle-2:focus,.buttonStyle-2:hover { background-color: rgba(255, 255, 255, 0.4); color: #fff;}.buttonStyle-2:not(.disabled).active,.buttonStyle-2:not(.disabled):active { background-color: rgba(255, 255, 255, 0.6); color: #fff;}.buttonStyle-2.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-mini { display: inline-block; cursor: pointer; background-color: transparent; border: none; padding: 0 1.5em; color: #eee;}.buttonStyle-mini:focus,.buttonStyle-mini:hover,.buttonStyle-mini:not(.disabled).active,.buttonStyle-mini:not(.disabled):active { color: #fff;}.buttonStyle-mini.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-icon { display: inline-block; cursor: pointer; background-color: transparent; border: none; padding: 0; color: #eee;}.buttonStyle-icon:focus,.buttonStyle-icon:hover,.buttonStyle-icon:not(.disabled).active,.buttonStyle-icon:not(.disabled):active { color: #fff;}.buttonStyle-icon.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-important { display: inline-block; transition: color 0.3s ease-out, background-color 0.3s ease-out, opacity 0.3s ease-out; cursor: pointer; background-color: var(--main-color_3); padding: 0.75em 1.5em; color: #eee;}.buttonStyle-important:focus,.buttonStyle-important:hover { background-color: var(--main-color_0); color: #fff;}.buttonStyle-important:not(.disabled).active,.buttonStyle-important:not(.disabled):active { transition: color 0.05s ease-out, background-color 0.05s ease-out, opacity 0.05s ease-out; background-color: var(--main-color_-2); color: #fff;}.buttonStyle-important.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.auto-grid { --min-column-size: 300px; --gap: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min-width), 100%), 1fr)); gap: var(--gap);}.auto-flex { --min-column-size: 200px; --gap: 1rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; gap: var(--gap);}.auto-flex > * { flex: 1 1 var(--min-width);}.grid-stack { display: grid; grid-template-areas: "stack";}.grid-stack > * { grid-area: stack;}@supports (animation-timeline: view()) { .effect_fade-in { transform: scale(0.9); opacity: 0; animation: effect_fade-in ease-in-out forwards; animation-timeline: view(); animation-range: entry 10vh; } .effect_fade-out { transform: scale(1); opacity: 1; animation: effect_fade-out ease-in-out forwards; animation-timeline: view(); animation-range: exit -10vh; }}@keyframes effect_fade-in { 0% { transform: scale(0.9); opacity: 0; } 70%, 100% { transform: scale(1); opacity: 1; }}@keyframes effect_fade-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; }}.feedbackWrapper { margin-top: 2rem;}.feedbackWrapper > :not(:last-child) { margin-bottom: 0.5rem;}.feedback { padding: 0.25em 1.5em; position: relative; background-color: rgba(25, 25, 25, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.3); z-index: 1; font-weight: 400; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; align-content: flex-start;}.feedback > * { flex: 0 1 auto; line-height: 1.25;}.feedback > .message {}.feedback > .feedbackIcon { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75)); margin-right: 0.67rem;}.feedback.feedback-success > .feedbackIcon { color: rgb(50, 255, 50); border-color: rgba(50, 255, 50, 0.5);}.feedback.feedback-error > .feedbackIcon { color: rgb(255, 0, 0); border-color: rgba(255, 0, 0, 0.5);}.feedback.feedback-info > .feedbackIcon { color: rgb(50, 200, 255); border-color: rgba(50, 200, 255, 0.5);}@keyframes feedbackShake { 0% { transform: translateX(0); } 25% { transform: translateX(-0.5em); } 75% { transform: translateX(0.5em); } 100% { transform: translateX(0); }}.feedback.shake { animation: feedbackShake 0.25s linear infinite;}@property --glow-card-border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true;}.glow-card { --glow-card-border-angle: 0deg; --border-width: 0.3rem; --blur-size: 3.5rem; --color-1: #f00; --color-2: #707; --color-3: #00f; background-color: #333; color: #eee; padding: 0.5em 0.75em; border-radius: 0.2rem; position: relative;}.glow-card::before,.glow-card::after { content: ""; position: absolute; inset: calc(var(--border-width) * -1); z-index: -1; border-radius: inherit; background: conic-gradient( from var(--glow-card-border-angle), var(--color-1), var(--color-2), var(--color-3), var(--color-2), var(--color-1) ); animation: glow-card-border-rotation 22s linear infinite;}.glow-card::after { filter: blur(var(--blur-size));}@keyframes glow-card-border-rotation { 0% { --glow-card-border-angle: 0deg; } 100% { --glow-card-border-angle: 360deg; }}.oneRowFormBox { --arrow-size: 0.8em; position: relative; text-align: center;}.oneRowFormBox > * { clip-path: polygon(0% 0%, calc(100% - var(--arrow-size)) 0%, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0% 100%, var(--arrow-size) 50%); padding-left: calc(0.75em + var(--arrow-size));}.oneRowFormBox > * { margin-left: calc(var(--arrow-size) * -0.5); margin-right: calc(var(--arrow-size) * -0.5);}.oneRowFormBox:focus-within::before,.oneRowFormBox:focus-within::after { content: ""; position: absolute; left: calc(var(--arrow-size) * -0.5 - 3px); right: calc(var(--arrow-size) * 0.5 + 2px); border: 0 solid rgba(255, 255, 255, 0.4);}.oneRowFormBox:focus-within::before { top: -4px; border-top-width: 1px;}.oneRowFormBox:focus-within::after { bottom: -4px; border-bottom-width: 1px;}@media all and (max-width: 700px) { .oneRowFormBox {  margin-left: 1rem; margin-right: 1rem; } .oneRowFormBox > * { width: 100%;  }}.inputBox { display: inline-flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; background-color: #eee; padding: 0.75em 1.5em;}.inputBox:focus-within { outline: 2px solid var(--main-color-less); outline-offset: 2px;}.inputBox > * { color: #aaa;}.inputBox > input,.inputBox > select,.inputBox > textarea { background-color: transparent; border: none; margin: 0; padding: 0; outline: none; width: auto;}.mask-reveal { overflow: hidden;}.mask-reveal > * { transition: transform 1.7s cubic-bezier(0.165, 0.84, 0.44, 1); transform: translateX(0%) translateY(0%);}.mask-reveal.mask-reveal-plus-x:not(.show) > * { transform: translateX(100%) translateY(0%); }.mask-reveal.mask-reveal-minus-x:not(.show) > * { transform: translateX(-100%) translateY(0%); }.mask-reveal.mask-reveal-plus-y:not(.show) > * { transform: translateX(0%) translateY(100%); }.mask-reveal.mask-reveal-minus-y:not(.show) > * { transform: translateX(0%) translateY(-100%); }.mask-reveal.mask-reveal-plus-x.mask-reveal-plus-y:not(.show) > * { transform: translateX(100%) translateY(100%); }.mask-reveal.mask-reveal-plus-x.mask-reveal-minus-y:not(.show) > * { transform: translateX(100%) translateY(-100%); }.mask-reveal.mask-reveal-minus-x.mask-reveal-minus-y:not(.show) > * { transform: translateX(-100%) translateY(-100%); }.mask-reveal.mask-reveal-minus-x.mask-reveal-plus-y:not(.show) > * { transform: translateX(-100%) translateY(100%); }.scrollbarStyle-1 { --scrollbar-size: 10px; --scrollbar-foreground: #999; --scrollbar-background: #333; scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); scrollbar-width: var(--scrollbar-size);}.scrollbarStyle-1::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size);}.scrollbarStyle-1::-webkit-scrollbar-thumb { background: var(--scrollbar-foreground); box-shadow: 0 0 calc(var(--scrollbar-size) * 0.6) rgba(0, 0, 0, 0.3);}.scrollbarStyle-1::-webkit-scrollbar-track { background: var(--scrollbar-background); border-radius: var(--scrollbar-size); box-shadow: 0 0 calc(var(--scrollbar-size) * 0.6) rgba(0, 0, 0, 0.3);}.scrollbarStyle-1::-webkit-scrollbar-corner { background: var(--scrollbar-background);}.standardTabBox { align-self: stretch; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; padding: 0 18px; border-bottom: 2px solid var(--clr-main-400, #ffff); position: relative; overflow: hidden;}.standardTabBox > .standardTab { transition: background-color 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out; padding: 5px 10px 10px 10px; margin: 5px 1px -5px 0; background-color: rgba(0, 0, 0, 0.45); cursor: pointer; transform: scale(1, 1) translateY(0px); transform-origin: 50% 100%; will-change: transform;}.standardTabBox > .standardTab:focus-visible,.standardTabBox > .standardTab:hover { background-color: var(--clr-main-400, #fff7);}.standardTabBox > .standardTab:active,.standardTabBox > .standardTab.active { transition: background-color 0.05s ease-out, color 0.05s ease-out, transform 0.3s ease-out; background-color: var(--clr-main-400, #ffff); z-index: 1; color: #fff; text-shadow: 0 0 2px #fff, 0 0 3px #000; transform: scale(1, 1) translateY(-3px);}.standardTabContents-hidden { display: none;}.do-overlay-image { border-image: fill 0 linear-gradient(#0003, #000);}.do-scroll-x-snap { scroll-snap-type: x mandatory;}.do-scroll-y-snap { scroll-snap-type: y mandatory;}.do-scroll-x-snap > *,.do-scroll-y-snap > * { scroll-margin: 5rem; scroll-snap-align: start; scroll-snap-stop: always;}