#run {
    margin: 1.5rem 0 3rem;
}

.screen > h2 {
    font-size: 1.35rem;
    margin: 0 0 0.8rem;
    line-height: 1.25;
}

.screen > h3 {
    font-size: 1rem;
    margin: 1.6rem 0 0.6rem;
    color: var(--dim, #8b8f98);
    font-weight: 600;
}

.screen p {
    margin: 0 0 0.9rem;
    max-width: var(--measure, 42rem);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
}

.screen button {
    font: inherit;
    min-height: var(--tap, 44px);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--line-2, #333740);
    background: var(--panel, #16181d);
    color: var(--fg, #e8e6e1);
    cursor: pointer;
}

.screen button:hover:not(:disabled) {
    border-color: var(--accent-dk, #24344d);
    background: var(--panel-2, #1b1e24);
}

.screen button:disabled {
    opacity: 0.4;
    cursor: default;
}

.screen button.primary {
    background: var(--accent-dk, #24344d);
    border-color: var(--accent, #7fb2ff);
    color: var(--fg, #e8e6e1);
    font-weight: 600;
}

.screen a.action-link {
    min-height: var(--tap, 44px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    color: var(--fg, #e8e6e1);
    text-decoration: none;
}

.screen a.action-link:hover {
    border-color: var(--accent-dk, #24344d);
    background: var(--panel-2, #1b1e24);
}

.need,
.disclose {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    max-width: var(--measure, 42rem);
}

.need li,
.disclose li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line, #26282e);
}

.need li:last-child,
.disclose li:last-child {
    border-bottom: 0;
}

.need strong,
.disclose strong {
    display: block;
    margin-bottom: 0.2rem;
}

.need span,
.disclose span {
    display: block;
    font-size: 0.9rem;
    color: var(--dim, #8b8f98);
}

.agree {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 1.2rem 0 0;
    padding: 0.9rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    max-width: var(--measure, 42rem);
}

.agree input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--accent, #7fb2ff);
    flex: none;
}

.modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-width: var(--measure, 42rem);
}

.modes.session-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 34rem) {
    .modes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.screen button.mode {
    display: grid;
    text-align: left;
    padding: 0.8rem 0.9rem;
    gap: 0.15rem;
}

.screen button.mode.on {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

button.mode .ml {
    font-weight: 600;
}

button.mode .mt {
    color: var(--accent, #7fb2ff);
    font-size: 0.95rem;
}

button.mode .mn {
    font-size: 0.78rem;
    color: var(--dim, #8b8f98);
}

.screen-start .lede {
    font-size: 1.05rem;
    color: var(--accent, #7fb2ff);
    margin: 0 0 0.9rem;
}

.card.level {
    margin: 1.1rem 0;
}

.card.level p {
    margin-top: 0;
}

.screen .card.level button {
    margin: 0;
}

.samples {
    display: grid;
    gap: 0.3rem;
    margin: 1rem 0;
    max-width: 28rem;
}

.sample {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line, #26282e);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 120ms, border-color 120ms;
}

.sample.on {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

.sample .n {
    color: var(--dim, #8b8f98);
    font-variant-numeric: tabular-nums;
    width: 1.2rem;
}

.screen button.small {
    min-height: var(--tap, 44px);
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
}

.idmsg {
    min-height: 1.4rem;
    margin: 0;
    font-size: 0.92rem;
    color: var(--dim, #8b8f98);
}

.idmsg.bad {
    color: var(--warn, #ffb454);
    font-weight: 600;
}

.syncnote {
    min-height: 1.2rem;
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    color: transparent;
}

.syncnote.on {
    color: var(--warn, #ffb454);
}

.savedline {
    margin: -0.4rem 0 1.2rem;
    font-size: 0.95rem;
    color: var(--dim, #8b8f98);
}

.savedline.saved {
    color: #4caf82;
}

.savedline.partial,
.savedline.failed {
    color: var(--warn, #ffb454);
}

.progress {
    height: 3px;
    background: var(--line, #26282e);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.progress .fill {
    height: 100%;
    background: var(--accent, #7fb2ff);
    transition: width 200ms linear;
}

.trial-label {
    color: var(--dim, #8b8f98);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.3rem;
}

.quit {
    margin: 2rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--line, #26282e);
}

.screen .quit button.quitnow {
    color: var(--dim, #8b8f98);
    border-color: transparent;
    padding-left: 0;
}

.screen .quit button.quitnow:hover:not(:disabled) {
    color: var(--fg, #e8e6e1);
    border-color: var(--line-2, #333740);
}

.quitline {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    color: var(--dim, #8b8f98);
    max-width: var(--measure, 42rem);
}

.quitline strong {
    color: var(--fg, #e8e6e1);
}

.quit.level-useless .quitline strong,
.quit.level-hardly .quitline strong {
    color: var(--warn, #ffb454);
}

.quitacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.runlength {
    margin: -0.4rem 0 1.2rem;
    font-size: 0.95rem;
    color: var(--dim, #8b8f98);
    max-width: var(--measure, 42rem);
}

.runlength.level-conclusive strong {
    color: #4caf82;
}

.runlength.level-fair strong {
    color: var(--fg, #e8e6e1);
}

.runlength.level-hardly strong,
.runlength.level-useless strong {
    color: var(--warn, #ffb454);
}

.intervals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 1.5rem 0 0.5rem;
    max-width: 34rem;
}

.screen button.iv {
    height: clamp(96px, 22vw, 132px);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    transition: background 90ms, border-color 90ms;
}

button.iv.playing {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

button.iv.right {
    border-color: #4caf82;
    background: rgba(76, 175, 130, 0.18);
}

button.iv.wrong {
    border-color: var(--warn, #ffb454);
    background: rgba(255, 180, 84, 0.14);
}

button.iv.was {
    border-style: dashed;
    border-color: #4caf82;
}

.screen button.replay,
.screen .replay {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0.55rem 0 0.9rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.92rem;
    color: var(--dim, #8b8f98);
    border-style: dashed;
}

.screen button.replay:disabled {
    opacity: 0.35;
}

.screen button.replay.on,
.screen .replay.on {
    border-style: solid;
    border-color: var(--accent, #7fb2ff);
    color: var(--fg, #e8e6e1);
}

.screen .replay .key {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: 4px;
    font-size: 0.75rem;
}

.democap {
    min-height: 3.2rem;
    max-width: var(--measure, 42rem);
    font-size: 1.02rem;
}

.intervals.demo .iv {
    height: clamp(96px, 22vw, 132px);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    background: var(--bg-2, #16181d);
    transition: background 90ms, border-color 90ms;
}

.intervals.demo .iv.playing {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

.intervals.demo .iv.was {
    border-style: solid;
    border-color: #4caf82;
    background: rgba(76, 175, 130, 0.18);
}

.demobar {
    height: 3px;
    background: var(--line, #26282e);
    border-radius: 2px;
    max-width: 34rem;
    margin: 0.4rem 0 1rem;
}

.demobar .fill {
    height: 100%;
    background: var(--accent, #7fb2ff);
    border-radius: 2px;
    transition: width 260ms;
}

.data-notice {
    max-width: 34rem;
    color: var(--dim, #8b8f98);
    font-size: 0.9rem;
}

.feedback {
    min-height: 1.6rem;
    font-size: 0.92rem;
    color: var(--dim, #8b8f98);
}

.feedback.right {
    color: #4caf82;
}

.feedback.wrong {
    color: var(--warn, #ffb454);
}

.card.metric {
    border-left: 3px solid #4caf82;
}

.metric-width {
    margin: 0 0 0.7rem;
    font-size: 0.94rem;
}

.components {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
}

.component {
    border-left: 2px solid #4caf82;
    padding: 0.1rem 0 0.1rem 0.7rem;
    margin: 0 0 0.8rem;
    font-size: 0.92rem;
}

.component .cvalue {
    font-variant-numeric: tabular-nums;
    color: var(--fg, #e8e6e1);
}

.component .csaid {
    margin: 0.25rem 0 0;
    color: var(--dim, #8b8f98);
}

.component .cband {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: var(--dim-2, #6c707a);
}

.repeats {
    margin: 0.9rem 0 0.2rem;
}

.repeats .rlabel {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    color: var(--fg, #e8e6e1);
}

.repeats tr.wide td {
    color: var(--warn, #ffb454);
}

.screen .card {
    margin: 1.2rem 0;
}

.screen .card > h3 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    color: var(--fg, #e8e6e1);
}

.reasons {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--dim, #8b8f98);
}

.card.headline {
    text-align: center;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.hl-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dim, #8b8f98);
}

.hl-value {
    margin: 0.2rem 0 0.4rem;
    font-size: clamp(2.6rem, 12vw, 4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--fg, #e8e6e1);
}

.hl-value .u {
    font-size: 0.3em;
    margin-left: 0.35rem;
    color: var(--dim, #8b8f98);
}

.hl-note {
    margin: 0;
    font-size: 0.84rem;
    color: var(--dim, #8b8f98);
}

.verdicts {
    display: grid;
    gap: 1rem;
}

.verdict {
    border-left: 3px solid var(--line-2, #333740);
    padding-left: 0.9rem;
}

.verdict.r4 {
    border-left-color: #4caf82;
}

.verdict.r3 {
    border-left-color: #6ea87f;
}

.verdict.r2 {
    border-left-color: var(--accent, #7fb2ff);
}

.verdict.r1 {
    border-left-color: var(--warn, #ffb454);
}

.verdict .q {
    margin: 0 0 0.3rem;
    font-size: 0.86rem;
    color: var(--dim, #8b8f98);
}

.verdict .a {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
}

.verdict .e {
    margin: 0.45rem 0 0;
    font-size: 0.86rem;
    color: var(--dim, #8b8f98);
    line-height: 1.55;
}

details.working > summary {
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--dim, #8b8f98);
}

details.working[open] > summary {
    margin-bottom: 0.9rem;
    color: var(--fg, #e8e6e1);
}

details.working .tierline {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
}

.gapplot {
    width: 100%;
    height: auto;
    display: block;
    margin: 0.4rem 0 0.8rem;
    overflow: visible;
}

.gapplot .grid {
    stroke: var(--line, #26282e);
    stroke-width: 1;
}

.gapplot .marker {
    stroke: var(--accent, #7fb2ff);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: 0.75;
}

.gapplot .marker-label {
    fill: var(--accent, #7fb2ff);
    font: 11px ui-sans-serif, system-ui, sans-serif;
}

.gapplot .tick {
    fill: var(--dim, #8b8f98);
    font: 11px ui-sans-serif, system-ui, sans-serif;
}

.gapplot .tick.y {
    text-anchor: end;
}

.gapplot .tick.x {
    text-anchor: middle;
}

.gapplot .tick.dim {
    opacity: 0.6;
    font-size: 10px;
}

.gapplot .axis-title {
    fill: var(--dim, #8b8f98);
    font: 12px ui-sans-serif, system-ui, sans-serif;
    text-anchor: middle;
}

.gapplot .fit {
    stroke: var(--accent, #7fb2ff);
    stroke-width: 2;
    fill: none;
    opacity: 0.85;
}

.gapplot .pt {
    fill: var(--fg, #e8e6e1);
    stroke: var(--bg, #101114);
    stroke-width: 1.5;
}

.gapplot .pt.control {
    fill: none;
    stroke: var(--warn, #ffb454);
    stroke-width: 2;
}

.gapplot .bar,
.gapplot .cap {
    stroke: var(--fg, #e8e6e1);
    stroke-width: 1.4;
    opacity: 0.65;
}

.gapplot .bar.control,
.gapplot .cap.control {
    stroke: var(--warn, #ffb454);
}

.gapplot .anchor {
    stroke: #4caf82;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.gapplot .anchor-band {
    fill: rgba(76, 175, 130, 0.1);
}

.gapplot .anchor-label {
    fill: #4caf82;
    font: 11px ui-sans-serif, system-ui, sans-serif;
    text-anchor: end;
}

.testmenu {
    display: grid;
    gap: 0.8rem;
    margin: 1.2rem 0 1.6rem;
}

.screen button.testcard {
    display: grid;
    gap: 0.3rem;
    text-align: left;
    padding: 1rem 1.1rem;
    min-height: var(--tap, 44px);
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    background: var(--panel-2, #1b1e24);
    color: var(--fg, #e8e6e1);
    cursor: pointer;
    font: inherit;
}

.screen button.testcard:hover {
    border-color: #4caf82;
}

.screen button.testcard .tname {
    font-weight: 600;
}

.screen button.testcard .tblurb {
    color: var(--dim, #8b8f98);
    font-size: 0.92rem;
}

.screen button.testcard .tmeta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.screen button.testcard .tmins {
    white-space: nowrap;
}

.liveplot {
    min-height: 240px;
    margin: 0.4rem 0 1rem;
}

.screen button.holdbutton {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    padding: 2.2rem 1rem;
    border: 2px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    background: var(--panel-2, #1b1e24);
    color: var(--fg, #e8e6e1);
    font: inherit;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.screen button.holdbutton .hb-main {
    font-size: 1.1rem;
    font-weight: 600;
}

.screen button.holdbutton .hb-sub {
    color: var(--dim, #8b8f98);
    font-size: 0.9rem;
}

.screen button.holdbutton.down {
    border-color: #4caf82;
    background: rgba(76, 175, 130, 0.16);
}

.tracefoot {
    text-align: center;
    font-size: 0.86rem;
}

.configgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    max-width: 34rem;
    margin: 1rem 0 0.8rem;
}

@media (min-width: 38rem) {
    .configgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.configfield {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    background: var(--panel-2, #1b1e24);
}

.configfield span {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.configfield input {
    width: 100%;
    min-width: 0;
    min-height: var(--tap, 44px);
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line, #26282e);
    border-radius: 8px;
    background: var(--bg, #101114);
    color: var(--fg, #e8e6e1);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.configfield small {
    color: var(--dim, #8b8f98);
}

.configsummary {
    min-height: 1.4rem;
}

.anomaly-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    max-width: 34rem;
    margin: 0.8rem 0 1rem;
}

.statbox {
    min-height: 72px;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--line, #26282e);
    border-radius: 8px;
    background: var(--panel-2, #1b1e24);
}

.statlabel {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dim, #8b8f98);
}

.statvalue {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.35rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.screen button.anomaly-button {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    max-width: 34rem;
    min-height: 180px;
    place-items: center;
    padding: 1.6rem 1rem;
    border: 2px solid var(--warn, #ffb454);
    border-radius: var(--radius, 10px);
    background: rgba(255, 180, 84, 0.08);
    color: var(--fg, #e8e6e1);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.screen button.anomaly-button.flash {
    background: rgba(255, 180, 84, 0.24);
}

.ab-main {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ab-sub {
    max-width: 18rem;
    color: var(--dim, #8b8f98);
    font-size: 0.9rem;
}

.traceplot {
    width: 100%;
    height: auto;
    display: block;
}

.traceplot .grid {
    stroke: var(--line, #26282e);
    stroke-width: 1;
}

.traceplot .zero {
    stroke: var(--line-2, #333740);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.traceplot .marker {
    stroke: var(--warn, #ffb454);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
}

.traceplot .marker-label,
.traceplot .window-label {
    fill: var(--warn, #ffb454);
    font-size: 11px;
    opacity: 0.85;
}

.traceplot .window-label {
    fill: var(--dim, #8b8f98);
    text-anchor: middle;
}

.traceplot .window {
    fill: rgba(127, 178, 255, 0.06);
}

.traceplot .tick {
    fill: var(--dim, #8b8f98);
    font-size: 11px;
}

.traceplot .tick.y {
    text-anchor: end;
}

.traceplot .tick.x {
    text-anchor: middle;
}

.traceplot .axis-title {
    fill: var(--dim, #8b8f98);
    font-size: 12px;
    text-anchor: middle;
}

.traceplot .trace {
    fill: none;
    stroke: #4caf82;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.traceplot .fit {
    fill: none;
    stroke: var(--accent, #7fb2ff);
    stroke-width: 2;
}

.traceplot .band {
    fill: rgba(127, 178, 255, 0.16);
    stroke: none;
}

.traceplot .mid {
    fill: var(--dim, #8b8f98);
    opacity: 0.75;
}

.card.trace > h3 {
    color: var(--dim, #8b8f98);
    font-size: 0.95rem;
}

.knobwrap {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    margin: 1.4rem 0 1rem;
}

.knob {
    width: min(240px, 62vw);
    height: min(240px, 62vw);
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 50%;
    outline-offset: 6px;
}

.knob.turning {
    cursor: grabbing;
}

.knob.off {
    opacity: 0.45;
    cursor: default;
}

.knob:focus-visible {
    outline: 2px solid var(--accent, #7fb2ff);
}

.knob-face {
    fill: var(--card, #17181c);
    stroke: var(--line-2, #333740);
    stroke-width: 2;
}

.knob-inner {
    fill: none;
    stroke: var(--line, #24262c);
    stroke-width: 1;
}

.knob-pointer {
    stroke: var(--accent, #7fb2ff);
    stroke-width: 4;
    stroke-linecap: round;
}

.knob-grip {
    fill: var(--accent, #7fb2ff);
}

.knobhint {
    max-width: 34rem;
    margin: 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.knobsteps {
    display: flex;
    gap: 0.6rem;
}

.screen-setting .ask {
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: center;
    max-width: 34rem;
    margin: 0.8rem auto 0;
}

.screen button.confirm {
    display: block;
    margin: 0.4rem auto 0;
    min-width: 14rem;
}

.screen button.fifth-aid {
    display: block;
    margin: 0.75rem auto 0;
    border-style: dashed;
    color: var(--dim, #8b8f98);
}

.screen .practice-note {
    margin: 0 auto 0.5rem;
    max-width: 34rem;
    text-align: center;
    color: var(--dim, #8b8f98);
    font-size: 0.9rem;
}

.screen button.demo-skip {
    display: block;
    margin: 0.8rem auto 0;
}

.confirmwait {
    min-height: 1.2rem;
    margin: 0.35rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.card.score {
    text-align: center;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.card.score.none {
    text-align: left;
}

.slabel {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dim, #8b8f98);
}

.svalue {
    margin: 0.2rem 0 0;
    font-size: clamp(2.6rem, 12vw, 4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--fg, #e8e6e1);
}

.svalue .sout {
    font-size: 0.3em;
    margin-left: 0.15rem;
    color: var(--dim, #8b8f98);
}

.sword {
    margin: 0.1rem 0 1rem;
    font-size: 1rem;
    color: var(--accent, #7fb2ff);
}

.sparts {
    display: grid;
    gap: 1rem;
    text-align: left;
    margin-bottom: 1rem;
}

@media (min-width: 34rem) {
    .sparts {
        grid-template-columns: 1fr 1fr;
    }
}

.spart {
    border-left: 3px solid var(--line-2, #333740);
    padding-left: 0.9rem;
}

.spname {
    margin: 0;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.spvalue {
    margin: 0.1rem 0 0;
    font-size: 1.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.spword {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.86rem;
    color: var(--accent, #7fb2ff);
}

.spbody {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--dim, #8b8f98);
}

.matchplot .zero {
    stroke: var(--warn, #ffb454);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.9;
}

.matchplot .zero-label {
    fill: var(--warn, #ffb454);
    font: 11px ui-sans-serif, system-ui, sans-serif;
    text-anchor: end;
    opacity: 0.9;
}

.matchplot .raw {
    fill: var(--dim, #8b8f98);
    opacity: 0.55;
}

.matchplot .pt.bounded {
    fill: var(--warn, #ffb454);
}

.matchplot .fit {
    stroke-dasharray: 7 5;
}

table.results tr.anchor td {
    color: var(--dim, #8b8f98);
    background: rgba(255, 255, 255, 0.02);
}

.boxctl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.8rem 0 0.6rem;
}

@media (max-width: 460px) {
    .boxctl {
        grid-template-columns: 1fr;
    }
}

.boxctl .play {
    text-align: left;
    line-height: 1.35;
}

.boxctl .play .dim {
    display: block;
    font-size: 0.78rem;
}

.endlabel {
    margin: 0.2rem 0;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim, #8b8f98);
}

.endlabel.bottom {
    text-align: right;
}

.boxlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.box {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto 1.4rem;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.4rem;
    padding: 0 0.8rem;
    border: 1px solid var(--line, #2a2c33);
    border-radius: 10px;
    background: var(--card, #17181c);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

@media (prefers-reduced-motion: no-preference) {
    .boxlist.dragging .box {
        transition: transform 120ms ease;
    }

    .boxlist.dragging .box.lift {
        transition: none;
    }
}

.box:focus-visible {
    outline: 2px solid var(--accent, #7fb2ff);
    outline-offset: 2px;
}

.box .bpos {
    font-variant-numeric: tabular-nums;
    color: var(--dim, #8b8f98);
    font-size: 0.9rem;
}

.box .bname {
    font-weight: 600;
    font-size: 1.05rem;
}

.box .bhint {
    font-size: 0.74rem;
    color: var(--dim, #8b8f98);
}

@media (max-width: 460px) {
    .box .bhint {
        display: none;
    }
}

.box .bgrip {
    color: var(--dim, #8b8f98);
    letter-spacing: -2px;
}

.box.lift {
    cursor: grabbing;
    border-color: var(--accent, #7fb2ff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 3;
}

.box.sounding {
    border-color: var(--accent, #7fb2ff);
}

.box.off {
    opacity: 0.5;
    cursor: default;
}

.screen-screen .confirmwait {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--dim, #8b8f98);
}

.orderplot .kneeband {
    fill: var(--accent, #7fb2ff);
    opacity: 0.1;
}

.orderplot .knee {
    stroke: var(--accent, #7fb2ff);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.8;
}

.orderplot .knee-label {
    fill: var(--accent, #7fb2ff);
    font: 11px ui-sans-serif, system-ui, sans-serif;
    opacity: 0.9;
}

.orderplot .fitline {
    fill: none;
    stroke: var(--accent, #7fb2ff);
    stroke-width: 2;
    stroke-dasharray: 7 5;
    opacity: 0.85;
}

.yesno {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin: 1.5rem 0 0.5rem;
    max-width: 26rem;
}

.screen button.iv.chosen {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

.yesno .key {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--dim, #8b8f98);
    font-variant-numeric: normal;
}

@media (pointer: coarse) {
    .yesno .key {
        display: none;
    }
}

.yesno.demo .iv {
    height: clamp(96px, 22vw, 132px);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    border: 1px solid var(--line-2, #333740);
    border-radius: var(--radius, 10px);
    background: var(--bg-2, #16181d);
    transition: background 90ms, border-color 90ms;
}

.yesno.demo .iv.was {
    border-color: var(--accent, #7fb2ff);
    background: var(--accent-dk, #24344d);
}

.limitsplot .band {
    opacity: 0.1;
}

.limitsplot .band.recede,
.limitsplot .mu-label.recede,
.limitsplot .tick.dir.recede {
    fill: var(--accent, #7fb2ff);
}

.limitsplot .mu.recede,
.limitsplot .run.recede,
.limitsplot .flip.recede {
    stroke: var(--accent, #7fb2ff);
}

.limitsplot .band.approach,
.limitsplot .mu-label.approach,
.limitsplot .tick.dir.approach {
    fill: var(--warn, #ffb454);
}

.limitsplot .mu.approach,
.limitsplot .run.approach,
.limitsplot .flip.approach {
    stroke: var(--warn, #ffb454);
}

.limitsplot .band {
    stroke: none;
}

.limitsplot .mu {
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.8;
    fill: none;
}

.limitsplot .mu-label {
    font: 11px ui-sans-serif, system-ui, sans-serif;
    stroke: none;
    opacity: 0.9;
}

.limitsplot .alpha {
    stroke: var(--fg, #e8e6e1);
    stroke-width: 1.5;
    opacity: 0.9;
}

.limitsplot .alpha-label {
    fill: var(--fg, #e8e6e1);
    font: 11px ui-sans-serif, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

.limitsplot .run {
    stroke-width: 1.2;
    opacity: 0.45;
    fill: none;
}

.limitsplot .pt.yes {
    fill: var(--fg, #e8e6e1);
    stroke: var(--bg, #101114);
}

.limitsplot .pt.no {
    fill: var(--bg, #101114);
    stroke: var(--dim, #8b8f98);
    stroke-width: 1.4;
}

.limitsplot .flip {
    stroke-width: 2;
    opacity: 0.9;
}

.limitsplot .censor {
    stroke: var(--dim, #8b8f98);
    stroke-width: 1.6;
    fill: none;
}

.limitsplot .tick.dir {
    font-size: 12px;
}

.limitsplot .legend {
    fill: var(--dim, #8b8f98);
    font: 11px ui-sans-serif, system-ui, sans-serif;
}

.pairpanel {
    --pair-font-lift: 3pt;
}

.pairpanel .ask,
.pairpanel button {
    font-size: calc(1rem + var(--pair-font-lift));
}

.pairpanel .word {
    font-size: calc(1.15rem + var(--pair-font-lift));
    line-height: 1.3;
    margin: 0.2rem 0 0.3rem;
    color: var(--fg, #e7e9ee);
    font-weight: 600;
}

.pairpanel .wordnote {
    color: var(--dim, #8b8f98);
    font-size: calc(0.9rem + var(--pair-font-lift));
    margin: 0 0 1.1rem;
}

.sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0 0 0.7rem;
}

.side {
    border: 1px solid var(--line, #26282e);
    border-radius: 10px;
    padding: 0.9rem 0.7rem;
    text-align: center;
    background: var(--card, #15161a);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.side .sidename {
    display: block;
    font-size: calc(0.8rem + var(--pair-font-lift));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim, #8b8f98);
    margin: 0 0 0.5rem;
}

.side .playside {
    width: 100%;
}

.side.sounding {
    border-color: var(--accent, #7fb2ff);
    background: color-mix(in srgb, var(--accent, #7fb2ff) 12%, var(--card, #15161a));
}

.bothrow {
    margin: 0 0 1.3rem;
}

.playboth {
    width: 100%;
    padding: 0.85rem 1rem;
}

.answers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin: 0 0 0.4rem;
}

@media (min-width: 34rem) {
    .answers {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.answers .answer {
    padding: 1rem 0.7rem;
    min-height: 3.6rem;
    border-radius: 10px;
    font-size: calc(0.95rem + var(--pair-font-lift));
    line-height: 1.25;
    text-align: center;
}

.answers .answer:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.answerwait {
    min-height: 1.2rem;
    margin: 0 0 1.2rem !important;
    color: var(--dim, #8b8f98);
    font-size: calc(0.85rem + var(--pair-font-lift));
}

.indicator {
    border-top: 1px solid var(--line, #26282e);
    padding: 1rem 0 0;
    margin: 1.6rem 0 0;
}

.indbar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--line, #26282e);
    overflow: visible;
}

.indfill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent, #7fb2ff);
    transition: width 0.25s ease;
}

.indmarks {
    position: absolute;
    inset: 0;
}

.indmark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: var(--dim, #8b8f98);
    opacity: 0.7;
}

.indmark.passed {
    background: var(--accent, #7fb2ff);
    opacity: 1;
}

.indtext {
    color: var(--dim, #8b8f98);
    font-size: calc(0.85rem + var(--pair-font-lift));
    margin: 0.8rem 0 0.6rem;
}

.indicator.level-below .indfill {
    background: var(--dim, #8b8f98);
}

.stopnow {
    font-size: calc(0.85rem + var(--pair-font-lift));
}

.pairpanel .quitline {
    font-size: calc(0.9rem + var(--pair-font-lift));
}

@media (max-width: 34rem) {
    .pairpanel {
        --pair-font-lift: 1pt;
    }
}

.loadmsg {
    font-variant-numeric: tabular-nums;
}

.lengths ul.titled {
    margin: 0.6rem 0 0;
    padding: 0 0 0 1.1rem;
}

.describeaxis {
    width: 100%;
    height: auto;
    display: block;
    margin: 0.2rem 0 1.4rem;
    overflow: visible;
}

.describeaxis .zero {
    stroke: var(--dim, #8b8f98);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: 0.6;
}

.describeaxis .zerolabel,
.describeaxis .endlabel {
    fill: var(--dim, #8b8f98);
    font: 11px ui-sans-serif, system-ui, sans-serif;
    text-anchor: middle;
}

.describeaxis .endlabel.low {
    text-anchor: start;
}

.describeaxis .endlabel.high {
    text-anchor: end;
}

.describeaxis .bar,
.describeaxis .cap {
    stroke: var(--accent, #7fb2ff);
    stroke-width: 1.5;
    opacity: 0.55;
}

.describeaxis .pt,
.simmap .pt {
    fill: var(--accent, #7fb2ff);
}

.describeaxis .ptlabel,
.simmap .ptlabel {
    fill: var(--bg, #0e0f12);
    font: 600 11px ui-sans-serif, system-ui, sans-serif;
    text-anchor: middle;
}

.describeaxis .ptlabel {
    fill: var(--fg, #e7e9ee);
}

.describeaxis .node,
.simmap .node {
    cursor: pointer;
}

.describeaxis .node:hover .pt,
.describeaxis .node:focus .pt,
.simmap .node:hover .pt,
.simmap .node:focus .pt {
    fill: var(--fg, #e7e9ee);
}

.simmatrix {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    margin: 0.4rem 0 0.9rem;
}

.simmatrix th,
.simmatrix td {
    border: 1px solid var(--line, #26282e);
    padding: 0.35rem 0.4rem;
    text-align: center;
    min-width: 3.4rem;
}

.simmatrix th {
    color: var(--dim, #8b8f98);
    font-weight: 600;
}

.simmatrix .self {
    background: var(--line, #26282e);
    color: var(--dim, #8b8f98);
}

.simmatrix .dist {
    background: color-mix(in srgb, var(--accent, #7fb2ff) calc(var(--k) * 34%), transparent);
}

.simmatrix .floored {
    color: var(--dim, #8b8f98);
}

.simmatrix .v {
    display: block;
}

.simmatrix .hint {
    display: block;
    font-size: 0.7rem;
    color: var(--dim, #8b8f98);
    opacity: 0.8;
}

.simmatrix .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.simmap {
    width: 100%;
    max-width: 34rem;
    height: auto;
    display: block;
    margin: 0.4rem auto 0.9rem;
}

.simmap .scalebar {
    stroke: var(--dim, #8b8f98);
    stroke-width: 1.5;
}

.simmap .scalelabel {
    fill: var(--dim, #8b8f98);
    font: 11px ui-sans-serif, system-ui, sans-serif;
}

.legendlist {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.legenditem {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line, #26282e);
    border-radius: 8px;
    cursor: pointer;
}

.lg-letter {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    font-weight: 700;
    color: var(--accent, #7fb2ff);
}

.lg-name {
    color: var(--fg, #e7e9ee);
}

.describe-results .plotwrap {
    overflow-x: auto;
}