@font-face {
    font-family: "Pixel CN";
    src: url("/fonts/HYPixel9pxJ-2.woff2") format("woff2"),
        url("/fonts/HYPixel9pxJ-2.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Alpha Sector";
    src: url("/fonts/AlphaSector.woff2") format("woff2"),
        url("/fonts/AlphaSector.otf") format("opentype");
    font-display: swap;
}


.holo {
    font-family: var(--ui-font-cjk);
    -webkit-font-smoothing: var(--ui-pixel-smooth);
    -moz-osx-font-smoothing: var(--ui-pixel-smooth);
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    color: #eaf3ff;
    --holo-glow: 0;

    --line-w: 1px;
    --line-dash: 26 9 5 7 42 12 13 8 7 6;
    --lock-len: 12px;
    --lock-w: 1.4px;
    --lock-gap: 0px;
    --line-a: 0.45;
    --halo-w: 6px;
    --halo-a: 0.05;
    --run-w: 1.6px;
    --run-len: 46;
    --run-dur: 9s;

    --title-x: 0.2%;
    --title-y: 0%;
    --title-h: 10%;
    --title-size: clamp(30px, 4vh, 56px);
    --title-ls: 0.18em;
    --title-gap: 0.55em;
    --caption-size: clamp(9px, 1.5vh, 18px);
    --caption-ls: 0.16em;

    --stack-x: 1.5%;
    --stack-y: 26.9%;
    --stack-w: clamp(20px, calc(100% / 30), 34px);
    --stack-h: auto;
    --fader-len-top: 80px;
    --fader-len-bot: 80px;
    --stack-gap: 30%;

    --btn-min: 48px;
    --btn-max: 54px;
    --btn-fg: #eaf3ff;
    --btn-bg: rgba(234, 243, 255, 0.05);
    --btn-bg-hover: rgba(234, 243, 255, 0.16);
    --btn-border: rgba(234, 243, 255, 0.42);

    --rail-w: 6px;
    --rail-color: rgba(234, 243, 255, 0.22);
    --thumb-size: 24px;
    --thumb-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf3ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E");
    --thumb-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf3ff'%3E%3Cpath d='M12 2.6l2 6.6 6.6 2-6.6 2-2 6.6-2-6.6-6.6-2 6.6-2z'/%3E%3C/svg%3E");
    --fader-icon-size: 14px;
    --fader-label-size: 9px;
    --fader-label-ls: 0.2em;
    --fader-head-gap: 6px;

    --ring-x: 84%;
    --ring-y: 86%;
    --ring-size: 260px;
    --ring-tilt: 76deg;
    --ring-fs: 20px;
    --ring-ls: 0.1em;
    --ring-color: rgba(140, 152, 246, 0.85);
    --ring-artist-color: rgba(92, 251, 95, 0.55);
    --ring-base: rgba(234, 243, 255, 0.34);
    --ring-vol-1: rgba(234, 243, 255, 0.22);
    --ring-vol-2: rgba(234, 243, 255, 0.13);
    --ring-vol-scale: 0.6;
    --ring-spin: 40s;
    --ring-spin-mid: 58s;
    --ring-plane-outer: -24deg;
    --ring-plane-mid: 28deg;                   /* ★ 中环额外的平面倾角
                                                  —— 最内环不加倾角,保持原平面(它连着射线)*/
    --ring-mid-k: 0.54;
    --ring-mid-a: 0.2;
    --ring-mid-fs: 14px;
    --ring-mid-ls: 0.22em;
    --ring-mid-color: rgba(234, 243, 255, 0.95);
    --ring-line-angle: 30deg;
    --ring-line-color: rgba(234, 243, 255, 0.35);
    --ring-outer-gain: 0.06;

    --panel-x: 68%;
    --panel-y: 0%;
    --panel-w: 30%;
    --panel-pad: 10px 12px;
    --panel-gap: 7px;
    --panel-border: rgba(234, 243, 255, 0.42);
    --panel-bg: rgba(234, 243, 255, 0.02);
    --panel-dash: 18 7 5 6 30 9;
    --panel-node: 6px;
    --ui-font: "Alpha Sector", "Orbitron", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ui-font-cjk: "Alpha Sector", "Pixel CN", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-monospace, monospace;
    --ui-pixel-smooth: none;
    --panel-mono: var(--ui-font-cjk);
    --panel-fs: 12px;
    --panel-ls: 0.14em;
    --panel-dot: 6px;
    --panel-wave-h: 26px;
    --panel-cut: 0px;
    --panel-ok: #7fe3c0;
    --panel-unknown: #b985ff;

    --scan-x: 22.2%;
    --scan-y: 14%;
    --scan-stem: 48px;
    --scan-dot: 3px;
    --lock-cx: 22px;
    --lock-cy: 0px;
    --lock-follow-tilt: 0;
    --lock-r: 1.07;
    --lock-a: 0.32;
    --lock-dash: 6 10;
    --lock-spin: 0.25;
}

.holo-reticle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.holo svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.holo-line,
.holo-halo,
.holo-run {
    fill: none;
    stroke: #eaf3ff;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.holo-line {
    stroke-width: var(--line-w);
    stroke-dasharray: var(--line-dash);
    opacity: calc(var(--line-a) + var(--holo-glow) * 0.4);
}

.holo-lock {
    fill: none;
    stroke: #ffffff;
    stroke-width: var(--lock-w);
    stroke-linecap: square;
    vector-effect: non-scaling-stroke;
    opacity: calc(0.55 + var(--holo-glow) * 0.4);
}

.holo-halo {
    stroke-width: var(--halo-w);
    stroke-linecap: round;
    opacity: calc(var(--halo-a) + var(--holo-glow) * 0.1);
}

.holo-run {
    stroke: #ffffff;
    stroke-width: var(--run-w);
    stroke-linecap: round;
    stroke-dasharray: var(--run-len) 2000;
    opacity: calc(0.5 + var(--holo-glow) * 0.45);
    animation: holo-run var(--run-dur) linear infinite;
}

@keyframes holo-run {
    from { stroke-dashoffset: 2046; }
    to { stroke-dashoffset: 0; }
}

.holo-head {
    position: absolute;
    left: var(--title-x);
    top: var(--title-y);
    height: var(--title-h);
    max-height: 92px;
    display: flex;
    align-items: center;
    gap: var(--title-gap);
    padding-left: 1.2%;
    white-space: nowrap;
    pointer-events: none;
}

.holo-title {
    font-family: var(--ui-font-cjk);
    -webkit-font-smoothing: var(--ui-pixel-smooth);
    font-size: var(--title-size);
    font-weight: 500;
    letter-spacing: var(--title-ls);
    line-height: 1;
    color: #f4f8ff;
}

.holo-caption {
    font-size: var(--caption-size);
    letter-spacing: var(--caption-ls);
    color: rgba(234, 243, 255, 0.7);
    transform: translateY(0.2em);
}

.holo-stack {
    position: absolute;
    left: var(--stack-x);
    top: var(--stack-y);
    width: var(--stack-w);
    height: var(--stack-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--stack-gap);
    pointer-events: auto;
}

.holo-btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: var(--btn-min);
    max-width: var(--btn-max);
    min-height: var(--btn-min);
    max-height: var(--btn-max);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    transition: background 0.18s ease;
}

.holo-btn:hover {
    background: var(--btn-bg-hover);
}

.holo-btn svg {
    position: static;
    width: auto;
    height: 58%;
    max-height: 18px;
}

.fader {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fader--bright { --fader-len: var(--fader-len-top); }
.fader--nebula { --fader-len: var(--fader-len-bot); }

.fader__head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--fader-head-gap);
    opacity: 0.85;
}

.fader__head svg {
    position: static;
    width: var(--fader-icon-size);
    height: var(--fader-icon-size);
    display: block;
}

.fader__label {
    font-size: var(--fader-label-size);
    letter-spacing: var(--fader-label-ls);
    color: rgba(234, 243, 255, 0.7);
    writing-mode: vertical-rl;
}

.fader__body {
    width: 100%;
    height: var(--fader-len, 200px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fader input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: var(--fader-len, 200px);
    height: var(--rail-w);
    margin: 0;
    transform: rotate(-90deg);
    background: var(--rail-color);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.fader input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background-color: rgba(10, 14, 22, 0.85);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 74% 74%;
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(234, 243, 255, 0.08);
    cursor: grab;
}

.fader input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    border-color: #ffffff;
}

.fader--bright input[type="range"]::-webkit-slider-thumb {
    background-image: var(--thumb-icon-sun);
}

.fader--nebula input[type="range"]::-webkit-slider-thumb {
    background-image: var(--thumb-icon-star);
}

.fader input[type="range"]::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background-color: rgba(10, 14, 22, 0.85);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 74% 74%;
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    cursor: grab;
}

.fader--bright input[type="range"]::-moz-range-thumb {
    background-image: var(--thumb-icon-sun);
}

.fader--nebula input[type="range"]::-moz-range-thumb {
    background-image: var(--thumb-icon-star);
}

.drive-status {
    position: absolute;
    left: var(--panel-x);
    top: var(--panel-y);
    width: var(--panel-w);
    box-sizing: border-box;
    padding: var(--panel-pad);
    background: var(--panel-bg);
    border: 0;
    font-family: var(--panel-mono);
    font-size: var(--panel-fs);
    letter-spacing: var(--panel-ls);
    color: rgba(234, 243, 255, 0.8);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}

.drive-status__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.drive-status__k {
    color: rgba(234, 243, 255, 0.5);
}

.drive-status__v {
    color: #eaf7ff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.drive-status__v.is-ok::after {
    content: "▌";
    margin-left: 0.35em;
    opacity: 0.55;
    animation: ds-blink 1.4s steps(1, end) infinite;
}

@keyframes ds-blink {
    0%, 55% { opacity: 0.55; }
    56%, 100% { opacity: 0.12; }
}

.drive-status__v.is-ok {
    color: var(--panel-ok, #7fe3c0);
}

.drive-status__v.is-unknown {
    color: var(--panel-unknown, #b985ff);
}

.drive-status__v.is-unknown::after {
    content: "▌";
    margin-left: 0.35em;
    opacity: 0.55;
    animation: ds-blink 0.62s steps(1, end) infinite;
}

.drive-status.is-unstable .drive-status__bars i.on {
    background: var(--panel-unknown, #b985ff);
}

.drive-status.is-unstable {
    animation: ds-instability 4.1s steps(1, end) infinite;
}

@keyframes ds-instability {
    0%, 91% { opacity: calc(0.85 + var(--holo-glow) * 0.15); transform: translateX(0); }
    91.6% { opacity: 0.32; transform: translateX(-1px); }
    92.4% { opacity: calc(0.85 + var(--holo-glow) * 0.15); transform: translateX(0); }
    96.2% { opacity: 0.5; transform: translateX(1px); }
    96.9% { opacity: calc(0.85 + var(--holo-glow) * 0.15); transform: translateX(0); }
}

.drive-status__dot {
    width: var(--panel-dot);
    height: var(--panel-dot);
    border-radius: 50%;
    background: var(--panel-ok, #7fe3c0);
    margin-right: 6px;
}

.drive-status__bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: calc(var(--panel-dot) + 2px);
}

.drive-status__bars i {
    width: 3px;
    background: rgba(234, 243, 255, 0.25);
    border-radius: 1px;
}

.drive-status__bars i.on {
    background: var(--panel-ok, #7fe3c0);
}

.drive-status__wave {
    width: 100%;
    height: var(--panel-wave-h);
    display: block;
}

.drive-status {
    opacity: calc(0.85 + var(--holo-glow) * 0.15);
}

.drive-status__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.drive-status__frame path {
    fill: none;
    stroke: var(--panel-border);
    stroke-width: 1;
    stroke-dasharray: var(--panel-dash);
    vector-effect: non-scaling-stroke;
}

.drive-status__frame .node {
    stroke: none;
    fill: rgba(234, 243, 255, 0.85);
    stroke-dasharray: none;
}

.song-ring {
    position: absolute;
    left: var(--ring-x);
    top: var(--ring-y);
    width: var(--ring-size);
    height: var(--ring-size);
    margin-left: calc(var(--ring-size) / -2);
    margin-top: calc(var(--ring-size) / -2);
    perspective: 900px;
    pointer-events: none;
}

.song-ring__stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.song-ring__plane {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.song-ring__plane--outer { transform: rotateX(var(--ring-tilt)) rotateY(var(--ring-plane-outer)) scale(var(--ring-outer-scale, 1)); }
.song-ring__plane--mid { transform: rotateX(var(--ring-tilt)) rotateY(var(--ring-plane-mid)); }
.song-ring__plane--inner { transform: rotateX(var(--ring-tilt)); }

.song-ring__base {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--ring-base);
}

.song-ring__vol {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid var(--ring-vol-1);
    transform: translate(-50%, -50%) scale(var(--ring-vol-scale));
    transition: transform 0.06s linear, opacity 0.12s linear;
}

.song-ring__vol--1 { width: 54%; height: 54%; }
.song-ring__vol--2 { width: 30%; height: 30%; border-color: var(--ring-vol-2); }

.song-ring__midtext {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: ring-spin var(--ring-spin-mid) linear infinite;
}

.song-ring__midltr {
    font-family: var(--ui-font-cjk);
    -webkit-font-smoothing: var(--ui-pixel-smooth);
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: var(--ring-mid-fs);
    letter-spacing: var(--ring-mid-ls);
    color: var(--ring-mid-color);
    white-space: pre;
    transform:
        rotateZ(calc(360deg / var(--mn) * var(--mi)))
        translateY(calc(var(--ring-size) / -2 * var(--ring-mid-k)))
        rotateX(calc(var(--ring-tilt) * -1));
    transform-origin: 50% 50%;
    line-height: 1;
    margin: -0.5em 0 0 -0.5em;
}

.song-ring__rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.song-ring__track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: ring-spin var(--ring-spin) linear infinite;
}

@keyframes ring-spin {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

.song-ring__ltr {
    font-family: var(--ui-font);
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: var(--ring-fs);
    letter-spacing: var(--ring-ls);
    color: var(--ring-color);
    white-space: pre;
    transform:
        rotateZ(calc(360deg / var(--n) * var(--i)))
        translateY(calc(var(--ring-size) / -2))
        rotateX(calc(var(--ring-tilt) * -1));
    transform-origin: 50% 50%;
    line-height: 1;
    margin: -0.5em 0 0 -0.5em;
}

.song-ring__ltr.is-artist {
    color: var(--ring-artist-color);
    font-size: calc(var(--ring-fs) * 0.82);
}

.song-ring__ltr.is-sep {
    color: var(--ring-artist-color);
}

.gd-mode {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    color: #eaf3ff;
    --gd-btn-x: 1.6%;
    --gd-btn-y: 2.4%;
    --gd-btn-scale: 0.9;
    --gd-btn-track: .16em;
    --gd-btn-hint: block;
    --gd-ink: #eaf3ff;
    --gd-line-w: 1px;
    --gd-dash: 26 9 5 7 42 12 13 8 7 6;
    --gd-line-a: .45;
    --gd-glow: 0;
}
.gd-mode[hidden] { display: none; }
.gd-mode__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gd-mode__halo { fill: none; stroke: var(--gd-ink); stroke-width: 4; opacity: .10; vector-effect: non-scaling-stroke; }
.gd-mode__line {
    fill: none;
    stroke: var(--gd-ink);
    stroke-width: var(--gd-line-w);
    stroke-dasharray: var(--gd-dash);
    opacity: calc(var(--gd-line-a) + var(--gd-glow) * .45);
    vector-effect: non-scaling-stroke;
}
.gd-mode__lock { fill: none; stroke: var(--gd-ink); stroke-width: 1.4px; opacity: .5; vector-effect: non-scaling-stroke; }
.gd-mode__node { fill: var(--gd-ink); opacity: .85; }

.gd-mode__btn {
    position: absolute;
    left: var(--gd-btn-x);
    bottom: var(--gd-btn-y);
    display: grid;
    grid-template-columns: auto auto;
    gap: .1rem .7rem;
    align-items: baseline;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: calc(.72rem * var(--gd-btn-scale));
    letter-spacing: var(--gd-btn-track);
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    opacity: .9;
}
.gd-mode__btn:hover { opacity: 1; }
.gd-mode__kicker { grid-column: 1 / -1; font-size: calc(.54rem * var(--gd-btn-scale)); letter-spacing: .3em; opacity: .5; }
.gd-mode__label { font-size: calc(.76rem * var(--gd-btn-scale)); letter-spacing: .12em; }
.gd-mode__state { font-size: calc(.6rem * var(--gd-btn-scale)); opacity: .55; }
.gd-mode__hint {
    grid-column: 1 / -1;
    font-size: calc(.54rem * var(--gd-btn-scale));
    letter-spacing: .04em;
    opacity: .38;
    text-transform: none;
    display: var(--gd-btn-hint);
}
.gd-mode.is-on .gd-mode__label { color: #ffffff; }
.gd-mode.is-on .gd-mode__state { opacity: 1; }
.gd-mode.is-on .gd-mode__line { opacity: .95; }
.gd-mode.is-on .gd-mode__lock { opacity: .8; }