:root {
            --bg: #0c0910;
            --panel: #15101c;
            --accent: #ff4d5e;
            --accent-dim: #ff4d5e33;
            --text: #f4f0f6;
            --muted: #9c93a8;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            background: radial-gradient(circle at 50% 0%, #251a30 0%, var(--bg) 60%);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 24px;
        }

        .search {
            width: min(94vw, 380px);
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .search input {
            flex: 1;
            background: var(--panel);
            border: 1px solid #2e2438;
            border-radius: 10px;
            padding: 11px 14px;
            color: var(--text);
            font-size: 14px;
            outline: none;
            transition: border-color .15s ease;
        }

        .search input::placeholder {
            color: var(--muted);
        }

        .search input:focus {
            border-color: var(--accent);
        }

        .search button {
            background: var(--accent);
            border: none;
            border-radius: 10px;
            padding: 0 16px;
            color: #160a0d;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
        }

        .search button:active {
            transform: scale(.97);
        }

        .stage {
            position: relative;
            width: min(94vw, 380px);
            aspect-ratio: 9/16;
            background: #000;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 0 0 1px #2b2235, 0 30px 60px -20px #000a, 0 0 60px -10px var(--accent-dim);
        }

        #player {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        #player iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        .overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 14px;
            background: #0c0910;
            transition: opacity .25s ease;
        }

        .overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .dots {
            display: flex;
            gap: 6px;
        }

        .dots span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse 1.1s infinite ease-in-out;
        }

        .dots span:nth-child(2) {
            animation-delay: .15s;
        }

        .dots span:nth-child(3) {
            animation-delay: .3s;
        }

        @keyframes pulse {

            0%,
            80%,
            100% {
                opacity: .25;
                transform: scale(.7);
            }

            40% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .overlay p {
            color: var(--muted);
            font-size: 13px;
            margin: 0;
            text-align: center;
            padding: 0 30px;
        }

        .side {
            position: absolute;
            right: 10px;
            bottom: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: 5;
        }

        .btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid #2e2438;
            background: #151020cc;
            backdrop-filter: blur(6px);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            transition: transform .15s ease, border-color .15s ease;
        }

        .btn:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
        }

        .btn:active {
            transform: scale(.94);
        }

        .hint {
            margin-top: 16px;
            color: var(--muted);
            font-size: 12.5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .key {
            border: 1px solid #332a3d;
            background: var(--panel);
            border-radius: 6px;
            padding: 2px 7px;
            font-family: ui-monospace, monospace;
            font-size: 11px;
            color: var(--text);
        }

        .meta {
            margin-top: 12px;
            max-width: min(94vw, 380px);
            font-size: 12.5px;
            color: var(--muted);
            line-height: 1.5;
            text-align: center;
            min-height: 18px;
        }

        .meta a {
            color: var(--text);
        }

        .queue-count {
            margin-top: 10px;
            font-size: 11.5px;
            color: var(--muted);
            opacity: .8;
        }