.scale-stage{--head:2rem;--step:3rem;--gap:3rem;gap:1.5rem;max-inline-size:30rem;display:grid}.scale{isolation:isolate;grid-template-columns:minmax(0,1fr) 4.5rem;grid-template-rows:var(--head) repeat(10, var(--step));column-gap:1rem;display:grid;position:relative}.scale-head{font-size:var(--text-meta);font-weight:var(--font-weight-bold);color:var(--ink-soft);grid-row:1;align-self:start}.scale-head+.scale-head{text-align:center;grid-column:2}.scale-grade{text-align:start;min-inline-size:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;grid-column:1;align-items:center;gap:.875rem;padding:0;display:flex}.scale-key{inline-size:2.75rem;block-size:calc(var(--step) - 1rem);border-radius:var(--radius-key);font-family:var(--font-display);font-size:var(--text-section);font-weight:var(--font-weight-extrabold);color:var(--ink);background:var(--paper);flex:none;place-items:center;line-height:1;display:grid}.scale-grade:hover .scale-key{background:var(--paper-hover)}.scale-grade:active .scale-key{--press:var(--press-depth)}.scale-grade[aria-pressed=true] .scale-key{--rim-width:0px;--edge:var(--calm-edge);color:var(--on-calm);background:var(--calm)}.scale-grade:focus-visible{outline:none}.scale-grade:focus-visible .scale-key{outline:3px solid var(--focus);outline-offset:3px}.scale-name{font-size:var(--text-caption);font-weight:var(--font-weight-bold);color:var(--calm-ink);line-height:1.2}.scale-letter{border-radius:var(--radius-key);font-family:var(--font-display);font-size:var(--text-section);font-weight:var(--font-weight-bold);color:var(--ink-soft);background:var(--paper-sunk);box-shadow:inset 0 0 0 2px var(--paper-deep);transition:background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out);grid-column:2;place-items:center;margin-block:.5rem .25rem;line-height:1;display:grid}.scale-letter[data-near]{color:var(--calm-ink);background:var(--calm-wash);box-shadow:inset 0 0 0 2px var(--calm)}.scale-anchor{z-index:1;background:var(--gold);block-size:4px;box-shadow:0 1px 0 var(--gold-edge);pointer-events:none;border-radius:2px;grid-column:1/-1;align-self:end;margin-inline-start:-.5rem;translate:0 4px}.scale-beam{z-index:-1;block-size:calc(var(--step) - .25rem);translate:0 calc(var(--chosen) * var(--step));border-radius:var(--radius-key);background:var(--calm-wash);transition:translate var(--duration-morph) var(--ease-out);position:absolute;inset-block-start:calc(var(--head) + .125rem);inset-inline:-.5rem 0}.scale-card{border-radius:var(--radius-card);background:var(--paper);gap:1rem;padding:1.5rem;display:grid}.scale-card-head{align-items:center;gap:1rem;display:flex}.scale-card-key{aspect-ratio:1;border-radius:var(--radius-key);inline-size:4rem;font-family:var(--font-display);font-size:var(--text-headline);font-weight:var(--font-weight-extrabold);color:var(--on-calm);background:var(--calm);box-shadow:inset 0 2px 0 var(--shine), 0 4px 0 var(--calm-edge);flex:none;place-items:center;line-height:1;display:grid}.scale-card-title{gap:.25rem;display:grid}.scale-card-name{font-size:var(--text-title);font-weight:var(--font-weight-bold);color:var(--ink);line-height:1.1}.scale-card-old{font-size:var(--text-caption);font-weight:var(--font-weight-semibold);color:var(--ink-soft)}.scale-card-fact{font-size:var(--text-body);color:var(--ink);text-wrap:pretty;line-height:1.5}@media (width>=56rem){.scale-stage{--head:2.25rem;--step:3.5rem;column-gap:var(--gap);grid-template-columns:minmax(0,24rem) minmax(0,30rem);max-inline-size:none}.scale{grid-template-columns:minmax(0,1fr) 5rem}.scale-key{inline-size:3rem}.scale-beam:after{content:"";inline-size:var(--gap);background:var(--calm);block-size:3px;position:absolute;inset-block-start:50%;inset-inline-start:100%;translate:0 -50%}.scale-rail{position:relative}.scale-card{translate:0 calc(var(--frac) * (var(--head) + 10 * var(--step) - 100%));transition:translate var(--duration-morph) var(--ease-out);position:absolute;inset-block-start:0;inset-inline:0}}.fours{gap:1.5rem;margin:0;padding:0;list-style:none;display:grid}.fours li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name marks""well well";align-items:center;gap:.625rem 1rem;display:grid}.fours-name{font-size:var(--text-body);font-weight:var(--font-weight-bold);color:var(--ink);grid-area:name}.fours-marks{font-size:var(--text-caption);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;color:var(--ink);grid-area:marks}.fours-share{font-weight:var(--font-weight-semibold);color:var(--ink-soft)}.fours-well{--pin:2rem;border-radius:var(--radius-key);background:var(--paper-sunk);block-size:1.5rem;box-shadow:inset 0 0 0 2px var(--paper-deep), inset 0 3px 0 var(--paper-deep);grid-area:well;position:relative}.fours-fill{inline-size:calc(var(--pin) / 2 + (100% - var(--pin)) * var(--share));border-radius:var(--radius-key);background:var(--ink);box-shadow:inset 0 -3px 0 var(--ink-edge);position:absolute;inset-block:0;inset-inline-start:0}.fours-pin{inline-size:var(--pin);aspect-ratio:1;font-size:var(--text-caption);font-weight:var(--font-weight-bold);color:var(--on-calm);background:var(--calm);box-shadow:0 3px 0 var(--calm-edge);border-radius:.5rem;place-items:center;display:grid;position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--pin) / 2 + (100% - var(--pin)) * var(--share));translate:-50% calc(-50% - 2px)}@media (width>=48rem){.fours li{grid-template-columns:12rem minmax(0,1fr) 8.5rem;grid-template-areas:"name well marks";column-gap:1.5rem}.fours-marks{text-align:end}}.junction{--root:3.5rem;--reach:2rem;--gutter:1rem;grid-template-columns:var(--root) minmax(0, 1fr);align-items:center;column-gap:var(--reach);display:grid}.junction-root{--lift:5px;--edge:var(--calm-edge);inline-size:var(--root);aspect-ratio:1;border-radius:var(--radius-key);font-family:var(--font-display);font-size:var(--text-headline);font-weight:var(--font-weight-extrabold);color:var(--on-calm);background:var(--calm);place-items:center;line-height:1;display:grid;position:relative}.junction-root:after{content:"";inline-size:calc(var(--reach) / 2);background:var(--ink);block-size:4px;position:absolute;inset-block-start:50%;inset-inline-start:100%;translate:0 -50%}.junction-paths{gap:var(--gutter);grid-auto-rows:1fr;margin:0;padding:0;list-style:none;display:grid}.junction-paths li{border-radius:var(--radius-card);background:var(--paper);align-content:center;gap:.5rem;padding:1rem 1.25rem;display:grid;position:relative}.junction-paths li:before{content:"";inline-size:calc(var(--reach) / 2);border-inline-start:4px solid var(--arm);position:absolute;inset-inline-start:calc(var(--reach) / -2 - 2px)}.junction-paths li[data-path=pass]{--arm:var(--green)}.junction-paths li[data-path=pass]:before{inset-block:50% calc(var(--gutter) / -2);border-block-start:4px solid var(--arm);border-start-start-radius:.75rem}.junction-paths li[data-path=below]{--arm:var(--coral)}.junction-paths li[data-path=below]:before{inset-block:calc(var(--gutter) / -2) 50%;border-block-end:4px solid var(--arm);border-end-start-radius:.75rem}.junction-grade{font-size:var(--text-caption);font-weight:var(--font-weight-bold);border-radius:.5rem;justify-self:start;padding:.25rem .625rem}li[data-path=pass] .junction-grade{color:var(--on-green);background:var(--green)}li[data-path=below] .junction-grade{color:var(--on-coral);background:var(--coral)}.junction-text{font-size:var(--text-body);font-weight:var(--font-weight-semibold);color:var(--ink);text-wrap:pretty;line-height:1.4}@media (width>=48rem){.junction{--root:5rem;--reach:4rem;--gutter:1.5rem;max-inline-size:48rem}.junction-root{font-size:var(--text-display)}.junction-paths li{padding:1.25rem 1.5rem}}@media (prefers-reduced-motion:reduce){.scale-beam,.scale-card,.scale-letter{transition:none}}