/* ==========================================================================
   Guitar Imp
   The page is built like a guitar neck seen head-on: the header is the
   headstock, the bone bar under it is the nut, and the tools sit on the
   fretboard below. Fret spacing, position markers and string gauges are all
   real, so the background carries information rather than just texture.
   ========================================================================== */

:root {
    --ebony:        #0e0a09;
    --rosewood:     #241a16;
    --rosewood-mid: #1a1210;
    --rosewood-dark:#120c0b;
    --headstock:    #3f2f26;
    --headstock-deep:#32251e;
    --bone:         #ece2cf;
    --bone-dim:     #a2968a;
    --nickel:       #8d8579;
    --glow:         #f5a33c;
    --imp:          #7dc95f;
    --line:         rgba(236, 226, 207, .10);

    --neck-width: 680px;
    --gutter: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ebony);
    color: var(--bone);
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--glow); }

:focus-visible {
    outline: 2px solid var(--glow);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The fretboard
   -------------------------------------------------------------------------- */

.board {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.board__neck {
    position: relative;
    width: min(100%, var(--neck-width));
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, var(--rosewood), var(--rosewood-mid) 55%, var(--rosewood-dark));
    box-shadow: 0 0 70px 10px rgba(0, 0, 0, .75);
}

/* Grain, raked slightly off-vertical so it never lines up with the strings. */
.board__neck::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: repeating-linear-gradient(
        93deg,
        rgba(255, 240, 220, .012) 0 2px,
        transparent 2px 11px
    );
}

.fret {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(120, 114, 104, .25),
        rgba(205, 197, 184, .55) 30%,
        rgba(160, 153, 142, .45) 70%,
        rgba(110, 105, 97, .25)
    );
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.inlay {
    position: absolute;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 34% 28%, #fff9ea, #cec2a6 55%, #857c6b);
    opacity: .30;
}

.inlay--left  { margin-left: -62px; }
.inlay--right { margin-left:  62px; }

.string {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(90, 84, 76, .9), rgba(216, 205, 186, .9), rgba(90, 84, 76, .9));
    opacity: .11;
}

/* --------------------------------------------------------------------------
   Headstock and nut
   -------------------------------------------------------------------------- */

.site-header,
.site-main,
.site-footer { position: relative; z-index: 1; }

/* The headstock: opaque, so the board stops at the nut rather than running on
   up behind the wordmark. A lighter, flatter wood than the fretboard, the way a
   headstock face is a different piece from the neck it is glued to. */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(100%, var(--neck-width));
    margin: 0 auto;
    padding: 14px var(--gutter);
    background: linear-gradient(180deg, var(--headstock), var(--headstock-deep));
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bone);
    text-decoration: none;
}

.brand__mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: block;
}

.brand__name {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(23px, 6.4vw, 30px);
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.brand__name-accent { color: var(--glow); }

/* The square button at the right of the headstock, sized and rounded to match
   the imp on the other side so the two read as a pair of tuners. */
.header-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(0, 0, 0, .22);
    color: var(--bone-dim);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.header-btn__icon {
    width: 24px;
    height: 24px;
    display: block;
}

@media (hover: hover) {
    .header-btn:hover {
        color: var(--glow);
        border-color: rgba(245, 163, 60, .45);
        background: rgba(0, 0, 0, .34);
    }
}

.header-btn:active { color: var(--glow); }

/* The nut: a bone bar the strings cross before they reach the board. */
.nut {
    position: relative;
    z-index: 1;
    width: min(100%, var(--neck-width));
    height: 10px;
    margin: 0 auto;
    background: linear-gradient(180deg, #f6eddc, #d3c8b1 55%, #857a6a);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .65);
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Centring a panel taller than the viewport would otherwise cut off its top,
   putting it out of reach. "safe" keeps the overflow at the bottom. */
@supports (justify-content: safe center) {
    .site-main { justify-content: safe center; }
}

/* --------------------------------------------------------------------------
   Tool cards
   -------------------------------------------------------------------------- */

.apps {
    width: min(100%, var(--neck-width));
    margin: 0 auto;
    padding: clamp(20px, 6vw, 42px) var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(11px, 3vw, 18px);
}

.app {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: clamp(13px, 3.6vw, 20px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(157deg, #3b2b24, #15100e);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 245, 230, .06);
    color: var(--bone);
    text-decoration: none;
}

.app__icon {
    width: clamp(30px, 8.5vw, 40px);
    height: clamp(30px, 8.5vw, 40px);
    margin-bottom: auto;
    color: var(--glow);
}

.app__name {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 4.8vw, 25px);
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.app__blurb {
    margin: 0;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nickel);
}

.app__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.app--soon { cursor: default; }
.app--soon .app__icon { color: var(--bone-dim); }

.app.is-live { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }

@media (hover: hover) {
    .app.is-live:hover {
        transform: translateY(-3px);
        border-color: rgba(245, 163, 60, .45);
        box-shadow: 0 18px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 245, 230, .09);
    }
}

.app.is-live:active { transform: translateY(0); }

/* Cards arrive one after another, top-left to bottom-right, like a chord
   being picked out string by string. */
.app {
    animation: card-in .42s cubic-bezier(.22, .8, .3, 1) backwards;
}

.app:nth-child(1) { animation-delay: .04s; }
.app:nth-child(2) { animation-delay: .11s; }
.app:nth-child(3) { animation-delay: .18s; }
.app:nth-child(4) { animation-delay: .25s; }
.app:nth-child(5) { animation-delay: .32s; }
.app:nth-child(6) { animation-delay: .39s; }

@keyframes card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Panels (placeholder pages, 404)
   -------------------------------------------------------------------------- */

.panel {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: clamp(22px, 6vw, 34px) clamp(20px, 5vw, 30px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(157deg, #3b2b24, #15100e);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 245, 230, .06);
    text-align: center;
}

.panel .app__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    color: var(--glow);
}

.panel__title {
    margin: 0 0 10px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

.panel__text {
    margin: 0 0 14px;
    color: var(--bone-dim);
    font-size: 15px;
}

.panel__note {
    margin: 0 0 20px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nickel);
}

.btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--glow);
    color: #22150a;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none;
    transition: filter .18s ease;
}

.btn:hover { filter: brightness(1.1); }

/* --------------------------------------------------------------------------
   The About overlay
   Opaque like every other box on the site, or the inlays behind it ghost
   through the text.
   -------------------------------------------------------------------------- */

.about {
    width: min(calc(100% - 32px), 460px);
    max-height: min(82dvh, 620px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(157deg, #3b2b24, #15100e);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 245, 230, .06);
    color: var(--bone);
    overflow: auto;
    overscroll-behavior: contain;
}

.about::backdrop {
    background: rgba(6, 4, 3, .72);
    backdrop-filter: blur(2px);
}

.about[open] { animation: about-in .2s ease both; }

@keyframes about-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Padding lives on the inner box, not the dialog: a click on the dialog itself
   then means a click outside the content, which is what closes it. */
.about__inner {
    position: relative;
    padding: clamp(22px, 6vw, 30px) clamp(20px, 5vw, 28px);
    outline: none;
}

.about__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--bone-dim);
    cursor: pointer;
    transition: color .18s ease;
}

.about__close svg {
    width: 20px;
    height: 20px;
    display: block;
}

@media (hover: hover) {
    .about__close:hover { color: var(--glow); }
}

.about__title {
    margin: 0 40px 14px 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(19px, 5.4vw, 26px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

.about__text {
    margin: 0 0 13px;
    color: var(--bone-dim);
    font-size: 15px;
    line-height: 1.55;
}

.about__text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    width: min(100%, var(--neck-width));
    margin: 0 auto;
    padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    text-align: center;
}

.site-footer p {
    margin: 0;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--nickel);
}

.site-footer a { color: var(--bone-dim); }

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
    .app { aspect-ratio: 16 / 10; }
    .app__icon { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Tool furniture
   Shared by all four tools: the panel they sit in, and the controls they build
   out of. Anything specific to one tool lives in that tool's own stylesheet.
   -------------------------------------------------------------------------- */

.tool {
    width: min(calc(100% - 32px), 520px);
    margin: clamp(14px, 4vw, 28px) auto;
    padding: clamp(18px, 5vw, 26px) clamp(16px, 4.5vw, 24px) clamp(20px, 5.5vw, 28px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(157deg, #3b2b24, #15100e);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 245, 230, .06);
}

/* A title and whatever switch the tool puts beside it. Wrapping is on because
   the longer titles plus a two-way switch are more than a narrow phone's width,
   and a switch that overhangs the panel is worse than one on its own line. */
.tool__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: clamp(16px, 4vw, 22px);
}

.tool__title {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.tool__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tool__hint {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    color: var(--nickel);
}

/* A segmented switch: one option lit, the rest quiet. */
.modes {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
}

.mode {
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--bone-dim);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.mode.is-on {
    background: var(--glow);
    color: #22150a;
    font-weight: 700;
}

.mode:disabled { opacity: .35; cursor: not-allowed; }

.field { display: block; margin-bottom: clamp(16px, 4vw, 22px); }

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nickel);
}

.field__select {
    width: 100%;
    padding: 13px 40px 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: #241a16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238d8579'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    color: var(--bone);
    font: inherit;
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}

/* Two fields side by side. A phone in portrait is just wide enough for a pair
   of short selects, and stacking them costs a row the tools cannot spare. */
.fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: clamp(16px, 4vw, 22px);
}

/* min-width:0 as well as minmax(0, 1fr): a grid item's automatic minimum is its
   content, and a select is as wide as its longest option wants to be. Without
   this a tuning named "Standard (E A D G B E)" pushes the row off the screen. */
.fields .field {
    margin-bottom: 0;
    min-width: 0;
}

@media (max-width: 359px) {
    .fields .field__label { letter-spacing: .1em; }
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--bone-dim);
    cursor: pointer;
}

.check input {
    width: 20px;
    height: 20px;
    accent-color: var(--glow);
}

.btn--wide {
    width: 100%;
    max-width: 260px;
    padding: 15px 20px;
    text-align: center;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.btn:disabled { opacity: .5; cursor: default; }

.status {
    margin: 12px 0 0;
    min-height: 1.4em;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--bone-dim);
}

.status:empty { margin: 0; min-height: 0; }

.ref {
    margin-top: clamp(18px, 5vw, 24px);
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.ref__summary {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nickel);
    cursor: pointer;
}

.ref__table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 13px;
}

.ref__table th,
.ref__table td {
    padding: 7px 4px;
    text-align: left;
    border-bottom: 1px solid rgba(236, 226, 207, .07);
}

.ref__table thead th {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nickel);
}

.ref__table tbody th { color: var(--nickel); font-weight: 400; }

/* --------------------------------------------------------------------------
   The neck inside a tool
   A small neck in the panel: open strings on the headstock side of the nut,
   then twelve frets at their real spacing. Shared by the fretboard and the
   scales tool — both draw this board and differ only in what they write on the
   cells, so the markup (inc/lib.php) and the wood live in one place.
   -------------------------------------------------------------------------- */

.neck {
    --gut-width: 22px;
    margin-bottom: clamp(12px, 3vw, 16px);
}

/* String numbers, open strings and the board all share one column template, so
   a note in the open row lines up with its string down the whole neck. */
.neck__top,
.neck__open {
    display: grid;
    grid-template-columns: var(--gut-width) repeat(6, minmax(0, 1fr));
}

.neck__top {
    padding-bottom: 3px;
}

.neck__string-no {
    text-align: center;
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--nickel);
}

.neck__string-no.is-live {
    color: var(--glow);
    font-weight: 700;
}

/* The open strings sit on the headstock side of the nut, so they get the
   headstock's flatter, lighter wood rather than the fretboard's. */
.neck__open {
    padding: 4px 0;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--headstock), var(--headstock-deep));
}

.neck__gutter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 10px;
    color: var(--nickel);
}

.neck__nut {
    height: 7px;
    margin-left: var(--gut-width);
    border-radius: 0 0 2px 2px;
    background: linear-gradient(180deg, #f6eddc, #d3c8b1 55%, #857a6a);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .6);
}

.neck__body {
    display: grid;
    grid-template-columns: var(--gut-width) minmax(0, 1fr);
    /* Tall enough that the twelfth fret's row still holds a note, short enough
       that the whole neck and the controls above it fit a phone screen. */
    height: clamp(320px, 50vh, 460px);
}

.neck__nums {
    display: grid;
    grid-template-rows: var(--rows);
}

.fretno {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 10px;
    line-height: 1;
    color: var(--nickel);
    font-variant-numeric: tabular-nums;
}

.fretno.is-marked { color: var(--bone-dim); }

.neck__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: var(--rows);
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, var(--rosewood), var(--rosewood-mid) 60%, var(--rosewood-dark));
    box-shadow:
        inset 13px 0 22px -13px rgba(0, 0, 0, .8),
        inset -13px 0 22px -13px rgba(0, 0, 0, .8);
    overflow: hidden;
}

.neck__wood {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Grain, raked off-vertical the same way the background board's is. */
.neck__wood::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: repeating-linear-gradient(
        93deg,
        rgba(255, 240, 220, .014) 0 2px,
        transparent 2px 11px
    );
}

.pearl {
    position: absolute;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 34% 28%, #fff9ea, #cec2a6 55%, #857c6b);
    opacity: .26;
}

/* The twelfth fret's pair sits between the second and third strings and the
   fourth and fifth, which on six equal columns is a third either side. */
.pearl--left  { margin-left: -16.667%; }
.pearl--right { margin-left:  16.667%; }

.gut {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(90, 84, 76, .9), rgba(216, 205, 186, .9), rgba(90, 84, 76, .9));
    opacity: .16;
}

.cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* The fret wire is the cell's own bottom edge, so the twelfth fret closes the
   board without a thirteenth row to hang it on. */
.neck__board .cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(214, 206, 192, .45);
}

.cell.is-live { background: rgba(245, 163, 60, .07); }

/* The note itself. The circle is always there and always the same size, so
   lighting one up moves nothing; on the tightest rows near the twelfth fret it
   gives way to the row rather than spilling over the fret wire. */
.dot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(26px, 84%);
    width: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--bone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.cell--open .dot { height: 26px; }

.cell.is-hidden .dot { opacity: 0; }

@media (hover: hover) {
    .cell:hover .dot { background: rgba(236, 226, 207, .13); }
}

/* Amber marks a note you asked about: tap one A and every A lights up. */
.cell.is-lit .dot {
    background: var(--glow);
    color: #22150a;
    text-shadow: none;
}

@media (max-width: 359px) {
    .neck { --gut-width: 18px; }
    .dot { font-size: 10.5px; }
}

.ref__table td:last-child,
.ref__table th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}