:root {
    color-scheme: light dark;
    --content-width: 84em;
    --primary-color: light-dark(#f1f1f1, #0b1326);
    --orange: #e98214;
    --yellow: #fec619;
    --text-light: light-dark(#1f1f1f, #f1f1f1);
    --text-light-hover: light-dark(#333333, #cccccc);
    --text-dark: light-dark(#f1f1f1, #1f1f1f);
    --text-dark-hover: light-dark(#cccccc, #333333);
    --transparent: #00000000;
    --error-red: #cc0000;
    --success-green: #00aa00;
    --invert-dm: 100%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --invert-dm: 0%;
    }
}

body,
html {
    margin: 0px;
    padding: 0px;
    font-family: "Inter", sans-serif;
    background-color: var(--primary-color);
    color: var(--text-light);
    line-height: 1.6;
    font-size: 16px;
}

.emphasis {
    font-family: "JetBrains Mono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    padding: 0em;
    margin: 0.2em 0em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Hanken Grotesk", sans-serif;
}

h1 {
    font-size: 2.4em;
    font-weight: 600;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.8em;
    font-weight: 600;
}

h4 {
    font-size: 1.4em;
}

h5 {
    font-size: 1em;
    font-weight: 600;
}

h5 {
    font-size: 1em;
}

.header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: var(--content-width);
    width: calc(100% - 2em);
    margin-inline: auto;
    padding: 1em;
}

#content {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 4em;
    position: relative;
    overflow: hidden;
}

.glow-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
}

.glow-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    /* Soft radial gradient fading to transparent */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;

    /* Optional: Extra blur filter to make the edges completely seamless */
    filter: blur(40px);

    /* Apply the ultra-slow animation */
    animation: wander 25s infinite ease-in-out alternate;
}

@keyframes wander {
    0% {
        transform: translate(-10%, -10%);
    }

    25% {
        transform: translate(80vw, 20vh);
    }

    50% {
        transform: translate(20vw, 70vh);
    }

    75% {
        transform: translate(70vw, 60vh);
    }

    100% {
        transform: translate(-5vw, 80vh);
    }
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 4em 1em;
    column-gap: 2em;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        row-gap: 2em;
    }

    .button-row {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }
}

.logo {
    height: 60px;
    filter: invert(var(--invert-dm)) !important;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
    transition-duration: 300ms;
}

.menu-button {
    display: none;
    position: relative;
}

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 1em;
        position: absolute;
        top: 108px;
        left: 0;
        width: 100%;
        height: calc(100% - 108px);
        z-index: 999;
        background-color: var(--primary-color);
        justify-content: start;
        align-items: start;
    }

    .menu.open {
        display: flex;
    }

    .menu-button {
        display: flex;
        flex-direction: column;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: space-between;
    }

    .menu-button.open span:nth-child(1) {
        position: absolute;
        transform: rotate(45deg);
        transform-origin: top left;
        width: 42px;
    }

    .menu-button.open span:nth-child(3) {
        position: absolute;
        transform: rotate(-45deg);
        transform-origin: bottom left;
        width: 42px;
        top: 30px;
    }

    .menu-button.open span:nth-child(2) {
        display: none;
    }

    .menu-button span {
        width: 100%;
        height: 2px;
        border-radius: 3px;
        background-color: var(--text-light);
        transition-duration: 300ms;
    }

    .menu a {
        padding-block: 1em;
        margin-left: 1em;
    }
}

.menu a,
.custom-links a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    transition-duration: 400ms;
}

.menu a:hover,
.custom-links a:hover {
    text-decoration: solid;
    color: var(--text-light-hover);
}

.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-container h2 {
    color: #e71d36;
    font-size: 3em;
}

.error-container p {
    font-size: 1.4em;
}

.btn {
    all: unset;
    display: inline-block;
    padding: 0.75em 2.5em;
    background: var(--orange);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 4px;
    transition-duration: 400ms;
    font-weight: 500;
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    border: 1px solid var(--orange);
}

.btn.mini {
    all: unset;
    display: inline-block;
    padding: 0.5em 1em;
    background: var(--transparent);
    color: var(--orange);
    text-decoration: none;
    transition-duration: 400ms;
    font-weight: 500;
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    border: none;
}

.btn.alt {
    background: var(--transparent);
    border: 1px solid var(--orange);
    color: var(--text-light);
}

.btn:hover {
    background: var(--transparent);
    color: var(--text-light);
}

.btn.alt:hover {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: var(--text-dark);
}

.btn:disabled {
    background: var(--text-light-hover);
    color: var(--text-dark);
}

.spacer-orange,
.spacer-yellow {
    max-width: none;
    height: 4px;
    background-color: var(--orange);
    padding: 0px;
}

.spacer-yellow {
    background-color: var(--yellow);
}

.custom-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero {
    width: 100%;
    min-height: 35em;
    padding: 2em 0em;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none !important;
    width: 100%;
    height: 100%;
    background: linear-gradient(#00000000, color-mix(in srgb, var(--primary-color) 70%, transparent), color-mix(in srgb, var(--primary-color) 90%, transparent), var(--primary-color));
    z-index: 1 !important;
}

.hero-content-container {
    display: flex;
    max-width: var(--content-width);
    width: 100%;
    margin-inline: auto;
    height: 100%;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    z-index: 2;
    gap: 2em;
    padding: 2em;
}

.hero-content-inner {
    gap: 1em;
    display: flex;
    width: calc((var(--content-width) / 2));
    max-width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: start;
}

@media (max-width: 768px) {
    .hero-content-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(100% - 4em);
    }
}

.hero-content-inner-img {
    width: 100%;
}

.hidden {
    display: none !important;
}

.digital-touchology-title-start {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 80%;
}

.digital-touchology-title-middle {
    font-weight: 700;
}

.digital-touchology-title-end {
    font-weight: 400;
}

.col-2-section {
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: center;
    justify-content: center;
}

.text-col {
    width: 50%;
    max-width: 32em;
}

.image-col {
    width: 50%;
    max-width: 32em;
}

@media (max-width: 768px) {
    .col-2-section {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .text-col {
        width: 100%;
        max-width: 32em;
    }

    .image-col {
        width: 100%;
        max-width: 32em;
    }

    .col-2-section.alt {
        flex-direction: column-reverse;
    }
}

.small-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    max-width: 56em;
}

.text-align-center {
    text-align: center;
}

a,
a:link {
    color: var(--text-light-hover);
}

.bg-fade {
    position: relative;
}

.bg-fade::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/media/images/dt-sect-bg.webp');
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.5;
    z-index: -1;
}

.info-card {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    border-radius: 1em;
    background-color: var(--primary-color);
    box-shadow: 0em 0em 1em 0.2em rgb(from var(--orange) r g b / 0.2);
    transition-duration: 400ms;
}

.info-card:hover {
    scale: 1.05;
}

.info-card-top {
    width: calc(100% - 4em);
    padding: 2em;
}

.info-card-top-image {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: 50% 50%;
    max-width: 4em;
    width: 100%;
}

.info-card-bottom {
    width: calc(100% - 4em);
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: baseline;
}

.stretch-row-vert {
    align-items: stretch;
}

.flex-row {
    display: flex;
}

.gap-1 {
    gap: 1em;
}

.gap-2 {
    gap: 2em;
}

.mt1 {
    margin-top: 1em;
}

.mt2 {
    margin-top: 2em;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.center-center {
    align-items: center;
    justify-content: start;
}

.modal-card {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    gap: 1em;
    width: calc(100% - 2em);
    max-width: 24em;
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0em 0em 1em 0.2em rgb(from var(--orange) r g b / 0.2);
}

.modal-card input[type="color"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 0;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/* 2. Style the inner swatch for Chrome, Safari, and Edge */
.modal-card input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 8px;
}

.modal-card input[type="color"]::-webkit-color-swatch {
    border: none;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 8px;
}

/* 3. Style the inner swatch for Firefox */
.modal-card input[type="color"]::-moz-color-swatch {
    border: none;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 8px;
}

.modal-card input[type="file"]::file-selector-button {
    background-color: #2563eb;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 1rem;
    transition: background-color 0.2s;
}

/* Safely hide the file input without hurting accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Style your label to look like a beautiful button */
.modal-card .custom-label {
    display: inline-block;
    background-color: var(--orange);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.modal-card .custom-label:hover {
    background-color: rgb(from var(--orange) r g b / 0.2);
}


.modal-card form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.modal-header {
    width: calc(100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-coinainer {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    gap: 0.5em;
}

.input-coinainer label em {
    font-size: 0.75em;
    color: var(--text-light-hover);
}

.dropdown-container {
    display: none;
    max-width: calc(100vw - 8em - 8px);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.dropdown-header {
    width: calc(100% - 2em - 4px);
    padding: 0.5em 1em;
    text-align: center;
    cursor: pointer;
    background-color: rgb(from var(--text-light) r g b / 0.2);
    border-radius: 0.5em;
    border: 2px solid rgb(from var(--text-light) r g b / 0.8);
}

.dropdown-body {
    max-width: 100%;
    width: calc(100%);
    padding: 0em;
    height: 0px;
    transition-duration: 300ms;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 2px solid rgb(from var(--text-light) r g b / 0);
    border-radius: 0.5em;
}

.dropdown-body.open {
    width: calc(100% - 2em - 4px);
    padding: 1em;
    height: auto;
    border: 2px solid rgb(from var(--text-light) r g b / 0.4);
}

.dropdown-body.open table {
    min-width: 58rem;
}

.status_btn {
    width: 1em;
    height: 1em;
    padding: 0em;
    cursor: pointer;
    margin: auto;
}

.input-coinainer input,
.input-coinainer textarea,
.input-coinainer select,
.input-coinainer option {
    width: calc(100% - 2em);
    padding: 0.5em 1em;
    background-color: var(--text-dark-hover);
    outline: none;
    border: 1px solid rgb(from var(--orange) r g b / 0.2);
    border-radius: 8px;
    font-size: 1em;
    color: var(--orange);
    font-weight: 500;
}

.input-coinainer input[type="checkbox"] {
    width: auto;
}

/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
    background-color: var(--orange);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.input-coinainer.error input,
.input-coinainer.error textarea {
    border: 1px solid #cc0000;
    box-shadow: 0px 0px 12px 0px #cc0000;
}

.input-coinainer input:autofill,
.input-coinainer input:autofill:hover,
.input-coinainer input:autofill:focus,
.input-coinainer input:autofill:active,
.input-coinainer input:-webkit-autofill,
.input-coinainer input:-webkit-autofill:hover,
.input-coinainer input:-webkit-autofill:focus,
.input-coinainer input:-webkit-autofill:active,
.input-coinainer input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--text-dark-hover) inset !important;
    box-shadow: 0 0 0 1000px var(--text-dark-hover) inset !important;
    -webkit-text-fill-color: var(--orange) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    transition: background-color 9999s ease-in-out 0s;
    font-size: 1em;
    color: var(--orange);
    font-weight: 500;
    padding: 0.5em 1em;
}

.size-full {
    width: 100%;
    height: 100%;
    margin: auto;
}

.hide-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-desktop {
        display: none;
    }

    .hide-mobile {
        display: block;
    }
}

.mono-header {
    font-family: "Merriweather", serif;
    font-weight: 500;
    padding: 0.25em 1em;
    color: var(--text-light);
    background-color: rgb(from var(--text-dark) r g b / 0.8);
    border-radius: 0.25em;
}

.margin-inline-auto {
    margin-inline: auto;
}

.width-100 {
    max-width: 100%;
    width: 100%;
}

.width-90 {
    max-width: 90%;
    width: 90%;
}

.width-80 {
    max-width: 80%;
    width: 80%;
}

.width-70 {
    max-width: 70%;
    width: 70%;
}

.width-60 {
    max-width: 60%;
    width: 60%;
}

.width-50 {
    max-width: 50%;
    width: 50%;
}

.width-40 {
    max-width: 40%;
    width: 40%;
}

.width-30 {
    max-width: 30%;
    width: 30%;
}

.width-20 {
    max-width: 20%;
    width: 20%;
}

.width-10 {
    max-width: 10%;
    width: 10%;
}

@media (max-width: 768px) {
    .width-100 {
        max-width: 100%;
        width: 100%;
    }

    .width-90 {
        max-width: 100%;
        width: 100%;
    }

    .width-80 {
        max-width: 100%;
        width: 100%;
    }

    .width-70 {
        max-width: 100%;
        width: 100%;
    }

    .width-60 {
        max-width: 100%;
        width: 100%;
    }

    .width-50 {
        max-width: 100%;
        width: 100%;
    }

    .width-40 {
        max-width: 100%;
        width: 100%;
    }

    .width-30 {
        max-width: 100%;
        width: 100%;
    }

    .width-20 {
        max-width: 100%;
        width: 100%;
    }

    .width-10 {
        max-width: 100%;
        width: 100%;
    }
}

.notes-container {
    position: relative;
}

.i-note {
    position: absolute;
    padding: 0.5em;
    padding-top: 0.25em;
    background-color: rgb(from var(--text-light) r g b / 1);
    color: var(--text-dark);
    border-radius: 0.5em;
    scale: 0.9;
    transition-duration: 300ms;
    border: 2px solid #005d9b;
    animation: pulse-border 2s infinite;
    max-width: 22em;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgb(from #005d9b r g b / 0.7);
    }

    70% {
        /* The shadow expands outward and fades */
        box-shadow: 0 0 0 10px rgb(from #005d9b r g b / 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgb(from #005d9b r g b / 0);
    }
}

.i-note h3 {
    font-size: 0.9em;
}

.i-note p {
    font-size: 0.75em;
    font-weight: 600;
}

.graphic-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Solid Orange Rounded Box */
.box-solid {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    border: 1.5px solid #613a25;
    /* Muted copper/orange */
    border-radius: 16px;
}

/* The Rotated Dashed Box */
.box-dashed {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    border: 1px dashed #2c3545;
    /* Darker, subtle dashed line */
    border-radius: 16px;
    transform: rotate(22deg);
    animation: spin 30s linear infinite;
    scale: 1.08;
    /* The key rotation effect */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Center Content Container */
.center-content {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* Ensures badges sit on top of borders */
}

/* Central Node Network Icon */
.hub-icon {
    width: 64px;
    height: 64px;
    fill: #4c5465;
    /* Slate grey icon color */
}

/* Floating Badges Base Style */
.badge {
    position: absolute;
    background-color: #111723;
    /* Slightly lighter than background */
    border: 1px solid #1a2334;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Top Left Alert Badge */
.badge-lost {
    top: -15px;
    left: -90px;
    color: #f77676;
    /* Soft red/pink */
}

.badge-lost svg {
    fill: #f77676;
}

/* Bottom Right Sync Badge */
.badge-sync {
    bottom: -15px;
    right: -80px;
    color: #e5853c;
    /* Warning orange */
}

.badge-sync svg {
    fill: #e5853c;
}

#status-container {
    display: none;
    padding: 1em;
    font-size: 0.75em;
    border-radius: 1em;
    width: calc(100% - 2em);
}

#status-container.error {
    display: block;
    background-color: #ff232399;
    color: #f1f1f1;
}

#status-container.good {
    display: block;
    background-color: #23ff2399;
    color: #f1f1f1;
}

.login-button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.no-border {
    border: none !important;
}

.max-width-none {
    max-width: none !important;
}

@media (max-width: 768px) {
    .max-width-none {
        max-width: 100% !important;
    }
}

.no-shadow {
    box-shadow: none !important;
}

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

.example-screen {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #ffffff;
}

.example-screen-header {
    width: 100%;
    aspect-ratio: 16/0.9;
    background-color: #333333;
    position: relative;
}

.example-screen-body {
    width: 100%;
    aspect-ratio: 16/7.2;
    background-color: #ffffff;
    position: relative;
}

#example-screen-image {
    width: 100%;
    aspect-ratio: 16/7.2;
    object-fit: contain;
}

.example-screen-footer {
    width: 100%;
    aspect-ratio: 16/0.9;
    background-color: #333333;
    position: relative;
}

.example-screen-images {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 100%;
    width: fit-content;
    justify-content: center;
    align-items: center;
}

.example-screen-images img {
    max-height: 80%;
}

.example-screen-images :nth-child(1) {
    margin-left: 8px;
}

.example-screen-button-container {
    position: absolute;
    height: 40%;
    width: fit-content;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.example-screen-button-container.center {
    left: 50%;
    top: 50%;
    bottom: unset;
    transform: translate(-50%, -50%);
}

.example-screen-button-container div {
    height: 100%;
    width: fit-content;
    padding-inline: 8px;
    background-color: #ffffff;
    text-wrap: nowrap;
    font-size: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333333;
}

@media (max-width: 768px) {
    .example-screen {
        width: calc(100vw - 6em - 8px);
    }
}

.current-user {
    position: relative;
    padding: 0.25em 1em;
    padding-left: 2em;
    border-radius: 4em;
    margin-left: 1em;
    color: var(--orange);
    background-color: rgb(from var(--orange) r g b / 0.3);
    border: 1px solid var(--orange);
}

.current-user:before {
    position: absolute;
    left: 0.8em;
    font-size: 1.2em;
    content: "•";
    line-height: 0.75;
}

.verified-badge {
    position: relative;
    padding: 0.5em 1em;
    padding-left: 4em;
    font-size: 0.85em;
    border: 1px solid var(--error-red);
    background-color: rgb(from var(--error-red) r g b / 0.2);
    border-radius: 0.75em;
}

.verified-badge::before {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C15.1826 0 18.2349 1.26423 20.4854 3.51465C22.7358 5.76507 24 8.81743 24 12C24 15.1826 22.7358 18.2349 20.4854 20.4854C18.2349 22.7358 15.1826 24 12 24C8.8174 24 5.76508 22.7358 3.51465 20.4854C1.26423 18.2349 0 15.1826 0 12C1.86898e-05 8.81743 1.26423 5.76507 3.51465 3.51465C5.76508 1.26423 8.81742 0 12 0ZM17.7461 6.25195C17.4099 5.91593 16.8664 5.91596 16.5303 6.25195L12 10.7812L7.46973 6.25195C7.13356 5.91596 6.59006 5.91593 6.25391 6.25195C5.91775 6.58809 5.91783 7.13159 6.25391 7.46777L10.793 11.999L6.25391 16.5293C6.09225 16.6899 6.00001 16.9097 6 17.1377C6.00006 17.3656 6.0924 17.5846 6.25391 17.7451C6.41452 17.9068 6.63424 17.999 6.8623 17.999C7.09021 17.9989 7.30923 17.9067 7.46973 17.7451L12 13.2148L16.5303 17.7451C16.6908 17.9067 16.9098 17.9989 17.1377 17.999C17.3658 17.999 17.5855 17.9068 17.7461 17.7451C17.9076 17.5846 17.9999 17.3656 18 17.1377C18 16.9097 17.9077 16.6899 17.7461 16.5293L13.207 11.999L17.7461 7.46777C18.0822 7.13159 18.0822 6.58809 17.7461 6.25195Z' fill='%23CC0000'/%3E%3C/svg%3E%0A");
    margin-left: 1.2em;
    margin-top: 1.2em;
    width: 1.5em;
    height: 1.5em;
    line-height: 2em;
    object-fit: contain;
}

#screen-details textarea {
    resize: vertical;
}

.screen-content-item {
    width: 100%;
    max-width: 17em;
    min-width: 12em;
    aspect-ratio: 10/6;
    border-radius: 0.25em;
    border: 2px solid rgb(from var(--orange) r g b / 0.3);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding: 0.5em;
    background-size: cover;
    transition: filter 0.3s ease;
}

.screen-content-item:hover {
    filter: grayscale(100%);
}

.screen-content-item:has(.screen-content-name.top) {
    align-items: start;
    justify-content: start;
}

.screen-content-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 1.25em;
    height: 1.25em;
    padding: 0em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5em;
}

.screen-content-item-delete:hover {
    background-color: rgb(from var(--text-light) r g b / 0.2);
}

.screen-content-item-delete svg {
    width: 0.75em;
    height: 0.75em;
    object-fit: contain;
}

.screen-content-item-delete path {
    transition-duration: 200ms;
}

.screen-content-item-delete:hover path {
    fill: #ff0000;
}

.screen-content-name {
    font-size: 1em;
    font-weight: 600;
    padding: 0.25em 0.5em;
    min-height: 1.2em;
    line-height: 1.2;
    border-radius: 0.25em;
    background-color: #03091a99;
}

.screen-content-name.top:empty {
    min-width: 10em;
}

.screen-content-name:empty {
    min-width: 6em;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: backgroundShimmer 2s infinite linear;
}

@keyframes backgroundShimmer {
    0% {
        background-position: 100% 0%;
    }

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