/* =============================================================================
   domainchaos.com/whois/ — the instrument sheet
   -----------------------------------------------------------------------------
   Loaded after site.css and toast.css, and read as an extension of them: the
   page keeps the house nav, menu, footer, type and ink, and adds one object to
   the paper — an instrument, cut the way Braun cut them. Flat faces, one
   corner radius, labels in small capitals, a solid ink fill for whatever is
   chosen, and colour only where it carries a signal.

   THE FOUR RULES this sheet keeps, so the next edit keeps them too:

     corners   4px on every control. Segments, keys, fields, chips, tabs,
               cards. No pill radius anywhere in this file — the house
               edition pill is shared chrome and keeps its shape in site.css.
     height    one control height per row: 34px, 40px on a coarse pointer.
               A row of keys that are three different heights is a row of
               three different products.
     chosen    a chosen control is the ink, filled. Not a colour, not a
               shape, not a shadow.
     labels    uppercase, 10–11px, 600–700, tracked .12em.

   THE VARIETIES. Three instruments — T3 (the 1958 pocket radio), ET66 (the
   1987 calculator) and AB1 (the 1987 alarm clock) — each a set of --wx-*
   tokens on whatever carries data-variety. They change the instrument, the
   card-label accent, the lit key colour and a small texture in each card
   head. They do not change the layout, the type, or the house chrome: like
   NEXUS's palettes, they belong to the stage and not to the site.

   What each token paints (whois-art.js reads the same names):

     --wx-body         the instrument's casing
     --wx-face         its display surface: T3's tuning scale, ET66's LCD,
                       AB1's clock face
     --wx-ink          marks and type ON the face          (>= 4.5:1 on face)
     --wx-ink-2        secondary marks on the face         (>= 4.5:1 on face)
     --wx-line         hairlines on the instrument
     --wx-key          an unlit key; --wx-key-ink its legend (>= 4.5:1)
     --wx-key-lit      a lit key;   --wx-key-lit-ink its legend (>= 4.5:1)
     --wx-key-lit-2    the second lit colour (ET66's green C key) and ink
     --wx-accent       the needle / hand / signal, text-safe on the body
     --wx-accent-ink   type on an accent fill
     --wx-ok/-warn/-bad  signal lamps, text-safe on the body
     --wx-grille       the texture marks: T3's speaker dots, ET66's key
                       rhythm, AB1's ticks
     --wx-body-ink     type printed on the casing          (>= 4.5:1 on body)
     --wx-ring         the hairline that separates the object from the page
     --wx-label        the card-label accent, text-safe on the PAGE ground
     --wx-mark         the variety's pure signal colour, for marks too small
                       to be text (the square before a label, the LED)

   Every pair is measured in tests/page/contrast.py; the numbers are in
   tests/page/NOTES.md. The moon answers live in the marked html[data-dark]
   section at the bottom of this file — nothing above it depends on them.
   ========================================================================== */

/* ------------------------------------------------------------ page tokens */
.wx-page {
    --wx-r:     4px;
    --wx-h:     34px;
    --wx-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    /* A panel sunk one step into the paper, and the step below that. Ink at
       single-digit alpha; the moon answers are white at lower alphas, because
       5% white on near-black reads far stronger than 5% ink on white. */
    --wx-well:   rgba(30, 38, 43, .028);
    --wx-well-2: rgba(30, 38, 43, .055);
    /* A field's edge. --line is a rule between two things that are already
       there; an input is a box that has to announce itself. */
    --wx-edge:   rgba(30, 38, 43, .5);
    --wx-ink-hover: #000;
}
@media (pointer: coarse) { .wx-page { --wx-h: 40px; } }

/* ------------------------------------------------------- T3, the default
   Radio: a cool light-grey body, a white scale, the house ink, and Braun's
   signal orange-red — the fill at full strength, the type one step down so
   it holds 4.5:1 on both the face and the body. */
.wx, .wx-console, .wx-panel,
.wx[data-variety="t3"], .wx-console[data-variety="t3"], .wx-panel[data-variety="t3"] {
    --wx-body:        #E9E9E6;
    --wx-face:        #FFFFFF;
    --wx-ink:         #1E262B;
    --wx-ink-2:       #50575C;
    --wx-line:        rgba(30, 38, 43, .16);
    --wx-key:         #F3F3F0;
    --wx-key-ink:     #3A4247;
    --wx-key-lit:     #F26B2A;
    --wx-key-lit-ink: #1A0B03;
    --wx-key-lit-2:     #F26B2A;
    --wx-key-lit-2-ink: #1A0B03;
    --wx-accent:      #B03A0B;
    --wx-accent-ink:  #FFFFFF;
    --wx-ok:          #146C34;
    --wx-warn:        #9A4708;
    --wx-bad:         #A51A1A;
    --wx-grille:      #8E9396;
    --wx-body-ink:    #1E262B;
    --wx-ring:        rgba(30, 38, 43, .14);
    --wx-label:       #B03A0B;
    --wx-mark:        #F26B2A;
}

/* ----------------------------------------------------------------- ET66
   Calculator: a dark umber object even on paper — the instrument is a dark
   thing on a white page, as the real one was on a white desk. Cream legends
   on dark-brown keys; the lit keys are the = key's yellow and the C key's
   green. The card label cannot be yellow on white, so it takes the green,
   darkened until it reads as type. */
.wx[data-variety="et66"], .wx-console[data-variety="et66"], .wx-panel[data-variety="et66"] {
    --wx-body:        #2B2521;
    --wx-face:        #C3C8B0;
    --wx-ink:         #1B1F16;
    --wx-ink-2:       #434A39;
    --wx-line:        #6B6259;
    --wx-key:         #3D3530;
    --wx-key-ink:     #F1E8D6;
    --wx-key-lit:     #F2C200;
    --wx-key-lit-ink: #231B00;
    --wx-key-lit-2:     #4FAE45;
    --wx-key-lit-2-ink: #0E1F0A;
    --wx-accent:      #F2C200;
    --wx-accent-ink:  #231B00;
    --wx-ok:          #5CC150;
    --wx-warn:        #F59E0B;
    --wx-bad:         #FF7A70;
    --wx-grille:      #57504A;
    --wx-body-ink:    #E9E1D0;
    --wx-ring:        rgba(30, 38, 43, .22);
    --wx-label:       #3F6B17;
    --wx-mark:        #4FAE45;
}

/* ------------------------------------------------------------------ AB1
   Clock: a black face, white ticks, and the yellow second hand that is the
   whole of the object's colour. On paper the label is the yellow taken down
   to a dark gold, because yellow type on white is a highlighter. */
.wx[data-variety="ab1"], .wx-console[data-variety="ab1"], .wx-panel[data-variety="ab1"] {
    --wx-body:        #1A1A1A;
    --wx-face:        #0B0B0B;
    --wx-ink:         #F5F5F2;
    --wx-ink-2:       #B4B4AE;
    --wx-line:        rgba(255, 255, 255, .2);
    --wx-key:         #2A2A2A;
    --wx-key-ink:     #EDEDE8;
    --wx-key-lit:     #FFD400;
    --wx-key-lit-ink: #1A1600;
    --wx-key-lit-2:     #4ADE80;
    --wx-key-lit-2-ink: #0A1F10;
    --wx-accent:      #FFD400;
    --wx-accent-ink:  #1A1600;
    --wx-ok:          #4ADE80;
    --wx-warn:        #FBBF24;
    --wx-bad:         #FF6B6B;
    --wx-grille:      #3A3A3A;
    --wx-body-ink:    #F5F5F2;
    --wx-ring:        rgba(30, 38, 43, .22);
    --wx-label:       #6B5200;
    --wx-mark:        #FFD400;
}

/* The small texture each variety leaves in a panel head: T3's grille, a row
   of ET66 keys, AB1's minute ticks. Decoration, so it is aria-hidden in the
   markup and carries no information the page does not say in words. */
.wx-tex { display: block; flex: 0 0 auto; width: 34px; height: 10px; opacity: .9; }
.wx-tex,
[data-variety="t3"] .wx-tex {
    background: radial-gradient(circle, var(--wx-grille) 1.05px, transparent 1.45px) 0 0 / 5px 5px;
}
[data-variety="et66"] .wx-tex {
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--wx-body) 0 5px, transparent 5px 7px);
}
[data-variety="ab1"] .wx-tex {
    background:
        repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px) 0 100% / 100% 45% no-repeat,
        repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 15px) 0 0 / 100% 100% no-repeat;
}

/* =============================================================================
   THE PRIMITIVES — keys, segments, fields, switches
   ========================================================================== */
.wx-lbl {
    display: block; margin: 0 0 .4rem;
    font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-55);
}
.wx-lbl--inline { display: inline-flex; align-items: center; margin: 0; height: var(--wx-h); }

/* A key. The house .btn is 8px, sentence-case and lifts on hover; a Braun key
   does none of those things. */
.wx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: var(--wx-h); padding: 0 .9rem; min-width: 0;
    font: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1; white-space: nowrap; text-decoration: none;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--wx-r);
    cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.wx-btn:hover { border-color: var(--ink); }
.wx-btn[disabled], .wx-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; border-color: var(--line); }
/* `hidden` has to win over the display above: the browser's own [hidden] rule
   is weaker than any class, so the batch's Stop key stood beside Run on a
   fresh page, live and doing nothing (measured: display:flex while hidden). */
.wx-btn[hidden], .wx-ib[hidden], .wx-chip[hidden], .wx-seg__b[hidden] { display: none; }
.wx-btn svg { width: 13px; height: 13px; flex: 0 0 auto; display: block; }
.wx-btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wx-btn--ink:hover { background: var(--wx-ink-hover); border-color: var(--wx-ink-hover); }
.wx-btn--quiet { border-color: transparent; background: transparent; color: var(--ink-77); }
.wx-btn--quiet:hover { border-color: var(--line); color: var(--ink); }
.wx-btn[data-busy="1"] { cursor: progress; }
.wx-btn[data-done="1"] { border-color: var(--free); color: var(--free); }

/* The icon key — copy, pin, remove. Square, one glyph, the same 4px. */
.wx-ib {
    width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ink-55);
    border: 1px solid var(--line); border-radius: var(--wx-r); cursor: pointer;
    transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
@media (pointer: coarse) { .wx-ib { width: 36px; height: 36px; } }
.wx-ib:hover { color: var(--ink); border-color: var(--ink); }
.wx-ib svg { width: 12px; height: 12px; display: block; }
.wx-ib[data-done="1"] { color: var(--free); border-color: var(--free); }
.wx-ib[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Segments. Adjoining keys, one of them filled. */
.wx-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.wx-seg__b {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: var(--wx-h); min-width: 2.6rem; padding: 0 .8rem;
    font: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1; white-space: nowrap;
    color: var(--ink-77); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--wx-r);
    cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.wx-seg__b:hover { border-color: var(--ink); color: var(--ink); }
.wx-seg__b[aria-pressed="true"],
.wx-seg__b[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wx-seg__b small { font-size: .95em; font-weight: 600; letter-spacing: .04em; opacity: .72; }
.wx-seg__b[disabled] { opacity: .38; cursor: not-allowed; }
.wx-seg__b[disabled]:hover { border-color: var(--line); color: var(--ink-77); }

/* The variety key's swatch: the lit colour of that instrument, as a lamp. */
.wx-sw8 {
    width: 8px; height: 8px; flex: 0 0 auto; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(30, 38, 43, .28);
}
.wx-sw8--t3   { background: #F26B2A; }
.wx-sw8--et66 { background: linear-gradient(90deg, #F2C200 0 50%, #4FAE45 50% 100%); }
.wx-sw8--ab1  { background: #FFD400; box-shadow: 0 0 0 1px #1A1A1A, inset 0 0 0 2px #1A1A1A; }

/* A checkbox as a flat toggle key. The input is real and keeps its focus. */
.wx-sw {
    display: inline-flex; align-items: center; gap: .55rem;
    height: var(--wx-h); padding: 0 .8rem 0 .65rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-77); border: 1px solid var(--line); border-radius: var(--wx-r);
    cursor: pointer; user-select: none; background: var(--paper);
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.wx-sw:hover { border-color: var(--ink); color: var(--ink); }
.wx-sw input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); flex: 0 0 auto; }
.wx-sw:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.wx-sw:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A text field at control height. */
.wx-field {
    height: var(--wx-h); padding: 0 .7rem; min-width: 0;
    font: inherit; font-size: .84rem; font-weight: 500; color: var(--ink);
    background: var(--paper); border: 1px solid var(--wx-edge); border-radius: var(--wx-r);
    -webkit-appearance: none; appearance: none;
}
.wx-field::placeholder { color: var(--ink-55); font-weight: 400; }
.wx-field:focus { outline: none; border-color: var(--ink); }
.wx-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-field::-webkit-search-cancel-button { display: none; }

.wx-mono { font-family: var(--wx-mono); font-size: .92em; letter-spacing: 0; }
.wx-np { color: var(--ink-55); font-style: italic; font-weight: 400; }
.wx-a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wx-a:hover { text-decoration-color: currentColor; }

/* House chips (.st) inside this page take the same 4px as everything else. */
.wx-page .st { border-radius: var(--wx-r); }
.wx-page .st--reserved { color: var(--ink-77); background: transparent; }

/* The state lamp: a dot in the state's colour, for rows and chips. */
.wx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-55); }
.wx-dot[data-s="taken"]    { background: var(--taken); }
.wx-dot[data-s="free"]     { background: var(--free); }
.wx-dot[data-s="maybe"],
.wx-dot[data-s="unknown"]  { background: var(--unsure); }
.wx-dot[data-s="reserved"] { background: var(--ink-77); }
.wx-dot[data-s="queued"]   { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-55); }
.wx-dot[data-s="busy"]     { background: var(--ink-55); animation: wx-blink 1s steps(2, jump-none) infinite; }

/* =============================================================================
   THE CONSOLE — the hero band, held tight
   ========================================================================== */
.wx-hero { padding-block: clamp(34px, 5vw, 64px) clamp(26px, 3.6vw, 44px); }
.wx-hero__head {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: .8rem 3rem; align-items: end;
}
.wx-hero__head .eyebrow { grid-column: 1 / -1; margin-bottom: .2rem; }
.wx-hero__head h1 { margin: 0; }
.wx-hero__head .lede { margin: 0; font-size: 1rem; max-width: 52ch; }
@media (max-width: 860px) { .wx-hero__head { grid-template-columns: minmax(0, 1fr); } }

.wx-console {
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid var(--line); border-radius: var(--wx-r);
    background: var(--paper);
}
.wx-plate {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    min-height: 40px; padding: .3rem .5rem .3rem .95rem;
    border-bottom: 1px solid var(--line); background: var(--wx-well);
    font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-55); font-variant-numeric: tabular-nums;
}
.wx-plate__model {
    display: flex; align-items: center; gap: .6rem; margin: 0 auto 0 0; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-plate__model b { color: var(--ink); font-weight: 700; }
.wx-plate__n { white-space: nowrap; }
.wx-plate__n b { color: var(--ink); font-weight: 700; }
.wx-plate .tbtn { border-radius: var(--wx-r); height: 26px; flex: 0 0 auto; }
/* One line at every width: the plate is a nameplate, and a nameplate that
   wraps its switch onto a second row stops reading as one object. */
@media (max-width: 520px) { .wx-plate { flex-wrap: nowrap; } .wx-plate__n { display: none; } }
@media (max-width: 400px) { .wx-plate .wx-tex { display: none; } }

/* The LED. Round because a lamp is round; it is not a control. It is the
   variety's mark colour, and it blinks while the instrument is working. */
.wx-led {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--wx-mark); box-shadow: 0 0 0 1px var(--wx-ring);
}
.wx-console[data-busy="1"] .wx-led { animation: wx-blink .8s steps(2, jump-none) infinite; }
@keyframes wx-blink { 50% { opacity: .2; } }

.wx-console__body { padding: 1rem; display: grid; gap: .85rem; }
@media (max-width: 620px) { .wx-console__body { padding: .75rem; } }

/* The one large field. Its row has its own height — 56px for the field and
   the key beside it, the same 56 for both. */
.wx-q { display: flex; gap: 6px; min-width: 0; }
.wx-q__field {
    flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 1rem;
    font: inherit; font-size: clamp(1.02rem, 2.2vw, 1.3rem); font-weight: 500; letter-spacing: -.015em;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--wx-edge); border-radius: var(--wx-r);
    -webkit-appearance: none; appearance: none;
}
.wx-q__field::placeholder { color: var(--ink-55); font-weight: 400; }
.wx-q__field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30, 38, 43, .07); }
.wx-q__field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-q__field[aria-invalid="true"] { border-color: var(--taken); }
.wx-q__go {
    flex: 0 0 auto; height: 56px; min-width: 9.5rem; padding: 0 1.3rem;
    font-size: .72rem; letter-spacing: .16em;
}
@media (max-width: 520px) { .wx-q__go { min-width: 0; padding: 0 .95rem; } .wx-q__field { padding: 0 .75rem; } }
.wx-q__hint { margin: -.25rem 0 0; font-size: .78rem; color: var(--ink-55); min-height: 1.2em; }
.wx-q__hint[data-tone="bad"] { color: var(--taken); }

/* The control row: the three tabs and the three instruments. */
.wx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.wx-row__grp { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.wx-row__grp--end { margin-left: auto; }
@media (max-width: 700px) { .wx-row__grp--end { margin-left: 0; } }

.wx-try { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wx-try .wx-lbl--inline { margin-right: .35rem; }
.wx-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    height: var(--wx-h); padding: 0 .7rem;
    font: inherit; font-size: .8rem; font-weight: 500; letter-spacing: -.005em;
    color: var(--ink-77); background: transparent;
    border: 1px solid var(--line-soft); border-radius: var(--wx-r);
    cursor: pointer; white-space: nowrap; max-width: 100%;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.wx-chip:hover { border-color: var(--ink); color: var(--ink); }
.wx-chip span { overflow: hidden; text-overflow: ellipsis; }
.wx-chip--em { color: var(--ink); border-color: var(--line); }

/* The working line, in the instrument's own language. */
.wx-busy {
    display: flex; align-items: center; gap: .9rem;
    min-height: 48px; padding: .4rem .6rem .4rem .75rem;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--wx-well);
}
.wx-busy[hidden] { display: none; }
.wx-busy__scan { flex: 0 0 auto; width: 96px; height: 32px; display: block; }
.wx-busy__t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .86rem; color: var(--ink-77); }
.wx-busy__t b { color: var(--ink); font-weight: 600; }
.wx-busy__ms { font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-55); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .wx-busy__scan { width: 72px; } .wx-busy__ms { display: none; } }

/* The recent strip: the last few names, a tap from being opened again. */
.wx-recent {
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem .5rem .5rem .95rem; border-top: 1px solid var(--line);
    background: var(--wx-well);
}
.wx-recent[hidden] { display: none; }
.wx-recent__list {
    display: flex; gap: 4px; min-width: 0; flex: 1 1 auto;
    overflow-x: auto; scrollbar-width: thin; padding-bottom: 1px;
}
.wx-recent__list .wx-chip { background: var(--paper); border-color: var(--line); flex: 0 0 auto; }
.wx-kbd { font-size: .72rem; color: var(--ink-55); margin: 0; }
@media (max-width: 700px) { .wx-kbd { display: none; } }

/* ---------------------------------------------------------- the loaders
   Small drawings of each instrument at work. The real instruments are
   whois-art.js's; these only say "working" in the same accent. */
.wx-scan__grille { fill: var(--wx-grille); }
.wx-scan__rule   { stroke: var(--ink); stroke-width: 1; }
.wx-scan__tick   { stroke: var(--ink-55); stroke-width: 1; }
.wx-scan__needle { stroke: var(--wx-mark); stroke-width: 2; stroke-linecap: square; animation: wx-tune 1.7s var(--ease) infinite alternate; }
.wx-scan__body   { fill: var(--wx-body); }
.wx-scan__lcd    { fill: var(--wx-face); }
.wx-scan__seg    { fill: var(--wx-ink); animation: wx-lcd 1.1s steps(1, end) infinite; animation-delay: calc(var(--d, 0) * .11s); }
.wx-scan__key    { fill: var(--wx-key); }
.wx-scan__key--lit  { fill: var(--wx-key-lit); }
.wx-scan__key--lit2 { fill: var(--wx-key-lit-2); }
.wx-scan__face   { fill: var(--wx-face); stroke: var(--wx-ring); stroke-width: 1; }
.wx-scan__mark   { stroke: var(--wx-ink); stroke-width: 1.2; }
.wx-scan__hand   { stroke: var(--wx-accent); stroke-width: 1.6; stroke-linecap: round; transform-box: view-box; animation: wx-sweep 2.4s linear infinite; }
.wx-scan__hub    { fill: var(--wx-accent); }
@keyframes wx-tune  { from { transform: translateX(0); } to { transform: translateX(64px); } }
@keyframes wx-lcd   { 0% { opacity: 1; } 50% { opacity: .12; } }
@keyframes wx-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =============================================================================
   THE REPORT
   ========================================================================== */
.wx-report { padding-block: 0 clamp(44px, 6vw, 88px); }
.wx-report[hidden] { display: none; }
/* One track, floored at zero: an implicit auto column takes the widest
   child's min-content, and at 310px that pushed the whole report 34px past
   the edge of the phone. */
.wx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.wx > * { min-width: 0; }
.wx[hidden] { display: none; }
.wx[aria-busy="true"] > * { opacity: .38; transition: opacity .3s var(--ease); pointer-events: none; }

/* The idle page: the twelve panels a report is made of, as a catalogue. */
.wx-idle {
    border: 1px solid var(--line); border-radius: var(--wx-r);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
    background: var(--line);
    gap: 1px; overflow: hidden;
}
.wx-idle[hidden] { display: none; }
.wx-idle__head {
    grid-column: 1 / -1; background: var(--paper);
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1rem;
}
.wx-idle__head p { margin: 0; font-size: .86rem; color: var(--ink-55); max-width: 70ch; }
.wx-idle__item { background: var(--paper); padding: .9rem 1rem 1rem; min-width: 0; }
.wx-idle__n { font-size: .625rem; font-weight: 700; letter-spacing: .12em; color: var(--wx-label); font-variant-numeric: tabular-nums; }
.wx-idle__item h3 { font-size: .95rem; font-weight: 600; letter-spacing: -.015em; margin: .25rem 0 .2rem; }
.wx-idle__item p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); }

/* ------------------------------------------------------------- the head */
.wx-head {
    display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 1.4rem; padding: 1rem;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
@media (max-width: 860px) { .wx-head { grid-template-columns: minmax(0, 1fr); } }

.wx-inst {
    margin: 0; min-width: 0; min-height: 11rem;
    display: flex; align-items: center; justify-content: center;
    padding: .75rem; border-radius: var(--wx-r);
    background: var(--wx-body); box-shadow: inset 0 0 0 1px var(--wx-ring);
}
.wx-inst > svg, .wx-inst > canvas { display: block; width: 100%; height: auto; max-height: 20rem; }
@media (max-width: 860px) { .wx-inst { max-width: 26rem; width: 100%; justify-self: center; } }

.wx-id { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.wx-kicker {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0;
    font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
.wx-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--wx-mark); box-shadow: 0 0 0 1px var(--wx-ring); flex: 0 0 auto; }
.wx-name {
    margin: 0; font-size: clamp(1.7rem, 4.2vw, 2.9rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.04;
    overflow-wrap: anywhere; color: var(--ink);
}
.wx-forms { margin: -.2rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font-size: .8rem; color: var(--ink-55); }
.wx-forms b { font-weight: 700; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; margin-right: .35rem; }
.wx-forms span { overflow-wrap: anywhere; }
.wx-staterow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }
.wx-staterow .st { font-size: .66rem; padding: .36rem .7rem; }
.wx-basis { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.wx-note { margin: 0; font-size: .92rem; color: var(--ink-77); max-width: 68ch; }
.wx-banner {
    margin: 0; padding: .6rem .8rem; font-size: .84rem; color: var(--ink-77);
    border: 1px solid var(--unsure); border-left-width: 3px; border-radius: var(--wx-r); background: var(--unsure-wash);
}
.wx-banner b { color: var(--ink); }

/* The four big readouts under the name. Numerals at weight 200, labels as
   control labels: a dial, not a paragraph. */
.wx-reads {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.wx-read { padding: .7rem .9rem .7rem 0; min-width: 0; }
.wx-read + .wx-read { padding-left: .9rem; border-left: 1px solid var(--line-soft); }
.wx-read__k { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.wx-read__v {
    display: block; margin-top: .2rem; font-size: 1.35rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.15;
    color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.wx-read__v small { display: block; margin-top: .15rem; font-size: .56em; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-55); }
.wx-card .wx-read__v small { display: inline; margin: 0 0 0 .25rem; }
.wx-read__v.is-empty { color: var(--ink-55); font-size: 1rem; font-style: italic; font-weight: 400; }
/* Under 520px the readouts run one or two to a row depending on the width,
   so "the first child has no top rule" was only right in one column: in two,
   the top-right cell drew its own rule under the container's (measured at
   375: Expires at top 1px with a 1px border, Registered with none). Every
   cell carries its rule and sits 1px up, and the container clips the first
   row's, so whatever the column count the top edge is one line. */
@media (max-width: 520px) {
    .wx-reads { overflow: hidden; }
    .wx-read + .wx-read { padding-left: 0; border-left: 0; }
    .wx-read { border-top: 1px solid var(--line-soft); margin-top: -1px; }
}

/* The export bar — one row of keys, one height. */
.wx-exp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wx-exp__sep { width: 1px; height: 20px; background: var(--line); margin: 0 .3rem; }
@media (max-width: 520px) { .wx-exp__sep { display: none; } }
.wx-meta { margin: 0; font-size: .74rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- the narrative */
.wx-narr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 1.4rem 2.6rem; padding: 1.3rem 1.2rem 1.4rem;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
@media (max-width: 960px) { .wx-narr { grid-template-columns: minmax(0, 1fr); } }
.wx-narr__text { max-width: 70ch; }
.wx-narr__text p { margin: 0 0 .95rem; font-size: .98rem; line-height: 1.68; color: var(--ink-77); }
.wx-narr__text p:first-of-type { font-size: 1.1rem; font-weight: 300; color: var(--ink); line-height: 1.58; }
.wx-narr__text p:last-child { margin-bottom: 0; }
.wx-narr__side { min-width: 0; }
.wx-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 .9rem; font-size: .82rem; }
.wx-facts dt { padding: .45rem 0; border-top: 1px solid var(--line-soft); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.wx-facts dd { margin: 0; padding: .4rem 0; border-top: 1px solid var(--line-soft); color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the cards */
.wx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.wx-card { grid-column: span 12; }
@media (min-width: 700px) {
    .wx-card--7, .wx-card--5, .wx-card--6 { grid-column: span 6; }
}
@media (min-width: 1060px) {
    .wx-card--7 { grid-column: span 7; }
    .wx-card--5 { grid-column: span 5; }
    .wx-card--6 { grid-column: span 6; }
}
.wx-card {
    min-width: 0; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
.wx-card__h {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    min-height: 44px; padding: .3rem .45rem .3rem .9rem;
    border-bottom: 1px solid var(--line);
}
.wx-card__n { font-size: .625rem; font-weight: 700; letter-spacing: .12em; color: var(--wx-label); font-variant-numeric: tabular-nums; }
.wx-card__t { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.wx-card__h .wx-tex { margin-left: .2rem; }
.wx-card__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.wx-card__b { flex: 1 1 auto; padding: .85rem .9rem .95rem; min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
/* Unclassed paragraphs only: a bare `.wx-card__b > p` outranks every classed
   paragraph in a card (.wx-big, .wx-sub, .wx-meta) and flattened the
   registrar's name to body size. */
.wx-card__b > p:not([class]) { margin: 0; font-size: .88rem; color: var(--ink-77); }
.wx-card__b > p { margin: 0; }
.wx-card__b > .wx-sub { margin: .2rem 0 -.3rem; }
.wx-sub { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin: 0; }

/* The reveal. A beat of rise per card, nothing that travels far. */
html.js .wx-card, html.js .wx-head, html.js .wx-narr, html.js .wx-free { animation: wx-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes wx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Definition rows — the card's workhorse. */
.wx-dl { margin: 0; display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: 0 1rem; font-size: .86rem; }
.wx-dl dt {
    padding: .5rem 0 .45rem; border-top: 1px solid var(--line-soft);
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
    line-height: 1.9;
}
.wx-dl dd {
    margin: 0; padding: .42rem 0; border-top: 1px solid var(--line-soft);
    color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
.wx-dl dt:first-of-type, .wx-dl dt:first-of-type + dd { border-top: 0; }
.wx-dl dd > .wx-v { min-width: 0; flex: 1 1 auto; }
.wx-dl dd small { display: block; color: var(--ink-55); font-size: .78rem; margin-top: .1rem; }
@media (max-width: 420px) {
    .wx-dl { grid-template-columns: minmax(0, 1fr); }
    .wx-dl dt { padding-bottom: 0; }
    .wx-dl dd { border-top: 0; padding-top: .1rem; }
}

.wx-big { margin: 0; font-size: 1.4rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.wx-big small { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--ink-55); }

/* Flags on a contact or a status: small, square, in the colour of what they
   report. */
.wx-flag {
    display: inline-flex; align-items: center; height: 20px; padding: 0 .45rem;
    font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid currentColor; border-radius: var(--wx-r); color: var(--ink-55);
}
.wx-flag--warn { color: var(--unsure); }
.wx-flag--ok   { color: var(--free); }
.wx-flag--bad  { color: var(--taken); }
.wx-flag--info { color: var(--info); }
.wx-flags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Lamps — a verdict with its light. Square lamps, 2px corners: at 10px the
   4px rule would make them circles, and a circle here is a state dot. */
.wx-lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--wx-r); overflow: hidden; }
.wx-lamp { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; background: var(--paper); min-width: 0; }
.wx-lamp i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; margin-top: .3rem; box-shadow: inset 0 0 0 1px var(--ink-55); }
.wx-lamp[data-on="1"] i { background: var(--wx-key-lit); box-shadow: 0 0 0 1px var(--wx-ring); }
.wx-lamp[data-on="bad"] i { background: var(--taken); box-shadow: none; }
.wx-lamp b { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.wx-lamp span { display: block; font-size: .84rem; color: var(--ink); line-height: 1.35; margin-top: .1rem; }

/* Status meanings. */
.wx-codes { list-style: none; margin: 0; padding: 0; }
.wx-codes li { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: .15rem 1rem; padding: .55rem 0; border-top: 1px solid var(--line-soft); }
.wx-codes li:first-child { border-top: 0; }
.wx-codes code { font-family: var(--wx-mono); font-size: .8rem; color: var(--ink); overflow-wrap: anywhere; }
.wx-codes .wx-flags { margin-top: .3rem; }
.wx-codes p { margin: 0; font-size: .84rem; color: var(--ink-77); line-height: 1.5; }
.wx-codes p + p { color: var(--ink-55); margin-top: .15rem; }
.wx-codes li[data-sev="bad"] code { color: var(--taken); }
.wx-codes li[data-sev="warn"] code { color: var(--unsure); }
@media (max-width: 560px) { .wx-codes li { grid-template-columns: minmax(0, 1fr); } }

.wx-bank { min-width: 0; }
.wx-bank-fb { display: flex; flex-wrap: wrap; gap: 4px; }
.wx-keycap {
    display: inline-flex; align-items: center; height: 30px; padding: 0 .6rem;
    font-family: var(--wx-mono); font-size: .72rem;
    border-radius: var(--wx-r); background: var(--wx-key-lit); color: var(--wx-key-lit-ink);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

/* Lists of hosts, addresses and lifecycle stages. */
.wx-list { list-style: none; margin: 0; padding: 0; }
.wx-list li { display: flex; align-items: baseline; gap: .6rem; padding: .42rem 0; border-top: 1px solid var(--line-soft); font-size: .86rem; min-width: 0; }
.wx-list li:first-child { border-top: 0; }
.wx-list .wx-mono { color: var(--ink); overflow-wrap: anywhere; }
.wx-list__main { flex: 1 1 auto; min-width: 0; }
.wx-list__side { flex: 0 0 auto; color: var(--ink-55); font-size: .78rem; font-variant-numeric: tabular-nums; text-align: right; }
.wx-list small { display: block; font-size: .76rem; color: var(--ink-55); overflow-wrap: anywhere; font-family: var(--wx-mono); }

.wx-life li[data-st="past"] .wx-list__main { color: var(--ink-55); }
.wx-life li[data-st="now"]  { font-weight: 600; }
.wx-life li[data-st="now"] .wx-list__main::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .45rem; border-radius: 1px; background: var(--wx-mark); vertical-align: middle; }

.wx-tl { min-width: 0; }
.wx-tl > svg { display: block; width: 100%; height: auto; }

.wx-warnnote { margin: 0; padding: .55rem .7rem; font-size: .82rem; color: var(--ink-77); border-left: 2px solid var(--unsure); background: var(--unsure-wash); }

/* Tables — DNS, sources, every field, batch results. */
.wx-scroll { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.wx-table { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.wx-table th {
    text-align: left; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-55); padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.wx-table td { padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.wx-table tr:last-child td { border-bottom: 0; }
.wx-table td.wx-mono { overflow-wrap: anywhere; word-break: break-word; }
/* The second line of a cell — the exact query a WHOIS server was sent. */
.wx-table td small { display: block; margin-top: .1rem; font-size: .9em; color: var(--ink-55); }
.wx-table td.wx-t { color: var(--ink-55); font-size: .66rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.wx-table td.wx-n { white-space: nowrap; color: var(--ink-55); }
.wx-table td.wx-c { width: 1px; padding-right: 0; }
.wx-table tr.wx-secrow td {
    padding-top: .9rem; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--wx-label); border-bottom: 1px solid var(--line);
}
.wx-table--dns td:nth-child(2) { width: 100%; }
.wx-table--fields td:first-child { width: 34%; color: var(--ink-55); }
@media (max-width: 520px) { .wx-table--fields td:first-child { width: 42%; } }

.wx-ok  { color: var(--free); }
.wx-bad { color: var(--taken); }
.wx-mid { color: var(--unsure); }

.wx-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wx-filter .wx-field { flex: 1 1 12rem; }
.wx-filter__n { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Contacts: five small panels in a row of equal columns. */
.wx-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--wx-r); overflow: hidden; }
.wx-contact { background: var(--paper); padding: .7rem .8rem .8rem; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.wx-contact h4 { margin: 0; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wx-contact .wx-dl { grid-template-columns: 4.6rem minmax(0, 1fr); font-size: .8rem; }
.wx-contact .wx-dl dt { font-size: .56rem; }

/* Mail & security: the grade dial beside what it measured. */
.wx-mailtop { display: flex; gap: 1rem; align-items: center; }
.wx-grade { flex: 0 0 auto; width: 84px; }
.wx-grade > svg { display: block; width: 84px; height: auto; }
.wx-grade-fb {
    display: flex; align-items: center; justify-content: center; width: 72px; height: 72px;
    font-size: 2.2rem; font-weight: 300; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--wx-r);
}
.wx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wx-checks li { display: flex; gap: .55rem; align-items: flex-start; padding: .38rem 0; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--ink-77); }
.wx-checks li:first-child { border-top: 0; }
.wx-checks i { width: 10px; height: 10px; border-radius: 2px; margin-top: .32rem; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--ink-55); }
.wx-checks li[data-ok="1"] i { background: var(--free); box-shadow: none; }
.wx-checks li[data-ok="0"] i { background: var(--taken); box-shadow: none; }

/* Raw: the untouched text. */
.wx-rawtabs { display: flex; flex-wrap: wrap; gap: 3px; }
.wx-pre {
    margin: 0; max-height: 30rem; overflow: auto;
    padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--wx-well);
    font-family: var(--wx-mono); font-size: .74rem; line-height: 1.55; color: var(--ink);
    white-space: pre; tab-size: 2;
}
.wx-pre[data-wrap="1"] { white-space: pre-wrap; overflow-wrap: anywhere; }
.wx-pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-rawpane[hidden] { display: none; }
.wx-rawpane__h { display: none; }

/* ----------------------------------------------------- available names
   The one layout on this page allowed to be glad about something. */
.wx-free {
    display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.6rem;
    padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
    position: relative; overflow: hidden;
}
.wx-free::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--free);
}
.wx-free[data-tone="maybe"]::before { background: var(--unsure); }
@media (max-width: 860px) { .wx-free { grid-template-columns: minmax(0, 1fr); } }
.wx-free__main { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.wx-free__h {
    margin: 0; font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 200; letter-spacing: -.045em; line-height: 1.04; color: var(--ink);
    overflow-wrap: anywhere;
}
.wx-free__h b { font-weight: 600; }
.wx-free__h em { font-style: normal; font-weight: 600; color: var(--free); }
.wx-free[data-tone="maybe"] .wx-free__h em { color: var(--unsure); }
.wx-free__lede { margin: 0; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--ink-77); max-width: 62ch; }
.wx-free .buys { margin: 0; gap: 4px; }
.wx-free .buy { border-radius: var(--wx-r); height: var(--wx-h); padding: 0 .85rem; font-size: .78rem; }

/* Twelve keys that light in turn, once, when a name comes back free. */
.wx-cheer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 22rem; }
.wx-cheer i { height: 10px; border-radius: 2px; background: var(--wx-well-2); animation: wx-cheer .5s var(--ease) both; animation-delay: calc(var(--k) * 45ms + 150ms); }
.wx-free[data-tone="maybe"] .wx-cheer i { animation-name: wx-cheer-maybe; }
@keyframes wx-cheer       { to { background: var(--free); } }
@keyframes wx-cheer-maybe { to { background: var(--unsure); } }
.wx-others { display: flex; flex-wrap: wrap; gap: 4px; }

/* ----------------------------------------------------------- error panel */
.wx-err {
    padding: 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--unsure);
    border-radius: var(--wx-r); background: var(--paper);
    display: grid; gap: .7rem;
}
.wx-err h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 300; letter-spacing: -.03em; }
.wx-err p { margin: 0; color: var(--ink-77); max-width: 66ch; }
.wx-err[data-tone="invalid"] { border-left-color: var(--ink-55); }

/* The loading panel, for the first lookup of a visit. */
.wx-loading {
    display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.4rem; align-items: center;
    padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
.wx-loading .wx-inst svg { max-width: 18rem; margin: 0 auto; }
.wx-loading h2 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 200; letter-spacing: -.04em; overflow-wrap: anywhere; }
.wx-loading p { margin: 0; color: var(--ink-55); font-size: .9rem; }
@media (max-width: 860px) { .wx-loading { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   BATCH and HISTORY — the other two tabs
   ========================================================================== */
.wx-panel { padding-block: 0 clamp(44px, 6vw, 88px); }
.wx-panel[hidden] { display: none; }
.wx-box { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); }
.wx-box__h {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    min-height: 44px; padding: .3rem .5rem .3rem .95rem; border-bottom: 1px solid var(--line); background: var(--wx-well);
}
/* One row, always: at 375 "Batch — paste, drop, or choose a file" filled the
   line and the grille wrapped onto one of its own under it, a stray row of
   dots. The title may break over two lines instead; the grille stays put. */
.wx-box__h { flex-wrap: nowrap; }
.wx-box__h .wx-card__t { margin-right: auto; min-width: 0; }
.wx-box__b { padding: 1rem; display: grid; gap: .9rem; min-width: 0; }
@media (max-width: 620px) { .wx-box__b { padding: .75rem; } }
.wx-box + .wx-box { margin-top: 1rem; }

.wx-bin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 900px) { .wx-bin { grid-template-columns: minmax(0, 1fr); } }

.wx-drop { position: relative; min-width: 0; }
.wx-area {
    display: block; width: 100%; min-height: 12.5rem; resize: vertical;
    padding: .7rem .8rem; font-family: var(--wx-mono); font-size: .82rem; line-height: 1.55;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--wx-edge); border-radius: var(--wx-r);
    -webkit-appearance: none; appearance: none;
}
.wx-area::placeholder { color: var(--ink-55); }
.wx-area:focus { outline: none; border-color: var(--ink); }
.wx-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-drop__over {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center;
    padding: 1rem; border: 2px dashed var(--ink); border-radius: var(--wx-r);
    background: rgba(255, 255, 255, .92); color: var(--ink);
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    pointer-events: none;
}
.wx-drop.is-over .wx-drop__over { display: flex; }
.wx-drop__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; }
.wx-drop__row p { margin: 0; font-size: .76rem; color: var(--ink-55); flex: 1 1 14rem; }
.wx-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The live preview of what the parser found. */
.wx-prev { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.wx-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--wx-r); }
.wx-count { padding: .55rem .6rem; min-width: 0; }
.wx-count + .wx-count { border-left: 1px solid var(--line-soft); }
.wx-count b { display: block; font-size: 1.45rem; font-weight: 200; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-count span { display: block; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
@media (max-width: 420px) { .wx-counts { grid-template-columns: 1fr 1fr; } .wx-count:nth-child(3) { border-left: 0; } .wx-count:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }
.wx-found { display: flex; flex-wrap: wrap; gap: 3px; max-height: 8.4rem; overflow: auto; }
.wx-found span {
    display: inline-flex; align-items: center; height: 24px; padding: 0 .5rem;
    font-family: var(--wx-mono); font-size: .72rem; color: var(--ink);
    border: 1px solid var(--line-soft); border-radius: var(--wx-r); white-space: nowrap;
}
.wx-found span.is-more { font-family: inherit; color: var(--ink-55); border-style: dashed; }
.wx-prev details { border-top: 1px solid var(--line-soft); padding-top: .5rem; }
.wx-prev summary { cursor: pointer; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-77); }
.wx-prev summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-why { list-style: none; margin: .45rem 0 0; padding: 0; max-height: 11rem; overflow: auto; font-size: .8rem; }
.wx-why li { display: flex; gap: .6rem; align-items: baseline; padding: .28rem 0; border-top: 1px solid var(--line-soft); }
.wx-why li:first-child { border-top: 0; }
.wx-why code { font-family: var(--wx-mono); font-size: .76rem; color: var(--ink); overflow-wrap: anywhere; flex: 0 1 auto; min-width: 0; }
.wx-why span { color: var(--ink-55); flex: 1 1 auto; }
.wx-why label { display: flex; gap: .55rem; align-items: baseline; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.wx-why input { accent-color: var(--ink); margin: 0; flex: 0 0 auto; transform: translateY(1px); }
.wx-prev__empty { margin: 0; font-size: .86rem; color: var(--ink-55); }

.wx-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.wx-opts .wx-row__grp { gap: .5rem; }
.wx-runrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wx-runrow .wx-btn--ink { min-width: 9rem; }
.wx-pace { margin: 0; font-size: .78rem; color: var(--ink-55); flex: 1 1 18rem; }

.wx-meterbox { display: grid; gap: .5rem; }
.wx-meterbox[hidden] { display: none; }
.wx-meter-fb { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; }
.wx-meter-fb span { height: 12px; border-radius: 1px; background: var(--wx-well-2); }
.wx-meter-fb span.is-on { background: var(--wx-key-lit); }
.wx-meter-fb__l { display: block; margin-top: .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.wx-sum { margin: 0; font-size: .82rem; color: var(--ink-77); font-variant-numeric: tabular-nums; }
.wx-sum b { color: var(--ink); font-weight: 600; }

.wx-results[hidden] { display: none; }
.wx-rtools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.wx-rtools .wx-exp { margin-left: auto; }
@media (max-width: 700px) { .wx-rtools .wx-exp { margin-left: 0; } }
.wx-table--batch td, .wx-table--batch th { padding-right: .9rem; }
.wx-table--batch tbody tr { cursor: pointer; }
.wx-table--batch tbody tr:hover td { background: var(--wx-well); }
.wx-table--batch td:first-child { white-space: nowrap; }
.wx-rowbtn {
    display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left;
}
.wx-rowbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.wx-sort {
    display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.wx-sort:hover { color: var(--ink); }
.wx-sort i { font-style: normal; opacity: .35; font-size: .9em; }
th[aria-sort="ascending"] .wx-sort, th[aria-sort="descending"] .wx-sort { color: var(--ink); }
th[aria-sort="ascending"] .wx-sort i, th[aria-sort="descending"] .wx-sort i { opacity: 1; }
.wx-stcell { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .78rem; }
.wx-empty { margin: 0; padding: 1.2rem 0; text-align: center; font-size: .86rem; color: var(--ink-55); }
.wx-empty[hidden] { display: none; }

/* History. */
.wx-hlist { list-style: none; margin: 0; padding: 0; }
.wx-hrow {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .9rem;
    padding: .5rem 0; border-top: 1px solid var(--line-soft);
}
.wx-hrow:first-child { border-top: 0; }
.wx-hrow__open {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-column: 1 / 3; align-items: center; gap: .15rem .8rem;
    padding: .2rem 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); min-width: 0;
}
.wx-hrow__open:hover .wx-hrow__d { text-decoration: underline; text-underline-offset: 3px; }
.wx-hrow__d { font-weight: 600; font-size: .95rem; letter-spacing: -.015em; overflow-wrap: anywhere; }
.wx-hrow__m { grid-column: 2; font-size: .78rem; color: var(--ink-55); overflow-wrap: anywhere; }
.wx-hrow__t { font-size: .74rem; color: var(--ink-55); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-hrow__a { display: flex; gap: 4px; }
.wx-hsec { margin: .8rem 0 .2rem; }
.wx-hsec:first-child { margin-top: 0; }
@media (max-width: 520px) { .wx-hrow { grid-template-columns: auto minmax(0, 1fr) auto; } .wx-hrow__t { grid-column: 2; grid-row: 2; } }

/* =============================================================================
   THE WRITTEN BAND — "What a WHOIS tells you"
   ========================================================================== */
.wx-guide__in { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.4rem 4rem; margin-top: 2.4rem; }
@media (max-width: 960px) { .wx-guide__in { grid-template-columns: 1fr; } }
/* Grid items keep a content-based minimum width, and the status table's
   unbreakable code cells made that minimum 388px on a 375px phone. With the
   floor at zero, the table's own scroll box does the containing. */
.wx-guide__in > * { min-width: 0; }
.wx-toc { position: sticky; top: calc(var(--nav-h) + 1.4rem); align-self: start; }
@media (max-width: 960px) { .wx-toc { position: static; } }
.wx-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: toc; }
.wx-toc li { border-bottom: 1px solid var(--line-soft); counter-increment: toc; }
.wx-toc a {
    display: flex; gap: .7rem; padding: .5rem 0; text-decoration: none;
    font-size: .82rem; font-weight: 500; color: var(--ink-77);
}
.wx-toc a::before { content: counter(toc, decimal-leading-zero); font-size: .625rem; font-weight: 700; letter-spacing: .12em; color: var(--wx-label, var(--accent)); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.wx-toc a:hover { color: var(--ink); }
@media (max-width: 960px) { .wx-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); column-gap: 1.4rem; } }

.wx-art { max-width: 70ch; }
.wx-art section + section { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.wx-art h3 { font-size: 1.36rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.25; margin: 0 0 .9rem; }
.wx-art h3 span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.wx-art p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.7; }
.wx-art p:last-child { margin-bottom: 0; }
.wx-art strong { color: var(--ink); font-weight: 600; }
.wx-art code {
    font-family: var(--wx-mono); font-size: .86em; padding: .05em .35em;
    border: 1px solid var(--line); border-radius: var(--wx-r); color: var(--ink);
}
.wx-art ol.wx-steps { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: st; }
.wx-art ol.wx-steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: .55rem 0; border-top: 1px solid var(--line-soft); font-size: .95rem; line-height: 1.6; }
.wx-art ol.wx-steps li::before { content: counter(st, decimal-leading-zero); font-size: .625rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); padding-top: .3rem; font-variant-numeric: tabular-nums; }
.wx-gt { margin: .4rem 0 1.2rem; }
.wx-gt table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.wx-gt th { text-align: left; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wx-gt td { padding: .55rem .9rem .55rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.wx-gt td:first-child { white-space: nowrap; }
.wx-gt td code { white-space: nowrap; }
.wx-gt td.wx-n { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }

/* =============================================================================
   REDUCED MOTION — no sweep, no travel, no blinking
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wx-scan__needle, .wx-scan__seg, .wx-scan__hand,
    .wx-console[data-busy="1"] .wx-led, .wx-dot[data-s="busy"] { animation: none; }
    .wx-scan__needle { transform: translateX(32px); }
    .wx-scan__hand   { transform: rotate(72deg); }
    html.js .wx-card, html.js .wx-head, html.js .wx-narr, html.js .wx-free { animation: none; }
    .wx-cheer i { animation-duration: 1ms; animation-delay: 0ms; }
    .wx-btn, .wx-seg__b, .wx-chip, .wx-ib, .wx-sw { transition: none; }
    .wx[aria-busy="true"] > * { transition: none; }
}

/* =============================================================================
   PRINT — only the report
   A4, the colours exactly as drawn, no chrome, no controls, cards kept whole.
   html.wx-printing (set by WXArt.print() for the length of a print) applies
   the same cut on screen, so what the dialog previews is what the page is.
   ========================================================================== */
@page { size: A4; margin: 14mm 12mm; }
@media print {
    html, body { background: #fff !important; }
    /* The rem scale, taken down for A4: every size in the report is in rem,
       so one number makes the whole of it print at reading size rather than
       screen size. */
    html { font-size: 11.5px; }
    body { font-size: 11px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .nav, .menu, .skip, .wx-hero, .wx-panel, .wx-guide, .wx-never, .foot, #toast-host, .toast,
    .wx-exp, .wx-card__tools, .wx-filter, .wx-rawtabs, .wx-idle, .wx-busy, .wx-q, .labs-credit,
    .wx-free .buys, .wx-others, .wx-cheer, .wx-rawpane--json, .wx-tex { display: none !important; }
    .wx-report { display: block !important; padding: 0 !important; }
    .wrap { max-width: none; padding: 0; }
    .wx { gap: 8px; }
    .wx-card, .wx-head, .wx-free, .wx-contact, .wx-lamps, .wx-codes li, .wx-dl dd, .wx-table tr, .wx-list li { break-inside: avoid; }
    .wx-card, .wx-head, .wx-narr, .wx-free { animation: none !important; }
    /* A card taller than a page cannot avoid breaking; asking it to only
       pushes it whole onto a fresh page and leaves the one before it half
       empty — which is how the first proof of this report ran to 30 pages.
       The long ones (the status meanings, the DNS table, every field, the
       raw text) and the narrative break between rows instead; rows, lamps
       and card heads stay whole. */
    .wx-narr, .wx-card:has(.wx-codes, .wx-table--dns, .wx-table--fields, .wx-pre) { break-inside: auto; }
    .wx-card__h, .wx-sub, .wx-kicker { break-after: avoid; }
    .wx-narr p { orphans: 3; widows: 3; }
    .wx-grid { display: block; }
    .wx-card { margin-top: 8px; }
    /* The WHOIS text prints; the RDAP JSON does not. The :not() is the
       point — a bare .wx-rawpane here outranked the hide rule above by
       coming later, and the first proof printed eight pages of JSON. */
    .wx-rawpane:not(.wx-rawpane--json) { display: block !important; break-inside: auto; }
    .wx-rawpane__h { display: block; margin: .6rem 0 .3rem; }
    .wx-pre { max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 8.5px; }
    .wx-found, .wx-why { max-height: none; }
    .wx-scroll { overflow: visible; }
    a { text-decoration: none; }
}
html.wx-printing .nav, html.wx-printing .menu, html.wx-printing .wx-hero, html.wx-printing .wx-panel,
html.wx-printing .wx-guide, html.wx-printing .wx-never, html.wx-printing .foot, html.wx-printing #toast-host,
html.wx-printing .wx-exp, html.wx-printing .wx-card__tools, html.wx-printing .wx-filter,
html.wx-printing .wx-rawtabs, html.wx-printing .wx-idle, html.wx-printing .labs-credit,
html.wx-printing .wx-free .buys, html.wx-printing .wx-others, html.wx-printing .wx-cheer,
html.wx-printing .wx-rawpane--json, html.wx-printing .wx-tex { display: none !important; }
html.wx-printing .wx-report { display: block !important; padding-top: 1rem; }
html.wx-printing .wx-card, html.wx-printing .wx-head, html.wx-printing .wx-narr { break-inside: avoid; animation: none; }
html.wx-printing .wx-rawpane:not(.wx-rawpane--json) { display: block !important; }
html.wx-printing .wx-rawpane__h { display: block; margin: .6rem 0 .3rem; }
html.wx-printing .wx-pre { max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }

/* =============================================================================
   html[data-dark] — THIS PAGE'S MOON ANSWERS
   -----------------------------------------------------------------------------
   dark.css is the site's override sheet and stays the site's. What follows is
   this page's own: the literals above that a token could not carry, and the
   three varieties' moon palettes. Every selector begins html[data-dark], so on
   the paper edition not one of them matches anything.
   ========================================================================== */
html[data-dark] .wx-page {
    --wx-well:   rgba(255, 255, 255, .03);
    --wx-well-2: rgba(255, 255, 255, .07);
    --wx-edge:   rgba(255, 255, 255, .34);
    /* #000 on a near-black page is a key that disappears under the cursor. */
    --wx-ink-hover: rgba(255, 255, 255, .86);
}
html[data-dark] .wx-q__field,
html[data-dark] .wx-field,
html[data-dark] .wx-area { background: rgba(255, 255, 255, .04); }
html[data-dark] .wx-q__field:focus { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
html[data-dark] .wx-drop__over { background: rgba(12, 17, 22, .92); border-color: var(--ink); }
html[data-dark] .wx-sw8 { box-shadow: 0 0 0 1px rgba(255, 255, 255, .34); }
html[data-dark] .wx-sw8--ab1 { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), inset 0 0 0 2px #1A1A1A; }
html[data-dark] .wx-keycap { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }

/* T3 on the moon: a charcoal body, a near-black scale, warm white marks,
   and the orange lifted until it holds on the dark ground. */
html[data-dark] .wx, html[data-dark] .wx-console, html[data-dark] .wx-panel,
html[data-dark] .wx[data-variety="t3"], html[data-dark] .wx-console[data-variety="t3"], html[data-dark] .wx-panel[data-variety="t3"] {
    --wx-body:        #23272C;
    --wx-face:        #121518;
    --wx-ink:         #F2EEE6;
    --wx-ink-2:       #B4AEA4;
    --wx-line:        rgba(242, 238, 230, .16);
    --wx-key:         #2C3137;
    --wx-key-ink:     #E6E1D8;
    --wx-key-lit:     #FF7A33;
    --wx-key-lit-ink: #1A0B03;
    --wx-key-lit-2:     #FF7A33;
    --wx-key-lit-2-ink: #1A0B03;
    --wx-accent:      #FF8F52;
    --wx-accent-ink:  #1A0B03;
    --wx-ok:          #4ADE80;
    --wx-warn:        #FBBF24;
    --wx-bad:         #F87171;
    --wx-grille:      #5E646A;
    --wx-body-ink:    #F2EEE6;
    --wx-ring:        rgba(255, 255, 255, .14);
    --wx-label:       #FF8F52;
    --wx-mark:        #FF7A33;
}
/* ET66 on the moon: the same object, lifted a step so the umber still reads
   as a thing on the ground rather than a hole in it. */
html[data-dark] .wx[data-variety="et66"], html[data-dark] .wx-console[data-variety="et66"], html[data-dark] .wx-panel[data-variety="et66"] {
    --wx-body:        #3A322C;
    --wx-face:        #AEB49B;
    --wx-ink:         #1B1F16;
    --wx-ink-2:       #3A4031;
    --wx-line:        #7A7066;
    --wx-key:         #4A413A;
    --wx-key-ink:     #F1E8D6;
    --wx-key-lit:     #F5C518;
    --wx-key-lit-ink: #231B00;
    --wx-key-lit-2:     #5BBE50;
    --wx-key-lit-2-ink: #0E1F0A;
    --wx-accent:      #F5C518;
    --wx-accent-ink:  #231B00;
    --wx-ok:          #6CD160;
    --wx-warn:        #FBBF24;
    --wx-bad:         #FF8A80;
    --wx-grille:      #62594F;
    --wx-body-ink:    #EDE5D4;
    --wx-ring:        rgba(255, 255, 255, .22);
    --wx-label:       #F5C518;
    --wx-mark:        #5BBE50;
}
/* AB1 on the moon: the face stays black — that is the object — and gains a
   hairline ring, because black on #0C1116 is 1.07:1 and a face that cannot
   be told from the page is not a face. */
html[data-dark] .wx[data-variety="ab1"], html[data-dark] .wx-console[data-variety="ab1"], html[data-dark] .wx-panel[data-variety="ab1"] {
    --wx-body:        #161616;
    --wx-face:        #050505;
    --wx-ink:         #F5F5F2;
    --wx-ink-2:       #B4B4AE;
    --wx-line:        rgba(255, 255, 255, .22);
    --wx-key:         #2A2A2A;
    --wx-key-ink:     #EDEDE8;
    --wx-key-lit:     #FFD400;
    --wx-key-lit-ink: #1A1600;
    --wx-key-lit-2:     #4ADE80;
    --wx-key-lit-2-ink: #0A1F10;
    --wx-accent:      #FFD400;
    --wx-accent-ink:  #1A1600;
    --wx-ok:          #4ADE80;
    --wx-warn:        #FBBF24;
    --wx-bad:         #FF6B6B;
    --wx-grille:      #3A3A3A;
    --wx-body-ink:    #F5F5F2;
    --wx-ring:        rgba(255, 255, 255, .34);
    --wx-label:       #FFD400;
    --wx-mark:        #FFD400;
}
html[data-dark] [data-variety="et66"] .wx-tex {
    background: repeating-linear-gradient(90deg, var(--wx-key) 0 5px, transparent 5px 7px);
}