/* ============================================================
   ui-anima-run-hn.css — replay of a real UI-Anima run on a
   dense link-aggregator page. Everything is scoped .hnx-* /
   #hnx-run (state classes too: .hnx-on / .hnx-done / .hnx-live)
   so it can never collide with the global .act grid or with any
   other component on the page.

   Two page layers live in the same window: .hnx-hn (the original
   chrome — orange bar, numbered rows) and .hnx-cat (the delivered
   catalogue design). The window chrome, element map and floating
   panel use site tokens; the two page layers carry their own
   literal palettes because they are "someone else's website".

   Readability: nothing below 12px. Page content 13–14px.
   ============================================================ */

#hnx-run {
    --hnx-rose: #e0455f;
    --hnx-inert: #a87b1c;
    --hnx-ok: #22c55e;
    --hnx-h: 556px;
    --hnx-dock: 372px;
    --hnx-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

    margin: var(--space-xl, 48px) auto 0;
    max-width: 1160px;
}
#hnx-run figcaption {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--color-muted, #6c6b61);
}
#hnx-run figcaption b { font-weight: 500; color: var(--color-text, #1a1a17); }

.hnx-app {
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    background: var(--color-bg, #f5f4ef);
    box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26, 26, 23, .14));
    font-family: var(--font-sans, sans-serif);
    color: var(--color-text, #1a1a17);
}

/* ---- titlebar ---------------------------------------------- */
.hnx-tb {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 13px;
    background: var(--color-surface, #eae7dd);
    border-bottom: 1px solid var(--color-border, #e0ddd1);
    min-width: 0;
}
.hnx-dots { display: flex; gap: 6px; flex: none; }
.hnx-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.hnx-url {
    flex: 1 1 auto; min-width: 0; max-width: 420px; margin: 0 auto; text-align: center;
    font-family: var(--font-mono, monospace); font-size: 12.5px;
    color: var(--color-muted, #6c6b61);
    border: 1px solid var(--color-border, #e0ddd1);
    background: var(--color-bg, #f5f4ef);
    border-radius: 999px; padding: 4px 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hnx-tb-r { flex: none; display: flex; align-items: center; gap: 9px; min-width: 0; }
.hnx-badge {
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: var(--color-text, #1a1a17);
    border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 34%, var(--color-border, #e0ddd1));
    background: var(--accent-soft, rgba(217, 84, 43, .1));
    border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.hnx-badge .hnx-wired { color: var(--accent, #d9542b); font-weight: 500; }
.hnx-orig {
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: var(--color-muted, #6c6b61);
    background: var(--color-bg, #f5f4ef);
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: 999px; padding: 5px 11px;
    cursor: pointer; white-space: nowrap;
    transition: color .2s, border-color .2s, background-color .2s;
}
.hnx-orig:hover { color: var(--color-text, #1a1a17); border-color: var(--color-muted, #6c6b61); }
.hnx-orig[aria-pressed="true"] {
    color: var(--accent, #d9542b);
    border-color: var(--accent, #d9542b);
    background: var(--accent-soft, rgba(217, 84, 43, .1));
}
.hnx-orig:focus-visible, .hnx-replay:focus-visible, .hnx-send:focus-visible {
    outline: 2px solid var(--accent, #d9542b); outline-offset: 2px;
}

/* ---- stage -------------------------------------------------- */
.hnx-stage { position: relative; height: var(--hnx-h); overflow: hidden; background: #f6f6ef; }
.hnx-page {
    position: absolute; inset: 0;
    padding: 18px var(--hnx-dock) 18px 26px;
    overflow: hidden;
    transition: opacity .3s ease, transform .4s ease;
}

/* ============================================================
   LAYER 1 · the original page (its own literal palette)
   ============================================================ */
.hnx-hn { background: #f6f6ef; color: #000; opacity: 1; z-index: 1; }
.hnx-hn.hnx-veil { opacity: .22; transform: scale(.994); }

.hnx-hn-bar {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    background: #ff6600; padding: 4px 8px; min-width: 0;
    font-size: 13px; line-height: 1.35; color: #000;
    margin: -18px calc(-1 * var(--hnx-dock)) 12px -26px;
    padding-left: 26px; padding-right: 26px;
}
.hnx-hn-logo {
    flex: none; width: 17px; height: 17px;
    border: 1px solid #fff; background: #ff6600; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 15px; text-align: center;
}
.hnx-hn-brand { flex: none; font-weight: 700; font-size: 13.5px; }
.hnx-hn-nav { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hnx-hn-nav span + span::before { content: " | "; color: rgba(0, 0, 0, .55); }
.hnx-hn-login { margin-left: auto; flex: none; }

.hnx-hn-list { list-style: none; margin: 0; padding: 0; counter-reset: hnx-n; }
.hnx-row { position: relative; display: flex; gap: 6px; padding: 4px 0; min-width: 0; }
.hnx-row-n {
    flex: none; width: 22px; text-align: right;
    font-size: 13px; line-height: 1.5; color: #828282;
}
.hnx-row-v { flex: none; width: 11px; font-size: 12px; line-height: 1.55; color: #a1a19a; }
.hnx-row-b { display: block; min-width: 0; flex: 1; }
.hnx-row-t { display: block; font-size: 13.5px; line-height: 1.45; color: #000; }
.hnx-row-d { font-size: 12px; color: #828282; }
.hnx-row-s { display: block; font-size: 12px; line-height: 1.5; color: #828282; margin-top: 1px; }
.hnx-hn-more { display: inline-block; margin: 11px 0 0 39px; font-size: 13px; color: #828282; }

/* ---- phase 1 · identify overlay ----------------------------- */
.hnx-tag {
    position: absolute; top: 2px; right: 0; z-index: 3;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: #fff; background: var(--hnx-rose);
    border-radius: 3px; padding: 3px 6px; white-space: nowrap;
    opacity: 0; transform: translateY(-3px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.hnx-app.hnx-ident .hnx-tag { opacity: .94; transform: none; transition-delay: calc(var(--d, 0) * 1ms); }
.hnx-tag-warn { background: var(--hnx-inert); }
/* the bar runs full-bleed, so pull its tag back to the content column
   where the row tags line up */
.hnx-tag-bar { top: 4px; right: var(--hnx-dock); }
.hnx-app.hnx-ident .hnx-row,
.hnx-app.hnx-ident .hnx-hn-bar,
.hnx-app.hnx-ident .hnx-hn-more {
    outline: 1px solid color-mix(in srgb, var(--hnx-rose) 62%, transparent);
    outline-offset: 2px;
    animation: hnx-pop .5s ease both;
    animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes hnx-pop { from { outline-color: transparent; } to { outline-color: color-mix(in srgb, var(--hnx-rose) 62%, transparent); } }

.hnx-sweep {
    position: absolute; left: 0; right: 0; top: 0; height: 52px; z-index: 4;
    pointer-events: none; opacity: 0; transition: opacity .3s;
    background: linear-gradient(180deg, transparent, rgba(224, 69, 95, .09) 55%, rgba(224, 69, 95, .2) 97%, transparent);
    border-bottom: 1.5px solid var(--hnx-rose);
}
.hnx-app.hnx-ident .hnx-sweep { opacity: .9; animation: hnx-sweep 1.9s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes hnx-sweep { from { transform: translateY(-56px); } to { transform: translateY(var(--hnx-h)); } }

/* ============================================================
   LAYER 2 · the delivered catalogue design
   ============================================================ */
.hnx-cat {
    background: #f7f2ea; color: #211d18; z-index: 2;
    opacity: 0; pointer-events: none;
    display: flex; flex-direction: column;
}
.hnx-app.hnx-live .hnx-cat { opacity: 1; pointer-events: auto; }
.hnx-app.hnx-live .hnx-hn { opacity: 0; }
/* held "show original" wins over the live state (4 classes > 3) */
.hnx-app.hnx-live.hnx-orig-on .hnx-cat { opacity: 0; pointer-events: none; }
.hnx-app.hnx-live.hnx-orig-on .hnx-hn { opacity: 1; }

/* masthead, rule and section label run the full width of the window —
   the hero and the collection keep to the left column so the floating
   panel always sits in air, never on top of content */
.hnx-mast, .hnx-rule, .hnx-coll { margin-right: calc(26px - var(--hnx-dock)); }
.hnx-mast { text-align: center; border-bottom: 1px solid #ddd4c4; padding-bottom: 13px; }
.hnx-kick {
    font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; color: #9c8f7c;
}
.hnx-mast-t {
    font-family: var(--hnx-serif); font-size: 46px; line-height: 1.02;
    letter-spacing: .012em; color: #1c1813; margin: 7px 0 8px;
}
.hnx-mast-s {
    font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .26em;
    text-transform: uppercase; color: #8d8271;
}

.hnx-hero { display: flex; gap: 24px; align-items: flex-start; padding: 20px 0 0; min-width: 0; }
.hnx-frame {
    flex: none; width: 176px; height: 128px;
    background: #f7f2ea; border: 1px solid #ddd4c4; padding: 7px;
}
.hnx-frame > .hnx-glyph {
    display: block; width: 100%; height: 100%;
    background: #bd6440; padding: 21px 34px;
    fill: none; stroke: #f7ecdf; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.hnx-hero-b { min-width: 0; flex: 1; }
.hnx-hero-h {
    font-family: var(--hnx-serif); font-weight: 400;
    font-size: 30px; line-height: 1.16; letter-spacing: -.005em;
    color: #1c1813; margin: 0 0 12px; max-width: 470px;
}
.hnx-drop {
    float: left; font-family: var(--hnx-serif); font-weight: 400;
    font-size: 62px; line-height: .78; padding: 5px 8px 0 0; color: #bd6440;
}
.hnx-hero-m {
    clear: both;
    font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: #9c8f7c;
}

.hnx-rule { height: 1px; background: #ddd4c4; margin-top: 22px; }
.hnx-coll {
    font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .22em;
    text-transform: uppercase; color: #8d8271; margin-top: 12px; margin-bottom: 14px;
}
.hnx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; align-items: start; min-width: 0; }
.hnx-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hnx-col:nth-child(2) { padding-top: 20px; }
.hnx-col:nth-child(3) { padding-top: 10px; }
.hnx-card { border-top: 1px solid #ddd4c4; padding-top: 11px; min-width: 0; }
.hnx-c-dom {
    font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; color: #9c8f7c;
}
.hnx-c-t { font-family: var(--hnx-serif); font-size: 16px; line-height: 1.28; color: #211d18; margin-top: 5px; }

/* ---- morph-in stagger --------------------------------------- */
.hnx-cat.hnx-enter .hnx-mast,
.hnx-cat.hnx-enter .hnx-hero,
.hnx-cat.hnx-enter .hnx-rule,
.hnx-cat.hnx-enter .hnx-coll,
.hnx-cat.hnx-enter .hnx-grid {
    animation: hnx-rise .6s cubic-bezier(.22, .7, .25, 1) both;
    animation-delay: calc(var(--i, 0) * 95ms);
}
@keyframes hnx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Element map readout
   ============================================================ */
.hnx-map {
    position: absolute; top: 14px; right: 14px; width: 232px; z-index: 6;
    background: var(--color-bg, #f5f4ef);
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26, 26, 23, .12));
    overflow: hidden;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .4s, transform .4s;
}
.hnx-map.hnx-on { opacity: 1; transform: none; }
.hnx-map.hnx-on.hnx-dim { opacity: .5; }
.hnx-app.hnx-orig-on .hnx-map { opacity: 0; }
.hnx-map-h {
    font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-muted, #6c6b61);
    padding: 10px 12px 9px; border-bottom: 1px solid var(--color-border, #e0ddd1);
}
.hnx-mr {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 12px;
    font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.4;
    color: var(--color-muted, #6c6b61);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e0ddd1) 60%, transparent);
    opacity: 0; transform: translateX(6px);
    transition: opacity .3s, transform .3s;
}
.hnx-mr:last-child { border-bottom: none; }
.hnx-mr.hnx-on { opacity: 1; transform: none; }
.hnx-mr-k { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hnx-mr-v { flex: none; font-weight: 500; color: var(--accent, #d9542b); font-variant-numeric: tabular-nums; }
.hnx-mr.hnx-warn .hnx-mr-v { color: var(--hnx-inert); }
.hnx-mr.hnx-zero .hnx-mr-v { color: var(--color-muted, #6c6b61); }

/* ---- "original" flash caption ------------------------------- */
.hnx-flash {
    position: absolute; left: 22px; bottom: 18px; z-index: 7;
    background: var(--color-text, #1a1a17); color: var(--color-bg, #f5f4ef);
    font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em;
    padding: 8px 13px; border-radius: 999px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s, transform .3s; pointer-events: none;
}
.hnx-app.hnx-orig-on .hnx-flash { opacity: 1; transform: none; }

/* ============================================================
   Floating panel + telemetry
   ============================================================ */
.hnx-dock {
    position: absolute; right: 14px; bottom: 13px; z-index: 8;
    width: 344px; max-width: calc(100% - 28px);
    display: flex; flex-direction: column; gap: 7px;
}
.hnx-panel {
    background: var(--color-bg, #f5f4ef);
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26, 26, 23, .14));
    padding: 11px 12px;
    display: flex; flex-direction: column; gap: 9px;
    min-width: 0;
}
.hnx-p-top {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    color: var(--color-text, #1a1a17);
}
.hnx-p-logo { flex: none; width: 15px; height: 15px; border-radius: 5px; background: var(--accent, #d9542b); position: relative; }
.hnx-p-logo::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--color-bg, #f5f4ef); opacity: .92; }
.hnx-p-tag {
    margin-left: auto;
    font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-muted, #6c6b61);
    border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 3px 8px;
}

/* ---- the prompt field --------------------------------------- */
.hnx-field {
    position: relative;
    height: 56px; overflow: hidden;
    background: var(--color-surface, #eae7dd);
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: 8px; padding: 8px 10px;
    font-size: 13px; line-height: 1.5;
    color: var(--color-text, #1a1a17);
    cursor: pointer;
    transition: height .45s cubic-bezier(.22, .7, .25, 1), border-color .25s, background-color .25s;
}
.hnx-field:hover { border-color: color-mix(in srgb, var(--accent, #d9542b) 45%, var(--color-border, #e0ddd1)); }
/* while typing the field grows and scrolls, tail-first */
.hnx-field.hnx-busy {
    height: 92px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px);
    mask-image: linear-gradient(180deg, transparent 0, #000 20px);
}
/* once sent it settles back to an exact two-line record of the prompt.
   the clip lives on .hnx-typed, not the field: an element's overflow is
   cut at its PADDING box, so clipping on the field would leak the top
   sliver of line three into the bottom padding. */
.hnx-field.hnx-sent {
    height: 57px;   /* 8 + (2 × 19.5px line) + 8 + 2px border */
    background: var(--color-bg, #f5f4ef);
    border-color: color-mix(in srgb, var(--accent, #d9542b) 30%, var(--color-border, #e0ddd1));
}
.hnx-field.hnx-sent::after {
    content: "…";
    position: absolute; right: 9px; bottom: 8px;
    line-height: 19.5px; padding-left: 22px;
    color: var(--color-muted, #6c6b61);
    background: linear-gradient(90deg, transparent, var(--color-bg, #f5f4ef) 45%);
}
.hnx-ph { color: var(--color-muted, #6c6b61); }
.hnx-field.hnx-busy .hnx-ph, .hnx-field.hnx-sent .hnx-ph { display: none; }
.hnx-field.hnx-busy .hnx-typed { display: inline; }
.hnx-field.hnx-sent .hnx-typed { display: block; max-height: 39px; overflow: hidden; }
.hnx-typed { display: none; }
.hnx-caret {
    display: none; width: 6px; height: 14px; vertical-align: -2px;
    background: var(--accent, #d9542b);
    animation: hnx-blink 1s steps(1) infinite;
}
.hnx-field.hnx-busy .hnx-caret { display: inline-block; }
@keyframes hnx-blink { 50% { opacity: 0; } }

/* ---- the working block -------------------------------------- */
.hnx-work {
    display: none; flex-direction: column; gap: 7px;
    border-top: 1px solid var(--color-border, #e0ddd1); padding-top: 9px;
}
.hnx-work.hnx-on { display: flex; }
.hnx-work-h { font-size: 13px; font-weight: 500; color: var(--color-text, #1a1a17); }
.hnx-bar { height: 3px; border-radius: 999px; background: var(--color-surface, #eae7dd); overflow: hidden; position: relative; }
.hnx-bar > i {
    position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--accent, #d9542b), transparent);
    animation: hnx-shim 1.25s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes hnx-shim { from { transform: translateX(-105%); } to { transform: translateX(245%); } }
.hnx-steps { display: flex; flex-direction: column; gap: 4px; }
/* steps take no room until they stream in, so the panel stays compact
   in phase 1 and grows upward as the design steps land */
.hnx-step {
    display: none;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.45;
    color: var(--color-muted, #6c6b61);
    padding-left: 15px; position: relative;
    transition: color .3s;
}
.hnx-step.hnx-on { display: block; animation: hnx-stepin .34s cubic-bezier(.22, .7, .25, 1) both; }
@keyframes hnx-stepin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hnx-step::before {
    content: ""; position: absolute; left: 1px; top: 5px;
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--accent, #d9542b); opacity: .8;
    transition: background-color .3s;
}
.hnx-step.hnx-done { color: color-mix(in srgb, var(--color-muted, #6c6b61) 82%, transparent); }
.hnx-step.hnx-done::before { content: "\2713"; width: auto; height: auto; background: none; top: 0; left: 0; color: var(--hnx-ok); font-size: 12px; line-height: 1.45; }

/* ---- panel footer ------------------------------------------- */
.hnx-p-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hnx-model {
    flex: none;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: var(--color-muted, #6c6b61);
    border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 5px 9px;
    white-space: nowrap;
}
.hnx-replay {
    margin-left: auto; flex: none;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: var(--color-muted, #6c6b61);
    background: none; border: none; padding: 4px 2px; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 3px;
    white-space: nowrap; transition: color .2s;
}
.hnx-replay:hover { color: var(--accent, #d9542b); }
.hnx-send {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--accent, #d9542b);
    background: var(--accent, #d9542b);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .2s, box-shadow .25s;
}
.hnx-send svg { width: 15px; height: 15px; fill: none; stroke: var(--color-bg, #f5f4ef); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hnx-send.hnx-press { transform: scale(.88); box-shadow: 0 0 0 6px var(--accent-soft, rgba(217, 84, 43, .1)); }

/* ---- telemetry line ----------------------------------------- */
.hnx-tel {
    margin: 0; padding: 0 4px;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.4;
    color: var(--color-muted, #6c6b61);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .3s;
}
.hnx-tel b { font-weight: 500; color: var(--hnx-ok); }

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hnx-caret, .hnx-bar > i, .hnx-app.hnx-ident .hnx-sweep,
    .hnx-app.hnx-ident .hnx-row, .hnx-app.hnx-ident .hnx-hn-bar, .hnx-app.hnx-ident .hnx-hn-more { animation: none; }
    .hnx-cat.hnx-enter .hnx-mast, .hnx-cat.hnx-enter .hnx-hero, .hnx-cat.hnx-enter .hnx-rule,
    .hnx-cat.hnx-enter .hnx-coll, .hnx-cat.hnx-enter .hnx-grid { animation: none; }
    .hnx-page, .hnx-map, .hnx-mr, .hnx-tag, .hnx-field, .hnx-step, .hnx-flash,
    .hnx-send, .hnx-orig, .hnx-tel, .hnx-sweep { transition: none; }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
    .hnx-mast-t { font-size: 40px; }
    .hnx-hero-h { font-size: 26px; }
    .hnx-drop { font-size: 54px; }
    .hnx-frame { width: 154px; height: 116px; }
    /* two wider columns rather than three cramped ones */
    .hnx-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .hnx-col:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
    #hnx-run { --hnx-dock: 26px; --hnx-h: 660px; }
    .hnx-map { display: none; }
    .hnx-url { max-width: 220px; }
    .hnx-badge { display: none; }
    .hnx-page { padding: 16px 18px; }
    /* each layer reserves its own room for the dock: the original list
       is still on screen while the panel is at its tallest */
    .hnx-hn { padding-bottom: 320px; }
    .hnx-cat { padding-bottom: 214px; }
    .hnx-hn-bar { margin: -16px -18px 12px; padding-left: 18px; padding-right: 18px; }
    .hnx-hn-more { display: none; }
    .hnx-row:nth-child(n+6) { display: none; }
    .hnx-dock { width: auto; left: 12px; right: 12px; bottom: 11px; }
    .hnx-field { height: 74px; }
    .hnx-tag-bar { display: none; }   /* would land on "login" once the bar is full-bleed */
    .hnx-mast-t { font-size: 36px; }
    .hnx-hero-h { font-size: 24px; }
    .hnx-drop { font-size: 48px; }
    .hnx-frame { width: 132px; height: 100px; }
    .hnx-frame > .hnx-glyph { padding: 16px 26px; }
    .hnx-grid { gap: 0 20px; }
    .hnx-col:nth-child(2) { padding-top: 14px; }
    .hnx-col:nth-child(3) { padding-top: 7px; }
    .hnx-col .hnx-card:nth-child(n+2) { display: none; }
}
@media (max-width: 620px) {
    #hnx-run { --hnx-h: 672px; }
    .hnx-page { padding: 14px 15px; }
    .hnx-hn { padding-bottom: 286px; }
    .hnx-cat { padding-bottom: 226px; }
    /* one line per step keeps the panel short enough for the list above it */
    .hnx-step { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hnx-hn-bar { margin: -14px -15px 10px; padding-left: 15px; padding-right: 15px; }
    .hnx-hn-nav { display: none; }
    .hnx-row:nth-child(n+4) { display: none; }
    .hnx-mast-t { font-size: 31px; }
    .hnx-mast { padding-bottom: 9px; }
    .hnx-kick, .hnx-mast-s { letter-spacing: .15em; }
    .hnx-hero { gap: 14px; padding-top: 12px; }
    .hnx-frame { width: 96px; height: 78px; }
    .hnx-frame > .hnx-glyph { padding: 12px 18px; }
    .hnx-hero-h { font-size: 20px; margin-bottom: 8px; }
    .hnx-drop { font-size: 39px; padding: 3px 6px 0 0; }
    .hnx-rule { margin-top: 13px; }
    .hnx-coll { margin-top: 9px; margin-bottom: 10px; }
    .hnx-grid { grid-template-columns: 1fr; }
    .hnx-col { gap: 12px; }
    .hnx-col:nth-child(n+2) { display: none; }
    .hnx-col .hnx-card:nth-child(n+2) { display: block; }
    .hnx-flash { left: 12px; bottom: auto; top: 12px; }
    .hnx-tel { white-space: normal; }
}