:root { --ff-main: 'Poppins', sans-serif; --ff-accent: 'Poppins', 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;}@media (prefers-color-scheme: dark) { :root { }}html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 3rem; width: 100%; min-height: 100%; overflow: visible;}html, body { scrollbar-gutter: stable; touch-action: auto; }* { font-family: inherit;}body { min-height: 100vh; min-height: 100svh; overflow: hidden; overflow-y: scroll; font-family: var(--ff-main); font-weight: var(--fw-regular); font-size: var(--fs-300); line-height: 1.7; --main-color_-5: hsla(175.16, 54%, 67%, 1); --main-color_-4: hsla(175.16, 52%, 62%, 1); --main-color_-3: hsla(175.16, 50%, 57%, 1); --main-color_-2: hsla(175.16, 48%, 52%, 1); --main-color_-1: hsla(175.16, 46%, 47%, 1); --main-color_0: hsla(175.16, 44%, 42%, 1); --main-color_1: hsla(175.16, 42%, 37%, 1); --main-color_2: hsla(175.16, 40%, 32%, 1); --main-color_3: hsla(175.16, 38%, 27%, 1); --main-color_4: hsla(175.16, 36%, 22%, 1); --main-color_5: hsla(175.16, 34%, 17%, 1); --overlayFillerBg: hsla(0, 0%, 0%, 0.75); --overlayContentBg: hsla(0, 0%, 10%, 0.9); background-color: hsla(0, 0%, 4%, 1); color: hsla(0, 0%, 76%, 1);}@media (max-width: 1299px) { html.no-scroll-ghostspeeds { overflow: hidden; overflow-y: hidden; scrollbar-gutter: auto; }}html.no-scroll,html.no-scroll body { overflow: hidden; overflow-y: hidden; scrollbar-gutter: auto;}.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;}.buttonStyle-1 { 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.3); padding: 0.75em 1.5em; color: #eee; border: 1px solid transparent; text-decoration: none;}.buttonStyle-1:focus,.buttonStyle-1:hover { background-color: rgba(0, 0, 0, 0.4); color: #fff;}.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-1.active { background-color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.25); text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.45);}.headerMenu .buttonStyle-1.active { border-color: transparent; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: 3px;}.buttonStyle-2 { 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.15); padding: 0.75em 1.5em; color: #eee; border: 1px solid transparent; text-decoration: none;}.buttonStyle-2:focus,.buttonStyle-2:hover { background-color: rgba(255, 255, 255, 0.4); color: #fff;}.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-2.active { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.25); text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.5);}.buttonStyle-mini { cursor: pointer; background-color: transparent; border: none; padding: 0 1.5em; color: #eee;}.buttonStyle-mini:focus,.buttonStyle-mini:hover,.buttonStyle-mini:not(.disabled):active { color: #fff;}.buttonStyle-mini.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-1.small,.buttonStyle-2.small,.buttonStyle-mini.small { font-size: 0.7rem; line-height: 1.35; padding: 0.25em 0.5em;}.buttonStyle-1.small:not(:hover),.buttonStyle-2.small:not(:hover),.buttonStyle-mini.small:not(:hover) { opacity: 0.6;}main.contentBox { background: linear-gradient(75deg, #060606, #0a0a0a, #161616), url('/img/linebg004.webp'); background-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; background-position: center center; padding-bottom: 3rem; }main.contentBox h1 { font-size: var(--fs-700); color: rgba(255, 255, 255, 0.75); display: block; padding: 1em 0; margin: 0 auto; position: relative; flex: 1 1 100%; width: 100%; text-align: center;}main.contentBox h1::after { content: ""; position: absolute; bottom: 0.5em; left: 0; right: 0; width: 5rem; margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}section.standardContentBox { width: 50rem; max-width: 90vw; max-width: calc(100vw - 3rem); margin: 0 auto;}section.standardContentBox h2 { font-size: var(--fs-600);}section.standardContentBox > :not(:first-child) { margin-top: 2em;}@media (max-width: 800px) { main.contentBox { background: linear-gradient(75deg, #060606, #0a0a0a, #161616); background-blend-mode: initial; }}.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);}.feedback { padding: 0.85em 1.5em 0.8em 3.75em; position: relative; background-color: rgba(255, 255, 255, 0.25); border-radius: 1em; box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.3); z-index: 1; font-weight: 400;}.feedback > .feedback-icon { position: absolute; left: 1em; border: 2px solid transparent; border-radius: 100vmax; width: 2rem; height: 2rem; line-height: 1; transform: translateY(-20%); color: #fff;  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75)); display: flex; justify-content: center; align-items: center; align-content: center;}.feedback.feedback-success > .feedback-icon { color: rgb(50, 255, 50); border-color: rgba(50, 255, 50, 0.5);}.feedback.feedback-error > .feedback-icon { color: rgb(255, 0, 0); border-color: rgba(255, 0, 0, 0.5);}.feedback.feedback-info > .feedback-icon { 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;}.footerBox { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; align-content: flex-start; gap: 1rem; padding: 2rem; background-color: rgba(0, 0, 0, 0.75);}.footerBox > * { flex: 0 1 auto;}.footerBox .menuEntries { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; align-content: flex-start; gap: 1rem;}.footerBox .menuEntries { flex: 0 1 auto;}.lineOfSight_infoBox { margin-top: 2rem; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; gap: 1em; padding: 0.25rem 0.35rem; background-color: rgba(0, 0, 0, 0.25);}.lineOfSight_infoBox > * { flex: 0 1 auto;}.lineOfSight_label { }.lineOfSight_infoText { font-weight: bold;}.lineOfSight_label::after { content: ":";}.lineOfSight_infoBox.is-yes > .lineOfSight_infoText { color: hsl(350deg, 100%, 50%); font-size: 1.2em;}.lineOfSight_infoBox.is-no > .lineOfSight_infoText { color: hsl(150deg, 100%, 50%);}.lineOfSight_infoBox.is-mimic > .lineOfSight_infoText { color: hsl(310deg, 100%, 70%);}.generalHintsTitle { margin: 4rem 0 1rem; padding: 0.25rem 0; background-color: rgba(0, 0, 0, 0.25); text-align: center; font-weight: bold; font-size: 1.2em;}.generalHintsBox { padding-left: 2rem;}.huntTriggerBox { margin-top: 2rem; padding-left: 2rem;}.generalHintsBox > .generalHint,.huntTriggerBox > .huntTrigger { list-style: disc; line-height: 1.2; padding-right: 1em;}.generalHintsBox > .generalHint:not(:first-child),.huntTriggerBox > .huntTrigger:not(:first-child) { margin-top: 0.6rem;}.generalHint .hunt { color: hsl(0deg, 100%, 50%); font-weight: 500; }.sanityValueBox { display: inline-block; text-align: center; min-width: 1.75em;}.extremelyEarlyHunter { color: hsl(350deg, 100%, 40%); text-shadow: 0 0 0.5rem hsl(350deg, 100%, 50%), 0 0 2px #000, 0 0 2px #000, 0 0 1px #000;}.earlyHunter { color: hsl(350deg, 100%, 60%);}.normalHunter { color: hsl(50deg, 100%, 60%);}.lateHunter { color: hsl(150deg, 100%, 60%);}.randomizerBox {}.randomizerBox > .randomizerResult { display: inline-block;}.randomizerBox > .randomizerPool { display: none;}.ghostGridWrapper { display: flex; justify-content: center; align-items: flex-start; position: sticky; top: 2rem;}.ghostGrid { flex: 0 1 auto; display: grid; margin: 0 auto; grid-template-columns: repeat(3, auto); font-family: 'Lazy Dog'; font-size: var(--fs-700); line-height: 1.2; text-align: center;}.ghostGrid > .ghostEntry { transition: background-color 0.2s ease-out, border 0.2s ease-out; padding: 0.25em 0.75em; cursor: pointer; position: relative; border: 1px solid transparent; color: #fff; background-color: rgba(255, 255, 255, 0); text-decoration: none; font-style: italic;}.ghostGrid > .ghostEntry:hover { background-color: rgba(255, 255, 255, 0.1);}.ghostGrid > .ghostEntry:active { transition-duration: 0s; background-color: rgba(255, 255, 255, 0.25);}.ghostGrid > .ghostEntry.active { background-color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.45);}.dynamicGhostMedia { display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: stretch; align-content: flex-start;}.dynamicGhostMedia > h3 { flex: 1 1 100%; margin: 4rem 0 1rem; padding: 0.25rem 0; background-color: rgba(0, 0, 0, 0.25); text-align: center; font-weight: bold; font-size: 1.2em;}.dynamicGhostMedia > .mediaEntry { flex: 0 1 18rem; aspect-ratio: 16 / 9; margin: 0 0 1rem 1rem; position: relative; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center; transition: transform 0.7s ease-out, filter 0.7s ease-out, box-shadow 0.7s ease-out; transform: scale(0.95, 0.95); filter: brightness(1); will-change: transform; backface-visibility: hidden; box-shadow: 0 0 0rem rgba(0, 0, 0, 0.3); text-decoration: none; line-height: 1.2; overflow: hidden; color: #fff; text-shadow: 0 0 0.25rem rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1);}.dynamicGhostMedia > .mediaEntry:focus,.dynamicGhostMedia > .mediaEntry:hover { transform: scale(1, 1); filter: brightness(1.2); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);}.dynamicGhostMedia > .mediaEntry > .innerMediaDetails { transition: opacity 0.7s ease-out, background-color 0.7s ease-out, box-shadow 0.7s ease-out, backdrop-filter 0.7s ease-out, padding 0.3s ease-in; flex: 0 1 auto; align-self: stretch; padding: 0.4rem 0; text-align: center; backdrop-filter: blur(8px); opacity: 1;  background: linear-gradient(124deg, rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.4)); }.dynamicGhostMedia > .mediaEntry:focus > .innerMediaDetails,.dynamicGhostMedia > .mediaEntry:hover > .innerMediaDetails { padding: 0.2rem 0; backdrop-filter: blur(5px);  }.dynamicGhostMedia > .mediaEntry .piston { transition: flex 1s ease-out; flex: 1 1 0%;}.dynamicGhostMedia > .mediaEntry .piston-bottom { flex: 3 1 0%;}.dynamicGhostMedia > .mediaEntry:focus .piston-top,.dynamicGhostMedia > .mediaEntry:hover .piston-top { flex: 5 1 100%;}.dynamicGhostMedia > .mediaEntry:focus .piston-bottom,.dynamicGhostMedia > .mediaEntry:hover .piston-bottom { flex: 0 1 0%;}.dynamicGhostMedia > .mediaEntry .mediaLanguage { position: absolute; bottom: 0.1875rem; right: 0.4rem;}.dynamicGhostMedia > .mediaEntry .mediaDescription { color: var(--main-color_-2, #fff); font-weight: 400; margin-bottom: 0.5rem;}.ghostOverlays { z-index: 10; opacity: 1; max-height: 100%; overflow: hidden; overflow-y: scroll; position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; background-color: var(--overlayFillerBg); display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; align-content: flex-start; padding-block: 20vh;}.ghostOverlays:not(.has-active) { display: none; }.ghostOverlays.has-active {}.ghostOverlays > .ghostEntry:not(.active) { display: none;}.ghostOverlays .ghostEntry { flex: 0 1 auto; width: 30rem; width: min(40rem, 90vw); width: min(40rem, 90svw); min-height: 30vh; display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; align-content: flex-start; border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--overlayContentBg);}.ghostOverlays .ghostEntry > * { flex: 1 1 auto;}.ghostOverlays .ghostEntry .topLine { flex: 1 1 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; align-content: flex-start;}.ghostOverlays .ghostEntry .topLine > * { flex: 0 1 auto;}.ghostOverlays .ghostEntry h2 { padding: 1rem 1rem; font-size: var(--fs-600);}.ghostOverlays .ghostEntry .closeButtonBox { display: flex; justify-content: flex-end; padding: 0.5rem;}.ghostOverlays .ghostEntry .closeButtonBox > button { flex: 0 1 auto; padding: 0.33em;}.ghostOverlays .ghostDetails { display: none;}.ghostOverlays .speedSimulator { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; align-content: center;}.ghostOverlays .speedSimulator > * { flex: 0 0 auto;}.ghostOverlays .speedSimulator .playerButtons { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; align-content: flex-start; gap: 0.25rem 0.5rem; margin-left: 1rem;}.ghostOverlays .speedSimulator .playerButtons > * { flex: 0 1 auto; padding: 0.5em;}.ghostOverlays .speedSimulator .playerButtons > .currentBpm { flex: 0 0 6rem; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.25rem 0.25rem; display: flex; justify-content: center; align-items: center; text-align: center; min-width: 3em;}.ghostOverlays .speedSimulator .playerButtons > .newLine { flex: 1 1 100%; padding: 0;}.ghostOverlays .speedSimulator .playerButtons > .volumeBox { padding: 0; margin-left: 1rem; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; align-content: flex-start;}.ghostOverlays .speedSimulator .playerButtons > .volumeBox > .volumeIcon { flex: 0 1 auto; padding: 0;}.ghostOverlays .speedSimulator .playerButtons > .volumeBox > .volumeInput { flex: 0 0 8rem;}.ghostOverlays .speedSimulator .playerButtons > .volumeBox > .volumeText { flex: 0 0 3rem; margin-left: 0.5rem;}@media (min-width: 1300px) { main.contentBox { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 2rem; } main.contentBox > * { flex: 0 1 auto; } .ghostOverlays { position: relative; inset: auto; width: auto; overflow: visible; padding: 0; background-color: transparent; }}@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; }}.headerBox { position: relative; --headerHeight: 17rem;}.headerBox .languagesWrapper { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; gap: 0.5rem;}.headerBox .languagesWrapper > * { flex: 0 0 auto;}.headerBox .brandLogoScene { background-image: url('/img/phasmo-guru-logo004.webp'); background-size: cover; background-position: 50% 80%; background-position: 50% calc(100% + 250px); background-repeat: no-repeat; width: 100%; min-height: calc(var(--headerHeight) - 2rem); padding: 1rem; display: flex; justify-content: center; align-items: center; isolation: isolate; overflow: hidden;}.headerBox .brandLogoScene .brandLogoWrapper { flex: 0 1 15rem; min-height: inherit; background-image: url('/img/phasmo-guru-logo011.webp'); background-size: auto 115%; background-position: 50% 0%; background-repeat: no-repeat; display: flex; justify-content: center; align-items: stretch; position: relative; mix-blend-mode: color-dodge; transform: rotateZ(2deg);}.headerBox .brandLogoScene .brandLogoEffect { position: absolute; inset: -1rem; z-index: -1; background-image: url('/img/phasmo-guru-logo011.webp'); background-size: auto 115%; background-position: 50% 0%; background-repeat: no-repeat; filter: blur(2px) opacity(0.65); transform: rotateZ(-2deg); border-radius: 1rem;}.headerBox .brandLogoScene .brandLogo { flex: 0 1 15rem; min-height: inherit; background-image: url('/img/logo-text.webp'); background-size: contain; background-position: 50% 92%; background-repeat: no-repeat; filter: hue-rotate(43deg) grayscale(1) brightness(2) drop-shadow(-3px 3px 5px #fff); opacity: 0.85; transform: rotateZ(-2deg);}.headerBox .headerMenu { position: absolute; top: 0; bottom: 0; left: 0; padding: 0.5rem; display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: stretch; align-content: flex-start; gap: 0.5rem; max-height: var(--headerHeight); pointer-events: none;}.headerBox.menu-is-open .headerMenu { position: fixed; inset: 0; z-index: 1; min-height: 100%; max-height: 100%; padding-bottom: 2rem; justify-content: flex-start; align-content: stretch; background-image: url('/img/phasmo-guru-logo004.webp'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;}.headerBox.menu-is-open .burgerMenuButton,.headerBox:not(.menu-is-open) .headerMenu > .closeBurgerMenuButton { display: none;}.headerBox .headerMenu > .closeBurgerMenuButton { flex: 0 0 auto; align-self: flex-end; aspect-ratio: 1 / 1; padding: 1rem; margin-bottom: 1rem; pointer-events: auto;}.headerBox .headerMenu > .menuEntry { flex: 0 0 auto; pointer-events: auto; text-align: center;}.headerBox .burgerMenuButton { position: absolute; top: 0.5rem; left: 0.5rem; aspect-ratio: 1 / 1; padding: 1rem; display: none;}@media all and (max-width: 800px) { .headerBox .burgerMenuButton { display: block; } .headerBox:not(.menu-is-open) .menuEntry { display: none; } .headerBox .brandLogoScene { min-height: 7rem; background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } .headerBox .brandLogoScene .brandLogoWrapper { mix-blend-mode: hard-light; }}.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 > textarea { background-color: transparent; border: none; margin: 0; padding: 0; outline: none; width: auto;}select { padding: 0.25rem 0.5rem;}main.contentBox { min-height: 100vh;}.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;}