html, body {
    margin: 0;
    padding: 0;
    background: #040408;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.heart-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.heart-stage.visible {
    opacity: 1;
}

.heart-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.pt-content {
    position: relative;
    z-index: 2;
    padding: 9em clamp(2em, 8vw, 10em) 0;
}

.dc-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4em;
    flex-wrap: wrap;
}

.dc-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(3.5em, 9vw, 7em);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    display: inline-block;
}

.dc-heading .heading-word {
    display: inline-block;
}

.dc-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.dc-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.dc-heading.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

.dc-side {
    flex: 0 1 28em;
    text-align: right;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    margin: 0 0 0.6em;
}

.dc-side .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.045s);
}

.dc-side.is-in .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

.dc-explain {
    margin: 80vh 0 0;
    width: min(46%, 34em);
    max-width: 34em;
    box-sizing: border-box;
}

.dc-explain-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2em, 4vw, 3em);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 0.7em;
    color: #fff;
    display: inline-block;
}

.split-word {
    display: inline-block;
    white-space: nowrap;
}

.dc-explain-title .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.dc-explain-title .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.dc-explain-title.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

.dc-explain-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.dc-explain-text .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.035s);
}

.dc-explain-text.is-in .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

.dc-explain-text .dc-mark {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

/* CTA */
.cta-section {
    position: relative;
    z-index: 2;
    margin-top: clamp(1em, 3vh, 3em);
    padding: clamp(0.5em, 2vh, 1.5em) clamp(2em, 5vw, 5em) clamp(14em, 30vh, 22em);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}
.cta-section.visible { pointer-events: auto; }

.cta-inner {
    max-width: 50em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.4em;
    text-align: right;
    padding: 2.8em 3em 2.6em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2em;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
}
.cta-section.visible .cta-inner { opacity: 1; }

.cta-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4em, 4.4vw, 4em);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}
.cta-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}
.cta-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 55ms);
}
.cta-section.visible .cta-heading .letter {
    transform: translateY(0);
    opacity: 1;
}

.cta-description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 1.18em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 28em;
    visibility: hidden;
}
.cta-description[data-split] { visibility: visible; }
.cta-description .cta-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.045s + 0.35s);
}
.cta-section.visible .cta-description .cta-word {
    opacity: 1;
    transform: translateY(0);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.9em 1.6em;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #fff;
    background: #8a67ff;
    border: 1px solid #8a67ff;
    border-radius: 999px;
    text-decoration: none;
    opacity: 0;
    transform: translateX(160px) scale(1);
    transform-origin: right center;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
        background-color 0.25s ease,
        border-color 0.25s ease;
}
.cta-section.visible .cta-button {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.cta-button:hover {
    transform: translateX(0) scale(1.2);
    background: #0a0a0f;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.cta-button svg { transition: transform 0.25s ease; }
.cta-button:hover svg { transform: translate(2px, -2px); }

/* Line break inside the CTA heading only kicks in on mobile.
   Desktop keeps it one line via white-space: nowrap. */
.cta-heading-br { display: none; }

/* Desktop: CTA section hidden. Mobile shows it (see the query below). */
@media (min-width: 769px) {
    .cta-section { display: none !important; }
}

/* MOBILE: particle stage off. Each section becomes a simple stack in normal
   flow, same pattern as the websites page. No morph, no large vh gaps. */
@media (max-width: 768px) {
    .heart-stage {
        display: none !important;
    }
    .pt-content {
        padding: 7em 1.5em 0;
        min-height: 0;
    }

    .dc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2em;
    }
    .dc-heading {
        font-size: clamp(2.6em, 13vw, 4.6em);
        line-height: 1;
    }
    .dc-heading .heading-word {
        display: block;
    }
    .dc-heading .heading-space {
        display: none;
    }
    .dc-side {
        text-align: right;
        flex: 1 1 100%;
        max-width: 100%;
        margin-top: 2.5em;
    }

    .dc-explain {
        width: 100%;
        max-width: 100%;
        margin-top: 18vh;
    }
    .dc-explain-title {
        margin-bottom: 0;
        cursor: pointer;
    }
    /* Tap affordance: a rotating caret shows the title is expandable.
       Using a pseudo-element so it survives the per-letter split the reveal
       animation applies. */
    .dc-explain-title::after {
        content: '';
        display: inline-block;
        width: 0.42em;
        height: 0.42em;
        margin-left: 0.55em;
        border-right: 0.12em solid #b89cff;
        border-bottom: 0.12em solid #b89cff;
        vertical-align: middle;
        transform: translateY(-0.16em) rotate(45deg);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .dc-explain.is-open .dc-explain-title::after {
        transform: translateY(0.02em) rotate(225deg);
    }
    .dc-explain-text {
        max-height: 0;
        overflow: hidden;
        margin: 0;
        transition:
            max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            margin-top 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .dc-explain.is-open .dc-explain-text {
        max-height: 50em;
        margin-top: 0.7em;
    }

    /* CTA: center-stacked card, full width, with the heading line break active. */
    .cta-section {
        margin-top: 16vh !important;
        padding: 0 1.4em 11em !important;
        pointer-events: auto !important;
        justify-content: center !important;
        align-items: stretch !important;
    }
    .cta-inner {
        width: 100% !important;
        max-width: none !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 1.4em 1.6em 1.6em !important;
        gap: 1em !important;
    }
    .cta-heading {
        font-size: clamp(2em, 7vw, 2.6em) !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .cta-heading-br {
        display: inline !important;
    }
    .cta-description {
        max-width: 100% !important;
        text-align: center !important;
    }
    .cta-button {
        align-self: center !important;
    }
}

/* ------------------------------------------------------------------
   Twitch explainer: last block inside <main>, sits right above the
   footer. Reveals as one unit via .is-in (set by bots.js), children
   stagger through their own --i. No word splitting here, the note
   holds real links.
   ------------------------------------------------------------------ */
.dc-case {
    margin: 22vh 0 20vh;
    width: 100%;
    box-sizing: border-box;
}

.dc-case-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3em;
    flex-wrap: wrap;
}

.dc-case-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2em, 4vw, 3em);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
    display: inline-block;
}
.dc-case-title .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}
.dc-case-title .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 55ms);
}
.dc-case.is-in .dc-case-title .letter {
    transform: translateY(0);
    opacity: 1;
}

.dc-case-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em 0.9em;
}

.dc-case-demo {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9em, 1vw, 1em);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.dc-case.is-in .dc-case-demo {
    opacity: 1;
    transform: translateY(0);
}

.dc-case-lead {
    flex: 0 1 30em;
    text-align: right;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.4em;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.dc-case.is-in .dc-case-lead {
    opacity: 1;
    transform: translateY(0);
}

/* Praxis: Raster wie auf /crm, andersherum angeordnet. Links eine hohe
   Kachel ueber beide Reihen, rechts oben zwei kleine, darunter eine breite. */
.dc-frames {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.8em, 1.4vw, 1.2em);
    margin-top: 4.5em;
}

/* contain: Die Groesse jeder Kachel kommt nur aus Raster und Seitenverhaeltnis,
   nie aus dem Inhalt. So bleibt alles stehen, wenn im Chat Nachrichten kommen
   und gehen. overflow-anchor: Chrome haengt die Scrollposition sonst an eine
   Chatnachricht und schiebt die ganze Seite mit, sobald sie wandert. */
.dc-frame {
    position: relative;
    contain: size layout paint;
    overflow-anchor: none;
    border-radius: 1.2em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0a0a10;
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.1s + 0.15s);
}

.dc-case.is-in .dc-frame {
    opacity: 1;
    transform: translateY(0);
}

.dc-frame--a { grid-column: 1; grid-row: 1 / 3; }

/* Chat in der grossen Kachel: Schrift waechst mit der Kachel, unten ein
   Eingabefeld wie in Discord, der Kanalname wechselt mit dem Ablauf. */
.dc-frame--chat {
    container-type: inline-size;
}

.dc-showcase {
    position: absolute;
    inset: 0;
    background: #0d0d13;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(9px, 3.6cqi, 15px);
    text-align: left;
}

.dc-showcase .dc-demo-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dc-demo-input {
    --cut: #1c1c22;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85em;
    margin: 0.2em 0.9em 0.9em;
    padding: 0.75em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.6em;
    background: var(--cut);
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-input svg {
    display: block;
    width: 1.35em;
    height: 1.35em;
}

.dc-demo-input-plus {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.6);
}

.dc-demo-input-icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

.dc-demo-input-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dc-demo-input-text[hidden] {
    display: none;
}

.dc-demo-start {
    padding: 0 1em 1em;
}

.dc-demo-start-ic {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 300;
    font-size: 1.5em;
    line-height: 1;
    color: #fff;
}

.dc-demo-start b {
    display: block;
    margin-top: 0.45em;
    font-weight: 700;
    font-size: 1.35em;
    color: #fff;
}

.dc-demo-start p {
    margin: 0.2em 0 0;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.55);
}

.dc-frame--b { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; }

/* Kachel oben in der Mitte: echte Aufnahme vom Vace Piloting Bot. Breite
   Kacheln: Bilder aus dem Workspace. Beide 16:9 wie ihre Kachel, deshalb ohne
   Beschnitt. */
.dc-frame--clip,
.dc-frame--still {
    margin: 0;
}

.dc-clip,
.dc-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Profilkarten (oben rechts und in der dritten Reihe): Profilkopf wie in Discord. Banner oben (719 x 254),
   das runde Profilbild ragt in den Banner, der Name steht daneben. Alle
   Masse in cqw, damit es mit der Kachel waechst. */
.dc-frame--profile {
    container-type: inline-size;
    margin: 0;
    background: #111117;
}

.dc-prof-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 719 / 254;
    object-fit: cover;
}

.dc-prof-av {
    position: absolute;
    left: 5cqw;
    top: 24.8cqw;
    width: 21cqw;
    height: 21cqw;
    border: 1.4cqw solid #111117;
    border-radius: 50%;
    background: #111117;
}

.dc-prof-name {
    position: absolute;
    left: 31.5cqw;
    top: 45.8cqw;
    display: flex;
    align-items: center;
    gap: 0.4em;
    transform: translateY(-50%);
    font-family: 'Outfit', sans-serif;
    font-size: 5.2cqw;
    line-height: 1.2;
    color: #fff;
}

.dc-prof-name b {
    font-weight: 700;
}

.dc-prof-name .dc-demo-app {
    margin-left: 0;
}
.dc-frame--c { grid-column: 3; grid-row: 1; aspect-ratio: 16 / 9; }
.dc-frame--d { grid-column: 2 / 4; grid-row: 2; aspect-ratio: 16 / 9; }
.dc-frame--e { grid-column: 1; grid-row: 3; aspect-ratio: 16 / 9; }
.dc-frame--f { grid-column: 2; grid-row: 3; aspect-ratio: 16 / 9; }
.dc-frame--g { grid-column: 1 / 3; grid-row: 4; aspect-ratio: 16 / 9; }
.dc-frame--h { grid-column: 3; grid-row: 3 / 5; }

@media (prefers-reduced-motion: reduce) {
    .dc-frame {
        transition: none;
    }
}

@media (max-width: 768px) {
    .dc-frames {
        grid-template-columns: 1fr;
        margin-top: 2.6em;
    }
    .dc-frame--a,
    .dc-frame--b,
    .dc-frame--c,
    .dc-frame--d,
    .dc-frame--e,
    .dc-frame--f,
    .dc-frame--g,
    .dc-frame--h {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }
    .dc-frame--a,
    .dc-frame--h {
        aspect-ratio: 4 / 5;
    }
    .dc-frame {
        border-radius: 0.9em;
    }
}

.dc-case-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2em, 4vw, 4em);
    flex-wrap: wrap;
    margin-top: clamp(1.6em, 2.4vw, 2.4em);
    padding: 2.4em clamp(2em, 3vw, 3em);
    border: 1px solid rgba(184, 156, 255, 0.20);
    border-radius: 1.2em;
    background: rgba(184, 156, 255, 0.045);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
.dc-case.is-in .dc-case-note {
    opacity: 1;
    transform: translateY(0);
}

.dc-case-note-text {
    flex: 1 1 26em;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.1vw, 1.1em);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 40em;
}

.dc-case-actions {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
}

.dc-case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 1.5em;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 0.98em;
    /* Matches the line-height the rolling label sets on the filled link, so
       both pills stay exactly the same height side by side. */
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: #8a67ff;
    border: 1px solid #8a67ff;
    border-radius: 999px;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}
.dc-case-link:hover {
    transform: translateY(-2px);
    background: #0a0a0f;
    border-color: rgba(255, 255, 255, 0.28);
}
.dc-case-link svg { transition: transform 0.25s ease; }
.dc-case-link:hover svg { transform: translate(2px, -2px); }

/* Second action: the header's "Start your project" pill, same shape and same
   hover (the lilac circle grows out to fill the button). Kept in sync with the
   .header-cta rules injected by header.js. */
.dc-case-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.98em;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    padding: 0.62em 0.62em 0.62em 1.7em;
    background: #ffffff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transform: translateZ(0) scale(1);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-case-cta:hover {
    transform: translateZ(0) scale(1.05);
    box-shadow: 0 8px 24px -8px rgba(138, 92, 255, 0.45);
}

.dc-case-cta-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.dc-case-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: linear-gradient(180deg, #b89cff 0%, #6a4aff 100%);
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    /* un-hover: fade the icon back in just before the shrink ends */
    transition: opacity 0.1s ease 0.45s;
}

/* Lilac fill growing out of the icon. The arrow rides along as the overlay's
   centered background-image, the icon underneath fades out in sync. */
.dc-case-cta::after {
    content: '';
    position: absolute;
    top: 0.62em;
    right: 0.62em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M17 7H7M17 7v10'/></svg>") center / 16px 16px no-repeat,
        linear-gradient(180deg, #b89cff 0%, #6a4aff 100%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    /* un-hover: shrink first, fade out only once the icon is fully back */
    transition:
        top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.1s ease 0.55s;
}

.dc-case-cta:hover .dc-case-cta-icon {
    opacity: 0;
    transition: opacity 0.1s ease 0.08s;
}

.dc-case-cta:hover::after {
    top: -1px;
    right: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 100px;
    opacity: 1;
    transition:
        top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.08s ease;
}

/* Rolling label on the filled link only: the original slides up while a clone
   follows it in from below. Same treatment the CTA buttons get. */
.dc-case-link-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.4;
}

.dc-case-link-row {
    display: block;
    white-space: nowrap;
}

.dc-case-link-row--clone {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.dc-case-link-char {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
    transform: translateY(0);
}

.dc-case-link:hover .dc-case-link-char {
    transform: translateY(-100%);
}

/* MOBILE: single column, everything left aligned, no particle stage above. */
@media (max-width: 768px) {
    .dc-case {
        margin: 22vh 0 8vh;
    }
    .dc-case-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4em;
    }
    .dc-case-title {
        font-size: clamp(1.9em, 8vw, 2.6em);
    }
    .dc-case-lead {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
        margin: 0;
    }
    .dc-case-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6em;
        padding: 1.8em 1.6em;
    }
    /* Spalten-Flex: die 26em vom Desktop waeren hier eine Mindesthoehe. */
    .dc-case-note-text {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .dc-case-actions {
        width: 100%;
        justify-content: center;
        gap: 0.7em;
    }
    /* Vertical padding stays at the desktop value so this pill keeps the same
       height as the CTA next to it, only the side padding shrinks. */
    .dc-case-link {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.85em 1.2em;
    }
    /* Full width: label left, icon stays hard right where the ::after circle
       is anchored, so the growing fill still starts on the icon. */
    .dc-case-cta {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/* ------------------------------------------------------------------
   Nur auf dieser Seite: Preisblock und der Praxis-Abschnitt mit den
   Profilkarten echter Bots.
   ------------------------------------------------------------------ */
.dc-price {
    margin: 0 0 18vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2em, 6vw, 6em);
    flex-wrap: wrap;
}

.dc-price-left {
    flex: 1 1 22em;
    max-width: 34em;
}

.dc-price-sum {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2.4em, 5vw, 4em);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #8a67ff;
    margin: 0 0 0.5em;
}

/* Monatspreis: der Zeitraum steht klein hinter dem Betrag, damit
   "€4,99" so gross bleibt wie die Preise der anderen Leistungsseiten. */
.dc-price-unit {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 0.32em;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* Jahrespreis klein unter dem Monatspreis, der volle Preis
   durchgestrichen, daneben der Rabatt als Pille. */
.dc-price-year {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 0.4em;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    margin: -0.1em 0 1.4em;
}

.dc-price-year b {
    font-weight: 500;
    color: #fff;
}

.dc-price-year s {
    color: rgba(255, 255, 255, 0.4);
}

.dc-price-save {
    margin-left: 0.3em;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    border: 1px solid rgba(138, 103, 255, 0.4);
    background: rgba(138, 103, 255, 0.14);
    color: #b9a3ff;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

.dc-price-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 30em;
}

.dc-price-list {
    flex: 0 1 26em;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
}

.dc-price-list li {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9em, 1vw, 1em);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    padding-bottom: 0.9em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-price-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dc-case-media {
    display: block;
    margin: 0 0 clamp(2.5em, 5vw, 4em);
    border-radius: 1.2em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0a0a10;
    line-height: 0;
}

.dc-case-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-case-media:hover img {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .dc-price {
        flex-direction: column;
        margin-bottom: 12vh;
        gap: 2.5em;
    }
    .dc-price-left {
        flex: 0 0 auto;
    }
    .dc-price-list {
        flex: 0 0 auto;
        width: 100%;
    }
    .dc-case-media {
        border-radius: 0.9em;
    }
}

/* ------------------------------------------------------------------
   Einstieg: Erklaerung rechts, links die Partikel-Grafik (Discord-Logo),
   gleiche Partikel wie auf den anderen Seiten.
   ------------------------------------------------------------------ */
.dc-intro {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: clamp(3em, 6vw, 7em);
    margin: 30vh 0 0;
}

.dc-intro .dc-explain {
    margin: 0;
    width: auto;
    flex: 0 1 34em;
    text-align: right;
}

.dc-figure {
    flex: 0 1 40em;
    min-width: 0;
    /* Die Grafik ragt etwas in den Seitenabstand hinein. Das Logo steht
       mittig in seiner Flaeche (Lage steckt in discord-bots-figure.json),
       die Flaeche mittig zum Text, so sitzt es auf Hoehe des Textblocks. */
    margin: 0 0 0 calc(-0.45 * clamp(2em, 8vw, 10em));
}

.dc-figure-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* Partikelflaeche ueber dem ganzen Fenster, wie auf den anderen Seiten.
   Die Form sitzt am Platzhalter .dc-figure-stage und scrollt mit ihm. */
.dc-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.dc-stage.visible {
    opacity: 1;
}

.dc-stage canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Wo Platz ist, steht die Ueberschrift in einer Zeile: die Textspalte bekommt
   eine feste Breite, die Grafik nimmt den Rest. */
@media (min-width: 1200px) {
    .dc-intro .dc-explain {
        flex: 0 0 42em;
        max-width: none;
    }
    .dc-intro {
        gap: clamp(1.5em, 3vw, 3em);
    }
    .dc-figure {
        flex: 1 1 0;
        max-width: 52em;
    }
}

/* ------------------------------------------------------------------
   Praxis: vier Profilkarten echter Bots im 2x2-Raster. Die Karten bringen
   Rahmen und Ecken selbst mit, die Figur bleibt deshalb ohne Rahmen.
   ------------------------------------------------------------------ */
.dc-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8em, 1.4vw, 1.2em);
    margin: 0 0 clamp(1.6em, 2.4vw, 2.4em);
}

.dc-shot {
    position: relative;
    margin: 0;
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.1s + 0.15s);
}

.dc-case.is-in .dc-shot {
    opacity: 1;
    transform: translateY(0);
}

.dc-shot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .dc-shot {
        transition: none;
    }
}

@media (max-width: 768px) {
    .dc-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 3em;
        margin-top: 16vh;
    }
    .dc-intro .dc-explain {
        margin-top: 0;
        flex: 0 0 auto;
    }
    .dc-figure {
        flex: 0 0 auto;
        width: calc(100% + 1.5em);
        margin: 0 0 0 -1.5em;
    }

    .dc-gallery {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   Was mit unseren Discord Bots moeglich ist: Slider zum Klicken. Reiter
   oben, je Bereich eine Karte mit Titel und Liste. Gleitet wie der Rundgang
   auf den Projektseiten.
   ------------------------------------------------------------------ */
.dc-slider {
    margin: 18vh 0 12vh;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-slider.is-in {
    opacity: 1;
    transform: translateY(0);
}

.dc-slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5em 3em;
    flex-wrap: wrap;
    margin-bottom: 1.8em;
}

.dc-slider-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2em, 4vw, 3em);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
}

.dc-slider-intro {
    flex: 1 1 0;
    min-width: min(100%, 22em);
}

.dc-slider-tab:focus-visible {
    outline: 2px solid rgba(184, 156, 255, 0.9);
    outline-offset: 3px;
}

.dc-slider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1.6em;
}

.dc-slider-tab {
    appearance: none;
    cursor: pointer;
    padding: 0.55em 1.15em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.3;
    white-space: nowrap;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.dc-slider-tab:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.dc-slider-tab.is-active {
    background: #8a67ff;
    border-color: #8a67ff;
    color: #fff;
}

.dc-slider-viewport {
    overflow: hidden;
    border-radius: 1.2em;
}

.dc-slider-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.dc-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2em, 5vw, 6em);
    align-items: center;
    align-content: start;
    padding: clamp(1.8em, 3vw, 3em);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2em;
    background: rgba(255, 255, 255, 0.02);
}

.dc-slide-text {
    display: flex;
    justify-content: center;
    text-align: center;
    /* Bezug fuer die Titelgroesse unten: lange Woerter wie "Bewerbungen"
       sollen nie ueber die Spalte hinausragen. */
    container-type: inline-size;
    opacity: 0.25;
    transition: opacity 0.6s ease 0.25s;
}

.dc-slide.is-active .dc-slide-text {
    opacity: 1;
}

.dc-slide-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2.4em, 4.2vw, 3.6em);
    font-size: min(clamp(2.4em, 4.2vw, 3.6em), 12.5cqi);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}

.dc-slide-list {
    list-style: none;
    margin: 0;
    padding: 0.4em 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9em 2.2em;
    opacity: 0.25;
    transition: opacity 0.6s ease 0.3s;
}

.dc-slide.is-active .dc-slide-list {
    opacity: 1;
}

.dc-slide-list li {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.dc-slide-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: #b89cff;
}



/* Jeder Punkt im Slider oeffnet ein Fenster mit der genaueren Erklaerung. */
.dc-feat {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 0.9em 1.2em;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.dc-feat:hover {
    color: #fff;
}

.dc-feat:focus-visible {
    outline: 2px solid rgba(184, 156, 255, 0.9);
    outline-offset: 3px;
    border-radius: 0.3em;
}

/* Reiter "Befehle": viele kurze Eintraege, deshalb drei Spalten mit einer
   Ueberschrift je Gruppe, der Titel bleibt oben stehen. */
.dc-slide--cmds {
    align-items: start;
}

.dc-slide--cmds .dc-slide-text {
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.dc-cmd-intro {
    max-width: 22em;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 0.98em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

.dc-slide--cmds .dc-slide-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55em 1.8em;
}

.dc-slide--cmds .dc-feat {
    padding-bottom: 0.65em;
}

.dc-slide-list .dc-cmd-group {
    grid-column: 1 / -1;
    border-bottom: 0;
}

.dc-slide-list .dc-cmd-group::before {
    display: none;
}

.dc-cmd-group h4 {
    margin: 1.1em 0 0;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b89cff;
}

.dc-cmd-group:first-child h4 {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .dc-slide--cmds .dc-slide-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dc-slide--cmds .dc-slide-list {
        column-gap: 1em;
    }
    .dc-slide--cmds .dc-feat {
        padding-left: 1em;
    }
}

/* Fenster wie "Das System im Detail" auf /sdcrm, nur schmaler. */
.dc-modal {
    width: min(40em, 92vw);
    max-width: none;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.3em;
    background: rgba(10, 10, 15, 0.96);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65);
    color: #fff;
    overflow: hidden;
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-modal.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dc-modal::backdrop {
    background: rgba(4, 4, 8, 0.72);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.dc-modal.is-open::backdrop {
    opacity: 1;
}

html.dc-modal-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.dc-modal-panel {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.dc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    flex: 0 0 auto;
    padding: clamp(1.5em, 2.4vw, 2.1em) clamp(1.4em, 2.6vw, 2.4em) 1.2em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-modal-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(1.4em, 2.2vw, 1.8em);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.dc-modal-close {
    appearance: none;
    cursor: pointer;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    line-height: 0;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.dc-modal-close svg {
    display: block;
    width: 1.3em;
    height: 1.3em;
}

.dc-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: rotate(90deg);
}

.dc-modal-close:focus-visible {
    outline: 2px solid rgba(138, 103, 255, 0.9);
    outline-offset: 3px;
}

.dc-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.4em, 2.4vw, 2em) clamp(1.4em, 2.6vw, 2.4em) clamp(1.8em, 2.8vw, 2.4em);
}

.dc-modal-body:focus,
.dc-modal-body:focus-visible {
    outline: none;
}

.dc-modal-text {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1em, 1.1vw, 1.1em);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

@media (prefers-reduced-motion: reduce) {
    .dc-slider,
    .dc-slider-track,
    .dc-slide-text,
    .dc-slide-list,
    .dc-feat,
    .dc-modal,
    .dc-modal::backdrop {
        transition: none;
    }
}

@media (max-width: 768px) {
    .dc-slider {
        margin: 14vh 0 10vh;
    }
    .dc-slider-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2em;
    }
    .dc-slider-title {
        font-size: clamp(1.9em, 8vw, 2.6em);
    }
    .dc-slider-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -1.5em;
        padding-right: 1.5em;
    }
    .dc-slider-tabs::-webkit-scrollbar {
        display: none;
    }
    .dc-slide {
        grid-template-columns: 1fr;
        gap: 1.4em;
        padding: 1.4em;
    }
    .dc-slide-title {
        font-size: clamp(1.8em, 8vw, 2.4em);
    }
    .dc-slide-list {
        grid-template-columns: 1fr;
        gap: 0.7em;
    }
    .dc-feat {
        padding-bottom: 0.7em;
    }
    .dc-modal {
        width: 94vw;
        border-radius: 1em;
    }
}

/* ------------------------------------------------------------------
   Slider passt seine Hoehe der offenen Karte an. Sonst waeren alle Karten
   so hoch wie die mit den meisten Punkten.
   ------------------------------------------------------------------ */
.dc-slider-track {
    align-items: flex-start;
}

.dc-slider-viewport {
    transition: height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------
   Vorschau im Erklaerfenster (Test bei "Verwarnungen mit Stufen"): ein
   kleines Discord-Fenster unter dem Text, die Direktnachricht kommt als
   Karte unten rechts dazu. Gesteuert von createDemoPlayer().
   ------------------------------------------------------------------ */
/* Mit Vorschau wird das Fenster breiter: links der Text, rechts die Vorschau.
   Unter 900 px steht die Vorschau unter dem Text. */
.dc-modal.has-demo {
    width: min(72em, 94vw);
}

.dc-modal.has-demo .dc-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.6em, 3vw, 2.6em);
    align-items: center;
}

.dc-modal.has-demo .dc-modal-demo {
    margin-top: 0;
    height: 27em;
}

@media (max-width: 900px) {
    .dc-modal.has-demo {
        width: min(48em, 94vw);
    }
    .dc-modal.has-demo .dc-modal-body {
        display: block;
    }
    .dc-modal.has-demo .dc-modal-demo {
        margin-top: 1.4em;
        height: 22em;
    }
}

.dc-modal-demo {
    position: relative;
    height: 22em;
    margin-top: 1.4em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.8em;
    overflow: hidden;
    background: #0d0d13;
    font-family: 'Outfit', sans-serif;
    font-size: 0.86em;
    text-align: left;
}

.dc-modal-demo[hidden] {
    display: none;
}

.dc-modal-demo .dc-demo-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dc-demo-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.45em;
    height: 3em;
    padding: 0 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 500;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.92);
}

.dc-demo-hash {
    font-size: 1.35em;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-scenes {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.dc-demo-feed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0 0 2em;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
            mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dc-demo-feed.is-current {
    opacity: 1;
}

.dc-demo-feed--top {
    justify-content: flex-start;
    padding: 0.5em 0 0;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 2.4em);
            mask-image: linear-gradient(to top, transparent 0, #000 2.4em);
}

.dc-demo-feed.is-resetting .dc-demo-msg,
.dc-demo-feed.is-resetting .dc-demo-typing,
.dc-demo-feed.is-resetting .dc-demo-dm {
    transition: none !important;
}

.dc-demo-msg {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(10px);
    transition:
        grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-demo-msg.is-in {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
}

.dc-demo-msg.is-in.is-out {
    grid-template-rows: 0fr;
    opacity: 0;
}

.dc-demo-row {
    min-height: 0;
    overflow: hidden;
}

.dc-demo-pad {
    position: relative;
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr);
    gap: 0 0.8em;
    padding: 0.45em 1em;
}

.dc-demo-msg--cont .dc-demo-pad {
    padding-top: 0.15em;
}

.dc-demo-av {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 500;
    color: #0d0d13;
    background: var(--c, #8a67ff);
    object-fit: cover;
}

img.dc-demo-av {
    background: #fff;
}

.dc-demo-av--gap {
    height: 0;
    background: none;
}

.dc-demo-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25em 0.55em;
    line-height: 1.3;
}

.dc-demo-head b {
    font-weight: 500;
    font-size: 0.97em;
    color: #fff;
}

.dc-demo-time {
    font-size: 0.74em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.38);
}

/* APP-Abzeichen wie bei Discord: flach im Discord-Blau. */
.dc-demo-app {
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 1.5em;
    margin-left: -0.45em;
    padding: 0 0.45em;
    border-radius: 0.3em;
    background: #5865f2;
    font-weight: 600;
    font-size: 0.625em;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
}

.dc-demo-text {
    margin-top: 0.15em;
    font-weight: 300;
    font-size: 0.95em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

.dc-demo-mention {
    padding: 0 0.15em;
    border-radius: 0.25em;
    background: rgba(138, 103, 255, 0.22);
    color: #d6c8ff;
    font-weight: 400;
}

/* Slash-Befehl ueber der Antwort. */
.dc-demo-cmd {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0 0.25em calc(3.2em / 0.82);
    font-size: 0.82em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
}

.dc-demo-cmd::before {
    content: '';
    position: absolute;
    left: calc(-3.2em / 0.82 + 1.2em / 0.82);
    top: 0.65em;
    width: calc(2em / 0.82 - 0.4em);
    height: 0.8em;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    border-top-left-radius: 0.45em;
}

.dc-demo-cmd b {
    font-weight: 500;
}

.dc-demo-cmd-av {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8em;
    font-weight: 500;
    color: #0d0d13;
    background: var(--c, #8a67ff);
}

.dc-demo-cmd-name {
    color: #6fb7ff;
    font-weight: 400;
}

/* Embed: Farbleiste, Titel, Text, Felder, Fusszeile. */
.dc-demo-embed {
    margin-top: 0.4em;
    max-width: 30em;
    padding: 0.7em 0.95em 0.75em;
    border-radius: 0.3em;
    border-left: 4px solid #8a67ff;
    background: #15151d;
}

.dc-demo-embed--thumb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 0.8em;
}

.dc-demo-thumb {
    width: 3em;
    height: 3em;
    border-radius: 0.3em;
    display: grid;
    place-items: center;
    font-weight: 500;
    color: #0d0d13;
    background: var(--c, #8a67ff);
}

.dc-demo-embed-title {
    font-weight: 500;
    font-size: 0.95em;
    color: #fff;
}

.dc-demo-embed-text {
    margin-top: 0.3em;
    font-weight: 300;
    font-size: 0.88em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

.dc-demo-embed-text b {
    font-weight: 600;
    color: #fff;
}

.dc-demo-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
    gap: 0.2em 2em;
    margin-top: 0.6em;
}

.dc-demo-field-k {
    font-weight: 500;
    font-size: 0.8em;
    color: #fff;
}

.dc-demo-field-v {
    font-weight: 300;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.78);
}

.dc-demo-embed-foot {
    margin-top: 0.6em;
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.42);
}

/* Direktnachricht an die verwarnte Person: Karte unten rechts. */
.dc-demo-dm {
    position: absolute;
    right: 0.9em;
    bottom: 0.9em;
    width: min(17em, 72%);
    padding: 0.6em 0.7em 0.7em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6em;
    background: #111118;
    font-size: 0.88em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-demo-dm.is-in {
    opacity: 1;
    transform: none;
}

.dc-demo-dm.is-in.is-out {
    opacity: 0;
    transform: translateY(14px);
}

.dc-demo-dm-label {
    font-weight: 600;
    font-size: 0.68em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-dm-head {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-top: 0.45em;
}

.dc-demo-dm-head img {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #fff;
}

.dc-demo-dm-head b {
    font-weight: 500;
    color: #fff;
}

.dc-demo-dm-head .dc-demo-app {
    margin-left: 0;
}

.dc-demo-dm .dc-demo-embed {
    margin-top: 0.45em;
}

/* Wo rechts die Direktnachricht kommt, enden Embed und Knopfzeile vor der Karte. */
.dc-demo-feed--dm .dc-demo-msg .dc-demo-embed,
.dc-demo-feed--dm .dc-demo-msg .dc-demo-btns {
    box-sizing: border-box;
    max-width: calc(100% - 17em);
}

.dc-demo-feed--dm .dc-demo-v2 .dc-demo-btns {
    max-width: none;
}

/* Kanalname in der Kopfzeile, je Ablauf ein eigener, wenn der Kanal wechselt. */
.dc-demo-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.dc-demo-bar-name[hidden] {
    display: none;
}

.dc-demo-hash--at {
    font-size: 1.1em;
}

/* Erkannt: rot markiert, ein Lichtstreifen faehrt einmal darueber, dann
   loescht der Bot die Nachricht. */
.dc-demo-msg.is-flagged .dc-demo-pad {
    background: rgba(237, 66, 69, 0.1);
    box-shadow: inset 3px 0 0 #ed4245;
}

.dc-demo-msg.is-flagged .dc-demo-pad::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(237, 66, 69, 0.28) 45%, transparent 70%);
    background-size: 220% 100%;
    animation: dc-demo-scan 0.9s ease-out 1 forwards;
    pointer-events: none;
}

@keyframes dc-demo-scan {
    from { background-position: 120% 0; }
    to   { background-position: -40% 0; }
}

.dc-demo-msg.is-flagged .dc-demo-text {
    color: rgba(255, 210, 211, 0.9);
}

.dc-demo-text b {
    font-weight: 600;
    color: #fff;
}

.dc-demo-msg--keep {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
}

.dc-demo-msg--cont:not(.dc-demo-msg--bot) .dc-demo-pad {
    padding-top: 0;
}

.dc-demo-msg--cont:not(.dc-demo-msg--bot) .dc-demo-text {
    margin-top: 0;
}

.dc-demo-link {
    color: #6fb7ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* Gesperrtes Wort als Spoiler-Balken, wie Discord ihn zeigt. */
.dc-demo-spoiler {
    display: inline-block;
    padding: 0 0.2em;
    border-radius: 0.2em;
    background: #2a2a34;
    color: transparent;
    line-height: 1.2;
    user-select: none;
}

.dc-demo-mention--role {
    background: rgba(87, 242, 135, 0.14);
    color: #8ff0b0;
}

/* Beitritt: Systemzeile mit gruenem Pfeil statt Avatar. */
.dc-demo-join .dc-demo-pad {
    align-items: center;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.dc-demo-join-ic {
    display: grid;
    place-items: center;
    color: #23a55a;
}

.dc-demo-join-text {
    font-weight: 300;
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.62);
}

.dc-demo-join-text b {
    font-weight: 500;
    color: #fff;
}

/* Hinweis der Schutzsysteme: Embed nur mit Beschreibung. */
.dc-demo-embed--plain .dc-demo-embed-text {
    margin-top: 0;
}

.dc-demo-fields--three {
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 0.2em 1.6em;
}

.dc-demo-field-v {
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .dc-demo-feed--dm .dc-demo-fields--three {
        grid-template-columns: repeat(2, minmax(0, auto));
    }
}

/* Antwort nur fuer die Person sichtbar, die den Befehl genutzt hat. */
.dc-demo-eph {
    margin-top: 0.35em;
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.45);
}

.dc-demo-eph span {
    color: #6fb7ff;
}

/* Knoepfe unter einer Nachricht, Farben wie in Discord. */
.dc-demo-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.5em;
}

.dc-demo-btn {
    display: inline-flex;
    align-items: center;
    height: 2.1em;
    padding: 0 1.05em;
    border-radius: 0.3em;
    font-weight: 500;
    font-size: 0.82em;
    color: #fff;
    background: #4e5058;
}

.dc-demo-btn--success {
    background: #248046;
}

.dc-demo-btn.is-flagged {
    animation: dc-demo-press 0.6s ease;
}

@keyframes dc-demo-press {
    0%, 100% { transform: none; filter: none; }
    35%      { transform: scale(0.94); filter: brightness(0.8); }
}

/* Text einer Direktnachricht ohne Embed. */
.dc-demo-dm-text {
    margin-top: 0.45em;
    font-weight: 300;
    font-size: 0.9em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

.dc-demo-dm-text b {
    font-weight: 600;
    color: #fff;
}

.dc-demo-icode {
    padding: 0.05em 0.3em;
    border-radius: 0.25em;
    background: #0b0b10;
    font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.9em;
    color: #e3e3e8;
}

/* Log-Kanaele: Meldungen wie im echten Sicherheits-Log (Kopfzeile, Felder
   nebeneinander) und Audit-Log (Titel in Grossbuchstaben, yaml-Block).
   Farbe der Leiste je Reaktion. */
.dc-demo-lembed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35em 0.8em;
    max-width: 30em;
    margin-top: 0.4em;
    padding: 0.65em 0.8em 0.7em 0.75em;
    border-radius: 0.3em;
    border-left: 4px solid var(--bar, #5865f2);
    background: #15151d;
    font-size: 0.92em;
}

.dc-demo-lembed--thumb {
    grid-template-columns: minmax(0, 1fr) auto;
}

.dc-demo-lembed-author {
    font-weight: 500;
    font-size: 0.8em;
    color: #fff;
}

.dc-demo-lembed-title {
    grid-column: 1;
    font-weight: 600;
    font-size: 0.86em;
    letter-spacing: 0.01em;
    color: #fff;
}

.dc-demo-lembed-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 3.1em;
    height: 3.1em;
    border-radius: 0.3em;
    display: grid;
    place-items: center;
    font-weight: 500;
    color: #0d0d13;
    background: var(--c, #8a67ff);
}

.dc-demo-lembed-desc {
    grid-column: 1;
    min-width: 0;
    font-weight: 300;
    font-size: 0.86em;
    color: rgba(255, 255, 255, 0.82);
}

.dc-demo-code {
    margin: 0.2em 0 0;
    padding: 0.45em 0.6em;
    border-radius: 0.3em;
    border: 1px solid #1f1f29;
    background: #0b0b10;
    font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.86em;
    line-height: 1.5;
    color: #e3e3e8;
    white-space: pre-wrap;
    word-break: break-word;
}

.dc-demo-code .k {
    color: #7dd3fc;
}

.dc-demo-lfields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5em 0.9em;
}

.dc-demo-lfield.is-wide {
    grid-column: 1 / -1;
}

.dc-demo-lfield-k {
    font-weight: 600;
    font-size: 0.76em;
    color: #fff;
}

.dc-demo-lfield-v {
    margin-top: 0.1em;
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    overflow-wrap: anywhere;
}

.dc-demo-lfoot {
    grid-column: 1 / -1;
    margin-top: 0.15em;
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.45);
}

/* Kopfzeile: Serverliste, Datei, Website, und Umbenennen mitten im Ablauf. */
.dc-demo-bar-name {
    min-width: 0;
}

.dc-demo-bar-name[data-in]:not(.is-in),
.dc-demo-bar-name.is-out {
    display: none;
}

.dc-demo-bar-ic {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.45);
}

.dc-demo-bar-server {
    font-weight: 600;
    color: #fff;
}

.dc-demo-bar-file {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dc-demo-btn--primary   { background: #5865f2; }
.dc-demo-btn--secondary { background: #4e5058; }
.dc-demo-btn--danger    { background: #da373c; }

/* Auswahlmenue unter dem Panel, klappt beim Klick auf. */
.dc-demo-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 26em;
    height: 2.6em;
    margin-top: 0.5em;
    padding: 0 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.3em;
    background: #111117;
    font-size: 0.86em;
    color: rgba(255, 255, 255, 0.55);
    transition: border-color 0.2s ease;
}

.dc-demo-select svg {
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease;
}

.dc-demo-select.is-flagged:not(.is-out) {
    border-color: #5865f2;
}

.dc-demo-select.is-flagged:not(.is-out) svg {
    transform: rotate(180deg);
}

.dc-demo-select-list {
    max-width: 26em;
    max-height: 0;
    margin-top: 0.25em;
    overflow: hidden;
    border: 0 solid rgba(255, 255, 255, 0.08);
    border-radius: 0.3em;
    background: #111117;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.dc-demo-select-list.is-in {
    max-height: 14em;
    border-width: 1px;
    opacity: 1;
}

.dc-demo-select-list.is-in.is-out {
    max-height: 0;
    border-width: 0;
    opacity: 0;
}

.dc-demo-opt {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    padding: 0.5em 0.8em;
    font-size: 0.84em;
    transition: background-color 0.2s ease;
}

.dc-demo-opt b {
    font-weight: 500;
    color: #fff;
}

.dc-demo-opt span {
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.5);
}

.dc-demo-opt.is-flagged {
    background: rgba(255, 255, 255, 0.07);
}

/* Protokoll als Datei unter der Log-Meldung. */
.dc-demo-file {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    max-width: 26em;
    margin-top: 0.45em;
    padding: 0.55em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4em;
    background: #121219;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dc-demo-file.is-flagged {
    border-color: rgba(111, 183, 255, 0.6);
    background: #141a24;
}

.dc-demo-file-name {
    font-size: 0.82em;
    color: #6fb7ff;
    overflow-wrap: anywhere;
}

.dc-demo-file-size {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
}

/* Datumstrenner wie in Discord, wenn Zeit vergangen ist. */
.dc-demo-divider .dc-demo-pad {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    font-size: 0.72em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

.dc-demo-divider .dc-demo-pad::before,
.dc-demo-divider .dc-demo-pad::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Erwaehnt die eigene Rolle: gelb hinterlegt wie in Discord. */
.dc-demo-msg--hl .dc-demo-pad {
    background: rgba(240, 178, 50, 0.08);
    box-shadow: inset 2px 0 0 #f0b232;
}

/* Reaktion des Bots unter einer weitergeleiteten Antwort. */
.dc-demo-reacts {
    display: flex;
    margin-top: 0.35em;
}

.dc-demo-react {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    height: 1.7em;
    padding: 0 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.78em;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dc-demo-react.is-in {
    opacity: 1;
    transform: none;
}

/* Kanalliste wie in Discord: neue Kanaele klappen auf, Umbenennen tauscht
   den Namen, ein gesperrtes Schloss zeigt private Kanaele. */
.dc-demo-feed--list {
    justify-content: flex-start;
    padding: 0.5em 0;
    background: #0a0a0f;
    -webkit-mask-image: none;
            mask-image: none;
}

.dc-demo-cat {
    padding: 0.9em 1.1em 0.3em;
    font-weight: 600;
    font-size: 0.66em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-ch {
    display: grid;
    grid-template-rows: 1fr;
    transition:
        grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.dc-demo-ch--new {
    grid-template-rows: 0fr;
    opacity: 0;
}

.dc-demo-ch--new.is-in {
    grid-template-rows: 1fr;
    opacity: 1;
}

.dc-demo-ch.is-in.is-out {
    grid-template-rows: 0fr;
    opacity: 0;
}

.dc-demo-ch-pad {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin: 1px 0.55em;
    padding: 0.32em 0.55em;
    border-radius: 0.3em;
    font-size: 0.86em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
}

.dc-demo-ch--on .dc-demo-ch-pad {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.dc-demo-ch.is-flagged .dc-demo-ch-pad {
    animation: dc-demo-ch-pulse 2.4s ease;
}

@keyframes dc-demo-ch-pulse {
    0%, 35% { background-color: rgba(138, 103, 255, 0.26); color: #fff; }
    100%    { background-color: transparent; }
}

.dc-demo-ch-hash {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    width: 1.3em;
    height: 1.3em;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-ch-ic {
    width: 100%;
    height: 100%;
}

/* Privater Kanal: oben rechts an der Raute ein Schloss, freigestellt. */
.dc-demo-ch-hash--lock .dc-demo-ch-ic {
    -webkit-mask-image: radial-gradient(circle at 88% 14%, transparent 0 0.42em, #000 0.43em);
            mask-image: radial-gradient(circle at 88% 14%, transparent 0 0.42em, #000 0.43em);
}

.dc-demo-ch-lock {
    position: absolute;
    top: -0.12em;
    right: -0.16em;
    width: 0.62em;
    height: 0.62em;
    color: rgba(255, 255, 255, 0.6);
}

.dc-demo-ch-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-demo-ch-name[data-in]:not(.is-in),
.dc-demo-ch-name.is-out {
    display: none;
}

/* Protokoll-Datei geoeffnet: Aufbau wie das HTML-Transkript des Bots. */
.dc-demo-feed--doc {
    justify-content: flex-start;
    padding: 0;
    background: #17181c;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 2em);
            mask-image: linear-gradient(to top, transparent 0, #000 2em);
}

.dc-doc-head {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.65em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    background: #1e1f24;
    font-weight: 600;
    font-size: 0.92em;
    color: #fff;
}

.dc-doc-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.2em;
    padding: 0.55em 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #1b1c21;
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.55);
}

.dc-doc-info b {
    font-weight: 500;
    color: #fff;
}

.dc-doc-msgs {
    padding: 0.4em 0;
}

.dc-doc-msg {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    gap: 0 0.75em;
    padding: 0.4em 1em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.4s ease;
}

.dc-doc-msg.is-in {
    opacity: 1;
    transform: none;
}

.dc-doc-av {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 500;
    font-size: 0.95em;
    color: #0d0d13;
    background: var(--c, #8a67ff);
    object-fit: cover;
}

img.dc-doc-av {
    background: #fff;
}

.dc-doc-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2em 0.45em;
    font-size: 0.9em;
}

.dc-doc-name b {
    font-weight: 500;
}

.dc-doc-name span {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.38);
}

.dc-doc-name .dc-doc-bot {
    align-self: center;
    padding: 0 0.35em;
    border-radius: 0.25em;
    background: #5865f2;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

.dc-doc-text {
    font-weight: 300;
    font-size: 0.9em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

/* Chatfenster einer Website, an das die Tickets angebunden sind. */
.dc-demo-feed--web {
    align-items: center;
    justify-content: center;
    padding: 0.9em;
    -webkit-mask-image: none;
            mask-image: none;
}

.dc-web {
    display: flex;
    flex-direction: column;
    width: min(100%, 22em);
    height: 100%;
    max-height: 19em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9em;
    background: #16161d;
}

.dc-web-head {
    padding: 0.7em 0.9em;
    background: linear-gradient(135deg, #7b5cff, #5b3fd6);
    color: #fff;
}

.dc-web-head b {
    display: block;
    font-weight: 600;
    font-size: 0.92em;
}

.dc-web-head span {
    display: block;
    font-size: 0.7em;
    opacity: 0.8;
}

.dc-web-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.45em;
    min-height: 0;
    padding: 0.8em;
    overflow: hidden;
}

.dc-web-msg {
    display: flex;
}

.dc-web-msg[data-in] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.4s ease;
}

.dc-web-msg[data-in].is-in {
    opacity: 1;
    transform: none;
}

.dc-web-msg span {
    max-width: 80%;
    padding: 0.5em 0.75em;
    border-radius: 0.9em;
    font-size: 0.84em;
    line-height: 1.4;
}

.dc-web-msg--me {
    justify-content: flex-end;
}

.dc-web-msg--me span {
    border-bottom-right-radius: 0.3em;
    background: #8a67ff;
    color: #fff;
}

.dc-web-msg--them span {
    border-bottom-left-radius: 0.3em;
    background: #24242e;
    color: rgba(255, 255, 255, 0.9);
}

.dc-web-typing {
    display: none;
}

.dc-web-typing.is-in {
    display: flex;
}

.dc-web-typing.is-in.is-out {
    display: none;
}

.dc-web-typing .dc-demo-dots {
    padding: 0.65em 0.8em;
    border-radius: 0.9em;
    background: #24242e;
}

.dc-web-input {
    position: relative;
    margin: 0 0.8em 0.8em;
    padding: 0.55em 0.8em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.6em;
    background: #0f0f15;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* Was der Besucher gerade tippt, schreibt sich ins Eingabefeld. Das Feld
   deckt den Platzhalter ganz ab, nur der Text darin erscheint nach und nach. */
.dc-web-draft {
    position: absolute;
    inset: 0;
    display: none;
    padding: 0.55em 0.8em;
    overflow: hidden;
    background: #0f0f15;
    color: #fff;
}

.dc-web-draft.is-in {
    display: block;
}

.dc-web-draft.is-in > span {
    display: inline-block;
    vertical-align: top;
    animation: dc-web-type 1.2s steps(28) forwards;
}

.dc-web-draft.is-in.is-out {
    display: none;
}

@keyframes dc-web-type {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Rollen: Knopf mehrmals gedrueckt, Wechselinhalte, Profil mit Rollen,
   Haekchen im Menue, Abschnitte (Components V2), eigene Reaktion. */
.dc-demo-btn.is-pressed {
    animation: dc-demo-press 0.6s ease;
}

.dc-demo-swap[data-in]:not(.is-in),
.dc-demo-swap.is-out {
    display: none;
}

.dc-demo-prof-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
}

.dc-demo-prof-head .dc-demo-av {
    width: 1.9em;
    height: 1.9em;
    font-size: 0.9em;
}

.dc-demo-prof-head b {
    font-weight: 600;
}

.dc-demo-prof-k {
    margin-top: 0.6em;
    font-weight: 600;
    font-size: 0.68em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.dc-demo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: 0.35em;
    min-height: 1.75em;
}

.dc-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    height: 1.75em;
    padding: 0 0.5em;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

.dc-demo-chip i {
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: var(--c, #99aab5);
}

.dc-demo-chip--anim:not(.is-in),
.dc-demo-chip--anim.is-out {
    display: none;
}

.dc-demo-chip--anim.is-in {
    animation: dc-demo-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dc-demo-chip-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
}

.dc-demo-chip-none {
    align-self: center;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.4);
}

.dc-demo-opt--check {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
}

.dc-demo-opt--check > div {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.dc-demo-box {
    position: relative;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.25em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dc-demo-opt--on .dc-demo-box,
.dc-demo-opt.is-flagged .dc-demo-box {
    border-color: #5865f2;
    background: #5865f2;
}

.dc-demo-opt--on.is-out .dc-demo-box {
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
}

.dc-demo-box::after {
    content: '';
    position: absolute;
    left: 0.28em;
    top: 0.08em;
    width: 0.3em;
    height: 0.55em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.dc-demo-opt--on .dc-demo-box::after,
.dc-demo-opt.is-flagged .dc-demo-box::after {
    opacity: 1;
}

.dc-demo-opt--on.is-out .dc-demo-box::after {
    opacity: 0;
}

.dc-demo-v2 {
    max-width: 30em;
    margin-top: 0.4em;
    padding: 0.75em 0.9em 0.85em;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.5em;
    background: #15151d;
}

.dc-demo-v2-sec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 0.8em;
    align-items: start;
}

.dc-demo-v2-thumb {
    display: grid;
    place-items: center;
    width: 2.9em;
    height: 2.9em;
    border-radius: 0.4em;
    background: var(--g, #5865f2);
}

.dc-demo-feed--dm .dc-demo-msg--narrow .dc-demo-text {
    max-width: calc(100% - 17em);
}

.dc-demo-v2-text {
    font-weight: 300;
    font-size: 0.88em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.dc-demo-v2-text b {
    font-weight: 600;
    color: #fff;
}

.dc-demo-v2-sep {
    height: 1px;
    margin: 0.75em 0;
    background: rgba(255, 255, 255, 0.08);
}

.dc-demo-v2 .dc-demo-select {
    max-width: none;
}

.dc-demo-v2 .dc-demo-select-list {
    max-width: none;
}

.dc-demo-react--static {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dc-demo-react--own,
.dc-demo-react.is-flagged {
    border-color: rgba(88, 101, 242, 0.85);
    background: rgba(88, 101, 242, 0.22);
}

.dc-demo-react--own.is-out {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.dc-demo-rfields {
    display: grid;
    gap: 0.55em;
    margin-top: 0.55em;
}

/* Willkommen: Begruessungsbild (Aufbau wie handlers/welcomeImage.js,
   1024 x 450, Hintergrund schlicht schwarz statt des lila Verlaufs, so wie
   man ihn mit einem eigenen Hintergrund einstellen kann), Boost-Systemzeile,
   Fenster "Datum waehlen". */
.dc-wcard {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1024 / 450;
    margin-top: 0.6em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4em;
    background: #0b0b0f;
    color: #fff;
    text-align: center;
}

.dc-wcard-av {
    display: grid;
    place-items: center;
    width: 14.6cqw;
    height: 14.6cqw;
    border-radius: 50%;
    background: var(--c, #8a67ff);
    box-shadow: 0 0 0 0.6cqw rgba(255, 255, 255, 0.85), 0 0 0 1.2cqw rgba(255, 255, 255, 0.15);
    font-weight: 600;
    font-size: 6cqw;
    color: #0d0d13;
}

.dc-wcard-head {
    margin-top: 3.4cqw;
    font-weight: 700;
    font-size: 4.1cqw;
    line-height: 1;
    white-space: pre;
}

.dc-wcard-name {
    margin-top: 1.4cqw;
    font-weight: 600;
    font-size: 3.3cqw;
    color: #e0e0e0;
}

.dc-wcard-num {
    margin-top: 0.9cqw;
    font-weight: 500;
    font-size: 2.5cqw;
    color: #b4b4b4;
}

.dc-demo-boost .dc-demo-join-ic {
    color: #ff73fa;
}

.dc-demo-modal {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 1em;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.dc-demo-modal.is-in {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.dc-demo-modal.is-in.is-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.dc-demo-modal-box {
    width: min(22em, 100%);
    padding: 1em 1.1em 0.9em;
    border-radius: 0.6em;
    background: #1e1f24;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);
    transform: scale(0.94);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-demo-modal.is-in .dc-demo-modal-box {
    transform: none;
}

.dc-demo-modal-title {
    margin-bottom: 0.8em;
    font-weight: 600;
    font-size: 1.05em;
    color: #fff;
}

.dc-demo-modal-k {
    margin: 0.7em 0 0.35em;
    font-weight: 600;
    font-size: 0.68em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.dc-demo-modal-in {
    position: relative;
    height: 2.4em;
    padding: 0.55em 0.75em;
    overflow: hidden;
    border-radius: 0.3em;
    background: #111216;
    font-size: 0.86em;
    color: rgba(255, 255, 255, 0.9);
}

.dc-demo-modal-in .dc-web-draft {
    background: #111216;
    padding: 0.55em 0.75em;
}

.dc-demo-modal-ph {
    color: rgba(255, 255, 255, 0.35);
}

.dc-demo-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
    margin-top: 1em;
    font-size: 0.9em;
}

.dc-demo-modal-cancel {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.8);
}

/* Meldungen: Autorzeile, Titel als Link, Vorschaubilder als Nachbau,
   Link-Knopf, Sterne, Google-Zeichen. */
.dc-demo-embed--media {
    max-width: 14.5em;
}

.dc-demo-embed-author {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 0.35em;
    font-weight: 500;
    font-size: 0.8em;
    color: #fff;
}

.dc-demo-embed-author-av {
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--c, #8a67ff);
    font-size: 0.8em;
    font-weight: 600;
    color: #0d0d13;
}

.dc-demo-embed-title--link {
    color: #00a8fc;
}

.dc-pic {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    margin-top: 0.6em;
    overflow: hidden;
    border-radius: 0.3em;
}

.dc-pic--twitch {
    background:
        radial-gradient(60% 80% at 30% 70%, rgba(145, 70, 255, 0.45), transparent 70%),
        radial-gradient(50% 60% at 80% 20%, rgba(255, 120, 60, 0.35), transparent 70%),
        linear-gradient(160deg, #1d1a2b, #0f0d16);
}

.dc-pic--yt {
    padding: 0 6%;
    background: linear-gradient(135deg, #b4141e, #3a0a0f 70%);
}

.dc-pic--yt b {
    font-weight: 800;
    font-size: 1.55em;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: center;
    color: #fff;
    text-shadow: 0 0.08em 0.3em rgba(0, 0, 0, 0.5);
}

.dc-pic-live,
.dc-pic-viewers {
    position: absolute;
    top: 0.55em;
    padding: 0.1em 0.4em;
    border-radius: 0.2em;
    font-weight: 700;
    font-size: 0.66em;
    color: #fff;
}

.dc-pic-live {
    left: 0.55em;
    background: #e91916;
}

.dc-pic-viewers {
    left: 4.6em;
    background: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

.dc-demo-btn--link {
    gap: 0.4em;
    background: #4e5058;
}

.dc-demo-btn--link svg {
    opacity: 0.85;
}

.dc-demo-stars {
    letter-spacing: 0.08em;
    color: #f5b301;
}

.dc-demo-g {
    display: inline-grid;
    place-items: center;
    width: 1.35em;
    height: 1.35em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    font-weight: 700;
    font-size: 0.95em;
    color: #4285f4;
}

.dc-demo-modal-in {
    white-space: nowrap;
}

/* Formulare: Frage fett, Antwort darunter; Balken der Umfrage. */
.dc-demo-qa {
    margin-top: 0.55em;
    font-size: 0.86em;
    line-height: 1.4;
}

.dc-demo-qa b {
    display: block;
    font-weight: 600;
    color: #fff;
}

.dc-demo-qa span {
    display: block;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

.dc-demo-pbar {
    display: inline-block;
    width: 7em;
    height: 0.55em;
    margin-right: 0.3em;
    overflow: hidden;
    border-radius: 0.3em;
    background: rgba(255, 255, 255, 0.12);
    vertical-align: middle;
}

.dc-demo-pbar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #8a67ff;
}

/* Community: Rang-Karte wie das Bild von /rank (800 x 250), Tic Tac Toe,
   Bild im Anhang, Meme, Ueberschrift im Embed. */
.dc-rcard {
    container-type: inline-size;
    position: relative;
    max-width: 22em;
    aspect-ratio: 800 / 250;
    margin-top: 0.35em;
    overflow: hidden;
    border-radius: 0.4em;
    background: #2b2d31;
}

.dc-rcard-av {
    position: absolute;
    left: 5.6cqw;
    top: 5.6cqw;
    display: grid;
    place-items: center;
    width: 20cqw;
    height: 20cqw;
    border-radius: 50%;
    background: var(--c, #8a67ff);
    font-weight: 600;
    font-size: 8cqw;
    color: #0d0d13;
}

.dc-rcard-name {
    position: absolute;
    left: 30cqw;
    top: 7.4cqw;
    font-weight: 700;
    font-size: 4.25cqw;
    line-height: 1;
    color: #fff;
}

.dc-rcard-row {
    position: absolute;
    left: 30cqw;
    display: flex;
    font-size: 2.75cqw;
    line-height: 1;
    color: #b5bac1;
}

.dc-rcard-row:nth-child(3) { top: 14.8cqw; }
.dc-rcard-row:nth-child(4) { top: 19.2cqw; }
.dc-rcard-row:nth-child(5) { top: 23.6cqw; }

.dc-rcard-row > span {
    width: 11.25cqw;
}

.dc-rcard-row--wide > span {
    width: 18.75cqw;
}

.dc-rcard-row b {
    font-weight: 700;
    color: #fff;
}

.dc-demo-ttt {
    display: grid;
    grid-template-columns: repeat(3, 2.9em);
    gap: 0.35em;
    margin-top: 0.5em;
}

.dc-demo-ttt-c {
    display: flex;
}

.dc-demo-ttt .dc-demo-btn {
    justify-content: center;
    width: 100%;
    padding: 0;
    transition: opacity 0.3s ease;
}

.dc-demo-ttt .dc-demo-btn--danger.is-in,
.dc-demo-ttt .dc-demo-btn--primary.is-in {
    animation: dc-demo-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dc-demo-ttt.is-flagged .dc-demo-btn,
.dc-demo-btn--off {
    opacity: 0.5;
}

.dc-demo-att {
    max-width: 14em;
}

.dc-pic--photo {
    background: linear-gradient(160deg, #5a3b22, #24170c);
}

.dc-demo-embed .dc-pic--photo {
    max-width: 11em;
}

.dc-pic--meme {
    grid-template-rows: auto 1fr auto;
    padding: 4% 0;
    background: #121212;
}

.dc-pic--meme b {
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 0 0.15em #000, 0 0 0.15em #000;
}

.dc-demo-fields--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5em;
}

.dc-demo-h1 {
    margin-bottom: 0.45em;
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.25;
    color: #fff;
}

/* Voice: Mitglieder unter Sprachkanaelen (gruener Ring beim Sprechen),
   Platzbegrenzung, Eingabefeld mit Slash-Befehl, Bedienfeld der Musik. */
.dc-demo-vm-pad {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 1px 0.55em 1px 2.3em;
    padding: 0.2em 0.45em;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    overflow: hidden;
}

.dc-demo-vm-av {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--c, #8a67ff);
    font-weight: 600;
    font-size: 0.8em;
    color: #0d0d13;
}

img.dc-demo-vm-av {
    background: #fff;
    object-fit: cover;
}

.dc-demo-vm-av.is-talk {
    animation: dc-demo-talk 1.8s ease-in-out infinite;
}

@keyframes dc-demo-talk {
    0%, 55% { box-shadow: 0 0 0 2px #23a55a; }
    65%, 100% { box-shadow: 0 0 0 2px transparent; }
}

.dc-demo-vm-deaf {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    margin-left: auto;
    color: #f23f43;
}

.dc-demo-ch-limit {
    display: inline-flex;
    margin-left: auto;
    overflow: hidden;
    border-radius: 0.3em;
    font-size: 0.72em;
    font-weight: 600;
}

.dc-demo-ch-limit b {
    padding: 0.08em 0.35em;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dc-demo-ch-limit b + b {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.dc-demo-ch-limit[data-in]:not(.is-in) {
    display: none;
}

.dc-demo-compose {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.6em 0.9em 0.3em;
    padding: 0.6em 0.85em;
    overflow: hidden;
    border-radius: 0.5em;
    background: #1e1f24;
    font-size: 0.84em;
    white-space: nowrap;
    color: #dbdee1;
}

.dc-demo-compose[data-in]:not(.is-in),
.dc-demo-compose.is-out {
    display: none;
}

.dc-demo-compose-cmd {
    font-weight: 600;
    color: #fff;
}

.dc-demo-compose-opt {
    padding: 0.05em 0.45em;
    border-radius: 0.25em;
    background: rgba(255, 255, 255, 0.1);
    color: #b5bac1;
}

.dc-demo-compose-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-demo-compose-val > span {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}

.dc-demo-compose.is-in .dc-demo-compose-val > span {
    animation: dc-web-type 1.1s steps(var(--n, 20)) 0.2s forwards;
}

img.dc-demo-embed-author-av {
    background: #fff;
}

.dc-demo-embed-text .dc-demo-np-title {
    display: block;
    font-weight: 600;
    color: #00a8fc;
}

.dc-demo-np-time {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin-top: 0.6em;
}

.dc-demo-prog {
    position: relative;
    flex: 0 1 9em;
    height: 0.28em;
    border-radius: 0.2em;
    background: rgba(255, 255, 255, 0.18);
}

.dc-demo-prog i,
.dc-demo-prog b {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.dc-demo-prog i {
    width: var(--p);
}

.dc-demo-prog b {
    top: 50%;
    left: var(--p);
    width: 0.75em;
    height: 0.75em;
    margin: -0.375em 0 0 -0.375em;
    border-radius: 50%;
}

.dc-demo-btn--icon {
    justify-content: center;
    min-width: 3.2em;
    padding: 0 0.9em;
}

.dc-demo-btn--icon svg {
    width: 1.25em;
    height: 1.25em;
}

.dc-demo-src {
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.3em;
    vertical-align: -0.2em;
}

.dc-demo-feed.is-resetting .dc-demo-modal,
.dc-demo-feed.is-resetting .dc-demo-modal-box,
.dc-demo-feed.is-resetting .dc-demo-ch,
.dc-demo-feed.is-resetting .dc-demo-select-list,
.dc-demo-feed.is-resetting .dc-demo-react,
.dc-demo-feed.is-resetting .dc-doc-msg,
.dc-demo-feed.is-resetting .dc-web-msg {
    transition: none !important;
}

/* Tippt gerade: drei huepfende Punkte unten im Chat, wie bei Discord. */
.dc-demo-typing {
    position: absolute;
    left: 1em;
    bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 300;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dc-demo-typing b {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.dc-demo-typing.is-in {
    opacity: 1;
}

.dc-demo-typing.is-in.is-out {
    opacity: 0;
}

.dc-demo-dots {
    display: inline-flex;
    gap: 0.22em;
}

.dc-demo-dots i {
    width: 0.38em;
    height: 0.38em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    animation: dc-demo-dot 1.1s ease-in-out infinite;
}

.dc-demo-dots i:nth-child(2) { animation-delay: 0.15s; }
.dc-demo-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dc-demo-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-0.28em); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-demo-msg,
    .dc-demo-feed,
    .dc-demo-typing,
    .dc-demo-dm {
        transition: none;
    }
    .dc-demo-dots i,
    .dc-demo-btn.is-flagged,
    .dc-demo-btn.is-pressed,
    .dc-demo-chip--anim.is-in,
    .dc-demo-ttt .dc-demo-btn.is-in,
    .dc-demo-vm-av.is-talk,
    .dc-demo-compose.is-in .dc-demo-compose-val > span,
    .dc-demo-ch.is-flagged .dc-demo-ch-pad,
    .dc-web-draft.is-in > span,
    .dc-demo-msg.is-flagged .dc-demo-pad::after {
        animation: none;
    }
    .dc-demo-compose-val > span {
        clip-path: none;
    }
}

@media (max-width: 768px) {
    .dc-modal-demo {
        font-size: 0.8em;
    }
    .dc-modal.has-demo .dc-modal-demo {
        height: 24em;
    }
    /* Am Handy steht die Karte im Verlauf unter der Antwort des Bots, statt
       darueber zu liegen, und klappt beim Ein- und Ausblenden auf und zu. */
    .dc-demo-dm {
        position: static;
        flex: 0 0 auto;
        width: auto;
        max-height: 0;
        margin: 0 calc(1em / 0.88) 0 calc(4.2em / 0.88);
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        overflow: hidden;
        transform: none;
        transition:
            max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            margin 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            border-width 0.5s ease,
            opacity 0.4s ease;
    }
    .dc-demo-dm.is-in {
        max-height: 18em;
        margin-top: 0.4em;
        margin-bottom: 0.4em;
        padding-top: 0.6em;
        padding-bottom: 0.7em;
        border-width: 1px;
    }
    .dc-demo-dm.is-in.is-out {
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        transform: none;
    }
    .dc-demo-feed--dm .dc-demo-msg .dc-demo-embed {
        max-width: 30em;
    }
    .dc-demo-feed--dm .dc-demo-msg .dc-demo-btns {
        max-width: none;
    }
    .dc-demo-feed--dm .dc-demo-msg--narrow .dc-demo-text {
        max-width: none;
    }
    .dc-demo-lfields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dc-demo-fields--three {
        grid-template-columns: repeat(2, minmax(0, auto));
    }
}

/* ------------------------------------------------------------------
   Twitch-Seite: Vorschau im breiten Praxis-Feld. Links das Stream-Bild
   mit Alerts, rechts der Twitch-Chat. Gespielt vom selben Abspieler wie
   die Discord-Chats (data-in, data-flag, data-out).
   ------------------------------------------------------------------ */
.tw-live.dc-demo-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31%;
    padding: 0;
    -webkit-mask-image: none;
            mask-image: none;
    justify-content: stretch;
    background: #0e0e10;
    font-size: clamp(9px, 1.25cqi, 14px);
    color: #efeff1;
}

.dc-frame--tw .dc-showcase {
    background: #0e0e10;
}

.tw-stream {
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.tw-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    display: block;
}

/* Leichter Schatten oben und unten, damit LIVE-Anzeige und Sub-Ziel auf
   hellem Himmel und Wiese lesbar bleiben. */
.tw-stream::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0, transparent 22%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.tw-hud,
.tw-alert,
.tw-tts,
.tw-sound,
.tw-goal {
    z-index: 1;
}

.tw-hud {
    position: absolute;
    top: 0.9em;
    left: 0.9em;
    display: flex;
    gap: 0.45em;
    margin: 0;
    font-size: 0.78em;
    font-weight: 500;
}

.tw-live-badge {
    padding: 0.18em 0.5em;
    border-radius: 0.3em;
    background: #eb0400;
    color: #fff;
    letter-spacing: 0.04em;
}

.tw-viewers {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.18em 0.55em;
    border-radius: 0.3em;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.tw-viewers svg {
    width: 1.1em;
    height: 1.1em;
    color: #ff8280;
}

.tw-v-new,
.tw-g-new {
    display: none;
}

.tw-v-new.is-in {
    display: inline;
}

.tw-viewers:has(.tw-v-new.is-in) .tw-v-old {
    display: none;
}

/* Alerts: oben in der Mitte, wie eine Browser-Quelle in OBS. */
.tw-alert {
    position: absolute;
    top: 14%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    min-width: 46%;
    padding: 1em 1.6em 1.1em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9em;
    background: rgba(14, 14, 16, 0.84);
    box-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.5);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -12%) scale(0.92);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.tw-alert.is-in {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.tw-alert.is-in.is-out {
    opacity: 0;
    transform: translate(-50%, -6%) scale(0.96);
}

.tw-alert--sub {
    gap: 0.4em;
    padding: 1.15em 1.8em 1.2em;
}

.tw-alert--sub .tw-alert-title {
    margin: 0;
}

.tw-alert--sub .tw-alert-title b {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 1.7em;
    line-height: 1.15;
    color: #bf94ff;
}

.tw-alert--sub .tw-alert-sub {
    margin-top: 0.2em;
    padding: 0.2em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
}

.tw-alert-title {
    margin: 0;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.25;
}

.tw-alert-title b {
    font-weight: 600;
    color: #bf94ff;
}

.tw-alert-sub {
    margin: 0;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Vorlese-Karte unten links, Soundboard-Karte oben rechts. */
.tw-tts,
.tw-sound {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.7em;
    max-width: 52%;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8em;
    background: rgba(14, 14, 16, 0.82);
    opacity: 0;
    transform: translateY(12%);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tw-tts {
    left: 4%;
    bottom: 22%;
}

.tw-sound {
    right: 4%;
    top: 13%;
}

.tw-tts.is-in,
.tw-sound.is-in {
    opacity: 1;
    transform: none;
}

.tw-tts.is-in.is-out,
.tw-sound.is-in.is-out {
    opacity: 0;
}

.tw-tts p,
.tw-sound p {
    margin: 0;
    font-size: 0.92em;
    line-height: 1.35;
}

.tw-tts b,
.tw-sound b {
    display: block;
    font-weight: 600;
    color: #bf94ff;
}

.tw-sound p span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9em;
}

.tw-tts-ic,
.tw-sound-img {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.3em;
    height: 2.3em;
    border-radius: 0.55em;
    background: #9147ff;
    color: #fff;
}

.tw-sound-img {
    background: #00c8af;
}

.tw-tts-ic svg,
.tw-sound-img svg {
    width: 1.3em;
    height: 1.3em;
}

.tw-tts-bars {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.16em;
    height: 1.4em;
}

.tw-tts-bars i {
    display: block;
    width: 0.2em;
    height: 30%;
    border-radius: 0.1em;
    background: #bf94ff;
}

.tw-tts.is-in .tw-tts-bars i {
    animation: tw-bar 0.8s ease-in-out infinite;
}

.tw-tts.is-in .tw-tts-bars i:nth-child(2) { animation-delay: 0.15s; }
.tw-tts.is-in .tw-tts-bars i:nth-child(3) { animation-delay: 0.3s; }
.tw-tts.is-in .tw-tts-bars i:nth-child(4) { animation-delay: 0.45s; }

@keyframes tw-bar {
    50% { height: 100%; }
}

/* Sub-Ziel unten links: dunkle Karte mit grosser Zahl und einfarbigem
   Balken. Beim Resub springt die Zahl auf 42, der Balken waechst nach und
   ein +1 steigt auf. */
.tw-goal {
    position: absolute;
    left: 3.5%;
    bottom: 5%;
    width: 36%;
    min-width: 13em;
    padding: 0.75em 0.95em 0.85em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9em;
    background: rgba(14, 14, 16, 0.84);
    box-shadow: 0 0.8em 2.2em rgba(0, 0, 0, 0.45);
}

.tw-goal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6em;
    margin: 0 0 0.55em;
}

.tw-goal-label {
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
}

.tw-goal-num {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 1.35em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.tw-goal-of {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.tw-g-old,
.tw-g-new {
    display: inline-block;
}

.tw-g-new {
    display: none;
}

.tw-goal.is-in .tw-g-old {
    display: none;
}

.tw-goal.is-in .tw-g-new {
    display: inline-block;
    animation: tw-count 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tw-count {
    0%   { transform: translateY(40%); opacity: 0; }
    60%  { transform: translateY(-8%); opacity: 1; }
    100% { transform: none; }
}

.tw-goal-bar {
    position: relative;
    display: block;
    height: 0.62em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.tw-goal-bar i {
    position: relative;
    display: block;
    width: 82%;
    height: 100%;
    border-radius: inherit;
    background: #9147ff;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.tw-goal.is-in .tw-goal-bar i {
    width: 84%;
}

.tw-goal-plus {
    position: absolute;
    right: 0.95em;
    top: 0.9em;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    color: #bf94ff;
    opacity: 0;
    pointer-events: none;
}

.tw-goal.is-in .tw-goal-plus {
    animation: tw-plus 1.4s ease-out 0.1s;
}

@keyframes tw-plus {
    0%   { opacity: 0; transform: translateY(0.6em); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-1.6em); }
}

/* Chat rechts, Farben wie im dunklen Twitch. */
.tw-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #18181b;
    border-left: 1px solid #2f2f35;
}

.tw-chat-head {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.8em 1em;
    border-bottom: 1px solid #2f2f35;
    font-size: 0.74em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: #adadb8;
}

.tw-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    overflow-anchor: none;
    padding: 0.3em 0 0.4em;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em);
            mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em);
}

.tw-msg {
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.tw-msg.is-in {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tw-live.is-resetting .tw-msg,
.tw-live.is-resetting .tw-alert,
.tw-live.is-resetting .tw-tts,
.tw-live.is-resetting .tw-sound,
.tw-live.is-resetting .tw-goal-bar i {
    transition: none !important;
}

.tw-row {
    min-height: 0;
    overflow: hidden;
}

.tw-line {
    margin: 0;
    padding: 0.25em 1em;
    font-size: 0.9em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.tw-badges svg {
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.25em;
    vertical-align: -0.15em;
}

.tw-badges:empty {
    display: none;
}

.tw-name {
    font-weight: 600;
    color: var(--c);
}

.tw-at {
    font-weight: 600;
    color: #efeff1;
}

.tw-del {
    display: none;
    font-style: italic;
    color: #adadb8;
}

.tw-msg.is-flagged .tw-text {
    display: none;
}

.tw-msg.is-flagged .tw-del {
    display: inline;
}

.tw-ann {
    margin: 0.35em 0.7em;
    padding: 0.5em 0.7em 0.6em;
    border-left: 0.28em solid #9147ff;
    border-radius: 0.35em;
    background: rgba(145, 71, 255, 0.14);
}

.tw-ann-head {
    display: flex;
    align-items: center;
    gap: 0.35em;
    margin: 0 0 0.2em;
    font-size: 0.76em;
    font-weight: 600;
    color: #bf94ff;
}

.tw-ann-head svg {
    width: 1.15em;
    height: 1.15em;
}

.tw-ann .tw-line {
    padding: 0;
}

.tw-notice {
    margin: 0.35em 0.7em;
    padding: 0.5em 0.7em;
    border-left: 0.28em solid var(--nc, #9147ff);
    border-radius: 0.35em;
    background: #26262c;
    font-size: 0.86em;
    line-height: 1.4;
}

.tw-notice-head {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin: 0;
}

.tw-notice-head > svg {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.12em;
    color: var(--nc, #9147ff);
}

.tw-notice-body {
    margin: 0.25em 0 0;
    color: #efeff1;
}

.tw-cost {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin-left: 0.25em;
    color: #adadb8;
}

.tw-cost svg {
    width: 1em;
    height: 1em;
}

.tw-input {
    flex: 0 0 auto;
    margin: 0.4em 0.7em 0.7em;
}

.tw-input p {
    margin: 0;
}

.tw-input-box {
    padding: 0.6em 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.4em;
    background: #0e0e10;
    font-size: 0.86em;
    color: #adadb8;
}

.tw-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5em !important;
    font-size: 0.82em;
}

.tw-input-pts {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: #adadb8;
}

.tw-input-pts svg {
    width: 1.1em;
    height: 1.1em;
}

.tw-input-btn {
    padding: 0.35em 0.95em;
    border-radius: 0.35em;
    background: #9147ff;
    font-weight: 600;
    color: #fff;
}

/* Schmale Kachel (Handy): Stream oben, Chat darunter. */
@container (max-width: 560px) {
    .tw-live.dc-demo-feed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        font-size: clamp(9px, 3.1cqi, 13px);
    }
    .tw-stream {
        aspect-ratio: 16 / 9;
    }
    .tw-chat {
        border-left: 0;
        border-top: 1px solid #2f2f35;
    }
    .tw-chat-head {
        display: none;
    }
    .tw-alert {
        top: 10%;
        padding: 0.6em 1em 0.7em;
        font-size: 0.78em;
    }
    .tw-tts,
    .tw-sound {
        max-width: 64%;
        padding: 0.45em 0.6em;
        font-size: 0.74em;
    }
    .tw-tts {
        bottom: 26%;
    }
    .tw-goal {
        width: 50%;
        min-width: 0;
        padding: 0.55em 0.75em 0.65em;
        font-size: 0.74em;
    }
}

@media (max-width: 768px) {
    .dc-frame.dc-frame--tw {
        aspect-ratio: 4 / 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-goal.is-in .tw-g-new,
    .tw-goal.is-in .tw-goal-plus,
    .tw-tts.is-in .tw-tts-bars i {
        animation: none;
    }
}

/* Kacheln a und h: je vier Kanaele untereinander, rundes Kanalbild und Name. */
.dc-frame--channels {
    container-type: inline-size;
}

.tw-channels {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-channels li {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 7cqi;
    padding: 0 9cqi;
}

.tw-channels li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tw-channels img {
    flex: 0 0 auto;
    height: 62%;
    width: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    background: #18181b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tw-channels b {
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 5.6cqi, 30px);
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kachel e: nur der Chat mit Befehlen, ohne Stream-Bild. Die Regeln haben
   drei Klassen, damit sie die schmale Container-Regel oben ueberstimmen. */
.tw-live.tw-live--chat.dc-demo-feed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    font-size: clamp(9px, 2.9cqi, 14px);
}

@media (max-width: 768px) {
    .tw-live.tw-live--chat.dc-demo-feed {
        font-size: clamp(11px, 3.6cqi, 14px);
    }
}

.tw-live--chat .tw-chat {
    border-left: 0;
    border-top: 0;
}

.tw-live--chat .tw-chat-head {
    display: block;
}

/* Breite Kachel g: OBS Studio. Die Overlays des Bots kommen nacheinander
   als Browser-Quellen dazu, die gewaehlte Quelle ist rot umrandet wie in OBS.
   Die Overlays selbst nutzen dieselben Klassen wie die Stream-Vorschau. */
.dc-frame--obs .dc-showcase {
    background: #1e2028;
}

.obs.dc-demo-feed {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 33% auto;
    justify-content: normal;
    padding: 0;
    -webkit-mask-image: none;
            mask-image: none;
    background: #1e2028;
    font-size: clamp(8px, 1.15cqi, 13px);
    color: #dfe1e6;
}

.obs.is-resetting * {
    transition: none !important;
    animation: none !important;
}

.obs p {
    margin: 0;
}

.obs-bar {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.45em 0.9em;
    background: #16181d;
    border-bottom: 1px solid #2c2f3a;
    font-size: 0.9em;
}

.obs-bar b {
    font-weight: 600;
}

.obs-bar span {
    color: #8e93a0;
}

.obs-bar .obs-win {
    margin-left: auto;
    color: #6c7180;
}

.obs-win svg {
    display: block;
    width: 4em;
    height: 0.8em;
}

.obs-stage {
    position: relative;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.obs-prev {
    position: relative;
    width: min(100cqw, 100cqh * 16 / 9);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    container-type: inline-size;
    font-size: clamp(8.5px, calc(min(100cqw, 100cqh * 16 / 9) * 0.021), 14px);
}

.obs-show {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.obs-show.is-in {
    opacity: 1;
}

.obs-prev .tw-sound.obs-sound {
    right: auto;
    left: 3.5%;
    top: 12%;
}

.obs-chat {
    position: absolute;
    right: 3%;
    bottom: 5%;
    width: 31%;
    height: 54%;
    z-index: 1;
}

.obs-chat-list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
            mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
}

.obs-cmsg {
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.obs-cmsg.is-in {
    grid-template-rows: 1fr;
    opacity: 1;
}

.obs-cmsg > div {
    min-height: 0;
    overflow: hidden;
}

.obs-cmsg p {
    padding: 0.4em 0.65em;
    border-radius: 0.45em;
    background: rgba(14, 14, 16, 0.84);
    font-size: 0.86em;
    line-height: 1.35;
    color: #efeff1;
}

.obs-cmsg b {
    font-weight: 600;
}

/* Auswahlrahmen: rot mit Griffen an den Ecken, wie in OBS. */
.obs-sel {
    position: absolute;
    inset: -0.35em;
    z-index: 3;
    border: 2px solid #e5484d;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.obs-sel--full {
    inset: 0.5%;
}

.obs-sel.is-in {
    opacity: 1;
}

.obs-sel.is-in.is-out {
    opacity: 0;
}

.obs-sel i {
    position: absolute;
    width: 0.55em;
    height: 0.55em;
    background: #e5484d;
}

.obs-sel i:nth-child(1) { left: -0.3em; top: -0.3em; }
.obs-sel i:nth-child(2) { right: -0.3em; top: -0.3em; }
.obs-sel i:nth-child(3) { left: -0.3em; bottom: -0.3em; }
.obs-sel i:nth-child(4) { right: -0.3em; bottom: -0.3em; }

/* Fenster "Eigenschaften" der Browser-Quelle, die Adresse tippt sich ein. */
.obs-dlg {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 64%;
    border: 1px solid #3c4050;
    border-radius: 0.5em;
    background: #272a33;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translate(-50%, -46%);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.obs-dlg.is-in {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.obs-dlg.is-in.is-out {
    opacity: 0;
}

.obs-dlg-head {
    padding: 0.55em 0.9em;
    border-bottom: 1px solid #3c4050;
    font-size: 0.9em;
}

.obs-dlg-body {
    display: grid;
    gap: 0.55em;
    padding: 0.8em 0.9em;
}

.obs-field {
    display: grid;
    grid-template-columns: 4.2em minmax(0, 1fr);
    align-items: center;
    gap: 0.6em;
    font-size: 0.85em;
    color: #a8adb8;
}

.obs-field--two {
    grid-template-columns: 4.2em minmax(0, 1fr) 3.6em minmax(0, 1fr);
}

.obs-input {
    padding: 0.4em 0.55em;
    border: 1px solid #3c4050;
    border-radius: 0.3em;
    background: #1b1d23;
    color: #dfe1e6;
    white-space: nowrap;
    overflow: hidden;
}

.obs-type {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}

.obs-dlg.is-in .obs-type {
    animation: obs-type 1.8s steps(40) 0.5s forwards;
}

@keyframes obs-type {
    to { clip-path: inset(0 0 0 0); }
}

.obs-dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.45em;
    padding: 0.4em 0.9em 0.75em;
}

.obs-btn {
    padding: 0.35em 1.1em;
    border-radius: 0.3em;
    background: #3a3e4a;
    font-size: 0.85em;
}

.obs-btn--ok {
    background: #3b4bd9;
    color: #fff;
}

.obs-btn--ok.is-pressed {
    animation: obs-ok 0.4s ease;
}

@keyframes obs-ok {
    40% { transform: scale(0.92); background: #2c39b0; }
}

/* Docks unten: Szenen, Quellen, Audio-Mixer, Steuerung. */
.obs-docks {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr 1fr;
    gap: 0.45em;
    min-height: 0;
    padding: 0 0.55em 0.45em;
}

.obs-dock {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #343845;
    border-radius: 0.4em;
    background: #272a33;
}

.obs-dock-head {
    padding: 0.4em 0.7em;
    border-bottom: 1px solid #343845;
    font-size: 0.85em;
    color: #a8adb8;
}

.obs-dock ul {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    margin: 0;
    padding: 0.3em;
    overflow: hidden;
    list-style: none;
}

.obs-li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.32em 0.6em;
    border-radius: 0.3em;
    font-size: 0.9em;
}

.obs-li-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obs-li small {
    margin-left: auto;
    font-size: 0.85em;
    color: #8a8f9c;
    white-space: nowrap;
}

.obs-li svg {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    color: #8a8f9c;
}

.obs-li[data-in] {
    display: none;
}

.obs-li[data-in].is-in {
    display: flex;
    animation: obs-add 0.4s ease;
}

@keyframes obs-add {
    from { opacity: 0; transform: translateY(-0.4em); }
}

.obs-li.is-on,
.obs-li.is-flagged:not(.is-out) {
    background: #3b4bd9;
    color: #fff;
}

.obs-li.is-flagged:not(.is-out) small,
.obs-li.is-flagged:not(.is-out) svg {
    color: #d8dcff;
}

.obs-tools {
    display: flex;
    gap: 0.2em;
    padding: 0.25em 0.3em;
    border-top: 1px solid #343845;
}

.obs-tool {
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.6em;
    border-radius: 0.3em;
    color: #c8ccd6;
}

.obs-tool svg {
    width: 1em;
    height: 1em;
}

.obs-tool.is-pressed {
    animation: obs-press 0.5s ease;
}

@keyframes obs-press {
    0%   { background: #3b4bd9; color: #fff; transform: scale(0.9); }
    100% { background: transparent; }
}

.obs-mixes {
    display: grid;
    gap: 0.6em;
    padding: 0.5em 0.7em;
}

.obs-mix p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3em;
    font-size: 0.85em;
}

.obs-mix p span {
    color: #8a8f9c;
    font-variant-numeric: tabular-nums;
}

.obs-meter {
    display: block;
    height: 0.5em;
    border-radius: 0.2em;
    background: #1b1d23;
    overflow: hidden;
}

.obs-meter i {
    display: block;
    width: var(--a);
    height: 100%;
    background: #3fbf5f;
    transform-origin: left;
    animation: obs-meter var(--d) ease-in-out infinite alternate;
}

.obs-mix--sound .obs-meter i {
    transform: scaleX(0);
    animation: none;
}

.obs-mix--sound .obs-meter.is-in:not(.is-out) i {
    animation: obs-meter 0.35s ease-in-out infinite alternate;
}

@keyframes obs-meter {
    0%   { transform: scaleX(0.55); }
    40%  { transform: scaleX(0.92); }
    70%  { transform: scaleX(0.7); }
    100% { transform: scaleX(1); }
}

.obs-ctls {
    display: grid;
    gap: 0.35em;
    padding: 0.4em;
}

.obs-ctl {
    padding: 0.45em;
    border-radius: 0.3em;
    background: #3a3e4a;
    font-size: 0.85em;
    text-align: center;
    white-space: nowrap;
}

.obs-ctl--on {
    background: #3b4bd9;
    color: #fff;
}

.obs-status {
    display: flex;
    justify-content: flex-end;
    gap: 1.4em;
    padding: 0.3em 0.9em;
    border-top: 1px solid #2c2f3a;
    background: #16181d;
    font-size: 0.8em;
    color: #8e93a0;
}

.obs-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-right: auto;
    color: #dfe1e6;
}

.obs-live i {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: #e5484d;
    animation: obs-blink 1.6s ease-in-out infinite;
}

@keyframes obs-blink {
    50% { opacity: 0.35; }
}

@container (max-width: 560px) {
    .obs.dc-demo-feed {
        grid-template-rows: auto minmax(0, 1fr) 40% auto;
        font-size: clamp(8px, 2.9cqi, 12px);
    }
    .obs-docks {
        grid-template-columns: 1fr 1fr;
    }
    .obs-dock--scenes,
    .obs-dock--controls,
    .obs-status span:last-child {
        display: none;
    }
}

/* Kleines Vorschaubild (Handy): die Overlays nicht so stark verkleinern wie
   in der schmalen Stream-Vorschau. */
@container (max-width: 560px) {
    .obs-prev .tw-alert,
    .obs-prev .tw-goal,
    .obs-prev .tw-tts,
    .obs-prev .tw-sound {
        font-size: 0.92em;
    }
}

@media (max-width: 768px) {
    .dc-frame.dc-frame--obs {
        aspect-ratio: 4 / 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .obs-meter i,
    .obs-live i,
    .obs-li[data-in].is-in {
        animation: none;
    }
    .obs-type {
        clip-path: none;
    }
}

/* Twitch-Seite: das echte Dashboard zum Durchklicken, unter dem Slider.
   Die Kopie des Showcase-Kits liegt unter /projects/twitch-dashboard-demo/ und laeuft
   ohne Server, discord-bots.js laedt sie erst, wenn der Rahmen naeher kommt. */
.tw-dash {
    margin: 4vh 0 0;
}

.tw-dash-head {
    display: flex;
    justify-content: flex-end;
}

.tw-dash-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2em, 4vw, 3em);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
    text-align: right;
}

.tw-dash-frame {
    position: relative;
    margin-top: 2.4em;
    height: clamp(560px, calc(100vh - 140px), 900px);
    overflow: hidden;
    overflow-anchor: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2em;
    background: #050507;
}

.tw-dash-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #050507;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.tw-dash-frame.da iframe {
    opacity: 1;
}

.tw-dash-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0.35;
    transition: opacity 0.35s ease;
}

.tw-dash-frame.da .tw-dash-poster {
    opacity: 0;
}

/* Ladesymbol wie im Workspace (bot-spinner): Ring mit lila Spitze. */
.tw-dash-lade {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #8a67ff;
    animation: tw-dash-spin 0.8s linear infinite;
    transition: opacity 0.25s ease;
}

@keyframes tw-dash-spin {
    to { transform: rotate(360deg); }
}

.tw-dash-frame.da .tw-dash-lade {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .tw-dash-frame {
        margin-top: 1.6em;
        height: clamp(520px, calc(100vh - 170px), 760px);
        border-radius: 0.9em;
    }
}

/**
 * @INFO
 * Made by Cevio | https://www.cevio.at
 * @INFO
 */