/* ==========================================================================
   CLEF MUSIC PROJECT SHOWCASE — MUKE STUDIO
   Static Left Hero Column + Independent Scrolling Showcase Stage
   Authentic Workspace Geometry, Dynamic Entrances & Fluid Animations
   ========================================================================== */

/* Page Viewport Overrides */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #000000;
}

/* ==========================================================================
   MAIN DUAL-PANE LAYOUT (Static Left + Scrolling Right)
   ========================================================================== */
.clef-main-layout {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(40px, 5.8vw, 92px);
    overflow: hidden;
    box-sizing: border-box;
}

/* ==========================================================================
   STATIC LEFT COLUMN (Remains 100% Pinned During Scroll)
   ========================================================================== */
.clef-left-col {
    position: relative;
    z-index: 25;
    width: clamp(280px, 23vw, 370px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 2.2vh, 26px);
    margin-left: clamp(24px, 3.8vw, 72px);
    flex-shrink: 0;
    user-select: none;
}

/* Authentic Clef Icon Display with Pop-in Entrance */
.clef-icon-box {
    width: clamp(88px, 7.2vw, 118px);
    height: clamp(88px, 7.2vw, 118px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPopIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.clef-icon-box:hover {
    transform: translateY(-4px) scale(1.04);
}

.clef-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
}

/* Title Group: Clef MUSIC.. */
.clef-title-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    animation: leftColFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.clef-title-main {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-size: clamp(2.4rem, 3.6vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    color: #000000;
    letter-spacing: -0.03em;
    margin: 0;
}

.clef-title-sub {
    font-family: var(--font-secondary, 'Space Grotesk', sans-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #000000;
}

/* Lead Paragraph */
.clef-lead-desc {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-size: clamp(0.92rem, 1.1vw, 1.08rem);
    font-weight: 400;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
    animation: leftColFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

/* Authentic Geometric Octagonal .exe Button (Pure SVG + Typography) */
.clef-octagon-btn {
    position: relative;
    width: clamp(92px, 7.8vw, 126px);
    height: clamp(92px, 7.8vw, 126px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    animation: octagonEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

.clef-octagon-btn:hover {
    transform: scale(1.08);
}

.clef-octagon-btn:active {
    transform: scale(0.96);
}

.octagon-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.octagon-svg polygon {
    stroke: #d1d5db;
    stroke-width: 2.2;
    transition: stroke 0.25s ease, filter 0.25s ease;
}

.clef-octagon-btn:hover .octagon-svg polygon {
    stroke: #111827;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

.octagon-text {
    position: relative;
    z-index: 2;
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 800;
    color: #4b5563;
    letter-spacing: -0.02em;
    user-select: none;
    transition: color 0.25s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
    display: inline-block;
}

.clef-octagon-btn:hover .octagon-text {
    color: #000000;
}

.octagon-text.is-flipping {
    transform: rotateX(90deg) scale(0.65);
    opacity: 0;
}

/* ==========================================================================
   RIGHT STAGE SCROLL WRAPPER (Only this container scrolls)
   ========================================================================== */
.clef-stage-scroll-wrapper {
    position: relative;
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.clef-stage-scroll-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

.clef-stage-scroll-wrapper::-webkit-scrollbar-track,
.clef-stage-scroll-wrapper::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
}

/* Slide Section within the Right Scroll Wrapper — Clean Self-Contained Bounds */
.clef-stage-slide {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    box-sizing: border-box;
}

#slideUp {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ==========================================================================
   SIGNATURE BACKGROUND WATERMARK TYPOGRAPHY
   Subtle Giant Outline Typography (MUKE / STUDIO Stacked)
   ========================================================================== */
.clef-slide-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clef-slide-watermark .watermark-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.8;
}

.clef-slide-watermark .watermark-line {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 900;
    font-size: clamp(6.5rem, 16vw, 17rem);
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    line-height: 0.82;
    white-space: nowrap;
    display: block;
}

/* ==========================================================================
   SLIDE 0: CHARACTERS STAGE (.exe up) — FULL LEGS BEHIND BOTTOM BAR
   ========================================================================== */
.clef-up-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: clamp(24px, 4vw, 76px);
    margin-right: clamp(12px, 2.5vw, 44px);
    padding-bottom: 0;
    margin-bottom: -18px;
    box-sizing: border-box;
    z-index: 10;
}

/* Freezes float animations and suppresses hover jumps during active model switching */
.clef-up-stage.is-animating .clef-char-col {
    pointer-events: none !important;
}

.clef-up-stage.is-animating .clef-char-col:hover {
    transform: none !important;
}

.clef-up-stage.is-animating .clef-char-img {
    animation-play-state: paused !important;
}

/* Character Platform Labels */
.char-platform-label {
    font-family: var(--font-secondary, 'Space Grotesk', sans-serif);
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    user-select: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Head Centering Math:
   Six Stand head is at 37.8% from left -> margin-left: 38%; transform: translateX(-50%);
   Six Up head is at 49.1% from left -> margin-left: 50%; transform: translateX(-50%); */
.clef-char-col.char-stand .char-platform-label {
    margin-left: 38%;
    transform: translateX(-50%);
}

.clef-char-col.char-up .char-platform-label {
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Base Character Column (Persistent Dual-Model Architecture) */
.clef-char-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    cursor: none;
    user-select: none;
    transform-origin: 50% 100%;
    will-change: transform;
    animation: charSlideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* Hero Slot (Active Main Operative) */
.clef-char-col.is-hero {
    order: 1;
    z-index: 12;
}

.clef-char-col.is-hero .clef-char-img {
    height: clamp(340px, 69vh, 740px);
    width: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
    animation: sixFloatMain 6s ease-in-out infinite;
    display: block;
}

.clef-char-col.is-hero .char-platform-label {
    font-size: clamp(1.85rem, 2.5vw, 2.7rem);
    color: #000000;
    margin-bottom: clamp(10px, 1.6vh, 18px);
}

/* Companion Slot (Clickable Companion Operative) */
.clef-char-col.is-companion {
    order: 2;
    z-index: 10;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

.clef-char-col.is-companion:hover {
    transform: translateY(-8px) scale(1.035);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.16));
}

.clef-char-col.is-companion:active {
    transform: scale(0.97);
}

.clef-char-col.is-companion .clef-char-img {
    height: clamp(200px, 40vh, 430px);
    width: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
    animation: sixFloatSmall 5.4s ease-in-out infinite 0.6s;
    display: block;
}

.clef-char-col.is-companion .char-platform-label {
    font-size: clamp(1.25rem, 1.6vw, 1.7rem);
    color: #4b5563;
    margin-bottom: clamp(8px, 1.3vh, 16px);
}

.clef-char-col.is-companion:hover .char-platform-label {
    color: #000000;
}

/* Slide Down to Up Keyframes */
@keyframes charSlideUp {
    0% {
        opacity: 0;
        transform: translateY(140px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes labelSlideUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes iconPopIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes leftColFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes octagonEntrance {
    0% {
        opacity: 0;
        transform: scale(0.65) rotate(-18deg);
    }
    70% {
        transform: scale(1.06) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes sixFloatMain {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes sixFloatSmall {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* ==========================================================================
   SLIDE 1: INTERFACE STAGE (.exe down)
   ========================================================================== */
.clef-down-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 1.8vw, 30px);
    padding-bottom: clamp(36px, 6vh, 60px);
    padding-right: clamp(24px, 3.5vw, 56px);
    margin-right: 0;
    box-sizing: border-box;
}

/* 1. Vertical Dock Bar: Capsule Rounded Ends & Clockwise Tilt (+4.8deg) */
.clef-dock-item {
    position: relative;
    height: clamp(320px, 50vh, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(4.8deg);
    border-radius: 999px;
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.22), 0 6px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.clef-down-stage.is-visible .clef-dock-item {
    animation: dockEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.clef-dock-item:hover {
    transform: rotate(4.8deg) translateY(-6px) scale(1.03);
    box-shadow: 0 20px 38px -2px rgba(0, 0, 0, 0.28), 0 8px 16px rgba(0, 0, 0, 0.16);
}

.clef-dock-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    border-radius: 999px;
    user-select: none;
    -webkit-user-drag: none;
}

/* 2. Desktop Playlist Window: Straight with Smooth Rounded Corners */
.clef-window-item {
    position: relative;
    height: clamp(290px, 45vh, 470px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: clamp(22px, 2.4vw, 34px);
    box-shadow: 0 16px 34px -4px rgba(0, 0, 0, 0.24), 0 6px 14px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.clef-down-stage.is-visible .clef-window-item {
    animation: windowEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

.clef-window-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 42px -2px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.clef-window-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    border-radius: clamp(22px, 2.4vw, 34px);
    user-select: none;
    -webkit-user-drag: none;
}

/* 3. Mobile Player Phone Mockup: Tilted (-5.5deg) with Large Smooth Rounded Corners */
.clef-phone-item {
    position: relative;
    height: clamp(350px, 56vh, 580px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(-5.5deg);
    border-radius: clamp(34px, 3.8vw, 50px);
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.16);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
}

.clef-down-stage.is-visible .clef-phone-item {
    animation: phoneEntrance 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.clef-phone-item:hover {
    transform: rotate(-5.5deg) translateY(-8px) scale(1.025);
    box-shadow: 0 22px 44px -2px rgba(0, 0, 0, 0.34), 0 10px 22px rgba(0, 0, 0, 0.2);
}

.clef-phone-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    border-radius: clamp(34px, 3.8vw, 50px);
    user-select: none;
    -webkit-user-drag: none;
}

/* Slide 1 Staggered Entrance Animations */
@keyframes dockEntrance {
    0% {
        opacity: 0;
        transform: rotate(4.8deg) translateY(100px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(4.8deg) translateY(0) scale(1);
    }
}

@keyframes windowEntrance {
    0% {
        opacity: 0;
        transform: translateY(110px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes phoneEntrance {
    0% {
        opacity: 0;
        transform: rotate(-5.5deg) translateY(130px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: rotate(-5.5deg) translateY(0) scale(1);
    }
}

/* ==========================================================================
   SLIDE 1: ANDROID MOBILE INTERFACE STAGE (.apk down)
   ========================================================================== */
.clef-down-stage.is-apk-stage {
    gap: clamp(14px, 1.8vw, 32px);
}

.clef-apk-phone-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, filter 0.28s ease;
}

/* 1. Left Mobile Phone: Favs & Home Screen (+4.8deg Clockwise Tilt) */
.clef-apk-phone-item.is-left {
    height: clamp(320px, 52vh, 540px);
    transform: rotate(4.8deg);
    border-radius: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
    background: #000000;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.16);
}

.clef-down-stage.is-visible .clef-apk-phone-item.is-left {
    animation: apkPhoneLeftEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.clef-apk-phone-item.is-left:hover {
    transform: rotate(4.8deg) translateY(-8px) scale(1.025);
    box-shadow: 0 22px 44px -2px rgba(0, 0, 0, 0.34), 0 10px 22px rgba(0, 0, 0, 0.2);
}

/* 2. Center Mobile Phone: Clef Pure Sound Splash Screen (0deg Upright Hero) */
.clef-apk-phone-item.is-center {
    height: clamp(350px, 57vh, 590px);
    transform: rotate(0deg);
    border-radius: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
    z-index: 2;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.3));
}

.clef-down-stage.is-visible .clef-apk-phone-item.is-center {
    animation: apkPhoneCenterEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

.clef-apk-phone-item.is-center:hover {
    transform: translateY(-8px) scale(1.03);
    filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.38));
}

/* 3. Right Mobile Phone: Online Stream & Discover Screen (-5.5deg Tilt) */
.clef-apk-phone-item.is-right {
    height: clamp(320px, 52vh, 540px);
    transform: rotate(-5.5deg);
    border-radius: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
    background: #000000;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.16);
}

.clef-down-stage.is-visible .clef-apk-phone-item.is-right {
    animation: apkPhoneRightEntrance 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.clef-apk-phone-item.is-right:hover {
    transform: rotate(-5.5deg) translateY(-8px) scale(1.025);
    box-shadow: 0 22px 44px -2px rgba(0, 0, 0, 0.34), 0 10px 22px rgba(0, 0, 0, 0.2);
}

.clef-apk-phone-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.clef-apk-phone-img:not(.is-splash) {
    border-radius: inherit;
}

@keyframes apkPhoneLeftEntrance {
    0% {
        opacity: 0;
        transform: rotate(4.8deg) translateY(110px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(4.8deg) translateY(0) scale(1);
    }
}

@keyframes apkPhoneCenterEntrance {
    0% {
        opacity: 0;
        transform: translateY(120px) scale(0.93);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes apkPhoneRightEntrance {
    0% {
        opacity: 0;
        transform: rotate(-5.5deg) translateY(130px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(-5.5deg) translateY(0) scale(1);
    }
}

/* ==========================================================================
   CANVAS FOOTER (HUD Bottom Bar — Pinned on top of models at z-index: 35)
   ========================================================================== */
.canvas-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 35;
    background: #ffffff;
    border-top: 1px solid rgba(10, 10, 12, 0.05);
    box-sizing: border-box;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px) {
    .clef-main-layout {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 30px 24px;
        overflow-y: auto;
        gap: 28px;
    }

    .clef-left-col {
        width: 100%;
        max-width: 580px;
        align-items: center;
        text-align: center;
    }

    .clef-title-group {
        justify-content: center;
    }

    .clef-stage-scroll-wrapper {
        width: 100%;
        height: auto;
        overflow-y: visible;
    }

    .clef-stage-slide {
        height: auto;
        min-height: auto;
        justify-content: center;
        margin-bottom: 40px;
    }

    .clef-up-stage,
    .clef-down-stage {
        width: 100%;
        justify-content: center;
        margin-right: 0;
    }

    .clef-dock-item,
    .clef-phone-item,
    .clef-apk-phone-item.is-left,
    .clef-apk-phone-item.is-right {
        transform: none !important;
    }
    }
}

/* ==========================================================================
   DARK MODE OVERRIDES (Clef Music Page)
   ========================================================================== */
body.dark-mode .clef-icon-box {
    background: #14151b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .clef-icon-box:hover {
    border-color: rgba(2, 132, 199, 0.5);
    box-shadow: 0 18px 36px -4px rgba(2, 132, 199, 0.25), 0 6px 14px rgba(0, 0, 0, 0.5);
}

body.dark-mode .clef-title-main,
body.dark-mode .clef-title-sub {
    color: #f8f9fa;
}

body.dark-mode .clef-lead-desc {
    color: #a0a2b0;
}

body.dark-mode .char-platform-label {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f8f9fa;
}

body.dark-mode .clef-octagon-btn .octagon-svg polygon {
    stroke: rgba(255, 255, 255, 0.25);
}

body.dark-mode .clef-octagon-btn:hover .octagon-svg polygon {
    stroke: var(--current-accent, #0284c7);
}

body.dark-mode .clef-octagon-btn .octagon-text {
    color: #d1d5db;
}

body.dark-mode .clef-octagon-btn:hover .octagon-text {
    color: var(--current-accent, #0284c7);
}

body.dark-mode .clef-slide-watermark .watermark-line {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .canvas-footer {
    background: var(--canvas-bg, #090a0d) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}