/* Windows 95 / OSR2 era UI (“Win96” look) — single viewport, no document scroll */

:root {
    /* Saturated Win9x-inspired palette — reads brighter on modern displays */
    --win-teal: #00b8b8;
    --win-gray: #d6d6e4;
    --win-gray-dark: #5c5c78;
    --win-white: #ffffff;
    --win-black: #0c0c14;
    --win-blue: #1818a8;
    --win-blue-mid: #28c4ff;
    --win-taskbar: #d0d0de;
    --win-title-inactive: #6e6e8a;
    --title-grad-start: #1010c0;
    --title-grad-end: #30d0ff;
    --win-selection: #2020c8;
    --music-grad-start: #0a6a0a;
    --music-grad-end: #5cff6a;
    --alert-dot: #ff2a4a;
    --font-win: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", "Segoe UI", sans-serif;
    --taskbar-h: 40px;
    /* Scaled UI — adjust --fs / --taskbar-h to tune overall size */
    --fs: 15px;
    --fs-sm: 14px;
    --fs-xs: 12px;
    --fs-lg: 16px;
    --bevel-light: #f0f0f8;
    --bevel-dark: #383850;
    --bevel-mid: #7878a0;
    --bevel-dkshadow: #101018;
    --link-blue: #0050ff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    height: 100dvh;
    margin: 0;
}

html,
body {
    margin: 0;
    overflow: hidden;
}

.win-body {
    min-height: 100%;
    min-height: 100dvh;
    height: 100%;
    height: 100dvh;
    font-family: var(--font-win);
    font-size: var(--fs);
    line-height: 1.35;
    color: var(--win-black);
    background: var(--win-teal);
    user-select: none;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    touch-action: manipulation;
}

a {
    color: var(--link-blue);
    text-decoration: underline;
}

a:active {
    color: #ff2244;
}

.win-shell {
    position: fixed;
    inset: 0;
    bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.win-desktop {
    flex: 1;
    min-height: 0;
    position: relative;
    /* Teal + dither with a hint of cyan depth */
    background-color: var(--win-teal);
    background-image:
        linear-gradient(90deg, rgba(0, 70, 90, 0.2) 50%, transparent 50%),
        linear-gradient(rgba(0, 50, 70, 0.14) 50%, transparent 50%);
    background-size: 2px 100%, 100% 2px;
    padding: 10px 8px 8px;
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
}

/* Centered brand frame — resume absolutely at top-right of logo */
.win-desktop-brand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.win-desktop-brand-frame {
    position: relative;
    display: inline-block;
    max-width: min(1200px, 98%);
    line-height: 0;
    pointer-events: none;
}

.win-desktop-brand .desk-item--brand-stack {
    pointer-events: auto;
}

.win-desktop-brand-img {
    display: block;
    max-width: 100%;
    max-height: min(70vh, 800px);
    max-height: min(70dvh, 800px);
    max-height: min(70svh, 800px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Desktop icons — vertical stack top-left */
.desk-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 148px;
    margin: 0 0 16px 4px;
    padding: 8px 4px;
    border: 1px dotted transparent;
    background: none;
    font: inherit;
    color: #f8ffff;
    cursor: pointer;
    text-align: center;
}

a.desk-item,
a.desk-item:visited {
    color: #f8ffff;
    text-decoration: none;
}

a.desk-item:hover,
a.desk-item:focus-visible {
    color: #ffffff;
}

/* Resume — top-right corner of brand image */
.desk-item--brand-stack {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    z-index: 2;
}

.desk-item:hover,
.desk-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.7);
    outline: none;
}

.desk-item:focus-visible {
    border-style: solid;
}

.desk-caption {
    margin-top: 6px;
    font-size: var(--fs);
    line-height: 1.15;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 rgba(0, 40, 60, 0.9),
        0 0 10px rgba(120, 255, 255, 0.35);
    word-wrap: break-word;
    max-width: 132px;
}

.desk-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

/* Win95-style folder bitmap (transparent PNG) */
.desk-icon--folder {
    background: url("Assets/Windows_95_FOLDER.png") center / contain no-repeat;
    border: none;
    box-shadow: none;
    border-radius: 0;
    position: relative;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Notepad doc */
.desk-icon--doc {
    background: var(--win-white);
    border: 1px solid var(--bevel-dark);
    box-shadow:
        inset 1px 1px 0 var(--bevel-light),
        inset -1px -1px 0 var(--bevel-mid);
    position: relative;
}

/* “New / updated” dot — bump matching version in script.js when content changes */
.desk-item.has-section-update > .desk-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: var(--alert-dot);
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #000,
        0 0 6px rgba(255, 60, 100, 0.85);
    z-index: 2;
    pointer-events: none;
}

.start-item.has-section-update::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: var(--alert-dot);
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #000,
        0 0 6px rgba(255, 60, 100, 0.85);
    z-index: 1;
    pointer-events: none;
}

.desk-icon--doc::before {
    content: "";
    position: absolute;
    inset: 18px 12px 12px;
    background: repeating-linear-gradient(
        transparent,
        transparent 5px,
        #9ec8ff 5px,
        #9ec8ff 6px
    );
}

/* Window layer */
.win-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.win-layer > .win-window {
    pointer-events: auto;
}

/* 3D window chrome — raised outer frame + thin black outline */
.win-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: min(300px, calc(100vw - 20px));
    min-height: 170px;
    max-width: calc(100vw - 16px);
    max-width: calc(100dvw - 16px);
    max-height: calc(100% - 16px);
    background: var(--win-gray);
    border: 1px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--bevel-light),
        inset -1px -1px 0 var(--bevel-mid),
        1px 1px 0 rgba(0, 0, 0, 0.45);
    padding: 0;
    z-index: 10;
}

.win-window[hidden] {
    display: none !important;
}

.win-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 4px 4px 5px;
    min-height: 26px;
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-end) 100%);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs);
    letter-spacing: 0.01em;
    cursor: grab;
    flex-shrink: 0;
}

/* Program icon + title (Win95/Tahoma caption) */
.win-titlebar::before {
    content: "";
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--title-grad-end) 0%, var(--title-grad-start) 100%);
    border: 1px solid var(--win-black);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}

.win-window.is-dragging .win-titlebar {
    cursor: grabbing;
}

.win-title-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win-title-buttons {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.win-btn {
    width: 22px;
    height: 19px;
    min-width: 22px;
    min-height: 19px;
    padding: 0;
    font-size: var(--fs-xs);
    line-height: 1;
    font-family: inherit;
    background: var(--win-gray);
    border-top: 1px solid var(--bevel-light);
    border-left: 1px solid var(--bevel-light);
    border-right: 1px solid var(--bevel-dkshadow);
    border-bottom: 1px solid var(--bevel-dkshadow);
    color: var(--win-black);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.win-btn:active:not(:disabled) {
    border-top-color: var(--bevel-dark);
    border-left-color: var(--bevel-dark);
    border-right-color: var(--bevel-light);
    border-bottom-color: var(--bevel-light);
}

.win-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.win-btn-close {
    font-weight: 700;
    font-size: var(--fs-lg);
}

.win-menu-fake {
    flex-shrink: 0;
    padding: 3px 9px 4px;
    background: var(--win-gray);
    border-top: 1px solid var(--bevel-light);
    border-bottom: 1px solid var(--bevel-mid);
    font-size: var(--fs);
    color: var(--win-black);
}

.win-client {
    flex: 1;
    min-height: 0;
    margin: 2px;
    padding: 10px 12px;
    background: #fafcff;
    border: 1px solid var(--bevel-dkshadow);
    box-shadow:
        inset 1px 1px 0 var(--bevel-dark),
        inset -1px -1px 0 var(--bevel-light);
    overflow: auto;
    user-select: text;
    scrollbar-width: auto;
    scrollbar-color: var(--win-blue-mid) #f2f0ff;
}

/* Chunky Win9x-style scrollbars (WebKit) */
.win-client::-webkit-scrollbar {
    width: 22px;
    height: 22px;
}

.win-client::-webkit-scrollbar-track {
    background: #e8e6ff;
    border: 1px solid;
    border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

.win-client::-webkit-scrollbar-thumb {
    background: var(--win-gray);
    border: 1px solid;
    border-color: var(--bevel-light) var(--bevel-dkshadow) var(--bevel-dkshadow) var(--bevel-light);
    box-shadow: inset 1px 1px 0 var(--bevel-light);
}

.win-client::-webkit-scrollbar-corner {
    background: var(--win-gray);
}

.win-client--pad {
    overflow: auto;
}

.win-client--list {
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.win-p {
    margin: 0 0 10px;
}

.win-p-muted {
    color: var(--win-gray-dark);
    font-size: var(--fs-sm);
}

.win-list-line {
    margin: 0;
    font-size: var(--fs);
}

/* Tabs (Skills) */
.win-tabs {
    display: flex;
    gap: 4px;
    padding: 5px 5px 0;
    background: var(--win-gray);
    flex-shrink: 0;
    border-bottom: 1px solid var(--bevel-mid);
}

.win-tab {
    padding: 4px 14px 5px;
    font: inherit;
    font-size: var(--fs);
    background: var(--win-gray);
    border-top: 1px solid var(--bevel-light);
    border-left: 1px solid var(--bevel-light);
    border-right: 1px solid var(--bevel-dark);
    border-bottom: 1px solid var(--bevel-mid);
    cursor: pointer;
    color: var(--win-black);
    position: relative;
    bottom: -1px;
}

.win-tab.is-active {
    background: #ffffff;
    border-bottom-color: #ffffff;
    margin-bottom: -1px;
    padding-bottom: 4px;
    z-index: 1;
    box-shadow: inset 0 1px 0 rgba(40, 196, 255, 0.35);
}

.win-tab-panel {
    display: none;
}

.win-tab-panel.is-active {
    display: block;
}

.win-exp {
    padding: 9px 11px;
    border: 1px solid transparent;
}

.win-exp:hover {
    background: var(--win-selection);
    color: #fff;
}

.win-exp:hover .win-exp-meta,
.win-exp:hover .win-exp-body {
    color: #d8f8ff;
}

.win-exp-title {
    margin: 0;
    font-weight: 700;
    font-size: var(--fs);
}

.win-exp-meta {
    margin: 2px 0 4px;
    font-size: var(--fs-sm);
    color: var(--win-gray-dark);
}

.win-exp-body {
    margin: 0;
    font-size: var(--fs);
    color: #101828;
}

.win-link-row {
    display: block;
    padding: 7px 9px;
    text-decoration: underline;
    color: var(--link-blue);
    font-size: var(--fs);
    border: 1px solid transparent;
}

.win-link-row:hover {
    background: var(--win-selection);
    color: #fff;
    text-decoration: underline;
}

/* Default window positions (staggered) */
#win-readme {
    top: 6%;
    left: 5%;
    width: min(500px, 88vw);
    height: min(320px, 46vh);
}

#win-skills {
    top: 10%;
    left: 22%;
    width: min(455px, 85vw);
    height: min(275px, 40vh);
}

#win-experience {
    top: 18%;
    left: 12%;
    width: min(548px, 92vw);
    height: min(365px, 52vh);
}

#win-projects {
    top: 8%;
    right: 6%;
    left: auto;
    width: min(435px, 88vw);
    height: min(298px, 44vh);
}

#win-links {
    top: 22%;
    right: 8%;
    left: auto;
    width: min(412px, 86vw);
    height: min(276px, 42vh);
}

/* Taskbar — thin groove top like Win95 */
.win-taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    min-height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 3px max(3px, env(safe-area-inset-right, 0px))
        calc(2px + env(safe-area-inset-bottom, 0px)) max(3px, env(safe-area-inset-left, 0px));
    background: var(--win-taskbar);
    border-top: 2px solid var(--bevel-light);
    box-shadow: inset 0 1px 0 #fff;
    z-index: 200;
}

.win-start {
    font-family: inherit;
    font-weight: 700;
    font-style: italic;
    font-size: var(--fs);
    padding: 4px 12px 5px 5px;
    min-width: 80px;
    height: 32px;
    background: var(--win-gray);
    border-top: 2px solid var(--bevel-light);
    border-left: 2px solid var(--bevel-light);
    border-right: 2px solid var(--bevel-dkshadow);
    border-bottom: 2px solid var(--bevel-dkshadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--win-black);
}

/* Flying Windows asset — full opacity; black in PNG sits on ButtonFace */
.win-start-icon-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.win-start-icon {
    display: block;
    height: 22px;
    width: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.win-start-label {
    flex-shrink: 0;
}

.win-start:active {
    border-top-color: var(--bevel-dark);
    border-left-color: var(--bevel-dark);
    border-right-color: var(--bevel-light);
    border-bottom-color: var(--bevel-light);
}

.win-task-slots {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.win-task-btn {
    flex: 0 1 140px;
    min-width: 0;
    max-width: 176px;
    height: 32px;
    padding: 4px 8px;
    font: inherit;
    font-size: var(--fs);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--win-gray);
    border-top: 2px solid var(--bevel-light);
    border-left: 2px solid var(--bevel-light);
    border-right: 2px solid var(--bevel-dkshadow);
    border-bottom: 2px solid var(--bevel-dkshadow);
    cursor: pointer;
}

.win-task-btn.is-pressed,
.win-task-btn:active {
    border-top-color: var(--bevel-dark);
    border-left-color: var(--bevel-dark);
    border-right-color: var(--bevel-light);
    border-bottom-color: var(--bevel-light);
}

.win-task-btn.is-minimized {
    font-style: italic;
    color: var(--win-gray-dark);
}

.win-tray {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 5px 0 7px;
    min-height: 24px;
    border-top: 1px solid var(--bevel-dark);
    border-left: 1px solid var(--bevel-dark);
    border-right: 1px solid var(--bevel-light);
    border-bottom: 1px solid var(--bevel-light);
    background: var(--win-gray);
    flex-shrink: 0;
    align-self: center;
}

.win-clock {
    font-size: var(--fs);
    line-height: 1.15;
    white-space: nowrap;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Start menu */
.start-menu {
    position: fixed;
    bottom: calc(var(--taskbar-h) - 1px + env(safe-area-inset-bottom, 0px));
    left: max(2px, env(safe-area-inset-left, 0px));
    display: flex;
    z-index: 300;
    max-width: calc(100vw - 8px);
    max-width: calc(100dvw - 8px);
    background: var(--win-gray);
    border-top: 2px solid var(--bevel-light);
    border-left: 2px solid var(--bevel-light);
    border-right: 2px solid var(--bevel-dark);
    border-bottom: 2px solid var(--bevel-dark);
    box-shadow: 2px -2px 0 rgba(0, 0, 0, 0.25);
}

.start-menu[hidden] {
    display: none !important;
}

.start-menu-side {
    width: 28px;
    background: linear-gradient(
        180deg,
        var(--title-grad-start) 0%,
        var(--title-grad-end) 55%,
        var(--title-grad-start) 100%
    );
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 6px 0;
    text-shadow: 1px 1px 0 #000;
}

.start-menu-list {
    padding: 6px 0;
    min-width: 228px;
}

.start-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 9px 16px 9px 14px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--fs);
    text-align: left;
    cursor: pointer;
    color: var(--win-black);
    text-decoration: none;
}

.start-item:hover {
    background: var(--win-selection);
    color: #fff;
}

.start-hr {
    margin: 4px 2px;
    border: none;
    border-top: 1px solid var(--bevel-dark);
    border-bottom: 1px solid var(--bevel-light);
}

@media (max-width: 640px) {
    .win-desktop-brand-frame {
        max-width: min(96vw, 100%);
    }

    .win-desktop-brand-img {
        max-width: min(96vw, 100%);
        max-height: min(44vh, 400px);
        max-height: min(44svh, 400px);
    }

    .desk-item {
        min-height: 62px;
        padding: 10px 6px;
    }

    #win-readme,
    #win-skills,
    #win-experience,
    #win-projects,
    #win-links {
        top: 6px !important;
        left: max(6px, env(safe-area-inset-left, 0px)) !important;
        right: max(6px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - var(--taskbar-h) - 48px) !important;
        max-height: calc(100svh - var(--taskbar-h) - env(safe-area-inset-bottom, 0px) - 14px) !important;
        max-height: calc(100dvh - var(--taskbar-h) - env(safe-area-inset-bottom, 0px) - 14px) !important;
    }

    #win-readme {
        height: min(300px, 58vh) !important;
        height: min(300px, 58svh) !important;
    }

    #win-skills {
        height: min(275px, 54vh) !important;
        height: min(275px, 54svh) !important;
    }

    #win-experience {
        height: min(370px, 64vh) !important;
        height: min(370px, 64svh) !important;
    }

    #win-projects,
    #win-links {
        height: min(275px, 52vh) !important;
        height: min(275px, 52svh) !important;
    }

    .desk-music-player {
        width: min(236px, calc(100vw - 10px));
        right: max(4px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--taskbar-h) + 4px + env(safe-area-inset-bottom, 0px));
    }

    .desk-music-art-wrap {
        width: 96px;
        height: 38px;
    }
}

/* Minimal desk music player — compact, bottom-right */
.desk-music-player {
    --dm-fs: 11px;
    --dm-cap: 12px;
    position: fixed;
    z-index: 25;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--taskbar-h) + 6px + env(safe-area-inset-bottom, 0px));
    width: min(252px, calc(100vw - 12px));
    pointer-events: auto;
    font-family: var(--font-win);
    font-size: var(--dm-fs);
    line-height: 1.2;
}

.desk-music-chrome {
    background: var(--win-gray);
    border: 1px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--bevel-light),
        inset -1px -1px 0 var(--bevel-mid);
}

.desk-music-caption {
    padding: 3px 7px 4px;
    background: linear-gradient(90deg, var(--music-grad-start) 0%, var(--music-grad-end) 100%);
    color: #fff;
    font-weight: 700;
    font-size: var(--dm-cap);
    border-bottom: 1px solid var(--win-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desk-music-main {
    padding: 5px 6px 6px;
}

.desk-music-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.desk-music-art-wrap {
    flex: 0 0 auto;
    width: 112px;
    height: 42px;
    border: 1px solid var(--bevel-dkshadow);
    box-shadow:
        inset 1px 1px 0 var(--bevel-dark),
        inset -1px -1px 0 var(--bevel-light);
    background: #12121c;
    position: relative;
}

.desk-music-art-ph {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #18182a;
}

.desk-music-viz {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.desk-music-art {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desk-music-art-wrap.has-cover .desk-music-art-ph {
    display: none;
}

.desk-music-art-wrap.has-cover .desk-music-art {
    display: block;
}

.desk-music-transport {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.desk-music-tbtn {
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    font: inherit;
    font-size: 10px;
    line-height: 1;
    background: var(--win-gray);
    border-top: 1px solid var(--bevel-light);
    border-left: 1px solid var(--bevel-light);
    border-right: 1px solid var(--bevel-dkshadow);
    border-bottom: 1px solid var(--bevel-dkshadow);
    cursor: pointer;
    color: var(--win-black);
}

.desk-music-tbtn--play {
    min-width: 28px;
    font-weight: 700;
    font-size: 11px;
}

.desk-music-tbtn:active {
    border-top-color: var(--bevel-dark);
    border-left-color: var(--bevel-dark);
    border-right-color: var(--bevel-light);
    border-bottom-color: var(--bevel-light);
}

.desk-music-meta {
    margin: 0 0 4px;
    padding: 3px 6px;
    background: var(--win-white);
    border: 1px solid var(--bevel-dkshadow);
    box-shadow: inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light);
    color: var(--win-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desk-music-seek {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 4px;
    border-top: 1px solid var(--bevel-light);
}

.desk-music-time {
    flex-shrink: 0;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--win-black);
    min-width: 2.2em;
}

.desk-music-time:last-child {
    text-align: right;
}

.desk-music-progress {
    flex: 1;
    min-width: 0;
    height: 14px;
    margin: 0;
    accent-color: var(--win-blue-mid);
    cursor: pointer;
}

.desk-music-progress:disabled {
    opacity: 0.5;
    cursor: default;
}