.ambient {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    inset: -25px;
    background:
        linear-gradient(
            rgb(30 30 46 / var(--performance-background-dim)),
            rgb(30 30 46 / var(--performance-background-dim))
        ),
        var(--nabla-background) center/cover no-repeat;
    filter: blur(var(--performance-background-blur));
    opacity: 1;
}
.ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgb(30 30 46 / var(--performance-background-dim)),
            rgb(30 30 46 / var(--performance-background-dim))
        ),
        var(--exceed-background) center/cover no-repeat;
    opacity: 0;
    transition: opacity var(--theme-transition-duration)
        var(--theme-transition-easing);
}
:root[data-theme="exceed"] .ambient::after {
    opacity: 1;
}
@media (max-width: 900px), (hover: none) {
    .ambient {
        /* Use a stable height to prevent rescaling on scroll */
        bottom: auto;
        height: calc(100lvh + 50px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ambient::after {
        transition: none;
    }
}
.shell {
    max-width: 1370px;
    margin: auto;
    padding: 0 48px;
}
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
    height: 74px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 600;
}
.site-header .load-status {
    margin-left: auto;
}
.dashboard-settings {
    position: relative;
    margin-left: 12px;
}
:root.settings-open {
    overflow: hidden;
}
.dashboard-settings.is-active {
    z-index: 6;
}
.settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5;
    touch-action: none;
}
.settings-backdrop:not(.is-visible) {
    pointer-events: none;
}
.settings-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted);
}
.settings-toggle:hover,
.settings-toggle[aria-expanded="true"] {
    background: var(--accent-wash);
    color: var(--accent);
}
.settings-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 6;
    width: min(300px, calc(100vw - 36px));
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    padding: 23px var(--panel-padding-inline);
}
.settings-panel h2,
.chart-viewer-settings h2 {
    margin: 0 0 22px;
    font-size: 17px;
    font-weight: 500;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 12px;
    color: var(--muted);
}
.settings-control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--muted);
}
.settings-control output {
    color: var(--ink);
}
.settings-control input {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.settings-group {
    margin-bottom: 18px;
}
.settings-group .settings-row {
    margin-bottom: 0;
}
.settings-hint {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}
.settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--row-separator);
}
.settings-footer .text-button {
    margin-left: auto;
}
.hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 32px 0 28px;
}
.hero-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: right;
    color: var(--muted);
    padding-bottom: 5px;
    font: 10px var(--sans);
}
.notice {
    padding: 13px 18px;
    border: 0;
    border-radius: 8px;
    background: color-mix(
        in srgb,
        var(--notice-accent) calc(100% * 19 / 255),
        transparent
    );
    color: var(--notice-text);
    margin-bottom: 18px;
}
.metrics {
    display: grid;
    --metric-value-size: 32px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border-block: 0;
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
    border: 0;
    border-radius: var(--panel-radius);
    overflow: hidden;
}
.metric {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 4px;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 118px;
    padding: 10px 12px;
}
.metric-label {
    font: 9px var(--sans);
    color: var(--muted);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    grid-row: 1;
    min-height: 28px;
    justify-content: center;
    font-size: 10px;
}
.metric-value {
    font: 34px var(--sans);
    line-height: 1.1;
    position: relative;
    z-index: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--metric-value-size);
    margin: 0;
    white-space: nowrap;
    min-width: 0;
}
.featured .metric-value {
    color: var(--accent);
}
.metric-detail {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    z-index: 1;
    max-width: 100%;
}
.metric-chart-link.open-chart {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metric-chart-link.open-chart:hover,
.artwork-credit:hover {
    color: var(--accent);
}
.artwork-credit {
    color: var(--footer-color);
    font-size: 10px;
    transition: color 0.16s;
}
.metric-spark {
    position: absolute;
    right: 16px;
    width: 92px;
    opacity: 0.25;
    bottom: 14px;
    height: 30px;
}
.navigation-row {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 24px;
    border-bottom: 1px solid #ffffff16;
    margin-top: 25px;
}
.tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    gap: 29px;
    font-size: min(14px, 3.5cqw);
}
.tab {
    position: relative;
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--muted);
    padding: 0 0 14px;
    font-size: inherit;
    white-space: nowrap;
}
.tab.active {
    color: var(--ink);
}
.tabs:not(.segmented-animated) .tab.active::after {
    content: "";
    height: 2px;
    background: var(--accent);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
}
.tabs.segmented-animated::before {
    top: auto;
    bottom: -1px;
    height: 2px;
    border-radius: 0;
    background: var(--accent);
}
.tab-caption {
    font-size: 9px;
    color: var(--faint);
    padding-bottom: 13px;
}
.panel {
    border: 0;
    overflow: hidden;
    box-shadow: none;
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
    border-radius: var(--panel-radius);
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 25px var(--panel-padding-inline) 10px;
}
.panel-head h2 {
    margin: 7px 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 18px;
    margin-top: 0;
}
.panel-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}
.chart-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.segmented {
    height: var(--button-height);
    position: relative;
    isolation: isolate;
    display: flex;
    border: 0;
    background: var(--control-bg);
    padding: 3px;
    border-radius: var(--control-radius);
}
.segmented button {
    height: 100%;
    border: 0;
    background: none;
    color: var(--muted);
    font: 10px var(--sans);
    padding: 0 10px;
    border-radius: 4px;
}
.segmented.time-range {
    height: auto;
}
.time-range button {
    height: auto;
    padding: 7px 10px;
}
.segmented .selected,
.segmented button:focus-visible {
    color: var(--accent);
}
.segmented:not(.segmented-animated) .selected,
.segmented:not(.segmented-animated) button:focus-visible {
    background: var(--accent-wash);
}
.segmented-animated::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--segment-width);
    height: var(--segment-height);
    transform: translate(var(--segment-x), var(--segment-y));
    border-radius: var(--item-radius);
    background: var(--segment-background, var(--accent-wash));
    pointer-events: none;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        width 260ms cubic-bezier(0.22, 1, 0.36, 1),
        height 260ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.segmented-animated button {
    position: relative;
    z-index: 1;
}
.select-wrap select {
    height: var(--button-height);
    font-size: 12px;
    color: var(--ink);
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    padding: 0 25px 0 11px;
    cursor: pointer;
    max-width: 170px;
}
.chart-legend {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    padding: 2px 30px 2px;
    flex-wrap: wrap;
}
.chart-legend button,
.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 9px var(--sans);
    color: var(--muted);
    padding: 2px 0;
    border: 0;
    background: transparent;
}
.chart-legend button[aria-pressed="false"] {
    opacity: 0.4;
    text-decoration: line-through;
}
.dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.plays {
    background: var(--chart-plays);
}
.best {
    background: var(--chart-best);
}
.avg10 {
    background: var(--chart-avg10);
}
.avg100 {
    background: var(--chart-avg100);
}
.threshold {
    background: var(--chart-top50);
}
.total {
    background: var(--chart-total);
}
.chart-wrap {
    position: relative;
    padding: 8px 9px 0;
    min-height: 220px;
}
.chart-svg {
    display: block;
    width: 100%;
    height: auto;
}
.chart-svg text {
    font-family: var(--sans);
    font-size: 10px;
    fill: var(--chart-label-color);
}
.chart-svg .axis-caption {
    font-size: 9px;
    fill: var(--chart-caption-color);
}
.chart-svg .grid {
    stroke: var(--chart-grid-color);
    stroke-width: 1;
}
#chart,
#vf-distribution-chart {
    overflow: visible;
    touch-action: pan-y pinch-zoom;
    user-select: none;
}
#chart .crosshair,
#vf-distribution-chart .crosshair {
    stroke: color-mix(
        in srgb,
        var(--accent) calc(100% * 90 / 255),
        transparent
    );
    stroke-dasharray: 3 4;
    pointer-events: none;
}
#chart .hover-point,
#vf-distribution-chart .hover-point {
    fill: var(--accent);
    stroke: var(--panel);
    stroke-width: 2;
    pointer-events: none;
}
.chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 12px;
}
.chart-popup,
.calculator-chart-popup,
.spending-popup,
.song-reading-popup,
.details-audio-download-popup {
    border: 0;
    border-radius: var(--popup-radius);
    background: var(--popup-bg);
    color: var(--popup-color);
    box-shadow: var(--popup-shadow);
    font: var(--popup-font-size) / 1.5 var(--sans);
    opacity: 1;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
.chart-popup,
.spending-popup,
.song-reading-popup,
.details-audio-download-popup {
    padding: var(--popup-padding);
}
.chart-popup {
    position: absolute;
    z-index: 3;
    max-width: 250px;
    pointer-events: none;
    box-sizing: border-box;
    width: max-content;
}
.chart-popup strong {
    font-weight: 500;
    color: var(--ink);
    display: block;
    margin-bottom: 7px;
}
.chart-popup .popup-value {
    font: 16px var(--sans);
    color: var(--accent);
    margin: 3px 0;
}
.chart-popup small {
    color: var(--muted);
    font-size: 9px;
}
.chart-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0;
    padding: 14px 27px;
    color: var(--muted);
    font: 12px var(--sans);
    gap: 14px;
}
#chart-summary,
#timing-summary,
#vf-distribution-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
#chart-summary > span,
#timing-summary > span,
#vf-distribution-summary > span {
    white-space: nowrap;
}
.history-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.chart-summary strong {
    color: var(--chart-summary-color);
    font-weight: 400;
}
.calculator-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px var(--panel-padding-inline) 20px;
}
.calculator-formula {
    flex: 1 0 auto;
    margin-left: 0;
    color: var(--faint);
    text-align: center;
}
.calculator-formula math {
    font-family: var(--sans);
    font-size: 14px;
    color: inherit;
}
.calculator-formula p {
    margin: 12px 0 0;
    font-size: 10px;
}
.calculator-controls .segmented button,
.settings-row .segmented button,
.archive-chart-modes.segmented button {
    padding: 0 14px;
    font-size: 12px;
}
.calculator-field {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}
.calculator-field input,
.number-control input {
    width: 150px;
    height: var(--button-height);
    padding: 0 12px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--ink);
}
.calculator-field input[aria-invalid="true"] {
    outline: 1px solid var(--accent);
}
.number-control {
    display: flex;
    position: relative;
}
.number-control input {
    padding-right: 34px;
}
.number-control input[type="number"] {
    appearance: textfield;
}
.number-control input::-webkit-inner-spin-button,
.number-control input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.number-steps {
    position: absolute;
    inset: 2px 2px 2px auto;
    display: grid;
    width: 28px;
}
.number-steps button {
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
}
.number-steps button:hover {
    color: var(--accent);
    background: var(--row-hover);
}
.calculator-validation {
    margin: 0 var(--panel-padding-inline) 20px;
    color: var(--accent);
    font-size: 12px;
}
.calculator-chart-wrap {
    position: relative;
    padding: 0 12px;
}
.calculator-chart-popup {
    position: absolute;
    z-index: 3;
    width: 520px;
    max-width: calc(100% - 16px);
    pointer-events: none;
}
.calculator-chart-popup .play-row {
    padding: var(--popup-padding);
}
.calculator-chart-popup .play-row > div {
    min-width: 0;
}
.calculator-panel {
    --calculator-clear-muted: color-mix(
        in srgb,
        var(--faint) 35%,
        var(--panel)
    );
}
.calculator-panel [data-clear="1"] {
    --clear-color: color-mix(
        in srgb,
        var(--accent) 15%,
        var(--calculator-clear-muted)
    );
}
.calculator-panel [data-clear="2"] {
    --clear-color: color-mix(
        in srgb,
        var(--accent) 35%,
        var(--calculator-clear-muted)
    );
}
.calculator-panel [data-clear="3"] {
    --clear-color: color-mix(
        in srgb,
        var(--accent) 50%,
        var(--calculator-clear-muted)
    );
}
.calculator-panel [data-clear="4"] {
    --clear-color: color-mix(
        in srgb,
        var(--accent) 70%,
        var(--calculator-clear-muted)
    );
}
.calculator-panel [data-clear="5"] {
    --clear-color: color-mix(
        in srgb,
        var(--accent) 85%,
        var(--calculator-clear-muted)
    );
}
.calculator-panel [data-clear="6"] {
    --clear-color: var(--accent);
}
.calculator-curve,
.calculator-markers {
    pointer-events: none;
}
.calculator-panel stop {
    stop-color: var(--clear-color);
}
.calculator-line {
    fill: none;
    stroke: var(--clear-color);
    stroke-width: 2;
    stroke-linejoin: round;
}
.calculator-point {
    fill: var(--clear-color);
    stroke: var(--panel);
    stroke-width: 1.5;
}
.calculator-dot-target {
    fill: transparent;
}
.calculator-dot {
    fill: color-mix(in srgb, var(--accent) 45%, var(--calculator-clear-muted));
    opacity: 0.58;
    pointer-events: none;
}
.calculator-chart-dot.is-matching .calculator-dot,
.calculator-chart-dot:hover .calculator-dot,
.calculator-chart-dot:focus-visible .calculator-dot {
    fill: var(--accent);
    opacity: 1;
    stroke: var(--panel);
    stroke-width: 1;
    r: 3.5;
}
.calculator-chart-dot:focus-visible {
    outline: none;
}
.calculator-matches {
    border-top: 1px solid var(--line);
}
.calculator-match-count {
    font-size: 12px;
    color: var(--muted);
}
.calculator-match-count {
    white-space: nowrap;
}
.calculator-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: calc(100% - 2 * var(--panel-padding-inline));
    margin: 0 var(--panel-padding-inline) 12px;
    padding: 3px 4px 3px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--control-radius);
    background: var(--accent-wash);
    font-size: 12px;
}
.calculator-filter > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.calculator-filter button {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--item-radius);
    background: none;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
}
.calculator-filter button:hover {
    color: var(--accent);
    background: var(--row-hover);
}
.calculator-matches .empty-list {
    padding-inline: var(--list-padding-inline);
}
.calculator-matches .play-row > div {
    min-width: 0;
}
.calculator-guide,
.calculator-crosshair {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}
.calculator-guide {
    opacity: 0.45;
}
.calculator-crosshair {
    stroke: var(--accent);
    opacity: 0.6;
}
.calculator-references {
    pointer-events: none;
}
.calculator-panel [data-reference="best"] {
    --reference-color: var(--accent);
    --reference-dash: 10 7;
}
.calculator-panel [data-reference="average"] {
    --reference-color: color-mix(in srgb, var(--accent) 55%, var(--muted));
    --reference-dash: 1 6;
}
.calculator-panel [data-reference="worst"] {
    --reference-color: color-mix(in srgb, var(--accent) 25%, var(--faint));
    --reference-dash: 4 7;
}
.calculator-reference line,
.calculator-reference-legend line {
    fill: none;
    stroke: var(--reference-color);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: var(--reference-dash);
    vector-effect: non-scaling-stroke;
}
.calculator-reference line {
    opacity: 0.8;
}
.calculator-readout {
    padding: 12px var(--panel-padding-inline) 26px;
}
.calculator-reference-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.calculator-reference-legend > div {
    display: grid;
    grid-template-rows: 8px 1fr auto;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
}
.calculator-reference-legend output {
    font-size: 18px;
    color: var(--ink);
}
.calculator-target {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
}
.calculator-target input {
    flex: 1;
    min-width: 100px;
    min-height: 32px;
    accent-color: var(--accent);
}
.calculator-target output {
    min-width: 200px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
    color: var(--ink);
}
.calculator-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: 18px 24px;
    margin-top: 18px;
}
.calculator-legend > div {
    position: relative;
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
}
.calculator-legend-border {
    position: absolute;
    inset: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    overflow: visible;
    pointer-events: none;
}
.calculator-legend-border rect {
    rx: var(--control-radius);
    fill: none;
    stroke: color-mix(in srgb, var(--clear-color) 65%, transparent);
    stroke-width: 1;

    stroke-dasharray: 1.01 1.01; /* Extend past the perimeter to avoid a gap from rounding */
    stroke-dashoffset: 1.01;
    visibility: hidden;
    transition:
        stroke-dashoffset 650ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 650ms; /* To prevent ghost pixel when unboxed */
}
.calculator-legend .is-upgrade .calculator-legend-border rect {
    stroke-dashoffset: 0;
    visibility: visible;
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .calculator-legend-border rect {
        transition: none;
    }
}
.calculator-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.calculator-legend .dot {
    background: var(--clear-color);
}
.calculator-legend output {
    font-size: 19px;
    color: var(--clear-color);
}
.calculator-legend .calculator-grade {
    --clear-color: var(--calculator-grade-color);
}
.calculator-legend [data-clear="6"][aria-disabled="true"] {
    --clear-color: var(--faint);
    color: var(--faint);
}
.lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.panel-head.compact {
    padding: 23px var(--list-padding-inline) 10px;
    padding-top: 20px;
}
.panel-head.compact h2 {
    font-size: 17px;
}
.text-button {
    background: none;
    border: 0;
    color: var(--muted);
    padding: 5px 0;
    white-space: nowrap;
    font-size: 11px;
}
.text-button span {
    color: var(--accent);
    margin-left: 5px;
}
.session-meta {
    font: 12px var(--sans);
    color: var(--faint);
    padding: 0 var(--list-padding-inline) 15px;
}
.play-list {
    padding: 0 0 8px;
}
.play-row {
    display: grid;
    align-items: center;
    padding: var(--entry-padding-block) var(--list-padding-inline);
    border-top: 0;
    grid-template-columns:
        var(--entry-position-width) var(--entry-cover-size)
        minmax(0, 1fr) auto;
    gap: var(--entry-gap);
}
.row-index {
    font: var(--entry-position-size) var(--sans);
    color: var(--faint);
    white-space: nowrap;
}
td.row-index {
    width: calc(var(--list-padding-inline) + var(--entry-position-width));
    padding-right: 0;
}
td.row-index + td {
    padding-left: var(--entry-gap);
}
.entry-song-info {
    min-width: 0;
}
.song-title {
    font-size: var(--entry-title-size);
    font-weight: 450;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.song-details {
    display: flex;
    align-items: center;
    gap: var(--entry-details-gap);
    margin-top: 5px;
    font-size: 9px;
    color: var(--faint);
}
.difficulty-badge {
    display: inline-block;
    font: var(--diff-badge-size) var(--sans);
    border: 0;
    border-radius: 5px;
    padding: 3px 7px;
    background: var(--control-bg);
    color: var(--difficulty-color, #bbb5cd);
    white-space: nowrap;
}
.difficulty-badge.d0,
.difficulty-tabs button[data-chart-diff="0"] {
    --difficulty-color: #a8bddb;
}
.difficulty-badge.d1,
.difficulty-tabs button[data-chart-diff="1"] {
    --difficulty-color: #e1cf9d;
}
.difficulty-badge.d2,
.difficulty-tabs button[data-chart-diff="2"] {
    --difficulty-color: #dcb6c9;
}
.difficulty-badge.d3,
.difficulty-badge.d4,
.difficulty-badge.d5,
.difficulty-tabs button[data-chart-diff="3"],
.difficulty-tabs button[data-chart-diff="4"],
.difficulty-tabs button[data-chart-diff="5"] {
    --difficulty-color: #f4f4f7;
}
.row-values {
    text-align: right;
}
.row-vf,
.vf-cell {
    font-size: var(--entry-vf-size);
    color: var(--entry-vf-color);
}
.row-score,
.score-cell {
    font-size: var(--entry-score-size);
}
.row-score {
    color: var(--faint);
    margin-top: 3px;
}
.clear-label {
    color: var(--muted);
    font-size: var(--entry-clear-size);
}
.clear-label.puc {
    color: #d8c295;
}
.panel-foot {
    font: 12px var(--sans);
    color: var(--faint);
    border-top: 0;
    padding: 12px var(--list-padding-inline);
}
.empty-state,
.empty-list {
    color: var(--muted);
}
.empty-list {
    padding: 25px 0;
    font-size: 12px;
}
.play-list > .empty-list {
    padding-inline: var(--list-padding-inline);
}
.top-list {
    padding-top: 0;
}
.table-tools {
    padding: 22px var(--panel-padding-inline);
    display: flex;
    align-items: center;
    gap: 12px;
}
:is(.records-panel .table-tools, .library-tools) {
    align-items: stretch;
}
:is(.records-panel .table-tools, .library-tools) > .select-wrap {
    display: flex;
}
:is(.records-panel .table-tools, .library-tools) .search-wrap,
:is(.records-panel .table-tools, .library-tools) select {
    min-height: var(--button-height);
}
:is(.records-panel .table-tools, .library-tools) .select-wrap select {
    padding-block: 0;
}
.search-wrap {
    height: var(--button-height);
    min-height: var(--button-height);
    position: relative;
    scroll-margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    padding: 0 12px;
    width: var(--search-width);
}
.search-wrap span {
    color: var(--faint);
    font-size: 22px;
}
.search-wrap input {
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    color: var(--ink);
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 0 32px 0 0;
}
.search-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--item-radius);
    background: transparent;
    color: var(--muted);
}
.search-clear svg {
    pointer-events: none;
}
.search-wrap input::placeholder {
    color: var(--faint);
}
.table-scroll {
    overflow: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 700px;
}
thead {
    background: #00000017;
}
th {
    font: 11px var(--sans);
    font-weight: 400;
    color: var(--faint);
    padding: 12px 15px;
    border-block: 0;
}
td {
    padding: var(--entry-padding-block) 15px;
    border-bottom: 0;
    font-size: 11px;
    vertical-align: middle;
}
th:first-child,
td:first-child {
    padding-left: var(--list-padding-inline);
}
th:last-child,
td:last-child {
    padding-right: 27px;
}
.right {
    text-align: right;
}
td .artist {
    color: var(--faint);
    font-size: 9px;
    margin-top: 3px;
}
td:nth-child(2) {
    max-width: 370px;
}
.score-cell {
    color: #c8c3d9;
}
@media (hover: hover) {
    tbody > tr:hover {
        background: var(--row-hover);
    }
}
.pagination {
    padding: 16px var(--panel-padding-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pagination span {
    font-size: 11px;
    color: var(--faint);
}
.pagination button {
    border: 0;
    background: none;
    border-radius: 4px;
    width: 29px;
    height: 28px;
    margin-left: 5px;
}
footer {
    padding: 28px 0 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(32px, auto);
    align-items: center;
    color: var(--footer-color);
    font: 11px var(--sans);
    font-size: 11px;
    padding-top: 24px;
}
footer > .artwork-credit {
    justify-self: start;
}
footer > :last-child {
    justify-self: end;
}
.timing-section,
.vf-distribution-section,
.profile-radar-section {
    margin-top: 8px;
}
.profile-radar-section {
    padding-bottom: 24px;
}
.vf-distribution-section {
    --clear-color: var(--accent);
}
.vf-distribution-chart-wrap {
    position: relative;
}
.vf-distribution-class-guide {
    pointer-events: none;
}
.vf-distribution-class-icon {
    flex: none;
    object-fit: contain;
}
.vf-distribution-section stop {
    stop-color: var(--accent);
}
.vf-distribution-marker line,
.vf-distribution-raw-marker line {
    stroke-width: 1;
    stroke-opacity: 0.65;
    stroke-dasharray: 3 4;
}
.vf-distribution-marker line {
    stroke: var(--accent);
}
.vf-distribution-marker circle {
    fill: var(--accent);
    stroke: var(--panel);
    stroke-width: 2;
}
.vf-distribution-eg-dot {
    background: var(--accent);
}
.vf-distribution-raw-marker {
    color: var(--vf-distribution-raw-color);
}
.vf-distribution-raw-marker line {
    stroke: currentColor;
    stroke-dasharray: 1 4;
    stroke-linecap: round;
}
.vf-distribution-raw-marker circle {
    fill: currentColor;
    stroke: var(--panel);
    stroke-width: 2;
}
.vf-distribution-raw-dot {
    background: var(--vf-distribution-raw-color);
}
.profile-radar-wrap {
    display: grid;
    place-items: center;
    padding: 10px 24px 14px;
    min-height: 240px;
}
.profile-radar-wrap > .profile-radar {
    width: min(100%, 400px);
    --radar-center-color: var(--profile-radar-center-color);
    --radar-gradient-start: var(--profile-radar-gradient-start);
    --radar-gradient-middle: var(--profile-radar-gradient-middle);
    --radar-gradient-end: var(--profile-radar-gradient-end);
    --radar-fill-opacity: var(--profile-radar-fill-opacity);
}
.profile-radar .song-radar-area {
    fill: none;
    stroke: var(--profile-radar-stroke-color);
    stroke-opacity: 0.6;
    stroke-width: 0.6;
}
.profile-radar-wrap > .profile-radar svg {
    width: 100%;
}
.profile-radar .song-radar-grid {
    fill: var(--profile-radar-grid-bg);
}
.profile-radar .song-radar-value {
    font-size: 10px;
}
.profile-radar-note,
.profile-radar-empty {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}
.profile-radar-note {
    padding: 0 24px;
}
.radar-contributors-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px auto 0;
}
.profile-radar-section:has(.radar-contributors:not([hidden])) {
    padding-bottom: 0;
}
.radar-contributors {
    margin-top: 12px;
    background: var(--entry-section-bg);
}
.radar-contributor-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px var(--panel-padding-inline);
}
.radar-axis-tag.calculator-filter {
    --accent: var(--radar-axis-color);
    --accent-wash: color-mix(
        in srgb,
        var(--accent) calc(100% * 27 / 255),
        transparent
    );
    --row-hover: color-mix(
        in srgb,
        var(--accent) calc(100% * 17 / 255),
        transparent
    );
    max-width: 100%;
    margin: 0;
    color: var(--accent);
}
.profile-radar .radar-axis-filter {
    cursor: pointer;
    outline: none;
    touch-action: manipulation;
}
.radar-label-hit-target {
    fill: transparent;
}
.radar-axis-filter:focus-visible .song-radar-label-name {
    text-decoration: underline;
}
.radar-contributors table {
    min-width: 0;
}
.radar-contributors > .table-scroll > table {
    table-layout: fixed;
}
.radar-contributors > .table-scroll > table > thead th:first-child {
    width: calc(var(--list-padding-inline) + var(--entry-position-width));
}
.radar-contributors > .table-scroll > table > thead th:nth-last-child(-n + 3) {
    width: 16%;
}
.radar-contributors > .table-scroll > table > thead th:nth-last-child(2) {
    width: 12%;
}
.radar-contributor-row + .judgement-row + .radar-contributor-row {
    border-top: 1px solid var(--row-separator);
}
.radar-contributor-row .entry-song-info {
    flex: 1;
}
.radar-contributor-row .judgement-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    width: fit-content;
    font-size: var(--entry-title-size);
    font-weight: 450;
    line-height: 1.4;
}
.radar-contributor-row .judgement-toggle > span,
.radar-contributor-row .artist {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.radar-contributor-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
    gap: 0px 20px;
}
.radar-contributor-details > .radar-contributor-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin: 0;
}
.radar-contributor-chart .song-radar,
.radar-contributor-chart svg {
    width: 100%;
}
.radar-contributor-breakdown {
    min-width: 0;
}
.radar-contributor-breakdown .judgement-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 560px;
    margin: 24px auto 0;
    text-align: center;
}
.radar-contributor-breakdown th,
.radar-contributor-breakdown td {
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}
.radar-contributor-breakdown thead th {
    font: 10px var(--sans);
    color: var(--muted);
}
.radar-contributor-breakdown thead {
    background: transparent;
}
.radar-contributor-breakdown table {
    table-layout: fixed;
}
.radar-contributor-breakdown th:first-child {
    width: 34%;
}
.profile-radar .song-radar-fill {
    transition: filter 240ms ease;
}
.profile-radar .song-radar-label,
.profile-radar .song-radar-value {
    transition: fill 240ms ease;
}
.profile-radar .song-radar-contribution {
    fill: var(--accent);
    font: 9px var(--sans);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}
.profile-radar
    svg[data-active-axes]
    .song-radar-contribution[data-contributing] {
    opacity: 1;
}
.profile-radar .song-radar-area {
    transition: stroke 240ms ease;
}
.radar-contributors .judgement-row:hover,
.radar-contributor-breakdown tbody tr:hover {
    background: #ffffff03;
}
.radar-contributor-breakdown tbody tr:hover {
    background: transparent;
}
.profile-radar
    svg[data-active-axes]
    .song-radar-fill:not(.radar-contribution-fill) {
    filter: grayscale(1) brightness(0.8);
}
.profile-radar svg[data-active-axes] .song-radar-area {
    stroke: var(--faint);
}
[data-axis="notes"] {
    --radar-axis-color: var(--radar-label-notes);
}
[data-axis="peak"] {
    --radar-axis-color: var(--radar-label-peak);
}
[data-axis="tsumami"] {
    --radar-axis-color: var(--radar-label-tsumami);
}
[data-axis="tricky"] {
    --radar-axis-color: var(--radar-label-tricky);
}
[data-axis="hand-trip"] {
    --radar-axis-color: var(--radar-label-hand-trip);
}
[data-axis="one-hand"] {
    --radar-axis-color: var(--radar-label-one-hand);
}
.radar-contributor-breakdown [data-axis] {
    color: var(--radar-axis-color);
}
.radar-axis-muted,
.radar-axis-muted [data-axis] {
    color: var(--faint);
}
.song-radar .song-radar-label.radar-axis-muted,
.song-radar-label.radar-axis-muted .song-radar-value {
    fill: var(--faint);
}
@media (max-width: 900px) {
    .radar-contributor-details {
        grid-template-columns: minmax(0, 1fr);
    }
    .radar-contributor-details > .radar-contributor-actions {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .radar-contributor-chart {
        width: min(100%, 280px);
        justify-self: center;
    }
}
@media (max-width: 900px) {
    .radar-contributors > .table-scroll > table,
    .radar-contributors > .table-scroll > table > tbody {
        display: block;
        width: 100%;
    }
    .radar-contributors > .table-scroll > table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .radar-contributor-row {
        display: grid;
        grid-template-columns: var(--entry-position-width) minmax(0, 1fr) auto;
        grid-template-areas: "position song total" "position song axes";
        gap: 0 var(--entry-gap);
        align-items: center;
        padding: var(--entry-padding-block) var(--list-padding-inline);
    }
    .radar-contributor-row > td {
        display: block;
        min-width: 0;
        max-width: none;
        width: auto;
        padding: 0;
        border: 0;
    }
    .radar-contributor-row > .row-index {
        grid-area: position;
    }
    .radar-contributor-song {
        grid-area: song;
    }
    .radar-contributor-row > .vf-cell {
        grid-area: total;
        align-self: end;
    }
    .radar-contributor-row > .radar-contributor-axes {
        grid-area: axes;
        align-self: start;
        margin-top: 3px;
        color: var(--faint);
        font-size: var(--entry-position-size);
        text-align: right;
        white-space: nowrap;
    }
    .radar-contributor-row > .radar-contributor-axes::after {
        content: " axes";
    }
    .radar-contributors .radar-contributor-difficulty,
    .radar-contributor-row .artist {
        display: none;
    }
    .radar-contributor-row .record-details {
        display: flex;
        flex-wrap: wrap;
    }
    .radar-contributor-row > .row-index,
    .radar-contributor-row > .radar-contributor-song,
    .radar-contributor-row > .vf-cell {
        padding: 0;
    }
    .radar-contributors .judgement-row {
        display: block;
    }
    .radar-contributors .judgement-row > td {
        display: block;
    }
}
@media (max-width: 600px) {
    .profile-radar-wrap {
        padding-inline: 4px;
    }
}
.timing-heading {
    padding: 14px 27px 12px;
}
.timing-heading h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}
.timing-heading p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.timing-chart-wrap {
    padding: 8px 9px 0;
}
#timing-chart text {
    font-variant-numeric: normal;
    line-height: normal;
}
.timing-zero,
.timing-guide,
.vf-distribution-class-line {
    stroke: color-mix(
        in srgb,
        var(--chart-top50) calc(100% * 41 / 255),
        transparent
    );
    stroke-dasharray: 3 4;
    pointer-events: none;
}
.vf-distribution-class-line {
    stroke: color-mix(in srgb, var(--vf-class-color) 28%, transparent);
}
#timing-chart .timing-guide-label {
    font-size: 8px;
}
.timing-bar {
    opacity: 1;
    transition: opacity 0.16s;
}
.timing-curve {
    pointer-events: none;
}
.timing-curve-line {
    fill: none;
    stroke: var(--timing-curve-color);
    stroke-width: 1.5;
}
.timing-curve-gradient stop {
    stop-color: var(--timing-curve-color);
}
.timing-bar.early {
    fill: var(--timing-early-color);
}
.timing-bar.center {
    fill: var(--timing-center-color);
}
.timing-bar.late {
    fill: var(--timing-late-color);
}
.timing-bar:hover,
.timing-bar:focus-visible {
    opacity: 0.7;
}
.timing-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    font-size: 12px;
    color: var(--muted);
}
.spending-price {
    color: var(--red);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}
.spending-popup {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
.spending-popup,
.song-reading-popup {
    opacity: 0;
    transform: translateY(var(--popup-offset));
    transition:
        opacity var(--popup-exit-duration) var(--popup-easing),
        transform var(--popup-exit-duration) var(--popup-easing);
}
.spending-popup:popover-open:not(.closing),
.song-reading-popup:popover-open:not(.closing) {
    opacity: 1;
    transform: translateY(0);
    transition-duration: var(--popup-enter-duration);
}
.spending-popup p {
    margin: 0 0 6px;
}
.spending-popup ul {
    margin: 0;
    padding-left: 14px;
}
.spending-popup li + li {
    margin-top: 3px;
}
.spending-popup small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
}
.brand-icon {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.hero h1 {
    font-size: 43px;
    font-weight: 500;
    margin: 0 0 7px;
}
.dan-banner-trigger {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
}
.dan-banner-trigger:hover,
.dan-banner-trigger:focus-visible {
    background: none;
}
.dan-banner {
    display: block;
    width: auto;
    height: 24px;
    flex: none;
    object-fit: contain;
}
.metric-detail,
.vf-standing,
.vf-class {
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    align-self: center;
    line-height: 1.5;
}
.metric-playtime .metric-detail {
    white-space: normal;
    line-height: 1.5;
}
.cover-tile {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--entry-cover-size);
    height: var(--entry-cover-size);
    background: #ffffff05;
    border: 0;
    overflow: hidden;
    border-radius: var(--item-radius);
}
.cover-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover-missing {
    color: var(--faint);
    font-size: 12px;
}
.cover-tile.large {
    width: 154px;
    height: 154px;
    border-radius: var(--control-radius);
}
.open-chart {
    border: 0;
    background: none;
    color: var(--ink);
    padding: 0;
    text-align: left;
    max-width: 100%;
    display: block;
}
.open-chart:hover {
    color: var(--accent);
}
.chart-row,
.song-search-entry,
.radar-contributor-row {
    cursor: pointer;
    transition: background 0.16s;
}
.chart-row:has(:focus-visible),
.song-search-entry:has(:focus-visible),
.radar-contributor-row:has(:focus-visible) {
    background: var(--row-hover);
}
@media (hover: hover) {
    .chart-row:hover,
    .song-search-entry:hover,
    .radar-contributor-row:hover {
        background: var(--row-hover);
    }
}
.play-row + .play-row,
.song-option + .song-option,
.records-panel tbody tr + tr,
.song-search-panel tbody tr + tr,
.search-help-body tbody tr + tr {
    border-top: 1px solid var(--row-separator);
}
.chart-row .open-chart:hover {
    color: var(--ink);
}
.table-song {
    display: flex;
    align-items: center;
    gap: var(--entry-gap);
}
.record-details {
    display: none;
}
.records-panel .artist {
    font-size: 10px;
}
.song-search-panel {
    overflow: visible;
    padding-top: 22px;
}
.song-search {
    position: relative;
    margin: 0 var(--panel-padding-inline) 24px;
    width: var(--search-width);
    max-width: calc(100% - 2 * var(--panel-padding-inline));
}
.song-search .search-wrap {
    width: 100%;
}
.song-search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin: 0 var(--panel-padding-inline) var(--song-section-gap);
}
.search-help-trigger.calculator-link {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    padding: 8px 0;
}
.action-info-icon {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.85em;
    line-height: 1;
    margin-right: 3px;
}
.search-metadata-status {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 11px;
}
.search-help {
    width: min(760px, calc(100vw - 36px));
}
.search-help-body {
    padding: 0 var(--panel-padding-inline) 24px;
    font-size: 13px;
    line-height: 1.65;
}
.search-help-body p {
    margin: 0 0 16px;
}
.search-help-body code {
    color: var(--accent);
    overflow-wrap: anywhere;
}
.search-help-body .table-scroll {
    background: var(--entry-section-bg);
}
.search-help-body th,
.search-help-body td {
    white-space: normal;
    padding: 10px;
    vertical-align: top;
}
.search-help-body th:first-child,
.search-help-body td:first-child {
    width: 38%;
}
.song-search-tools .song-search {
    margin: 0;
    margin-bottom: 7px;
    max-width: none;
    flex: 0 1 var(--search-width);
    min-width: 0;
}
.library-open {
    flex: none;
    height: var(--button-height);
    padding: 0 14px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
}
.library-open:hover {
    color: var(--accent);
}
.library-body {
    padding: 0 var(--panel-padding-inline) 8px;
}
.library-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.library-tools .search-wrap {
    flex: 1 1 250px;
    width: auto;
    min-width: 0;
}
.library-tools .select-wrap select {
    max-width: 100%;
    width: 100%;
}
.library-tools .library-help {
    margin-left: auto;
    align-self: center;
    flex: none;
    white-space: nowrap;
}
.library-count {
    color: var(--muted);
    font-size: 12px;
    margin: 18px 0;
}
#library-sort:disabled {
    opacity: 0.35;
    cursor: default;
}
.library-folder {
    margin-bottom: 8px;
}
.library-folder > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}
.library-folder > summary::-webkit-details-marker {
    display: none;
}
.library-folder > summary::before {
    content: "›";
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
}
.library-folder[open] > summary::before {
    transform: rotate(90deg);
}
.library-folder > summary:hover {
    color: var(--accent);
}
.library-folder > summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
}
.library-dan-icon {
    flex: none;
    width: 85px;
    height: 24px;
    object-fit: contain;
}
.library-skill-folder > summary {
    flex-wrap: wrap;
}
.library-skill-folder > summary > .library-folder-title {
    flex: 1 1 180px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.library-folder-range {
    margin-left: auto;
}
.library-skill-folder > summary > small {
    flex: none;
    min-width: 64px;
    margin-left: 0;
    text-align: right;
}
.library-folder-content {
    padding: 10px 0 12px;
}
.library-course-folders {
    padding-left: 24px;
}
.library-course-folders > .library-folder:last-child {
    margin-bottom: 0;
}
.library-song-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}
.library-song.song-option {
    width: 100%;
    min-width: 0;
    border-radius: var(--control-radius);
    padding: var(--entry-padding-block) var(--entry-gap);
    gap: var(--entry-gap);
}
.library-song .cover-tile {
    width: calc(var(--entry-cover-size) + 4px);
    height: calc(var(--entry-cover-size) + 4px);
}
.library-song .option-song {
    min-width: 0;
    font-size: var(--entry-title-size);
}
.library-song .option-song small {
    font-size: var(--entry-detail-size);
}
.library-song .option-song > span,
.library-song .option-song small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.library-song .song-option-range {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.library-pagination.pagination {
    padding: 16px 0;
}
@media (max-width: 900px) {
    .library-song-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .library-tools .select-wrap {
        flex: 1 1 120px;
        min-width: 0;
    }
    .song-search-tools {
        gap: 8px;
    }
    .library-open {
        padding-inline: 10px;
    }
}
#song-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;
    background: #20202e;
    border: 0;
    margin-top: 5px;
    max-height: min(380px, var(--search-options-max-height, 380px));
    overflow-y: auto;
    box-shadow: 0 8px 25px #0005;
    border-radius: var(--popup-radius);
}
.song-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
    border: 0;
    border-bottom: 0;
    background: none;
}
.song-option:hover,
.song-option[aria-selected="true"] {
    background: var(--row-hover);
    color: var(--ink);
}
.option-song {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    font-size: 12px;
}
.option-song > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.option-song small {
    font-size: 10px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.song-option-range {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--muted);
}
.search-empty {
    padding: 18px;
    color: var(--muted);
    font-size: 12px;
}
.song-search-panel {
    --song-cover-size: 175px;
    --song-info-gap: 25px;
    --song-section-gap: 15px;
}
.selected-song {
    display: grid;
    grid-template-columns: var(--song-cover-size) minmax(0, 1fr) minmax(
            280px,
            33.333%
        );
    align-items: center;
    gap: var(--song-info-gap);
    margin: 0 var(--panel-padding-inline) var(--song-section-gap);
    border-top: 0;
}
.selected-song > .cover-tile.large {
    width: var(--song-cover-size);
    height: var(--song-cover-size);
}
.selected-song-info {
    min-width: 0;
    flex: 1;
}
.selected-song h3 {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 5px;
    overflow-wrap: anywhere;
}
.selected-song-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 5px;
}
.selected-song-heading h3 {
    margin: 0;
}
.song-reading-title:hover,
.song-reading-title:focus-visible {
    color: var(--accent);
    cursor: default;
}
@media (hover: none) {
    .song-reading-title:focus {
        color: var(--accent);
    }
}
.song-reading-popup {
    position: fixed;
    inset: auto;
    margin: 0;
    width: max-content;
    max-width: min(360px, calc(100vw - 24px));
    overflow-wrap: anywhere;
}
.calculator-link {
    flex: none;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 12px;
    text-underline-offset: 3px;
}
.selected-song-info > p {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 18px;
}
.selected-song-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
}
.song-radar {
    flex: 0 0 280px;
    width: 280px;
    max-width: 100%;
    margin: 0;
    justify-self: center;
}
.song-radar svg {
    display: block;
    width: 100%;
    overflow: visible;
}
.song-radar-grid {
    fill: var(--radar-grid-bg);
    stroke: var(--radar-grid-color);
    stroke-width: 0.75;
}
.song-radar-axes {
    fill: none;
    stroke: var(--radar-grid-color);
    stroke-width: 0.75;
}
.song-radar-area {
    fill: url(#song-radar-gradient);
    fill-opacity: var(--radar-fill-opacity);
    stroke: url(#song-radar-gradient);
    stroke-width: 0.5;
    stroke-linejoin: round;
}
.radar-gradient-start {
    stop-color: var(--radar-gradient-start);
}
.radar-gradient-middle {
    stop-color: var(--radar-gradient-middle);
}
.radar-gradient-end {
    stop-color: var(--radar-gradient-end);
}
.song-radar-label {
    fill: var(--muted);
    font: 12px var(--sans);
}
.song-radar-label-name {
    font-weight: 400;
}
.song-radar-label[data-axis="notes"] {
    fill: var(--radar-label-notes);
}
.song-radar-label[data-axis="peak"] {
    fill: var(--radar-label-peak);
}
.song-radar-label[data-axis="tsumami"] {
    fill: var(--radar-label-tsumami);
}
.song-radar-label[data-axis="tricky"] {
    fill: var(--radar-label-tricky);
}
.song-radar-label[data-axis="hand-trip"] {
    fill: var(--radar-label-hand-trip);
}
.song-radar-label[data-axis="one-hand"] {
    fill: var(--radar-label-one-hand);
}
.song-radar-value {
    fill: var(--ink);
    font-size: 12px;
    letter-spacing: 0;
}
.song-radar figcaption {
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}
.song-radar figcaption span {
    margin-left: 7px;
    color: var(--faint);
}
.song-radar-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: var(--faint);
    font-size: 11px;
}
@media (max-width: 1000px) {
    .selected-song {
        display: flex;
        flex-wrap: wrap;
    }
    .selected-song-info {
        flex-basis: 200px;
    }
    .selected-song > .song-radar {
        flex-basis: 100%;
        width: 100%;
    }
    .song-radar svg {
        width: min(280px, 100%);
        margin-inline: auto;
    }
}
.difficulty-tabs {
    --segment-background: color-mix(
        in srgb,
        var(--segment-color, var(--muted)) 8%,
        transparent
    );
    position: relative;
    isolation: isolate;
    display: flex;
    gap: calc(6px * var(--difficulty-scale, 1));
    flex-wrap: nowrap;
}
.difficulty-tabs button {
    height: calc(
        var(--difficulty-button-height-desktop) * var(--difficulty-scale, 1)
    );
    font: calc(12px * var(--difficulty-scale, 1)) var(--sans);
    background: transparent;
    border: 0;
    border-radius: 3px;
    padding: 0 calc(11px * var(--difficulty-scale, 1));
    flex: none;
    white-space: nowrap;
    color: var(--difficulty-color, var(--muted));
}
.difficulty-tabs button span {
    font-size: calc(11px * var(--difficulty-scale, 1));
    margin-left: calc(4px * var(--difficulty-scale, 1));
}
.difficulty-tabs:not(.segmented-animated) button.selected,
.difficulty-tabs:not(.segmented-animated) button:focus-visible {
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.selected-chart-details {
    width: fit-content;
    max-width: 100%;
}
.selected-summary {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    margin-top: 18px;
}
.selected-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.clear-mark-icon {
    width: 26px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.chart-vf-trigger {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}
.chart-vf-value {
    color: var(--accent);
}
.chart-vf-trigger:hover,
.chart-vf-trigger:focus-visible {
    color: var(--accent);
}
.chart-vf-popup {
    white-space: pre-line;
}
.song-search-empty {
    padding: 25px 27px 45px;
    font-size: 12px;
    color: var(--muted);
    border-top: 0;
}
.played-date {
    font-size: var(--entry-position-size);
}
.played-date span {
    margin-left: 8px;
    color: var(--faint);
}
.song-search-panel table {
    min-width: 700px;
    table-layout: fixed;
}
#song-search-results {
    background: var(--entry-section-bg);
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}
#song-search-results thead,
.search-help-body thead {
    background: var(--score-header-bg);
}
.song-rank-column {
    /* The next column's 15px cell padding lands on the song-info left edge. */
    width: calc(
        var(--panel-padding-inline) + var(--song-cover-size) +
            var(--song-info-gap) - 15px
    );
}
.song-score-column {
    width: 28%;
}
.song-clear-column {
    width: 15%;
}
.song-vf-column {
    width: 10%;
}
@media (min-width: 901px) {
    .song-search-panel .score-cell {
        padding-left: 15px;
    }
    .song-search-panel th:first-child,
    .song-search-panel td:first-child {
        padding-left: var(--panel-padding-inline);
    }
}
.song-search-panel .pagination,
.radar-contributors .pagination {
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}
.segmented button,
.difficulty-tabs button,
.pagination button {
    border-radius: var(--item-radius);
}
.chart-popup.compact {
    padding: 10px 8px;
    font-size: 10px;
}
.chart-popup.compact strong {
    font-size: 9px;
}
.chart-popup.compact .popup-line {
    gap: 8px;
}
.chart-popup.compact .popup-line b {
    font-size: 10px;
}
.grade-icon {
    display: block;
    width: 48px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.score-with-grade {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.judgement-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}
.judgement-chevron {
    flex: none;
    opacity: 0.6;
    transition: transform 0.16s;
}
.judgement-toggle[aria-expanded="true"] .judgement-chevron,
.radar-contributors-toggle[aria-expanded="true"] .judgement-chevron {
    transform: rotate(180deg);
}
.song-search-panel .judgement-row,
.radar-contributors .judgement-row {
    border-top: 0;
    background: #ffffff03;
}
.song-search-panel .judgement-row td,
.radar-contributors .judgement-row > td {
    padding: 12px 27px;
}
.radar-contributors .judgement-row > td {
    padding-bottom: 23px;
}
.judgement-counts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    text-align: center;
}
.judgement-counts dt {
    font: 10px var(--sans);
    color: var(--muted);
}
.judgement-counts dd {
    margin: 4px 0 0;
    font: 12px var(--sans);
    color: var(--ink);
}
.judgements-unavailable {
    margin: 0;
    font: 11px var(--sans);
    color: var(--muted);
}
.popup-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 7px;
}
.popup-line span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
}
.popup-line b {
    font: 11px var(--sans);
    color: var(--ink);
}
.profile-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.profile-heading > div {
    min-width: 0;
}
.appeal-card {
    display: block;
    width: 64px;
    height: 82px;
    object-fit: contain;
    border-radius: 0;
    flex: none;
}
.appeal-card-trigger {
    position: relative;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
}
.customize-content {
    display: contents;
}
.customize-tabs {
    width: max-content;
    max-width: calc(100% - 2 * var(--panel-padding-inline));
    margin: 0 var(--panel-padding-inline) 18px;
    flex: none;
}
.segmented.customize-tabs button {
    padding: 0 16px;
    font-size: 12px;
}
#appeal-helper[data-customize-view="crew"] {
    width: min(920px, calc(100vw - 32px));
    padding: 0;
    overflow: visible;
    background: transparent;
    scrollbar-gutter: auto;
}
#appeal-helper[data-customize-view="crew"] .customize-content {
    display: flex;
    flex-direction: column;
    height: min(1040px, calc(100dvh - 36px));
    max-height: calc(100dvh - 36px);
    min-height: 0;
    padding: 0 0 16px;
    border-radius: var(--panel-radius);
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
    overflow: hidden;
}
#appeal-helper[data-customize-view="crew"] .appeal-helper-heading {
    flex: none;
}
#nemsys-crew-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-inline: var(--panel-padding-inline);
}
.crew-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.crew-heading h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}
.crew-heading .panel-subtitle {
    margin: 5px 0 0;
}
.crew-stage {
    position: relative;
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 150px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}
.crew-stage.is-ready {
    cursor: grab;
}
.crew-stage.is-dragging {
    cursor: grabbing;
}
.crew-stage canvas,
.crew-stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.crew-stage > img {
    object-fit: contain;
    padding: 20px;
    pointer-events: none;
}
.crew-stage .details-message {
    position: relative;
    z-index: 1;
    padding: 24px;
    text-align: center;
}
.crew-playback {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 38px;
    font-size: 11px;
    flex: none;
}
.crew-playback > span {
    margin-left: auto;
    color: var(--muted);
}
.crew-browser {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    border-radius: var(--panel-radius);
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
}
.crew-browser h2 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 500;
}
.crew-browser-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.crew-browser-tools .search-wrap {
    flex: 1;
    min-width: 0;
    width: 100%;
}
.crew-browser-tools > .select-wrap {
    display: flex;
}
.crew-browser-tools select {
    min-height: var(--button-height);
    padding-block: 0;
    width: 100%;
    max-width: none;
}
#crew-count {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.crew-strip {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
    overflow: auto;
    padding: 4px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.crew-option {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    flex: none;
    padding: 10px;
    border: 0;
    border-radius: var(--item-radius);
    background: transparent;
    color: var(--muted);
    text-align: left;
}
.crew-option.selected,
.crew-option:hover {
    background: var(--accent-wash);
    color: var(--accent);
}
.crew-option img {
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.crew-option > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
}
.crew-option small {
    font-size: 9px;
}
.crew-sidebar {
    position: absolute;
    left: calc(100% + 24px);
    top: 0;
    width: 300px;
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.crew-sidebar .crew-settings.chart-viewer-settings,
.crew-voices {
    position: static;
    transform: none;
    width: 100%;
    max-height: none;
    flex: none;
    margin-top: 0;
    padding: 20px;
    border-radius: var(--panel-radius);
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
}
.crew-voices h2 {
    margin: 0;
    font-size: 16px;
}
.crew-voice-scroll {
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    margin: 14px 0 0;
}
.crew-voice-list {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.crew-voice-list:disabled {
    opacity: 0.5;
}
.crew-voice-list h3 {
    grid-column: 1 / -1;
    margin: 10px 0 3px;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}
.crew-voice-option {
    min-width: 0;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--muted);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}
.crew-voice-option.has-label-override {
    color: var(--ink);
}
.crew-voice-option.selected,
.crew-voice-option:hover:not(:disabled) {
    background: var(--accent-wash);
    color: var(--accent);
}
.crew-voice-option:disabled {
    opacity: 0.4;
    cursor: default;
}
.crew-voice-label {
    margin: 16px 0 10px;
    font-size: 11px;
}
.crew-voice-player.details-audio {
    margin-bottom: 0;
}
.crew-voice-player .details-audio-heading > span:first-child {
    display: none;
}
.crew-voice-player .details-audio-heading {
    position: relative;
}
.crew-voice-player .details-audio-download-wrap {
    position: static;
}
.crew-voice-player .details-audio-download-popup {
    max-width: 100%;
}
.crew-settings select {
    width: min(160px, 60%);
    height: var(--button-height);
    padding: 0 10px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--ink);
    font: inherit;
}
.crew-settings .settings-row > label,
.crew-settings .settings-row > span {
    min-width: 0;
}
.crew-settings .settings-row .segmented {
    flex: none;
}
.crew-scale {
    align-items: center;
}
.crew-scale-value {
    display: flex;
    align-items: center;
    gap: 16px;
}
.crew-scale-value > button,
.crew-position > button {
    flex: none;
}
@media (min-width: 1200px) {
    #appeal-helper[data-customize-view="crew"] {
        /* Scale (only) the preview panel beyond Full HD */
        --crew-preview-unit: clamp(1px, min(100vw / 1920, 100dvh / 1080), 2px);
        width: min(calc(680 * var(--crew-preview-unit)), calc(100vw - 700px));
    }
    #appeal-helper[data-customize-view="crew"] .customize-content {
        height: min(calc(1040 * var(--crew-preview-unit)), calc(100dvh - 36px));
    }
    .crew-browser {
        position: absolute;
        right: calc(100% + 24px);
        top: 50%;
        transform: translateY(-50%);
        width: 280px;
        height: min(900px, calc(100dvh - 36px));
    }
    .crew-sidebar {
        top: 50%;
        transform: translateY(-50%);
    }
}
@media (max-width: 1199px) {
    #appeal-helper[data-customize-view="crew"] {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overflow-anchor: none;
    }
    #appeal-helper[data-customize-view="crew"] .customize-content {
        height: max(540px, calc(100dvh - 36px));
        max-height: none;
    }
    .crew-browser,
    .crew-sidebar {
        position: static;
        transform: none;
        width: 100%;
        max-height: none;
        margin-top: 16px;
    }
    .crew-browser {
        height: 720px;
    }
    .crew-browser-tools {
        flex-direction: row;
    }
    .crew-browser-tools > .select-wrap {
        flex: none;
    }
}
.radar-trigger {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: var(--control-radius);
    background: none;
    color: inherit;
    pointer-events: none;
}
.radar-trigger .song-radar-grid > polygon,
.radar-trigger .song-radar-area {
    pointer-events: fill;
}
.dan-banner-trigger .dan-banner,
.appeal-card-trigger .appeal-card,
.radar-trigger .song-radar-graphic {
    transition: filter 180ms;
}
.appeal-card-trigger > span,
.radar-trigger > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 4px;
    color: var(--ink);
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transition: opacity 180ms;
    pointer-events: none;
}
.radar-trigger > span {
    font-size: 12px;
}
.dan-banner-trigger:hover .dan-banner,
.dan-banner-trigger:focus-visible .dan-banner,
.appeal-card-trigger:hover .appeal-card,
.appeal-card-trigger:focus-visible .appeal-card,
.radar-trigger:hover .song-radar-graphic,
.radar-trigger:focus-visible .song-radar-graphic {
    filter: brightness(0.35);
}
.appeal-card-trigger:hover > span,
.appeal-card-trigger:focus-visible > span,
.radar-trigger:hover > span,
.radar-trigger:focus-visible > span {
    opacity: 1;
}
.panel-layer {
    position: fixed;
    inset: 0;
    z-index: calc(10 + var(--panel-depth, 0));
    display: grid;
    place-items: center;
    isolation: isolate;
}
[data-view-jacket] {
    cursor: pointer;
}
[data-view-jacket]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.jacket-viewer {
    border: 0;
    padding: 0;
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 36px);
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.jacket-viewer img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 36px);
    object-fit: contain;
}
.jacket-viewer-loading {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 12px;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
}
.panel-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}
.panel-layer > :where(dialog) {
    position: relative;
    inset: auto;
    z-index: 1;
    margin: auto;
}
.panel-layer > dialog:focus {
    outline: none;
}
.appeal-helper {
    width: min(1000px, calc(100vw - 36px));
    max-width: none;
    max-height: calc(100dvh - 36px);
    padding: 0;
    overflow: auto;
    color: var(--ink);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.settings-backdrop,
.panel-layer::before {
    background: rgb(0 0 0 / var(--panel-backdrop-dim));
}
.panel-layer::before,
.settings-panel {
    -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
    backdrop-filter: blur(var(--panel-backdrop-blur));
}
.appeal-helper-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px var(--panel-padding-inline);
}
.appeal-helper-heading h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}
.appeal-helper-heading button {
    border: 0;
    background: none;
    color: var(--muted);
    padding: 4px 8px;
    font-size: 24px;
    line-height: 1;
}
.appeal-helper-heading button:hover {
    color: var(--accent);
}
.panel-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.similar-charts-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 var(--panel-padding-inline) 20px;
}
.similar-charts-intro > .chart-viewer-song {
    flex: 1 1 240px;
    min-width: 0;
}
.similar-charts-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    color: var(--muted);
    font-size: 12px;
}
.similar-charts-filter .select-wrap {
    min-width: 0;
}
.similar-charts-filter select {
    width: 210px;
    max-width: 100%;
    height: var(--button-height);
}
.similar-charts-level input {
    width: 84px;
    height: var(--button-height);
    font: inherit;
}
#similar-charts-description {
    margin: 4px 0 0;
}
.similar-charts-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--entry-section-bg);
}
.similar-charts-list > li + li {
    border-top: 1px solid var(--row-separator);
}
.similar-chart {
    -webkit-tap-highlight-color: transparent;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 24px;
    padding: 22px var(--panel-padding-inline);
    color: var(--ink);
    cursor: pointer;
    transition: background 160ms;
}
.similar-chart:has(.similar-chart-title:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
}
.similar-chart-title:focus-visible {
    color: var(--accent);
}
@media (hover: hover) {
    .similar-chart:hover {
        background: var(--row-hover);
    }
    .similar-chart:hover .similar-chart-title {
        color: var(--accent);
    }
}
.similar-chart-main {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 10px 20px;
    min-width: 0;
}
.similar-chart-main .cover-tile {
    grid-row: 1 / span 2;
    width: 136px;
    height: 136px;
}
.similar-chart-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.similar-chart-title {
    font-size: 22px;
    line-height: 1.4;
    transition: color 160ms;
}
.similar-chart-artist {
    color: var(--muted);
    font-size: 14px;
}
.similar-chart-info .selected-summary {
    margin-top: 2px;
}
.similar-chart-audio.details-audio {
    grid-column: 2;
    width: 100%;
    margin: 0;
    cursor: auto;
}
.similar-chart-radar {
    width: 260px;
    justify-self: center;
    text-align: center;
}
.similar-chart-radar > .song-radar {
    width: 100%;
}
.similar-chart-distance {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.similar-chart-distance-value {
    font-variant-numeric: tabular-nums;
}
.similar-chart .song-radar svg {
    width: 100%;
}
.similar-charts-empty {
    padding: 28px var(--panel-padding-inline);
    color: var(--muted);
    font-size: 13px;
}
@media (max-width: 900px) {
    .similar-chart {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 16px;
        padding: 20px 18px;
    }
    .similar-chart-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .similar-chart-main .cover-tile {
        grid-row: auto;
        width: 96px;
        height: 96px;
    }
    .similar-chart-audio.details-audio {
        grid-column: 1 / -1;
    }
    .similar-chart-title {
        font-size: 15px;
    }
    .similar-chart-artist {
        font-size: 11px;
    }
    .similar-chart-radar {
        width: 220px;
    }
}
@media (max-width: 480px) {
    .similar-chart {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .similar-chart-main {
        grid-template-columns: 96px minmax(0, 1fr);
    }
    .similar-chart-radar {
        width: min(260px, 100%);
    }
}
.chart-details {
    width: min(580px, calc(100vw - 36px));
}
#chart-details-body {
    padding: 0 var(--panel-padding-inline) 24px;
}
#chart-details-body > .chart-viewer-song {
    margin-bottom: 20px;
}
.details-message {
    color: var(--muted);
    font-size: 12px;
}
.details-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0 0 22px;
}
.details-values dt {
    color: var(--faint);
    font-size: 11px;
}
.details-values dd {
    margin: 3px 0 0;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.details-plots {
    display: grid;
    gap: 14px;
}
.chart-viewer {
    width: min(920px, calc(100vw - 32px));
    background: transparent;
    overflow: visible;
    scrollbar-gutter: auto;
}
.chart-viewer-content {
    min-width: 0;
    height: min(1100px, calc(100dvh - 36px));
    max-height: calc(100dvh - 36px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-gutter: stable;
    border-radius: var(--panel-radius);
    background: color-mix(
        in srgb,
        var(--panel) calc(100% * var(--performance-panel-dim)),
        transparent
    );
}
#chart-viewer-body {
    padding: 0 16px 16px;
}
.chart-viewer-content > .appeal-helper-heading {
    padding-inline: 16px;
}
.chart-viewer-content > .appeal-helper-heading,
.chart-viewer-song,
.chart-viewer-player {
    flex: none;
}
.chart-viewer-song {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chart-viewer-jacket {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}
.chart-viewer-song-info {
    min-width: 0;
}
.chart-viewer-song-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.chart-viewer-song-artist {
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.chart-viewer-song .difficulty-badge {
    margin-top: 6px;
}
.chart-viewer-workspace {
    margin-top: 12px;
}
.chart-viewer-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.chart-viewer-settings {
    flex: none;
    position: relative;
    z-index: 2;
    margin-top: 16px;
    padding-top: 16px;
}
.chart-viewer-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
.chart-viewer-settings-grid > div {
    min-width: 0;
}
.chart-viewer-rates {
    grid-column: 1 / -1;
    display: flex;
}
.chart-viewer-settings .chart-viewer-rates button {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
}
@media (max-width: 640px) {
    .chart-viewer-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}
.chart-viewer-lane-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 12px;
}
.chart-viewer-lane-controls input {
    grid-column: auto;
    min-width: 0;
}
.chart-viewer-lane-number {
    box-sizing: border-box;
    height: var(--button-height);
    padding: 0 6px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.chart-viewer-stage {
    flex: none;
    height: clamp(360px, 72dvh, 1100px);
    min-height: 240px;
}
.chart-viewer-canvas {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 1;
}
.chart-viewer-main > .chart-viewer-player {
    margin: 16px 0 0;
}
@media (min-width: 960px) {
    .chart-viewer {
        /* Reserve equal space on either side of the centered main panel. */
        --chart-main-width: min(920px, calc(100vw - 696px));
        width: calc(var(--chart-main-width) + 324px);
        justify-self: start;
        margin-left: calc((100vw - var(--chart-main-width)) / 2);
        margin-right: 0;
    }
    .chart-viewer[open] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        gap: 24px;
    }
    .chart-viewer-content {
        height: calc(100dvh - 36px);
    }
    .chart-viewer-content > .appeal-helper-heading {
        padding-inline: var(--panel-padding-inline);
    }
    #chart-viewer-body {
        padding: 0 var(--panel-padding-inline) 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .chart-viewer-workspace {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .chart-viewer-main {
        flex: 1;
        min-height: 0;
    }
    .chart-viewer-stage {
        flex: 1;
        height: auto;
    }
    .chart-viewer-settings {
        align-self: center;
        margin-top: 0;
        padding: 20px;
        max-height: calc(100dvh - 36px);
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: var(--panel-radius);
        background: color-mix(
            in srgb,
            var(--panel) calc(100% * var(--performance-panel-dim)),
            transparent
        );
    }
    .chart-viewer-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}
.chart-playback .details-audio-heading > span:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.chart-playback .details-audio-wave > svg {
    height: 56px;
}
.chart-playback .details-audio-wave {
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
}
.chart-playback .details-audio-seek {
    /* The plot handles pointers for exact coordinates; the range keeps keyboard controls. */
    pointer-events: none;
}
.chart-playback
    .details-audio-wave.is-pointer-seeking:has(
        .details-audio-seek:focus-visible
    ) {
    outline: none;
}
.chart-playback-grid {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}
.chart-playback-buttons {
    fill: var(--accent-wash);
    stroke: var(--accent);
    stroke-width: 1.25;
}
.chart-playback-lasers {
    fill: color-mix(in srgb, var(--chart-total) 15%, transparent);
    stroke: var(--chart-total);
    stroke-width: 1.25;
}
.chart-playback-hover {
    stroke: var(--muted);
    stroke-dasharray: 3 3;
}
.chart-playback-head {
    stroke: var(--ink);
    stroke-width: 1.5;
}
.chart-playback .details-audio-wave > svg * {
    vector-effect: non-scaling-stroke;
}
.chart-playback-readout {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.chart-playback-context {
    white-space: nowrap;
}
.chart-playback .chart-playback-popup {
    top: auto;
    bottom: calc(100% + 8px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--popup-offset));
    transition:
        opacity var(--popup-exit-duration) var(--popup-easing),
        transform var(--popup-exit-duration) var(--popup-easing),
        visibility 0s linear var(--popup-exit-duration);
}
.chart-playback .chart-playback-popup.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-duration:
        var(--popup-enter-duration), var(--popup-enter-duration), 0s;
    transition-delay: 0s;
}
.details-unlock {
    margin-bottom: 22px;
    font-size: 12px;
}
.details-unlock h3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 400;
}
.details-unlock-meta {
    margin-left: auto;
    color: var(--muted);
    font-size: 10px;
    text-align: right;
    overflow-wrap: anywhere;
}
.details-unlock-meta a,
.profile-radar-section .timing-heading a,
.vf-distribution-section .timing-heading a,
.vf-distribution-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--popup-enter-duration) var(--popup-easing);
}
.details-unlock-meta a:hover,
.details-unlock-meta a:focus-visible,
.profile-radar-section .timing-heading a:hover,
.profile-radar-section .timing-heading a:focus-visible,
.vf-distribution-section .timing-heading a:hover,
.vf-distribution-section .timing-heading a:focus-visible,
.vf-distribution-link:hover,
.vf-distribution-link:focus-visible {
    color: var(--accent);
}
.details-unlock p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.details-audio {
    margin-bottom: 22px;
    font-size: 12px;
}
.details-audio-heading {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}
.details-audio-compact .details-audio-heading,
.details-audio-compact .details-audio-heading > span:first-child,
.details-audio-compact .details-audio-download-action {
    display: none;
}
.details-audio-compact:has(.details-audio-controls[hidden])
    .details-audio-heading,
.details-audio-compact:has(.details-audio-retry:not([hidden]))
    .details-audio-heading {
    display: flex;
}
.details-audio-status,
.details-audio-time {
    color: var(--muted);
    font-size: 10px;
}
.details-audio-actions {
    color: var(--muted);
    font-size: 10px;
}
.details-audio-download {
    font: inherit;
    padding: 0;
    transition: color var(--popup-enter-duration) var(--popup-easing);
}
.details-audio-download-wrap {
    position: relative;
    display: inline-block;
}
.details-audio-download-popup {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(260px, calc(100vw - 64px));
    box-sizing: border-box;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--popup-offset));
    transition:
        opacity var(--popup-exit-duration) var(--popup-easing),
        transform var(--popup-exit-duration) var(--popup-easing),
        visibility 0s linear var(--popup-exit-duration);
    pointer-events: none;
}
.details-audio-download:focus-visible + .details-audio-download-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-duration:
        var(--popup-enter-duration), var(--popup-enter-duration), 0s;
    transition-delay: 0s;
}
@media (hover: hover) {
    .details-audio-download-wrap:hover .details-audio-download-popup {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-duration:
            var(--popup-enter-duration), var(--popup-enter-duration), 0s;
        transition-delay: 0s;
    }
}
.details-audio-controls:not([hidden]) {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
.details-audio-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--accent);
}
.details-audio-toggle:hover {
    background: var(--accent-wash);
}
.details-audio-toggle svg {
    width: 20px;
    fill: currentColor;
}
.details-audio-track {
    min-width: 0;
}
.details-audio-wave {
    position: relative;
    border-radius: 4px;
}
.details-audio-wave > svg {
    display: block;
    width: 100%;
    height: 36px;
    pointer-events: none;
}
.details-audio-bars {
    fill: var(--muted);
    opacity: 0.45;
}
.details-audio-progress {
    fill: var(--accent);
}
.details-audio-seek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    touch-action: pan-y;
}
.details-audio-wave:has(.details-audio-seek:focus-visible) {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}
.details-audio-time {
    display: block;
    font-variant-numeric: tabular-nums;
}
.details-playhead {
    stroke: var(--accent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.details-chart h3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 400;
}
.details-chart {
    position: relative;
}
.details-popup {
    white-space: pre-line;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: max-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 8px 12px;
    border-radius: var(--popup-radius);
    background: var(--popup-bg);
    box-shadow: var(--popup-shadow);
    color: var(--text);
    font-size: 11px;
    pointer-events: none;
}
.details-column-highlight {
    fill: var(--accent-wash);
    stroke: var(--accent);
    stroke-width: 0.6;
    pointer-events: none;
}
.details-cursor {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}
.details-chart h3 span,
.details-chart text {
    color: var(--muted);
    fill: var(--muted);
    font: 10px var(--sans);
}
.details-chart svg {
    display: block;
    width: 100%;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.details-grid {
    fill: none;
    stroke: var(--line);
}
.details-density-fill {
    fill: var(--accent-wash);
}
.details-density-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 10px;
}
.details-btfx-dot {
    background: var(--accent);
}
.details-laser-dot {
    background: var(--chart-total);
}
.details-laser-density-fill {
    fill: var(--chart-total);
    opacity: 0.12;
}
.details-laser-density-line {
    fill: none;
    stroke: var(--chart-total);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.details-density-popup {
    white-space: normal;
    font-variant-numeric: tabular-nums;
}
.details-density-popup strong {
    display: block;
    margin-bottom: 6px;
}
.details-density-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-top: 4px;
}
.details-density-row > span {
    color: var(--muted);
}
.details-density-legend > span,
.details-density-row > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.details-density-row b {
    font-weight: 500;
}
.details-density-row:last-child {
    border-top: 1px solid var(--line);
    padding-top: 5px;
}
.details-density-line,
.details-tempo {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.details-tempo,
.details-laser {
    stroke: var(--chart-total);
    fill: none;
}
.details-laser {
    fill: var(--chart-total);
    stroke: none;
}
.details-note {
    fill: var(--accent);
}
dialog#appeal-helper:has(#appeal-helper-browser:not([hidden])) {
    position: absolute;
    inset-inline: 0;
    max-height: calc(var(--card-browser-viewport-height, 100dvh) - 36px);
    top: var(--card-browser-viewport-center, 50dvh);
    bottom: auto;
    margin-block: 0;
    translate: 0 -50%;
    overflow: hidden;
}
dialog#appeal-helper:has(#appeal-helper-browser:not([hidden]))
    .appeal-helper-heading {
    padding-block: clamp(
        4px,
        calc(var(--card-browser-viewport-height, 100dvh) * 0.02),
        20px
    );
}
#appeal-helper-browser,
.appeal-helper-detail {
    padding: 0 var(--panel-padding-inline) 24px;
}
#appeal-helper-browser {
    padding-bottom: clamp(
        4px,
        calc(var(--card-browser-viewport-height, 100dvh) * 0.02),
        24px
    );
}
.appeal-helper-tools.table-tools {
    padding: 0;
    flex-wrap: wrap;
}
.appeal-helper-tools .search-wrap {
    flex: 1 1 240px;
    min-width: 0;
    width: auto;
}
.appeal-helper-pagination.pagination {
    padding: 0;
    margin-left: auto;
    flex: none;
    gap: 6px;
}
.appeal-helper-page {
    white-space: nowrap;
}
.appeal-helper-pagination .appeal-helper-page-number,
.pagination .pagination-page-number {
    width: auto;
    height: auto;
    min-width: 1.5ch;
    margin: 0;
    padding: 2px;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.appeal-helper-pagination .appeal-helper-page-number:hover,
.pagination .pagination-page-number:hover {
    color: var(--accent);
}
.appeal-helper-page-input,
.pagination-page-input {
    width: 4ch;
    padding: 2px;
    border: 0;
    border-radius: 3px;
    background: var(--control-bg);
    color: var(--ink);
    font: inherit;
    appearance: textfield;
}
.appeal-helper-page-input::-webkit-inner-spin-button,
.appeal-helper-page-input::-webkit-outer-spin-button,
.pagination-page-input::-webkit-inner-spin-button,
.pagination-page-input::-webkit-outer-spin-button {
    appearance: none;
}
.appeal-helper-count {
    margin: clamp(
            2px,
            calc(var(--card-browser-viewport-height, 100dvh) * 0.015),
            16px
        )
        0;
    color: var(--muted);
    font-size: 12px;
}
.appeal-helper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
    gap: 12px;
}
.appeal-helper-card {
    min-width: 0;
    padding: 12px 8px;
    border: 0;
    border-radius: var(--item-radius);
    background: none;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}
.appeal-helper-card:hover,
.appeal-helper-card:focus-visible {
    background: var(--row-hover);
    color: var(--accent);
}
.appeal-helper-card .appeal-helper-image {
    display: block;
    width: min(80px, calc(var(--card-browser-image-height, 103px) * 80 / 103));
    height: min(103px, var(--card-browser-image-height, 103px));
    margin: 0 auto 10px;
}
.appeal-helper-card > span:last-child {
    line-height: 1.35;
    height: 2.7em;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.appeal-helper-empty {
    grid-column: 1 / -1;
    padding: 24px 0;
    color: var(--muted);
    text-align: center;
}
.appeal-helper-detail {
    display: grid;
    justify-items: center;
    gap: 20px;
    text-align: center;
}
#appeal-helper-back {
    justify-self: start;
}
#appeal-helper-artwork {
    width: 256px;
    max-width: 100%;
}
#appeal-helper-artwork .appeal-helper-image {
    display: block;
    width: 100%;
    aspect-ratio: 128 / 164;
    max-height: 50dvh;
}
.appeal-helper-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.appeal-helper-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.appeal-helper-image > .skeleton-shape,
.appeal-helper-image-error {
    position: absolute;
    inset: 0;
}
.appeal-helper-image > .skeleton-shape {
    pointer-events: none;
}
.appeal-helper-image-error {
    display: grid;
    place-content: center;
    color: var(--faint);
    font-size: 9px;
}
.appeal-helper-detail h3 {
    max-width: 100%;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.appeal-helper-detail p {
    margin: 0;
    color: var(--muted);
}
.appeal-helper-detail p a {
    color: var(--accent);
}
.vf-standing {
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 0 8px;
    min-width: 0;
    font-size: 10px;
    color: var(--muted);
}
#vf-percentile {
    white-space: nowrap;
}
.vf-class {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    white-space: nowrap;
    font-size: 10px;
    color: var(--muted);
}
.vf-class img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.vf-helper-trigger {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--item-radius);
}
.vf-helper-trigger:hover {
    color: var(--accent);
    background: none;
}
.vf-helper {
    width: min(600px, calc(100vw - 36px));
    max-height: min(1000px, calc(100dvh - 36px));
    overflow: hidden;
    scrollbar-gutter: auto;
}
.vf-helper[open] {
    display: flex;
    flex-direction: column;
}
.vf-helper > .appeal-helper-heading {
    flex: none;
}
.vf-helper-body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 var(--panel-padding-inline) 24px;
}
.vf-helper-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--line);
}
.vf-helper-class {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 126px;
    min-width: 0;
    border-top: 1px solid var(--line);
}
.vf-helper-class:nth-child(1),
.vf-distribution-class-guide[data-vf-class="1"] {
    --vf-class-color: var(--vf-class-sienna);
}
.vf-helper-class:nth-child(2),
.vf-distribution-class-guide[data-vf-class="2"] {
    --vf-class-color: var(--vf-class-cobalt);
}
.vf-helper-class:nth-child(3),
.vf-distribution-class-guide[data-vf-class="3"] {
    --vf-class-color: var(--vf-class-dandelion);
}
.vf-helper-class:nth-child(4),
.vf-distribution-class-guide[data-vf-class="4"] {
    --vf-class-color: var(--vf-class-cyan);
}
.vf-helper-class:nth-child(5),
.vf-distribution-class-guide[data-vf-class="5"] {
    --vf-class-color: var(--vf-class-scarlet);
}
.vf-helper-class:nth-child(6),
.vf-distribution-class-guide[data-vf-class="6"] {
    --vf-class-color: var(--vf-class-coral);
}
.vf-helper-class:nth-child(7),
.vf-distribution-class-guide[data-vf-class="7"] {
    --vf-class-color: var(--vf-class-argento);
}
.vf-helper-class:nth-child(8),
.vf-distribution-class-guide[data-vf-class="8"] {
    --vf-class-color: var(--vf-class-eldora);
}
.vf-helper-class:nth-child(9),
.vf-distribution-class-guide[data-vf-class="9"] {
    --vf-class-color: var(--vf-class-crimson);
}
.vf-helper-class:nth-child(10),
.vf-distribution-class-guide[data-vf-class="10"] {
    --vf-class-color: var(--vf-class-imperial);
}
.vf-helper-class-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    color: color-mix(in srgb, var(--vf-class-color) 65%, var(--ink));
    background: color-mix(in srgb, var(--vf-class-color) 22%, transparent);
}
.vf-helper-emblem {
    display: grid;
    place-items: center;
    padding: 10px 0;
}
.vf-helper-emblem img {
    object-fit: contain;
}
.vf-helper-class-heading h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}
.vf-helper-range {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.vf-helper-tiers {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--line);
}
.vf-helper-tiers li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 14px;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.vf-helper-tiers li + li {
    border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.vf-helper-stars {
    color: var(--faint);
    font-size: 12px;
    letter-spacing: 1px;
}
.vf-helper-tiers [aria-current="step"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.vf-helper-tiers [aria-current="step"] .vf-helper-stars {
    color: inherit;
}
@media (max-width: 480px) {
    .vf-helper-class {
        grid-template-columns: 58px minmax(0, 1fr) 68px;
    }
    .vf-helper-emblem img {
        width: 44px;
        height: 44px;
    }
    .vf-helper-tiers li {
        padding: 6px 8px;
        font-size: 11px;
    }
    .vf-helper-stars {
        font-size: 10px;
        letter-spacing: 0;
    }
    .vf-helper-range {
        flex-direction: column;
        font-size: 11px;
    }
}
@media (min-width: 1500px) {
    .shell {
        max-width: 1480px;
    }
    .chart-wrap {
        padding-inline: 14px;
    }
}
@starting-style {
    .spending-popup:popover-open:not(.closing),
    .song-reading-popup:popover-open:not(.closing) {
        opacity: 0;
        transform: translateY(var(--popup-offset));
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .segmented-animated::before,
    .tabs.segmented-animated::before,
    .timing-bar {
        transition: none;
    }
    .spending-popup,
    .song-reading-popup {
        transition: none;
    }
}
@media (hover: hover) {
    .segmented:not(.segmented-animated) button:hover {
        background: var(--accent-wash);
    }
    .segmented button:hover {
        color: var(--accent);
    }
    .difficulty-tabs:not(.segmented-animated) button:hover {
        background: color-mix(in srgb, currentColor 8%, transparent);
    }
}
@media (max-width: 1200px) {
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1000px) {
    .shell {
        padding: 0 28px;
    }
    .metric {
        padding: 14px 16px;
    }
    .metric-label {
        font-size: 8px;
    }
    .chart-controls {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
    .chart-legend {
        gap: 13px;
    }
    .lower-grid {
        gap: 14px;
    }
    .tab-caption {
        font-size: 8px;
    }
    .panel-head {
        padding: 22px;
    }
    .chart-summary {
        padding-inline: 22px;
    }
    .metrics {
        --metric-value-size: 28px;
    }
    .tabs {
        gap: 22px;
    }
    :root {
        --entry-position-width: 30px;
        --entry-cover-size: 34px;
        --entry-gap: 8px;
    }
}
@media (max-width: 900px) {
    :root {
        --button-height: var(--button-height-mobile);
    }
    #appeal-helper-artwork {
        width: 160px;
    }
    .appeal-helper-tools .search-wrap {
        flex-basis: 100%;
    }
    .appeal-helper-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 60px), 1fr));
        gap: 8px;
    }
    .appeal-helper-card {
        padding: 6px 2px;
        font-size: 9px;
    }
    .appeal-helper-card .appeal-helper-image {
        width: min(
            48px,
            calc(var(--card-browser-image-height, 62px) * 48 / 62)
        );
        height: min(62px, var(--card-browser-image-height, 62px));
        margin-bottom: 6px;
    }
    .calculator-formula {
        display: none;
    }
    .ambient {
        filter: blur(var(--performance-background-blur-mobile));
        background-position:
            center,
            calc(50% + var(--nabla-background-offset-x-mobile)) center;
    }
    .ambient::after {
        background-position:
            center,
            calc(50% + var(--exceed-background-offset-x-mobile)) center;
    }
    .calculator-target output {
        flex-basis: 100%;
        font-size: 22px;
        text-align: left;
    }
    .calculator-legend .calculator-grade {
        grid-column: 1 / -1;
        justify-items: end;
        text-align: right;
    }
    :root {
        --panel-padding-inline: 18px;
        --list-padding-inline: 18px;
        --entry-title-size: 12px;
        --entry-details-gap: 5px;
        --entry-position-size: 10px;
        --entry-detail-size: 10px;
        --entry-clear-size: 8px;
        --entry-score-size: 10px;
        --entry-position-width: 32px;
        --entry-cover-size: 38px;
        --entry-gap: 9px;
    }
    .shell {
        padding: 0 18px;
    }
    .site-header {
        height: 64px;
    }
    .brand {
        gap: 10px;
        font-size: 16px;
    }
    .hero {
        padding: 27px 0 24px;
    }
    .hero-meta {
        display: none;
    }
    h1 {
        font-size: 43px;
    }
    .hero-subtitle {
        font-size: 12px;
    }
    .metrics {
        --metric-value-size: clamp(22px, 6vw, 27px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }
    .metric {
        padding: 14px;
        min-height: 108px;
    }
    .metric-detail {
        font-size: 9px;
    }
    .metric-label {
        min-height: 23px;
        font-size: 8px;
    }
    .navigation-row {
        margin-bottom: 18px;
        justify-content: center;
    }
    .tabs {
        width: 100%;
        gap: min(22px, 4cqw);
        font-size: min(14px, 3.4cqw);
        justify-content: center;
    }
    .tab-caption {
        display: none;
    }
    .panel-head {
        padding: 20px 18px 10px;
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
    .chart-controls {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    .select-wrap select {
        font-size: 11px;
        max-width: 140px;
        padding: 0 17px 0 9px;
    }
    .segmented button {
        font-size: 9px;
        padding: 0 9px;
    }
    .time-range button {
        padding: 6px 9px;
    }
    .chart-legend {
        justify-content: flex-start;
        padding: 5px 18px 5px;
        gap: 8px 14px;
    }
    .chart-legend button,
    .chart-legend-item {
        font-size: 8px;
    }
    .chart-wrap {
        min-height: 240px;
        padding: 8px 3px 0;
    }
    #chart {
        min-width: 0;
    }
    .chart-summary {
        padding: 13px 18px;
        font-size: 11px;
    }
    .lower-grid {
        gap: 16px;
        margin-top: 16px;
        grid-template-columns: 1fr;
    }
    .panel-head.compact {
        flex-direction: row;
        align-items: center;
        padding: 20px 18px 8px;
    }
    .session-meta {
        padding-inline: 18px;
    }
    .panel-foot {
        padding-inline: 18px;
    }
    .table-tools {
        padding: 18px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .search-wrap {
        flex: 1;
        min-width: 160px;
    }
    th:first-child,
    td:first-child {
        padding-left: 18px;
    }
    .pagination {
        padding: 15px 18px;
    }
    footer {
        gap: 20px;
        align-items: center;
        font-size: 10px;
    }
    footer span:last-child {
        text-align: right;
    }
    #chart text {
        font-size: 10px;
    }
    #chart .axis-caption {
        font-size: 9px;
    }
    .timing-heading {
        padding-inline: 18px;
    }
    .timing-chart-wrap {
        padding-inline: 3px;
    }
    .judgement-counts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 8px;
    }
    .judgement-timing {
        grid-column: 1 / -1;
    }
    .song-search-panel .judgement-row td {
        padding: 4px 12px;
    }
    .radar-contributors .judgement-row > td {
        padding: 4px var(--list-padding-inline);
    }
    .profile-heading {
        gap: 13px;
    }
    .appeal-card {
        width: 52px;
        height: 67px;
    }
    .vf-class {
        font-size: 10px;
    }
    .vf-class img {
        width: 23px;
        height: 23px;
    }
    .metric.featured .metric-spark {
        display: block;
    }
    .records-panel table,
    .song-search-panel table {
        display: block;
        min-width: 0;
        width: 100%;
    }
    .records-panel thead,
    .song-search-panel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .song-search-panel colgroup {
        display: none;
    }
    .records-panel tbody,
    .song-search-panel tbody {
        display: block;
    }
    .records-panel tbody tr,
    .song-search-panel tbody tr {
        display: grid;
        gap: 5px 7px;
        align-items: center;
        padding: var(--entry-padding-block) var(--list-padding-inline);
        border-top: 0;
    }
    .records-panel tbody td,
    .song-search-panel tbody td {
        display: block;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
    }
    td.row-index {
        width: auto;
    }
    .records-panel tbody tr {
        grid-template-columns: var(--entry-position-width) minmax(0, 1fr) auto;
        grid-template-areas: "position song vf" "position song score";
        gap: 0 var(--entry-gap);
    }
    .records-panel .record-position {
        grid-area: position;
    }
    .records-panel .record-song {
        grid-area: song;
    }
    .records-panel .record-difficulty,
    .records-panel .record-clear,
    .records-panel .artist {
        display: none;
    }
    .records-panel .record-score {
        grid-area: score;
        align-self: start;
        margin-top: 3px;
        text-align: right;
        color: var(--faint);
        white-space: nowrap;
    }
    .records-panel .record-vf {
        grid-area: vf;
        align-self: end;
    }
    .records-panel .table-song > div {
        flex: 1;
    }
    .records-panel .record-details {
        display: flex;
        flex-wrap: wrap;
    }
    .song-search-panel tbody tr {
        grid-template-columns:
            var(--entry-position-width) minmax(0, 1fr)
            48px 48px;
        grid-template-areas: "position score score vf" ". clear played played";
        column-gap: var(--entry-gap);
    }
    .song-search-panel .score-position {
        grid-area: position;
    }
    .song-search-panel .score-cell {
        grid-area: score;
    }
    .song-search-panel .score-clear {
        grid-area: clear;
    }
    .song-search-panel .grade-icon {
        width: 40px;
        height: 30px;
    }
    .song-search-panel .played-date {
        grid-area: played;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0 5px;
        text-align: right;
    }
    .song-search-panel .vf-cell {
        grid-area: vf;
    }
    .song-search-panel .played-date span {
        margin-left: 0;
    }
    .records-panel td[colspan] {
        font-size: var(--entry-position-size);
    }
    .song-search-panel td[colspan] {
        font-size: 9px;
    }
    .records-panel td[colspan],
    .song-search-panel td[colspan] {
        grid-column: 1/-1;
        grid-row: 1;
        padding: 10px 0;
    }
    .records-panel .pagination,
    .song-search-panel .pagination,
    .radar-contributors .pagination {
        padding: 12px;
    }
    .hero h1 {
        font-size: 36px;
    }
    .metric:nth-child(3) {
        border-left: 0;
    }
    .metric-detail,
    .vf-standing,
    .vf-class {
        min-height: 23px;
    }
    .song-search-panel {
        padding-top: 18px;
    }
    .song-search {
        margin: 0 auto 20px;
        max-width: calc(100% - 2 * var(--panel-padding-inline));
    }
    .calculator-link {
        font-size: 11px;
    }
    .song-option {
        gap: 9px;
        padding: 9px 10px;
    }
    .option-song {
        font-size: 11px;
    }
    .song-option .cover-tile {
        width: 32px;
        height: 32px;
    }
    .song-search-empty {
        padding: 20px 18px 35px;
    }
}
@media (max-width: 720px) {
    .song-search-panel .selected-song {
        gap: 12px;
    }
    .selected-song .cover-tile.large {
        width: clamp(80px, 24vw, 112px);
        height: clamp(80px, 24vw, 112px);
    }
    .selected-song .selected-song-info {
        flex-basis: 140px;
    }
    .selected-song {
        margin: 0 18px var(--song-section-gap);
        gap: 14px;
        align-items: center;
        flex-wrap: wrap;
    }
    .cover-tile.large {
        width: 92px;
        height: 92px;
    }
    .selected-song-info {
        flex-basis: 190px;
    }
    .selected-song h3 {
        font-size: 20px;
    }
    .selected-song-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .selected-song-info > p {
        font-size: 10px;
        margin-bottom: 13px;
    }
    .difficulty-tabs {
        gap: calc(5px * var(--difficulty-scale, 1));
    }
    .difficulty-tabs button {
        height: calc(
            var(--difficulty-button-height-mobile) * var(--difficulty-scale, 1)
        );
        font-size: calc(10px * var(--difficulty-scale, 1));
        padding: 0 calc(7px * var(--difficulty-scale, 1));
    }
    .difficulty-tabs button span {
        font-size: calc(9px * var(--difficulty-scale, 1));
    }
    .selected-chart-details {
        width: 100%;
    }
    .selected-summary {
        gap: 10px;
        justify-content: center;
        text-align: center;
        font-size: 9px;
    }
    .selected-song-actions {
        justify-content: center;
        text-align: center;
    }
    .difficulty-tabs {
        justify-content: center;
    }
    .song-search-panel .selected-song {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 4px 12px;
    }
    .selected-song .selected-song-info {
        display: contents;
    }
    .selected-song .cover-tile.large {
        grid-row: 1 / span 2;
    }
    .selected-song-heading {
        align-self: end;
        margin-bottom: 0;
    }
    .selected-song h3 {
        margin: 0;
    }
    .selected-song-info > p {
        align-self: start;
        margin: 0;
    }
    .selected-chart-details {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 8px;
    }
    .selected-song-info > .selected-song-actions,
    .selected-song > .song-radar {
        grid-column: 1 / -1;
    }
    .selected-song-info > .selected-song-actions {
        justify-self: stretch;
        margin-top: 8px;
    }
    .selected-song > .song-radar {
        margin-top: 8px;
    }
}

[data-new-play-until],
.score-highlight,
.score-highlight + .judgement-row:not([hidden]) {
    animation: new-play-highlight 1s ease-out;
    animation-delay: var(--new-play-age, 0ms);
}
.score-highlight,
.score-highlight + .judgement-row:not([hidden]) {
    animation-delay: 0ms;
}
@keyframes new-play-highlight {
    from {
        background-color: color-mix(in srgb, var(--accent) 20%, transparent);
        box-shadow: inset 3px 0 var(--accent);
    }
    to {
        box-shadow: inset 3px 0 transparent;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-new-play-until],
    .score-highlight,
    .score-highlight + .judgement-row:not([hidden]) {
        animation: none;
        box-shadow: inset 3px 0 var(--accent);
    }
}