/* /Components/Analysis/AnalysisPanel.razor.rz.scp.css */
.panel[b-0zidogy9nk] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.scroll[b-0zidogy9nk] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 20px;
}

h2[b-0zidogy9nk] {
    font-size: 1.6rem;
    line-height: 1.1;
}

h3[b-0zidogy9nk] {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

section[b-0zidogy9nk] {
    padding: 16px 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section:first-of-type[b-0zidogy9nk] {
    margin-top: 12px;
}

.file[b-0zidogy9nk] {
    position: relative;
    align-self: flex-start;
    background: var(--pad-yellow);
    border-color: var(--pad-yellow);
    color: var(--on-yellow);
    font-weight: 600;
    overflow: hidden;
}

.file[b-0zidogy9nk]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.song[b-0zidogy9nk] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.song span[b-0zidogy9nk] {
    color: var(--ink-muted);
}

.pair[b-0zidogy9nk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.buttons[b-0zidogy9nk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.error[b-0zidogy9nk] {
    margin: 0;
    padding: 6px 8px;
    border-left: 3px solid var(--pad-red);
    background: color-mix(in srgb, var(--pad-red) 12%, transparent);
    font-size: 0.87rem;
}

/* Phones (see Home.razor.css): narrower margins, as in the section editor. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .scroll[b-0zidogy9nk] {
        padding: 14px 12px 12px;
    }
}
/* /Components/Analysis/AnalysisResults.razor.rz.scp.css */
.results[b-s0uc8wmz59] {
    overflow-y: auto;
    padding: 18px 18px 28px;
    background: var(--surface);
    border-left: 1px solid var(--line);
}

h2[b-s0uc8wmz59] {
    font-size: 1.6rem;
    line-height: 1.1;
}

.scope[b-s0uc8wmz59] {
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 0.87rem;
    font-variant-numeric: tabular-nums;
}

section[b-s0uc8wmz59] {
    padding: 14px 0 6px;
    border-top: 1px solid var(--line);
    margin-top: 12px;
}

h3[b-s0uc8wmz59] {
    font-size: 1.05rem;
    margin-bottom: 10px;
}
/* /Components/Analysis/AngleDistribution.razor.rz.scp.css */
.bars[b-u7at389thu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

li[b-u7at389thu] {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

li:hover .name[b-u7at389thu],
li:hover .share[b-u7at389thu] {
    color: var(--ink);
}

.name[b-u7at389thu] {
    color: var(--ink-muted);
    white-space: nowrap;
}

.track[b-u7at389thu] {
    height: 14px;
}

.bar[b-u7at389thu] {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
}

.bar.behind[b-u7at389thu] { background: var(--twist-behind); }
.bar.front[b-u7at389thu] { background: var(--twist-front); }
.bar.neutral[b-u7at389thu] { background: var(--ink-muted); }

.share[b-u7at389thu] {
    color: var(--ink-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Analysis/DeltaHeatmapView.razor.rz.scp.css */
.heatmap[b-o6j2obzm0u] {
    display: grid;
    gap: 2px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.corner[b-o6j2obzm0u],
.row[b-o6j2obzm0u] {
    color: var(--ink-muted);
    white-space: nowrap;
    align-self: center;
}

.col[b-o6j2obzm0u] {
    color: var(--ink-muted);
    text-align: center;
}

.col.behind[b-o6j2obzm0u] { color: color-mix(in srgb, var(--twist-behind) 80%, var(--ink)); }
.col.front[b-o6j2obzm0u] { color: color-mix(in srgb, var(--twist-front) 80%, var(--ink)); }

.cell[b-o6j2obzm0u] {
    display: grid;
    place-items: center;
    height: 22px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--pad-yellow) calc(var(--level) * 100%), #10142a);
    color: var(--ink);
    font-weight: 600;
}

.cell.bright[b-o6j2obzm0u] {
    color: var(--on-yellow);
}

.cell.empty[b-o6j2obzm0u] {
    background: #10142a;
}

.cell:hover[b-o6j2obzm0u] {
    outline: 2px solid var(--ink);
    outline-offset: -1px;
}
/* /Components/Analysis/DeviationTiles.razor.rz.scp.css */
.hero[b-2cnw38iatd] {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.hero .value[b-2cnw38iatd] {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hero .label[b-2cnw38iatd] {
    color: var(--ink-muted);
    font-size: 0.87rem;
}

.tiles[b-2cnw38iatd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 0;
}

.tiles div[b-2cnw38iatd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

dt[b-2cnw38iatd] {
    color: var(--ink-muted);
    font-size: 0.78rem;
}

dd[b-2cnw38iatd] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.front[b-2cnw38iatd] { color: var(--twist-front); }
.behind[b-2cnw38iatd] { color: var(--twist-behind); }
/* /Components/Analysis/DwellList.razor.rz.scp.css */
.summary[b-lzw1wyfeee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 0 0 12px;
}

.summary div[b-lzw1wyfeee] {
    display: flex;
    flex-direction: column;
}

dt[b-lzw1wyfeee] {
    color: var(--ink-muted);
    font-size: 0.78rem;
}

dd[b-lzw1wyfeee] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dwells[b-lzw1wyfeee] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dwell[b-lzw1wyfeee] {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.dwell:hover[b-lzw1wyfeee] {
    border-color: var(--ink-muted);
}

.when[b-lzw1wyfeee] {
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    min-width: 44px;
}

.what[b-lzw1wyfeee] {
    display: flex;
    flex-direction: column;
}

.range[b-lzw1wyfeee] {
    font-weight: 600;
}

.range.front[b-lzw1wyfeee] { color: var(--twist-front); }
.range.behind[b-lzw1wyfeee] { color: var(--twist-behind); }

.detail[b-lzw1wyfeee] {
    color: var(--ink-muted);
    font-size: 0.82rem;
}
/* /Components/Analysis/TwistGraph.razor.rz.scp.css */
.graph[b-cbxxlf6fz3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.readout[b-cbxxlf6fz3] {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

svg[b-cbxxlf6fz3] {
    background: #10142a;
    border-radius: 6px;
    cursor: crosshair;
    max-width: 100%;
    height: auto;
}

.dwell.front[b-cbxxlf6fz3] { fill: color-mix(in srgb, var(--twist-front) 18%, transparent); }
.dwell.behind[b-cbxxlf6fz3] { fill: color-mix(in srgb, var(--twist-behind) 18%, transparent); }

.guide[b-cbxxlf6fz3] {
    stroke: var(--line);
    stroke-dasharray: 3 4;
}

.caption[b-cbxxlf6fz3] {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.zero[b-cbxxlf6fz3] {
    stroke: var(--ink-muted);
}

.twist[b-cbxxlf6fz3] {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.cursor[b-cbxxlf6fz3] {
    stroke: var(--pad-yellow);
    stroke-width: 1;
}
/* /Components/ChartToolbar.razor.rz.scp.css */
.toolbar[b-7xnxsbwwba] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.brand[b-7xnxsbwwba] {
    font-size: 1.45rem;
    white-space: nowrap;
}

.modes[b-7xnxsbwwba] {
    display: flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--stage);
}

.mode[b-7xnxsbwwba] {
    padding: 5px 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-muted);
    font-weight: 600;
    cursor: pointer;
}

.mode:hover[b-7xnxsbwwba] {
    color: var(--ink);
}

.mode.on[b-7xnxsbwwba] {
    background: var(--surface-raised);
    color: var(--ink);
}

.mode:disabled:not(.on)[b-7xnxsbwwba] {
    opacity: 0.45;
    cursor: default;
}

/* Touch screens: a finger-sized toggle (see app.css). */
@media (pointer: coarse) {
    .mode[b-7xnxsbwwba] {
        min-height: 40px;
    }
}

.chart-settings[b-7xnxsbwwba] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
}

.chart-settings > *[b-7xnxsbwwba],
.actions .check[b-7xnxsbwwba] {
    flex: none;
    white-space: nowrap;
}

.field.inline[b-7xnxsbwwba] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.field.inline input[b-7xnxsbwwba] {
    flex: none;
    width: 80px;
}

.field.inline select[b-7xnxsbwwba] {
    flex: none;
    width: auto;
}

.song-fields[b-7xnxsbwwba] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.song-fields .field.inline input[b-7xnxsbwwba] {
    width: 170px;
}

.song-fields .field.inline.meter input[b-7xnxsbwwba] {
    width: 56px;
}

.song-fields .field.inline.bpms input[b-7xnxsbwwba] {
    width: 110px;
}

.warn[b-7xnxsbwwba] {
    color: var(--pad-red);
    font-size: 0.85rem;
}

.actions[b-7xnxsbwwba] {
    display: flex;
    gap: 8px;
}

.help[b-7xnxsbwwba] {
    margin-left: auto;
    text-decoration: none;
}

.actions + .help[b-7xnxsbwwba] {
    margin-left: 0;
}

@media (max-width: 900px) {
    .toolbar[b-7xnxsbwwba] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .chart-settings[b-7xnxsbwwba],
    .song-fields[b-7xnxsbwwba] {
        flex-wrap: wrap;
    }
}

/* Phones (see Home.razor.css): rows that wrap. Brand, Generate/Analyze and Help share the first; then
   Metronome/Song and Pad; the chart's fields (Title, Description, then Meter beside Also at BPM); the
   export buttons. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .toolbar[b-7xnxsbwwba] {
        gap: 8px 12px;
        padding: 8px 12px;
    }

    .brand[b-7xnxsbwwba],
    .toolbar > .modes[b-7xnxsbwwba],
    .toolbar > .help[b-7xnxsbwwba] {
        order: -1;
    }

    .brand[b-7xnxsbwwba] {
        font-size: 1.2rem;
    }

    .toolbar > .help[b-7xnxsbwwba] {
        margin-left: auto;
    }

    .chart-settings[b-7xnxsbwwba] {
        gap: 8px 16px;
    }

    .song-fields[b-7xnxsbwwba],
    .song-fields .field.inline[b-7xnxsbwwba] {
        flex: 1 1 100%;
    }

    .song-fields .field.inline.meter[b-7xnxsbwwba],
    .song-fields .field.inline.bpms[b-7xnxsbwwba] {
        flex: 1 1 35%;
        order: 1;
    }

    /* Also at BPM's warning stays under it. */
    .song-fields .warn[b-7xnxsbwwba] {
        order: 1;
    }

    .song-fields .field.inline input[b-7xnxsbwwba] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .actions[b-7xnxsbwwba] {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .actions .button[b-7xnxsbwwba] {
        flex: 1 1 auto;
    }
}

@media (max-width: 480px) {
    .toolbar[b-7xnxsbwwba] {
        gap: 8px;
        padding: 8px 10px;
    }

    .brand[b-7xnxsbwwba] {
        font-size: 1.1rem;
    }

    .actions .button[b-7xnxsbwwba] {
        padding-inline: 8px;
    }
}
/* /Components/CollapsibleSection.razor.rz.scp.css */
section[b-ukdbxoszwh] {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.heading[b-ukdbxoszwh] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.folded .heading[b-ukdbxoszwh] {
    margin-bottom: 0;
}

h3[b-ukdbxoszwh] {
    font-size: 1.1rem;
}

.toggle[b-ukdbxoszwh] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.chevron[b-ukdbxoszwh]::before {
    content: "▾";
    display: inline-block;
    width: 0.8em;
    color: var(--ink-muted);
    transition: transform 0.12s ease;
}

.toggle:hover .chevron[b-ukdbxoszwh]::before {
    color: var(--ink);
}

.folded .chevron[b-ukdbxoszwh]::before {
    transform: rotate(-90deg);
}

/* Touch screens: a heading a finger can hit (see app.css). */
@media (pointer: coarse) {
    .toggle[b-ukdbxoszwh] {
        padding: 10px 0;
    }
}
/* /Components/HelpLink.razor.rz.scp.css */
.help-link[b-xwe9smhxke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}

.help-link:hover[b-xwe9smhxke],
.help-link:focus-visible[b-xwe9smhxke] {
    border-color: var(--pad-yellow);
    color: var(--pad-yellow);
}

/* Touch screens: the circle stays small, the area a finger hits reaches 8 px around it. That area is drawn
   over its neighbours and would take their taps, so it stays within the gaps: an inline field's input
   is 8 px beside its label, and a field's control 4 px under it, so only 4 px below. */
@media (pointer: coarse) {
    .help-link[b-xwe9smhxke] {
        position: relative;
    }

    .help-link[b-xwe9smhxke]::after {
        content: "";
        position: absolute;
        inset: -8px -8px -4px;
    }
}
/* /Components/History/SectionHistory.razor.rz.scp.css */
.history[b-vrtbw45qem] {
    overflow-y: auto;
    padding: 18px 18px 24px;
    background: var(--surface);
    border-left: 1px solid var(--line);
}

h2[b-vrtbw45qem] {
    font-size: 1.6rem;
    line-height: 1.1;
    margin-bottom: 12px;
}

.chart[b-vrtbw45qem] {
    margin-bottom: 16px;
}

ol[b-vrtbw45qem] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

li[b-vrtbw45qem] {
    position: relative;
    padding: 0 0 18px 0;
}

/* A thin spine links the sections, since they play one after another. */
li:not(:last-child)[b-vrtbw45qem]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.jump[b-vrtbw45qem] {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.number[b-vrtbw45qem] {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--line);
    font-family: var(--font-display);
    font-weight: 600;
}

.current .number[b-vrtbw45qem] {
    background: var(--pad-yellow);
    border-color: var(--pad-yellow);
    color: var(--on-yellow);
}

.body[b-vrtbw45qem] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.title[b-vrtbw45qem] {
    font-weight: 600;
}

.jump:hover .title[b-vrtbw45qem] {
    text-decoration: underline;
}

.detail[b-vrtbw45qem] {
    color: var(--ink-muted);
    font-size: 0.87rem;
}

.stats[b-vrtbw45qem] {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 4px 14px;
    margin: 8px 0 0 40px;
}

.stats div[b-vrtbw45qem] {
    display: flex;
    flex-direction: column;
}

.stats dt[b-vrtbw45qem] {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.stats dd[b-vrtbw45qem] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stats dd.behind[b-vrtbw45qem] {
    color: var(--twist-behind);
}

.seed[b-vrtbw45qem] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 40px;
    color: var(--ink-muted);
    font-size: 0.87rem;
    font-variant-numeric: tabular-nums;
}

.last-actions[b-vrtbw45qem] {
    display: flex;
    gap: 6px;
    margin: 8px 0 0 40px;
}

.last-actions .button[b-vrtbw45qem] {
    padding: 4px 10px;
    font-size: 0.87rem;
}

.warning[b-vrtbw45qem] {
    margin: 6px 0 0 40px;
    padding: 6px 8px;
    border-left: 3px solid var(--pad-red);
    background: color-mix(in srgb, var(--pad-red) 12%, transparent);
    font-size: 0.85rem;
}

/* Phones (see Home.razor.css): the buttons under a section wrap rather than run off the screen. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .last-actions[b-vrtbw45qem] {
        flex-wrap: wrap;
    }
}
/* /Components/Music/SongCard.razor.rz.scp.css */
.file[b-wu44443tk8] {
    position: relative;
    background: var(--pad-yellow);
    border-color: var(--pad-yellow);
    color: var(--on-yellow);
    font-weight: 600;
    overflow: hidden;
}

.file.disabled[b-wu44443tk8] {
    opacity: 0.5;
}

.file[b-wu44443tk8]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.name[b-wu44443tk8] {
    margin: 10px 0 2px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sample[b-wu44443tk8] {
    margin: 0 0 2px;
    overflow-wrap: anywhere;
}

.sample .by[b-wu44443tk8] {
    color: var(--ink-muted);
}

.error[b-wu44443tk8],
.warn[b-wu44443tk8] {
    color: var(--pad-red);
}

.grid[b-wu44443tk8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 10px 0 6px;
}

.buttons[b-wu44443tk8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The first downbeat's two buttons and value share half the card's width. */
.buttons .button[b-wu44443tk8] {
    padding-inline: 8px;
}

.buttons output[b-wu44443tk8] {
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}


/* A row of its own: the chart file's tempos take more room than a half of the card. */
.wide[b-wu44443tk8] {
    grid-column: 1 / -1;
}

.file-plain[b-wu44443tk8] {
    position: relative;
    overflow: hidden;
}

.file-plain.disabled[b-wu44443tk8] {
    opacity: 0.5;
}

.file-plain[b-wu44443tk8]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
/* /Components/Music/UcsSampleSearch.razor.rz.scp.css */
.sample-search[b-pzurkdbujq] {
    margin: 12px 0 0;
}

input[type=search][b-pzurkdbujq] {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.results[b-pzurkdbujq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 6px;
    padding: 0;
    list-style: none;
}

.results li[b-pzurkdbujq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
}

/* Long titles (Pneumonoultramicroscopic...) wrap rather than widen the card on a phone. */
.what[b-pzurkdbujq] {
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.code[b-pzurkdbujq] {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.title[b-pzurkdbujq] {
    font-weight: 600;
}

.about[b-pzurkdbujq] {
    display: block;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.download[b-pzurkdbujq] {
    padding: 4px 10px;
    color: inherit;
    text-decoration: none;
}

/* Touch screens: a finger-sized link (see app.css). */
@media (pointer: coarse) {
    .download[b-pzurkdbujq] {
        min-height: 40px;
    }
}
/* /Components/Music/WholeSongCard.razor.rz.scp.css */
.grid[b-4dnzc8hodj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 10px 0 8px;
}

.check[b-4dnzc8hodj] {
    margin-top: 4px;
}

.segments[b-4dnzc8hodj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.segments li[b-4dnzc8hodj] {
    padding: 4px 6px;
    border-radius: var(--radius-item);
    border: 1px solid transparent;
}

.segments li.current[b-4dnzc8hodj] {
    border-color: var(--pad-yellow);
}

.row[b-4dnzc8hodj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
}

.row .where[b-4dnzc8hodj] {
    white-space: normal;
}

.edit[b-4dnzc8hodj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 6px 18px;
}

.inline[b-4dnzc8hodj] {
    display: flex;
    gap: 6px;
}

.inline input[b-4dnzc8hodj] {
    min-width: 0;
    flex: 1;
}

.skills[b-4dnzc8hodj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 0;
    margin: 0;
    padding: 0;
}

.skills legend[b-4dnzc8hodj] {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-bottom: 2px;
}

.indent[b-4dnzc8hodj] {
    margin-left: 22px;
}

.segments select[b-4dnzc8hodj] {
    padding: 3px 6px;
    font-size: 0.85rem;
}

/* Touch screens: a finger-sized select, its text at 16 px so iOS doesn't zoom in (see app.css). */
@media (pointer: coarse) {
    .segments select[b-4dnzc8hodj] {
        min-height: 40px;
        font-size: 16px;
    }
}

.where[b-4dnzc8hodj] {
    white-space: nowrap;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.swatch[b-4dnzc8hodj] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.style-rest[b-4dnzc8hodj] { background: var(--style-rest); }
.style-eighths[b-4dnzc8hodj] { background: var(--style-eighths); }
.style-bursts[b-4dnzc8hodj] { background: var(--style-bursts); }
.style-stream[b-4dnzc8hodj] { background: var(--style-stream); }
.style-followmusic[b-4dnzc8hodj] { background: var(--style-follow); }
.style-holdbreak[b-4dnzc8hodj] { background: var(--style-holdbreak); }

/* /Components/Patterns/PatternList.razor.rz.scp.css */
.order[b-me4y1dzigo] {
    display: flex;
    gap: 18px;
    margin-bottom: 4px;
}

.order input[b-me4y1dzigo] {
    accent-color: var(--pad-yellow);
}

.patterns[b-me4y1dzigo] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Phones (see Home.razor.css): the order options wrap as whole options instead of squeezing their
   labels onto two lines each. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .order[b-me4y1dzigo] {
        flex-wrap: wrap;
        gap: 6px 18px;
    }

    .order .check[b-me4y1dzigo] {
        white-space: nowrap;
    }
}
/* /Components/Patterns/PatternRow.razor.rz.scp.css */
.pattern[b-lxk62q4fjl] {
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
    padding: 8px 10px;
    background: var(--surface);
}

.pattern.on[b-lxk62q4fjl] {
    border-left: 3px solid var(--pad-yellow);
    padding-left: 8px;
    background: var(--surface-raised);
}

.head[b-lxk62q4fjl] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.name[b-lxk62q4fjl] {
    font-weight: 600;
}

.reorder[b-lxk62q4fjl] {
    margin-left: auto;
    display: flex;
}

.reorder .button[b-lxk62q4fjl] {
    font-size: 0.7rem;
}

.settings[b-lxk62q4fjl] {
    display: grid;
    gap: 8px;
    margin: 8px 0 2px 24px;
}

.brackets[b-lxk62q4fjl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.pair[b-lxk62q4fjl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Touch screens: finger-wide row buttons, which may then wrap under the name (see app.css). */
@media (pointer: coarse) {
    .head[b-lxk62q4fjl] {
        flex-wrap: wrap;
    }

    .reorder .button[b-lxk62q4fjl] {
        min-width: 40px;
    }
}
/* /Components/Patterns/PivotPicker.razor.rz.scp.css */
.pad[b-yldj0ojuha] {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    grid-template-rows: repeat(3, 34px);
    gap: 4px;
}

.panel[b-yldj0ojuha] {
    --tone: var(--ink-muted);
    border: 2px solid var(--tone);
    border-radius: 7px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.panel.up[b-yldj0ojuha] { --tone: var(--pad-red); }
.panel.down[b-yldj0ojuha] { --tone: var(--pad-blue); }
.panel.center[b-yldj0ojuha] { --tone: var(--pad-yellow); }

.panel.on[b-yldj0ojuha] {
    background: color-mix(in srgb, var(--tone) 45%, transparent);
    color: var(--ink);
}

.panel:not(.on)[b-yldj0ojuha] {
    border-style: dashed;
    opacity: 0.7;
}

.panel:disabled[b-yldj0ojuha] {
    cursor: default;
}

/* Touch screens: finger-sized panels (see app.css). */
@media (pointer: coarse) {
    .pad[b-yldj0ojuha] {
        grid-template-columns: repeat(3, 44px);
        grid-template-rows: repeat(3, 44px);
    }
}
/* /Components/Patterns/SelectorSettings.razor.rz.scp.css */
.pair[b-uejc7p6cag] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
/* /Components/Section/HoldBreakFields.razor.rz.scp.css */
.choice[b-yovgfr02qe] {
    display: flex;
    gap: 18px;
}

.field[b-yovgfr02qe],
.check[b-yovgfr02qe] {
    margin-top: 8px;
}
/* /Components/Section/SectionEditor.razor.rz.scp.css */
.editor[b-tmb2t9duj9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.scroll[b-tmb2t9duj9] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 8px;
}

h2[b-tmb2t9duj9] {
    font-size: 1.6rem;
    line-height: 1.1;
}

h2 + .hint[b-tmb2t9duj9] {
    margin-bottom: 12px;
}

section[b-tmb2t9duj9] {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

footer[b-tmb2t9duj9] {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
}

.append[b-tmb2t9duj9] {
    width: 100%;
    padding: 10px 14px;
    font-size: 1.05rem;
}

footer .hint[b-tmb2t9duj9] {
    margin-top: 6px;
    text-align: center;
}

.tabs[b-tmb2t9duj9] {
    display: flex;
    gap: 2px;
    margin-top: 16px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--stage);
}

.tab[b-tmb2t9duj9] {
    flex: 1;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-muted);
    font-weight: 600;
    cursor: pointer;
}

.tab:hover[b-tmb2t9duj9] {
    color: var(--ink);
}

.tab.on[b-tmb2t9duj9] {
    background: var(--surface-raised);
    color: var(--ink);
}

.tabs + .hint[b-tmb2t9duj9] {
    margin: 8px 0 4px;
}

/* Touch screens: finger-sized tabs (see app.css). */
@media (pointer: coarse) {
    .tab[b-tmb2t9duj9] {
        min-height: 40px;
    }
}

/* Phones (see Home.razor.css): the page scrolls through the settings, and Append / Fill stays at the
   bottom of the screen while they are on it. Sticky works only while no box between here and the page
   scrolls on its own. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .scroll[b-tmb2t9duj9] {
        padding: 14px 12px 8px;
    }

    footer[b-tmb2t9duj9] {
        position: sticky;
        bottom: 0;
        z-index: 30;
        padding: 10px 12px 12px;
        background: var(--surface);
    }
}
/* /Components/Section/SeedField.razor.rz.scp.css */
.seed[b-u8nym57sa6] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 6px;
}

.check[b-u8nym57sa6] {
    padding-bottom: 6px;
}
/* /Components/Section/ShareSettings.razor.rz.scp.css */
.row[b-t9twfc7ckg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.box[b-t9twfc7ckg] {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--stage);
    color: var(--ink);
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    resize: vertical;
}

/* Touch screens: 16 px text, below which iOS zooms in on the focused box (see app.css). */
@media (pointer: coarse) {
    .box[b-t9twfc7ckg] {
        font-size: 16px;
    }
}

.file[b-t9twfc7ckg] {
    position: relative;
    overflow: hidden;
}

.file[b-t9twfc7ckg]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.error[b-t9twfc7ckg] {
    margin: 0;
    color: var(--pad-red);
    font-size: 0.85rem;
}

.hint .button[b-t9twfc7ckg],
.error .button[b-t9twfc7ckg] {
    margin-left: 6px;
}
/* /Components/Section/StanceTool.razor.rz.scp.css */
.tool[b-b295j7kb4x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.feet[b-b295j7kb4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.feet .on[b-b295j7kb4x] {
    border-color: var(--pad-yellow);
    color: var(--ink);
}

svg[b-b295j7kb4x] {
    width: 100%;
    max-height: 140px;
}

.panel[b-b295j7kb4x] {
    fill: var(--ink-muted);
    fill-opacity: 0.14;
    stroke: var(--ink-muted);
    stroke-opacity: 0.6;
    stroke-width: 0.05;
    cursor: pointer;
}

.panel:hover[b-b295j7kb4x],
.panel:focus-visible[b-b295j7kb4x] {
    fill: var(--pad-yellow);
    fill-opacity: 0.3;
    outline: none;
}

.stance-line[b-b295j7kb4x] {
    stroke: var(--ink);
    stroke-width: 0.06;
    stroke-dasharray: 0.12 0.08;
    pointer-events: none;
}

.move[b-b295j7kb4x] {
    stroke: var(--pad-yellow);
    stroke-width: 0.08;
    stroke-opacity: 0.6;
    pointer-events: none;
}

.readout[b-b295j7kb4x] {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 0.87rem;
}

.readout div[b-b295j7kb4x] {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 6px;
}

.readout dt[b-b295j7kb4x] {
    color: var(--ink-muted);
}

.readout dd[b-b295j7kb4x] {
    margin: 0;
}

/* Touch screens: a bigger pad, so a finger can pick a panel (see app.css). */
@media (pointer: coarse) {
    svg[b-b295j7kb4x] {
        max-height: 200px;
    }
}
/* /Components/Section/TimingFields.razor.rz.scp.css */
.timing[b-xpbdufkwzi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 6px;
}

.reset[b-xpbdufkwzi] {
    margin: 10px 0 6px;
}

.signature[b-xpbdufkwzi] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
}
/* /Components/Section/TwistCapsFields.razor.rz.scp.css */
.caps[b-tmwamxudfp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.front[b-tmwamxudfp] {
    color: var(--twist-front);
}

.behind[b-tmwamxudfp] {
    color: var(--twist-behind);
}

.with-sketch[b-tmwamxudfp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.with-sketch[b-tmwamxudfp]  select,
.with-sketch select[b-tmwamxudfp] {
    flex: 1;
    min-width: 0;
}
/* /Components/Stage/ChartVisualizer.razor.rz.scp.css */
/* 64 px a column (--columns comes from the markup). The highway is the container its notes measure:
   a column is a --columns'th of its width, exactly 64 px unless a phone narrows the highway. */
.highway[b-2v4yv3c9tx] {
    position: relative;
    flex: none;
    width: calc(var(--columns) * 64px + 2px);
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--columns) - 1px), rgba(255, 255, 255, 0.04) 0 calc(100% / var(--columns))),
        #10142a;
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
}

/* A browser without container units (Safari before 16, Chrome before 105) would drop the whole size and
   draw no notes at all; there a column stays 64 px, and a phone's narrower highway clips the last one. */
.note[b-2v4yv3c9tx],
.hold-body[b-2v4yv3c9tx],
.hold-cap[b-2v4yv3c9tx] {
    --col: 64px;
    left: calc(var(--col) * var(--x));
    width: var(--col);
}

@supports (width: 1cqw) {
    .note[b-2v4yv3c9tx],
    .hold-body[b-2v4yv3c9tx],
    .hold-cap[b-2v4yv3c9tx] {
        --col: calc(100cqw / var(--columns));
    }
}

.beat-line[b-2v4yv3c9tx] {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.beat-line.measure[b-2v4yv3c9tx] {
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
}

.note[b-2v4yv3c9tx] {
    position: absolute;
    height: var(--col);
    background-size: 100% 100%;
    z-index: 20;
}

.hold-body[b-2v4yv3c9tx] {
    position: absolute;
    background-repeat: repeat-y;
    background-size: 100% auto;
    z-index: 15;
}

/* Sizes in 64ths of a column are the skins' pixels at 64 px. */
.hold-cap[b-2v4yv3c9tx] {
    position: absolute;
    height: calc(var(--col) * 70 / 64);
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 16;
}

/* The normal skin's cap image is a strip of six animation frames; show the first. */
.skin-normal .hold-cap[b-2v4yv3c9tx] {
    height: var(--col);
    background-size: calc(var(--col) * 6) var(--col);
}

/* Hint arrows are coloured by the foot the chart says should hit them, including crossovers. */
.skin-hint .note.column-0.foot-left[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downleft_left.png'); }
.skin-hint .note.column-0.foot-right[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downleft_right.png'); }
.skin-hint .note.column-0.foot-either[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downleft_either.png'); }
.skin-hint .note.column-1.foot-left[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upleft_left.png'); }
.skin-hint .note.column-1.foot-right[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upleft_right.png'); }
.skin-hint .note.column-1.foot-either[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upleft_either.png'); }
.skin-hint .note.column-2.foot-left[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_center_left.png'); }
.skin-hint .note.column-2.foot-right[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_center_right.png'); }
.skin-hint .note.column-2.foot-either[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_center_either.png'); }
.skin-hint .note.column-3.foot-left[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upright_left.png'); }
.skin-hint .note.column-3.foot-right[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upright_right.png'); }
.skin-hint .note.column-3.foot-either[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_upright_either.png'); }
.skin-hint .note.column-4.foot-left[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downright_left.png'); }
.skin-hint .note.column-4.foot-right[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downright_right.png'); }
.skin-hint .note.column-4.foot-either[b-2v4yv3c9tx] { background-image: url('/assets/hint-skin/arrow_downright_either.png'); }

/* The normal skin images are sprite sheets; zoom in to crop their margins. */
.skin-normal .note[b-2v4yv3c9tx] {
    background-size: calc(var(--col) * 3.5) calc(var(--col) * 149 / 64);
    background-position: calc(var(--col) * -5 / 64) calc(var(--col) * -5 / 64);
}

.skin-normal .note.column-0[b-2v4yv3c9tx] { background-image: url('/assets/dl-tap.png'); }
.skin-normal .note.column-1[b-2v4yv3c9tx] { background-image: url('/assets/ul-tap.png'); }
.skin-normal .note.column-2[b-2v4yv3c9tx] { background-image: url('/assets/c-tap.png'); }
.skin-normal .note.column-3[b-2v4yv3c9tx] { background-image: url('/assets/ur-tap.png'); }
.skin-normal .note.column-4[b-2v4yv3c9tx] { background-image: url('/assets/dr-tap.png'); }

.empty[b-2v4yv3c9tx] {
    position: absolute;
    top: 40%;
    left: 28px;
    right: 28px;
    text-align: center;
    color: var(--ink-muted);
}

/* Phones (see Home.razor.css): the highway gives way so the side lanes and the bar fit beside it. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .highway[b-2v4yv3c9tx] {
        flex: 0 1 auto;
        min-width: 0;
    }
}
/* /Components/Stage/PadStance.razor.rz.scp.css */
.pad-stance[b-b41xy0d83x] {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

svg[b-b41xy0d83x] {
    height: 200px;
    max-width: 100%;
}

.panel[b-b41xy0d83x] {
    stroke-width: 0.05;
    fill-opacity: 0.14;
    transition: fill-opacity 120ms ease-out;
}

.panel.up[b-b41xy0d83x] { fill: var(--pad-red); stroke: var(--pad-red); }
.panel.down[b-b41xy0d83x] { fill: var(--pad-blue); stroke: var(--pad-blue); }
.panel.center[b-b41xy0d83x] { fill: var(--pad-yellow); stroke: var(--pad-yellow); }

.panel.off[b-b41xy0d83x] {
    fill-opacity: 0.03;
    stroke-opacity: 0.25;
}

.panel.occupied[b-b41xy0d83x] {
    fill-opacity: 0.5;
}

/* A hit briefly dims its panel, then the highlight returns. */
.hit[b-b41xy0d83x] {
    fill: var(--ink);
    opacity: 0.35;
    pointer-events: none;
}

.pulse[b-b41xy0d83x] {
    opacity: 0;
    animation-name: pulse-b-b41xy0d83x;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pulse[b-b41xy0d83x] {
        animation: none;
    }
}

@keyframes pulse-b-b41xy0d83x {
    from { opacity: 0.5; }
    to { opacity: 0; }
}

.stance-line[b-b41xy0d83x] {
    stroke: var(--ink);
    stroke-width: 0.06;
    stroke-dasharray: 0.12 0.08;
}

.foot[b-b41xy0d83x] {
    fill: var(--ink);
}

/* Fixed height, so a longer description never pushes the transport below it around. */
figcaption[b-b41xy0d83x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 4.6rem;
    text-align: center;
}

.twist[b-b41xy0d83x] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.twist.front[b-b41xy0d83x] {
    color: var(--twist-front);
}

.twist.behind[b-b41xy0d83x] {
    color: var(--twist-behind);
}

.wound[b-b41xy0d83x] {
    color: var(--ink-muted);
    font-size: 0.87rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Stage/SongLane.razor.rz.scp.css */
.lane[b-jezzxtz2pi] {
    position: relative;
    flex: none;
    width: 110px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
    background: #10142a;
}

.sensitivity[b-jezzxtz2pi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 6px;
    font-size: 0.72rem;
    color: var(--ink-muted);
    background: color-mix(in srgb, #10142a 85%, transparent);
    z-index: 1;
}

.sensitivity input[b-jezzxtz2pi] {
    width: 100%;
    margin: 0;
}

svg[b-jezzxtz2pi] {
    position: absolute;
    top: 0;
    left: 0;
}

.measure[b-jezzxtz2pi] {
    stroke: var(--ink-muted);
    stroke-opacity: 0.6;
    stroke-width: 1;
}

.beat[b-jezzxtz2pi] {
    stroke: color-mix(in srgb, var(--line) 55%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.border[b-jezzxtz2pi] {
    stroke: var(--ink-muted);
    stroke-width: 1;
    stroke-dasharray: 6 3;
}

.onset[b-jezzxtz2pi] {
    fill: var(--pad-yellow);
}

.onset.max[b-jezzxtz2pi] {
    fill: var(--pad-red);
}

.onset.weak[b-jezzxtz2pi] {
    fill: color-mix(in srgb, var(--ink-muted) 45%, transparent);
}

.edge[b-jezzxtz2pi] {
    stroke-width: 2;
}

.edge.start[b-jezzxtz2pi] { stroke: var(--style-eighths); }
.edge.end[b-jezzxtz2pi] { stroke: var(--pad-red); }

.style-rest[b-jezzxtz2pi] { fill: var(--style-rest); }
.style-eighths[b-jezzxtz2pi] { fill: var(--style-eighths); }
.style-bursts[b-jezzxtz2pi] { fill: var(--style-bursts); }
.style-stream[b-jezzxtz2pi] { fill: var(--style-stream); }
.style-followmusic[b-jezzxtz2pi] { fill: var(--style-follow); }
.style-holdbreak[b-jezzxtz2pi] { fill: var(--style-holdbreak); }

/* Phones: a narrower lane gives the chart room; the drawing stretches to it (its viewBox doesn't keep
   its aspect). */
@media (max-width: 480px) {
    .lane[b-jezzxtz2pi] {
        width: 56px;
    }

    svg[b-jezzxtz2pi] {
        width: 100%;
    }

    .sensitivity[b-jezzxtz2pi] {
        padding: 4px 4px 6px;
    }
}
/* /Components/Stage/StanceSketch.razor.rz.scp.css */
.sketch[b-rd6z9w4q0r] {
    display: block;
    flex: none;
}

.panel[b-rd6z9w4q0r] {
    fill: var(--ink-muted);
    fill-opacity: 0.12;
    stroke: var(--ink-muted);
    stroke-opacity: 0.5;
    stroke-width: 0.05;
}

.stance-line[b-rd6z9w4q0r] {
    stroke: var(--ink);
    stroke-width: 0.07;
    stroke-dasharray: 0.14 0.09;
}

.stance-line.before[b-rd6z9w4q0r] {
    stroke-opacity: 0.35;
}

.move[b-rd6z9w4q0r] {
    stroke: var(--pad-yellow);
    stroke-width: 0.09;
}

.arrow-head[b-rd6z9w4q0r] {
    fill: var(--pad-yellow);
}

.foot[b-rd6z9w4q0r] {
    fill: var(--pad-yellow);
}

.foot.ghost[b-rd6z9w4q0r] {
    fill: none;
    stroke: var(--pad-yellow);
    stroke-width: 0.06;
}
/* /Components/Stage/TimelineScrubber.razor.rz.scp.css */
.track[b-xwzno6ris9] {
    position: relative;
    flex: none;
    width: 14px;
    height: 100%;
    border-radius: 7px;
    background: var(--surface-raised);
    cursor: pointer;
    touch-action: none;
}

.track > *[b-xwzno6ris9] {
    pointer-events: none;
}

.band[b-xwzno6ris9] {
    position: absolute;
    left: 3px;
    right: 3px;
}

.style-rest[b-xwzno6ris9] { background: var(--style-rest); }
.style-eighths[b-xwzno6ris9] { background: var(--style-eighths); }
.style-bursts[b-xwzno6ris9] { background: var(--style-bursts); }
.style-stream[b-xwzno6ris9] { background: var(--style-stream); }
.style-followmusic[b-xwzno6ris9] { background: var(--style-follow); }
.style-holdbreak[b-xwzno6ris9] { background: var(--style-holdbreak); }

.selection[b-xwzno6ris9] {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 7px;
    background: color-mix(in srgb, var(--pad-yellow) 35%, transparent);
}

.marker[b-xwzno6ris9] {
    position: absolute;
    left: -3px;
    right: -3px;
    height: 2px;
    background: var(--ink-muted);
}

.thumb[b-xwzno6ris9] {
    position: absolute;
    left: -3px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--pad-yellow);
    box-shadow: 0 0 0 3px var(--stage);
}

/* A finger-wide area around the 14 px bar, reaching into the gap and margin either side (8 px on a
   phone). Kept in this file's scope: Analyze's results have a .track of their own. */
@media (pointer: coarse) {
    .track[b-xwzno6ris9]::before {
        content: "";
        position: absolute;
        inset: 0 -8px;
    }
}
/* /Components/Stage/Transport.razor.rz.scp.css */
.transport[b-2xspr7wi40] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.play[b-2xspr7wi40] {
    min-width: 76px;
    background: var(--pad-yellow);
    border-color: var(--pad-yellow);
    color: var(--on-yellow);
    font-weight: 600;
}

.clock[b-2xspr7wi40] {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.now[b-2xspr7wi40] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
}

.total[b-2xspr7wi40] {
    color: var(--ink-muted);
    font-size: 0.87rem;
}

.spacing input[b-2xspr7wi40] {
    width: 100%;
    accent-color: var(--pad-yellow);
}

.view-options[b-2xspr7wi40] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    color: var(--ink-muted);
}

.shortcut[b-2xspr7wi40] {
    margin-top: 8px;
}

.volumes[b-2xspr7wi40] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
}

.volumes legend[b-2xspr7wi40] {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-bottom: 2px;
}

.volume[b-2xspr7wi40] {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

/* No keyboard or wheel to use them on a touch screen. The same query as the other touch rules: hover
   alone would also hide them on a desktop browser that sees no mouse. */
@media (pointer: coarse) {
    .keys[b-2xspr7wi40] {
        display: none;
    }
}
/* /Components/Stage/TwistLane.razor.rz.scp.css */
.lane[b-nddgotxuae] {
    position: relative;
    flex: none;
    width: 96px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
    background: #10142a;
}

.labels[b-nddgotxuae] {
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    z-index: 1;
}

.labels .behind[b-nddgotxuae] { color: var(--twist-behind); }
.labels .front[b-nddgotxuae] { color: var(--twist-front); }

svg[b-nddgotxuae] {
    position: absolute;
    top: 0;
    left: 0;
}

.side.behind[b-nddgotxuae] { fill: color-mix(in srgb, var(--twist-behind) 7%, transparent); }
.side.front[b-nddgotxuae] { fill: color-mix(in srgb, var(--twist-front) 7%, transparent); }

.zero[b-nddgotxuae] {
    stroke: var(--ink-muted);
    stroke-width: 1;
}

.guide[b-nddgotxuae] {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.twist[b-nddgotxuae] {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* Phones: a narrower lane gives the chart room. The drawing stretches to it (its viewBox doesn't keep
   its aspect), and the lines keep their width. */
@media (max-width: 480px) {
    .lane[b-nddgotxuae] {
        width: 56px;
    }

    svg[b-nddgotxuae] {
        width: 100%;
    }

    .twist[b-nddgotxuae],
    .zero[b-nddgotxuae],
    .guide[b-nddgotxuae] {
        vector-effect: non-scaling-stroke;
    }

    /* Small enough that "behind" ends before the zero line in the middle and doesn't run into "front". */
    .labels[b-nddgotxuae] {
        left: 1px;
        right: 1px;
        font-size: 0.55rem;
    }
}
/* /Pages/Help.razor.rz.scp.css */
.help-page[b-54gfpzy71a] {
    height: 100vh;
    overflow-y: auto;
    background: var(--stage);
    scroll-behavior: smooth;
}

article[b-54gfpzy71a] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    line-height: 1.55;
}

h1[b-54gfpzy71a] {
    font-size: 2.2rem;
}

.back[b-54gfpzy71a] {
    display: inline-block;
    margin-bottom: 12px;
    text-decoration: none;
}

h2[b-54gfpzy71a] {
    margin: 0 0 10px;
    font-size: 1.6rem;
}

h3[b-54gfpzy71a] {
    margin: 22px 0 6px;
    font-size: 1.15rem;
}

.lead[b-54gfpzy71a] {
    color: var(--ink-muted);
}

nav ol[b-54gfpzy71a] {
    columns: 2;
    margin: 16px 0 0;
    padding-left: 20px;
}

section[b-54gfpzy71a] {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 12px;
}

section :target[b-54gfpzy71a],
section[id]:target[b-54gfpzy71a] {
    scroll-margin-top: 12px;
}

:target[b-54gfpzy71a] {
    outline: 2px solid color-mix(in srgb, var(--pad-yellow) 60%, transparent);
    outline-offset: 6px;
    border-radius: 4px;
}

dl[b-54gfpzy71a] {
    margin: 10px 0;
}

dt[b-54gfpzy71a] {
    margin-top: 10px;
    font-weight: 600;
}

dd[b-54gfpzy71a] {
    margin: 2px 0 0;
    color: var(--ink-muted);
}

dfn[b-54gfpzy71a] {
    font-style: normal;
    font-weight: 600;
}

a[b-54gfpzy71a] {
    color: var(--pad-yellow);
}

.note[b-54gfpzy71a] {
    color: var(--ink-muted);
    font-style: italic;
}

/* Phones: the document scrolls, as on the app's page (app.css). */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .help-page[b-54gfpzy71a] {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 600px) {
    nav ol[b-54gfpzy71a] {
        columns: 1;
    }
}
/* /Pages/Home.razor.rz.scp.css */
.app[b-dt8bbdkr4k] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
}

.workspace[b-dt8bbdkr4k] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 290px;
    min-height: 0;
}

.workspace.analyze[b-dt8bbdkr4k] {
    grid-template-columns: 320px minmax(0, 1fr) 390px;
}

.stage[b-dt8bbdkr4k] {
    display: flex;
    justify-content: center;
    gap: 36px;
    min-height: 0;
    padding: 20px 24px;
}

.lane[b-dt8bbdkr4k] {
    display: flex;
    gap: 12px;
    min-height: 0;
}

.readout[b-dt8bbdkr4k] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
    width: 220px;
}

@media (max-width: 1200px) {
    .workspace[b-dt8bbdkr4k] {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .workspace[b-dt8bbdkr4k]  .history {
        display: none;
    }

    .workspace.analyze[b-dt8bbdkr4k] {
        grid-template-columns: 300px minmax(0, 1fr) 360px;
    }

    .readout[b-dt8bbdkr4k] {
        width: 200px;
    }
}

/* Phones, upright or held sideways (a touch screen under 500 px tall): one column that the page itself
   scrolls, so the browser's address bar can hide. The same query is in app.css, the components' own
   css and dom.js (revealOnNarrow); they change together. */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    /* Without a column template the grid's implicit column grows to the chart's width and the page
       scrolls sideways. */
    .app[b-dt8bbdkr4k] {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    /* .workspace.analyze is named too: the two-class rule in the 1200 px block outranks .workspace. */
    .workspace[b-dt8bbdkr4k],
    .workspace.analyze[b-dt8bbdkr4k] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The section list (with the Chart picker) and Analyze's results, under the chart. This comes after
       the 1200 px block, so it undoes its display: none. Results are named by their aside: the UCS
       sample search's list in the editor is a .results too. */
    .workspace[b-dt8bbdkr4k]  .history,
    .workspace[b-dt8bbdkr4k]  aside.results {
        display: block;
        overflow: visible;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .stage[b-dt8bbdkr4k] {
        flex-direction: column;
        height: auto;
        padding: 0 8px 16px;
        gap: 10px;
    }

    /* Play and the clock go above the chart and stick to the top while it is on screen; the stance pad
       and the view options go under it. With the readout's box gone, Transport's three roots and
       PadStance's figure are the stage's own items, so this leans on their markup (see Transport.razor). */
    .readout[b-dt8bbdkr4k] {
        display: contents;
    }

    .stage[b-dt8bbdkr4k]  .transport {
        order: -1;
        position: sticky;
        top: 0;
        z-index: 25;
        padding: 8px 0;
        background: var(--stage);
    }

    .stage[b-dt8bbdkr4k]  .pad-stance,
    .stage[b-dt8bbdkr4k]  .shortcut,
    .stage[b-dt8bbdkr4k]  .view-options {
        order: 1;
    }

    .stage[b-dt8bbdkr4k]  .view-options {
        margin-top: 0;
    }

    /* The play row and the chart fill one screen while the address bar shows (svh); 72 px is the play
       row and the gap under it. */
    .lane[b-dt8bbdkr4k] {
        height: calc(100vh - 72px);
        height: calc(100svh - 72px);
        justify-content: center;
        gap: 8px;
    }
}