/* ============================================================================
   DEMO -- the animated panel + phone in the landing hero (index.php).

   Lifted verbatim from the old home.css: only the rules that style the demo's
   own classes, the @keyframes they run, and its colour tokens, re-scoped from
   :root to .hm-shot so they cannot collide with the page's tokens (site.css).
   ========================================================================= */

.hm-shot {
    --mono: "LatinNum", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --gold: #d97706;
}
:root[data-theme="dark"] .hm-shot { --gold: #fbbf24; }

.hm-shot {
    --x: 1;

    --ground:   #f7f8fc;
    --card:     #ffffff;
    --band:     #f1f3fb;
    --ink:      #1b2539;
    --ink-2:    #5d6a82;          /* 5.9:1 on card */
    --ink-3:    #6b7689;          /* 4.6:1 on card */
    --line:     #edf0f7;          /* chip / control hairline            */
    --rule:     #e4e9f2;          /* divider INSIDE a card              */
    --edge:     #d7deec;          /* a card's boundary; outranks --rule */
    --field:    #eef1f8;          /* one step recessed off the card     */
    --inset:    #e1e6f2;          /* 1.25:1 on card -- the tool's track */

    --brand:     #2563eb;
    --brand-2:   #1d4ed8;
    --brand-ink: #1d4ed8;         /* 6.4:1 on card */
    --brand-rgb: 37 99 235;

    --violet-rgb: 139 92 246;
    --green-rgb:  16 163 110;
    --amber-rgb:  217 119 6;
    --pink-rgb:   236 72 153;

    --ok:     #0f9d6b;  --ok-rgb:   15 157 107;
    --warn:   #b45309;  --warn-rgb: 180 83 9;
    --bad:    #dc2626;  --bad-rgb:  220 38 38;
    /* Text-weight variants. The saturated hues above are tuned as indicators and
       land near 3:1 as small text on their own .09/.12 tints; dots, borders and
       fills keep them, anything readable takes the -ink variant. */
    --ok-ink:   #0a7a52;          /* 5.4:1 on card, 4.8:1 on the .10 tint */
    --warn-ink: #92400e;          /* 6.2:1 on the amber .12 tint */
    --bad-ink:  #b91c1c;          /* 5.5:1 on the bad .10 tint */

    --r:    18px;
    --r-sm: 12px;
    --r-pill: 999px;

    /* three stacked layers rather than one hard drop — reads as air, not edge */
    --sh-1:  0 1px 2px rgb(16 24 40 / .06);
    --sh-phone: 0 1px 2px rgb(16 24 40 / .1),
                0 20px 40px -20px rgb(16 24 40 / .55);
    --sh:    0 1px 2px rgb(16 24 40 / .03),
             0 8px 20px -10px rgb(16 24 40 / .08),
             0 24px 48px -24px rgb(16 24 40 / .12);
    --sh-up: 0 1px 2px rgb(16 24 40 / .04),
             0 14px 30px -12px rgb(16 24 40 / .12),
             0 40px 70px -32px rgb(16 24 40 / .20);

    --dur: .18s;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --wrap: 1140px;
    --gut: clamp(18px, 4vw, 32px);
}
:root[data-theme="dark"] .hm-shot {
    --ground: #0d1220;
    --card:   #151c2e;
    --band:   #121829;
    --ink:    #eef2f9;
    --ink-2:  #a3aec3;
    --ink-3:  #8391a9;
    --line:   #212a40;
    --rule:   #273255;
    --edge:   #354161;
    --field:  #232d49;
    --inset:  #05070c;

    --brand:     #4f80ff;
    --brand-2:   #3d6ae8;
    --brand-ink: #9ab6ff;
    --brand-rgb: 79 128 255;

    --ok:   #34d399;  --ok-rgb:   52 211 153;
    --warn: #fbbf24;  --warn-rgb: 251 191 36;
    --bad:  #f87171;  --bad-rgb:  248 113 113;
    /* These four had no dark values, so the op stripes kept the LIGHT green and
       amber while the pills beside them switched -- two greens and two ambers
       side by side. Aliasing makes it structurally impossible to drift again. */
    --green-rgb: var(--ok-rgb);
    --amber-rgb: var(--warn-rgb);
    --violet-rgb: 167 139 250;    /* the 500 is only 4.41:1 on --ground */
    --pink-rgb:   244 114 182;
    /* the dark hues already clear 4.5:1 on their dark tints */
    --ok-ink: var(--ok);  --warn-ink: var(--warn);  --bad-ink: var(--bad);

    /* on --ground black is already at the floor, so lift comes from a rim */
    --sh-1:  0 1px 3px rgb(0 0 0 / .55);
    --sh-phone: 0 0 0 1px rgb(255 255 255 / .10),
                0 18px 30px -14px rgb(0 0 0 / .92);
    --sh:    0 0 0 1px rgb(255 255 255 / .06),
             0 1px 2px rgb(0 0 0 / .3),
             0 8px 20px -10px rgb(0 0 0 / .45),
             0 24px 48px -24px rgb(0 0 0 / .6);
    --sh-up: 0 1px 2px rgb(0 0 0 / .35),
             0 14px 30px -12px rgb(0 0 0 / .5),
             0 40px 70px -32px rgb(0 0 0 / .75);
}
[dir="rtl"] .hm-shot { --x: -1;
}
.hm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.hm-shot { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto;
}
.hm-stage {
    position: relative;
    display: grid; align-items: center; gap: 66px;
    grid-template-columns: minmax(0, 1fr) 168px;
}
.hm-shot::before {
    content: ""; position: absolute; z-index: -1;
    inset-inline: 6%; inset-block-start: 14%; inset-block-end: 6%;
    border-radius: 50%; filter: blur(60px);
    background: linear-gradient(90deg, rgb(var(--brand-rgb) / .28), rgb(var(--violet-rgb) / .24));
    opacity: .55;
}
:root[data-theme="dark"] .hm-shot::before { opacity: .38;
}
.hm-win {
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--card); box-shadow: var(--sh-up); overflow: hidden;
}
.hm-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px; border-block-end: 1px solid var(--line); background: var(--card);
}
.hm-bar i { width: 9px; height: 9px; border-radius: 50%; display: block;
}
.hm-bar i:nth-of-type(1) { background: #ff5f57;
}
.hm-bar i:nth-of-type(2) { background: #febc2e;
}
.hm-bar i:nth-of-type(3) { background: #28c840;
}
.hm-url {
    flex: 1 1 auto; min-width: 0; margin-inline-start: 6px;
    padding: 4px 11px; border-radius: var(--r-pill);
    background: var(--band); font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    direction: ltr; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-panes { display: grid; grid-template-columns: 226px minmax(0, 1fr) 232px; min-height: 430px;
}
.hm-pane { padding: 15px; min-width: 0;
}
.hm-pane + .hm-pane { border-inline-start: 1px solid var(--line);
}
.hm-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-ink); margin: 0 0 10px;
}
.hm-state {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px; margin-bottom: 14px; border-radius: var(--r-sm);
    background: rgb(var(--ok-rgb) / .10); border: 1px solid rgb(var(--ok-rgb) / .3);
    font-size: 10px; font-weight: 700; color: var(--ok-ink);
}
.hm-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / .55);
}
.hm-op {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--card);
    border-inline-start: 3px solid var(--brand);
    font-size: 11px; font-weight: 600; color: var(--ink);
    box-shadow: var(--sh-1);
}
.hm-op.a { --op-accent: rgb(var(--green-rgb)); border-inline-start-color: var(--op-accent);
}
.hm-op.c { --op-accent: rgb(var(--amber-rgb)); border-inline-start-color: var(--op-accent);
}
.hm-op b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-op i { font-style: normal; font-family: inherit; font-size: 10px; color: var(--ink-2);
           flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.hm-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-content: start;
}
.hm-cell { padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); min-width: 0;
}
.hm-cell span { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.hm-prog-t { flex: 1 1 auto; height: 5px; border-radius: var(--r-pill); background: var(--inset); overflow: hidden;
}
.hm-prog-f {
    height: 100%; width: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brand), rgb(var(--violet-rgb)));
    transform-origin: left center;
}
:root[dir="rtl"] .hm-prog-f { transform-origin: right center;
}
.hm-prog-n { font-size: 10.5px; font-weight: 700; color: var(--ink-2);
}
.hm-log { font-size: 10px; line-height: 1.85; direction: ltr; text-align: start;
}
.hm-log p { display: flex; gap: 7px; margin: 0 0 7px;
}
.hm-log time { color: var(--ink-3); font-family: var(--mono); font-size: 9px; flex-shrink: 0;
}
.hm-log span { color: var(--ink-2); flex: 1; min-width: 0;
}
.hm-log span:not([dir]) { unicode-bidi: plaintext;
}
.hm-log .g { color: var(--ok-ink);
}
.hm-log .b { color: var(--brand-ink);
}
.hm-log .w { color: var(--warn-ink);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes hm-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none }
    }
    .hm-shot { animation: hm-in .5s var(--ease) .18s backwards;
    }
}
@media (max-width: 900px) {
    .hm-panes { grid-template-columns: minmax(0, 1fr); min-height: 0;
    }
    .hm-pane + .hm-pane { border-inline-start: 0; border-block-start: 1px solid var(--line);
    }
}
@media (max-width: 560px) {
    .hm-cells { grid-template-columns: minmax(0, 1fr);
    }
}
.hm-panes { display: grid; grid-template-columns: 232px minmax(0, 1fr) 246px; min-height: 560px;
}
.hm-pane { padding: 14px; min-width: 0; display: flex; flex-direction: column;
}
.hm-pane + .hm-pane { border-inline-start: 1px solid var(--line);
}
.hm-main-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.hm-title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); width: 100%;
}
.hm-srv {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--card);
    font-size: 9.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.hm-srv .hm-dot { width: 6px; height: 6px; background: var(--ok);
}
.hm-scroll { position: relative; flex: 1 1 auto; min-height: 0;
}
.hm-grp { margin-bottom: 14px;
}
.hm-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.hm-cell {
    padding: 8px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--line); min-width: 0; background: var(--card);
}
.hm-cell.wide { grid-column: 1 / -1;
}
.hm-cell span { display: block; font-size: 7.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.hm-cell b { display: block;
    font-family: "LatinNum", "Cascadia Mono", "SF Mono", Consolas, "Yekan Bakh", ui-monospace, monospace;
    font-size: 10px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext;
}
.hm-cell.wide b { font-size: 9px;
}
.hm-foot {
    margin-block-start: auto; padding-block-start: 12px;
    border-block-start: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px;
}
.hm-stop {
    padding: 6px 14px; border-radius: var(--r-sm);
    background: var(--band); border: 1px solid var(--line);
    color: var(--bad-ink);
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
}
.hm-prog-t { flex: 1 1 auto; height: 6px; border-radius: var(--r-pill); background: var(--inset); overflow: hidden;
}
.hm-prog-f { height: 100%; width: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand), rgb(var(--violet-rgb))); transform-origin: left center;
}
:root[dir="rtl"] .hm-prog-f { transform-origin: right center;
}
.hm-prog-n { position: relative; display: inline-grid; min-width: 32px; text-align: end; font-size: 10px; font-weight: 700; color: var(--ink-2);
}
.hm-pn { grid-area: 1 / 1;
}
.hm-pn { opacity: 0;
}
.hm-pn.n100 { opacity: 1;
}
.hm-user { margin-block-start: auto; padding-block-start: 12px; border-block-start: 1px solid var(--line);
}
.hm-user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 10px; color: var(--ink-2);
}
.hm-credit { padding: 3px 9px; border-radius: var(--r-pill); background: rgb(var(--amber-rgb) / .12); border: 1px solid rgb(var(--amber-rgb) / .3); color: var(--warn-ink); font-size: 9.5px; font-weight: 800;
}
.hm-addc { display: block; text-align: center; padding: 7px; border-radius: var(--r-sm); background: rgb(var(--ok-rgb) / .09); border: 1px solid rgb(var(--ok-rgb) / .3); color: var(--ok-ink); font-size: 9.5px; font-weight: 700;
}
.hm-cmd { margin-block-start: 12px; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--field);
}
.hm-cmd-t { margin: 0 0 8px; font-size: 9.5px; font-weight: 700; color: var(--ink-2);
}
.hm-cmd-t span { font-family: var(--mono); color: var(--brand-ink);
}
.hm-cmd-modes { display: flex; gap: 6px; margin-bottom: 8px;
}
.hm-cmd-modes span { flex: 1 1 0; text-align: center; padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); font-size: 8.5px; font-weight: 700; color: var(--ink-2);
}
.hm-cmd-modes span.on { border-color: rgb(var(--brand-rgb) / .45); color: var(--brand-ink); background: rgb(var(--brand-rgb) / .07);
}
.hm-cmd-row { display: flex; gap: 6px; align-items: center;
}
.hm-cmd-box { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); font-family: var(--mono); font-size: 9px; color: var(--ink-2); white-space: nowrap; overflow: hidden;
}
.hm-cmd-box i { font-style: normal; color: var(--brand-ink); font-weight: 700;
}
.hm-cmd-go { flex: 0 0 auto; padding: 5px 10px; border-radius: 6px; background: var(--brand-2); color: #fff; font-size: 8.5px; font-weight: 800;
}
.hm-mini { display: flex; gap: 5px; margin-block-start: 8px;
}
.hm-mini span { flex: 1 1 0; text-align: center; padding: 5px 2px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); font-size: 8px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-sfoot { margin: 9px 0 0; text-align: center; font-family: var(--mono); font-size: 8px; color: var(--ink-3);
}
.hm-empty {
    position: absolute; inset-inline: 0; inset-block-start: 26%;
    margin: 0; text-align: center; font-size: 11px; line-height: 1.7;
    color: var(--ink-2);        /* 4.92:1 on the recessed pane; --ink-3 is 4.14 */
    opacity: 0;                 /* rest = the finished run: the readout is up */
}
.mi-h2 { font-size: 11px; color: #cfd8ea; margin-block-end: 12px;
}
.mi-state { position: relative; display: grid; margin: 18px 0 0; min-height: 13px;
}
.mi-ms { grid-area: 1 / 1; font-size: 8px; letter-spacing: .02em; color: #7c879b; text-align: center;
}
.mi-ms.m1,
.mi-ms.m2,
.mi-ms.m3,
.mi-ms.m4 { opacity: 0;
}
.mi-ms.m5 { color: #2ecc8f;
}
.mi-pbar { display: block; width: 80px; height: 3px; margin-block-start: 9px; border-radius: var(--r-pill); background: #1a2130; overflow: hidden;
}
.mi-pbar i { display: block; height: 100%; width: 100%; border-radius: var(--r-pill); background: #2ecc8f; transform-origin: left center;
}
.hm-point {
    position: absolute; inset-inline-end: -54px; inset-block-start: 50%;
    width: 50px; color: var(--brand);
    filter: drop-shadow(0 2px 6px rgb(var(--brand-rgb) / .45));
    transform: translateY(-50%) scaleX(var(--x));
    opacity: 0; pointer-events: none;
}
.hm-point svg { width: 100%; height: auto; display: block;
}
.hm-point.on-key {
    inset-inline-end: auto;
    inset-inline-start: calc(100% + 7px);
    width: 31px;
    filter: drop-shadow(0 1px 4px rgb(var(--brand-rgb) / .5));
    transform: translateY(-50%);
}
.hm-state { position: relative; display: grid;
}
.hm-st { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.hm-st.s1,
.hm-st.s3 { opacity: 0;
}
.hm-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.hm-cursor { display: none;
}
.hm-log { min-height: 0; flex: 1 1 auto;
}
.hm-log p { margin: 0 0 5px;
}
.hm-phone { justify-self: center;
}
.hm-phone-body {
    position: relative; width: 168px; height: 356px;
    border-radius: 27px;
    background: linear-gradient(160deg, #2b3243, #12161f);
    border: 1px solid #39414f;
    box-shadow: var(--sh-phone);
    padding: 8px;
    --mi-key: #4a5365;
}
:root[data-theme="dark"] .hm-phone-body {
    background: linear-gradient(160deg, #3d465c, #2a3348);   /* 1.98:1 / 1.48:1 */
    border-color: #616e8c;                                   /* 3.66:1 vs page  */
    --mi-key: #6c7893;                                       /* 4.22:1 vs page  */
}
:root[data-theme="dark"] .hm-phone-scr { box-shadow: inset 0 0 0 1px #2b3448;
}
.hm-phone-cam { position: absolute; inset-inline-start: 50%; inset-block-start: 13px; width: 6px; height: 6px; border-radius: 50%; background: #05070b; transform: translateX(-50%); z-index: 2;
}
.hm-key { position: absolute; inset-inline-end: -2px; width: 3px; border-radius: 2px; background: var(--mi-key);
}
.hm-key.vol-up { inset-block-start: 80px;  height: 28px;
}
.hm-key.vol-dn { inset-block-start: 114px; height: 28px;
}
.hm-key.pwr { inset-block-start: 158px; height: 36px;
}
.hm-phone-scr { position: relative; display: grid; width: 100%; height: 100%; border-radius: 20px; background: #05070c; overflow: hidden; direction: ltr;
}
.mi-scene { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0;
}
.mi-menu { align-items: center; padding: 28px 11px 13px;
}
.mi-h { font-size: 16px; font-weight: 400; color: #cfd8ea;
}
.mi-sub { font-size: 8px; color: #7c879b; margin-block-start: 2px;
}
.mi-items { list-style: none; margin: 24px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px;
}
.mi-items li { padding: 8px 6px; border-radius: 3px; border: 1px solid #262d3b; font-size: 9px; color: #b9c3d6; text-align: center;
}
.mi-hint { margin-block-start: auto; font-size: 7px; line-height: 1.7; color: #7c879b; text-align: center;
}
.mi-items .mi-i3 { background: #1f6fe5; border-color: #1f6fe5; color: #fff;
}
.mi-conn { align-items: center; justify-content: center; padding: 22px 12px 16px;
}
.mi-frame { position: relative; width: 80px; height: 112px; border: 1px solid #2ecc8f; border-radius: 2px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
}
.mi-nav { display: flex; gap: 13px;
}
.mi-nav i { width: 5px; height: 5px; border: 1px solid #7d879a; display: block;
}
.mi-nav i:nth-child(3) { transform: rotate(45deg) scale(.8); border-width: 1px 0 0 1px;
}
.mi-usb { display: block; width: 23px; color: #9aa4b6; margin-block-start: 16px; transform: translateY(-16px);
}
.mi-usb svg { width: 100%; height: auto; display: block;
}
.mi-boot { align-items: center; justify-content: center; gap: 13px;
}
.mi-logo { display: block; width: 46px; height: 46px;
}
.mi-logo svg { width: 100%; height: auto; display: block;
}
.mi-boot-bar { display: block; width: 62px; height: 2px; border-radius: 2px; background: #3a4252; overflow: hidden;
}
.mi-boot-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: #ff7a2f;
}
.mi-boot-t { font-size: 10px; color: #cfd8ea; letter-spacing: .04em;
}
.mi-menu,
.mi-boot { opacity: 0;
}
.hm-cable {
    position: absolute; z-index: 0;
    inset-inline-end: 168px; inset-block-start: 50%;
    width: 68px; height: 2px; margin-block-start: -1px;
    background: linear-gradient(calc(90deg * var(--x)), rgb(var(--brand-rgb) / .22), rgb(var(--brand-rgb) / .55));
    border-radius: 2px;
}
.hm-plug { position: absolute; inset-block-start: 50%; width: 9px; height: 7px; border-radius: 2px; background: #7d8aa3; transform: translateY(-50%);
}
.hm-plug.a { inset-inline-start: -4px;
}
.hm-plug.b { inset-inline-end: -4px;
}
.hm-spark { position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 7px; height: 7px; margin-block-start: -3.5px; border-radius: 50%; background: rgb(var(--brand-rgb)); box-shadow: 0 0 10px 2px rgb(var(--brand-rgb) / .6); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes mi-menu-s { 0%, 14% { opacity: 1 } 17%, 100% { opacity: 0 }
    }
    @keyframes mi-conn-s { 0%, 15% { opacity: 0 } 18%, 88% { opacity: 1 } 91%, 100% { opacity: 0 }
    }
    @keyframes mi-boot-s { 0%, 87% { opacity: 0 } 90%, 95% { opacity: 1 } 97%, 100% { opacity: 0 }
    }
    .mi-menu { animation: mi-menu-s 30s linear infinite;
    }
    .mi-conn { animation: mi-conn-s 30s linear infinite;
    }
    .mi-boot { animation: mi-boot-s 30s linear infinite;
    }
    @keyframes mi-sel1 { 0%, 6% { background: #1f6fe5; border-color: #1f6fe5; color: #fff }
                         7%, 100% { background: transparent; border-color: #262d3b; color: #b9c3d6 }
    }
    @keyframes mi-sel2 { 0%, 6% { background: transparent; border-color: #262d3b; color: #b9c3d6 }
                         7%, 10% { background: #1f6fe5; border-color: #1f6fe5; color: #fff }
                        11%, 100% { background: transparent; border-color: #262d3b; color: #b9c3d6 }
    }
    @keyframes mi-sel3 { 0%, 10% { background: transparent; border-color: #262d3b; color: #b9c3d6 }
                        11%, 100% { background: #1f6fe5; border-color: #1f6fe5; color: #fff }
    }
    @keyframes mi-confirm { 0%, 12.9% { filter: none } 13.5% { filter: brightness(2.1) } 14.3%, 100% { filter: none }
    }
    .mi-items .mi-i1 { animation: mi-sel1 30s linear infinite;
    }
    .mi-items .mi-i2 { animation: mi-sel2 30s linear infinite;
    }
    .mi-items .mi-i3 { animation: mi-sel3 30s linear infinite, mi-confirm 30s linear infinite;
    }
    @keyframes mi-k-dn { 0%, 6.2% { background: var(--mi-key) } 6.6%, 7.3% { background: #cfd8ea }
                        7.8%, 10.2% { background: var(--mi-key) } 10.6%, 11.3% { background: #cfd8ea }
                        11.8%, 100% { background: var(--mi-key) }
    }
    @keyframes mi-k-pw { 0%, 13% { background: var(--mi-key) } 13.4%, 14.1% { background: #ff9a5c }
                        14.6%, 100% { background: var(--mi-key) }
    }
    .hm-key.vol-dn { animation: mi-k-dn 30s linear infinite;
    }
    .hm-key.pwr { animation: mi-k-pw 30s linear infinite;
    }
    @keyframes hm-point-vol { 0%, 4.6%    { opacity: 0; transform: translateY(-50%) translateX(8px) }
                              5.6%, 11.8% { opacity: 1; transform: translateY(-50%) translateX(0) }
                              12.6%, 100% { opacity: 0; transform: translateY(-50%) translateX(0) }
    }
    @keyframes hm-point-pwr { 0%, 11.8%   { opacity: 0; transform: translateY(-50%) translateX(8px) }
                              12.8%, 15%  { opacity: 1; transform: translateY(-50%) translateX(0) }
                              16%, 100%   { opacity: 0; transform: translateY(-50%) translateX(0) }
    }
    .hm-key.vol-dn .hm-point { animation: hm-point-vol 30s var(--ease) infinite;
    }
    .hm-key.pwr    .hm-point { animation: hm-point-pwr 30s var(--ease) infinite;
    }
    .hm-key .hm-point svg { animation: hm-nudge 1.1s ease-in-out infinite;
    }
    @keyframes mi-usb-in { 0%, 17% { transform: translateY(16px); opacity: .5 }
                          20%, 88% { transform: translateY(-16px); opacity: 1 }
                          91%, 100% { transform: translateY(16px); opacity: .5 }
    }
    .mi-usb { animation: mi-usb-in 30s var(--ease) infinite;
    }
    @keyframes mi-frame-on { 0%, 19% { border-color: #5d6678 } 21%, 88% { border-color: #2ecc8f }
                            91%, 100% { border-color: #5d6678 }
    }
    .mi-frame { animation: mi-frame-on 30s linear infinite;
    }
    @keyframes hm-scr { 0%, 1% { filter: brightness(.5) } 4%, 95% { filter: brightness(1) } 98%, 100% { filter: brightness(.5) }
    }
    .hm-phone-scr { animation: hm-scr 30s linear infinite;
    }
    @keyframes mi-ms1 { 0%, 15% { opacity: 0 } 16%, 19% { opacity: 1 } 21%, 100% { opacity: 0 }
    }
    @keyframes mi-ms2 { 0%, 20% { opacity: 0 } 21%, 27% { opacity: 1 } 29%, 41% { opacity: 0 }
                       42%, 63% { opacity: 1 } 65%, 100% { opacity: 0 }
    }
    @keyframes mi-ms3 { 0%, 28% { opacity: 0 } 29%, 40% { opacity: 1 } 42%, 100% { opacity: 0 }
    }
    @keyframes mi-ms4 { 0%, 64% { opacity: 0 } 65%, 79% { opacity: 1 } 81%, 100% { opacity: 0 }
    }
    @keyframes mi-ms5 { 0%, 80% { opacity: 0 } 81%, 88% { opacity: 1 } 90%, 100% { opacity: 0 }
    }
    .mi-ms.m1 { animation: mi-ms1 30s linear infinite;
    }
    .mi-ms.m2 { animation: mi-ms2 30s linear infinite;
    }
    .mi-ms.m3 { animation: mi-ms3 30s linear infinite;
    }
    .mi-ms.m4 { animation: mi-ms4 30s linear infinite;
    }
    .mi-ms.m5 { animation: mi-ms5 30s linear infinite;
    }
    @keyframes mi-pbar-on { 0%, 64% { opacity: 0 } 66%, 88% { opacity: 1 } 90%, 100% { opacity: 0 }
    }
    @keyframes mi-pb { 0%, 65% { transform: scaleX(.04) } 74% { transform: scaleX(.55) }
                      82% { transform: scaleX(.86) } 87%, 96% { transform: scaleX(1) }
                      98%, 100% { transform: scaleX(.04) }
    }
    .mi-pbar { animation: mi-pbar-on 30s linear infinite;
    }
    .mi-pbar i { animation: mi-pb 30s var(--ease) infinite;
    }
    @keyframes mi-boot-run { 0% { transform: translateX(0) } 100% { transform: translateX(37px) }
    }
    .mi-boot-bar i { animation: mi-boot-run 1.4s ease-in-out infinite alternate;
    }
    @keyframes hm-cable-on { 0%, 19% { opacity: .35 } 21%, 89% { opacity: 1 } 93%, 100% { opacity: .35 }
    }
    .hm-cable { animation: hm-cable-on 30s linear infinite;
    }
    @keyframes hm-spark { 0%, 46% { opacity: 0; transform: translateX(0) }
                          48% { opacity: 1 }
                          84% { opacity: 1; transform: translateX(calc(61px * var(--x))) }
                          86%, 100% { opacity: 0; transform: translateX(calc(61px * var(--x))) }
    }
    .hm-spark { animation: hm-spark 30s var(--ease) infinite;
    }
    @keyframes hm-s1 { 0%, 20% { opacity: 1 } 22%, 96% { opacity: 0 } 98%, 100% { opacity: 1 }
    }
    @keyframes hm-s2 { 0%, 21% { opacity: 0 } 23%, 88% { opacity: 1 } 90%, 100% { opacity: 0 }
    }
    @keyframes hm-s3 { 0%, 89% { opacity: 0 } 91%, 95% { opacity: 1 } 97%, 100% { opacity: 0 }
    }
    .hm-st.s1 { animation: hm-s1 30s linear infinite; color: var(--bad-ink);
    }
    .hm-st.s2 { animation: hm-s2 30s linear infinite; color: var(--ok-ink);
    }
    .hm-st.s3 { animation: hm-s3 30s linear infinite; color: var(--brand-ink);
    }
    @keyframes hm-state-bg {
        0%, 20%  { background: rgb(var(--bad-rgb) / .10);   border-color: rgb(var(--bad-rgb) / .3) }
        23%, 88% { background: rgb(var(--ok-rgb) / .10);    border-color: rgb(var(--ok-rgb) / .3) }
        91%, 95% { background: rgb(var(--brand-rgb) / .10); border-color: rgb(var(--brand-rgb) / .3) }
        98%, 100%{ background: rgb(var(--bad-rgb) / .10);   border-color: rgb(var(--bad-rgb) / .3) }
    }
    .hm-demo .hm-state { animation: hm-state-bg 30s linear infinite;
    }
    @keyframes hm-empty { 0%, 21% { opacity: 1 } 23%, 98% { opacity: 0 } 99.5%, 100% { opacity: 1 }
    }
    .hm-demo .hm-empty { animation: hm-empty 30s linear infinite;
    }
    @keyframes hm-g1 { 0%, 23% { opacity: 0; transform: translateY(5px) } 27%, 95% { opacity: 1; transform: none } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-g2 { 0%, 29% { opacity: 0; transform: translateY(5px) } 33%, 95% { opacity: 1; transform: none } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-g3 { 0%, 35% { opacity: 0; transform: translateY(5px) } 39%, 95% { opacity: 1; transform: none } 98%, 100% { opacity: 0 }
    }
    .hm-demo .hm-grp.g1 { animation: hm-g1 30s var(--ease) infinite;
    }
    .hm-demo .hm-grp.g2 { animation: hm-g2 30s var(--ease) infinite;
    }
    .hm-demo .hm-grp.g3 { animation: hm-g3 30s var(--ease) infinite;
    }
    @keyframes hm-point { 0%, 38% { opacity: 0; transform: translateY(-50%) scaleX(var(--x)) translateX(10px) }
                         41%, 60% { opacity: 1; transform: translateY(-50%) scaleX(var(--x)) translateX(0) }
                         64%, 100% { opacity: 0; transform: translateY(-50%) scaleX(var(--x)) translateX(0) }
    }
    @keyframes hm-nudge { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(-5px) }
    }
    .hm-demo .hm-point { animation: hm-point 30s var(--ease) infinite;
    }
    .hm-demo .hm-point svg { animation: hm-nudge 1.1s ease-in-out infinite;
    }
    @keyframes hm-tap { 0%, 39% { opacity: 0; transform: translateY(14px) scale(.8) }
                        42% { opacity: 1; transform: translateY(0) scale(1) }
                        44% { opacity: 1; transform: scale(.6) }
                        46% { opacity: 1; transform: scale(1) }
                        50%, 100% { opacity: 0; transform: scale(1) }
    }
    .hm-demo .hm-cursor { animation: hm-tap 30s var(--ease) infinite;
    }
    @keyframes hm-idle {
        0%, 43%  { background: var(--card); border-inline-start-color: var(--op-accent); box-shadow: var(--sh-1) }
        45%, 88% { background: var(--field); border-inline-start-color: var(--line); box-shadow: 0 0 0 0 rgb(16 24 40 / 0) }
        92%, 100%{ background: var(--card); border-inline-start-color: var(--op-accent); box-shadow: var(--sh-1) }
    }
    .hm-demo .hm-op.c { animation: hm-idle 30s linear infinite;
    }
    @keyframes hm-press-a {
        0%, 19%  { transform: none; background: var(--card);
                   border-inline-start-color: var(--op-accent); box-shadow: var(--sh-1) }
        21%      { transform: scale(.975); background: rgb(var(--green-rgb) / .08);
                   border-inline-start-color: var(--op-accent);
                   box-shadow: 0 0 0 4px rgb(var(--green-rgb) / .30) }
        23%, 40% { transform: none; background: rgb(var(--green-rgb) / .08);
                   border-inline-start-color: var(--op-accent);
                   box-shadow: 0 0 0 3px rgb(var(--green-rgb) / .28) }
        43%      { transform: none; background: var(--card);
                   border-inline-start-color: var(--op-accent); box-shadow: var(--sh-1) }
        45%, 88% { background: var(--field); border-inline-start-color: var(--line);
                   box-shadow: 0 0 0 0 rgb(16 24 40 / 0) }
        92%, 100%{ background: var(--card);
                   border-inline-start-color: var(--op-accent); box-shadow: var(--sh-1) }
    }
    .hm-demo .hm-op.a { position: relative; animation: hm-press-a 30s var(--ease) infinite;
    }
    @keyframes hm-point-a { 0%, 15%  { opacity: 0; transform: translateY(-50%) scaleX(var(--x)) translateX(10px) }
                            18%, 27% { opacity: 1; transform: translateY(-50%) scaleX(var(--x)) translateX(0) }
                            31%, 100%{ opacity: 0; transform: translateY(-50%) scaleX(var(--x)) translateX(0) }
    }
    .hm-demo .hm-op.a .hm-point { animation-name: hm-point-a;
    }
    @keyframes hm-press {
        0%, 42%  { transform: none; background: var(--card); box-shadow: var(--sh-1) }
        44%      { transform: scale(.975); background: rgb(var(--brand-rgb) / .07); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .30) }
        46%, 88% { transform: none; background: rgb(var(--brand-rgb) / .07); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .28) }
        92%, 100%{ transform: none; background: var(--card); box-shadow: var(--sh-1) }
    }
    .hm-demo .hm-op-run { position: relative; animation: hm-press 30s var(--ease) infinite;
    }
    @keyframes hm-bar {
        0%,    21%   { opacity: 1; transform: scaleX(0) }   /* idle                */
        22%,   38%   { transform: scaleX(.15) }   /* read starts        (15)     */
        39%,   45%   { transform: scaleX(1)   }   /* read complete      (100)    */
        46%,   46.5% { transform: scaleX(.15) }   /* FRP tapped         (15)     */
        47.5%, 52%   { transform: scaleX(.40) }   /* request sent       (40)     */
        53%,   64%   { transform: scaleX(.43) }   /* queued, poll +3    (43)     */
        65%,   87%   { transform: scaleX(.85) }   /* writing token      (85)     */
        88%,   96%   { opacity: 1; transform: scaleX(1) }  /* done         (100)    */
        97.4%        { opacity: 0; transform: scaleX(1) }  /* fade, then reset      */
        97.5%, 100%  { opacity: 0; transform: scaleX(0) }  /* reset; 100% == 0%     */
    }
    .hm-demo .hm-prog-f { animation: hm-bar 30s var(--ease) infinite;
    }
    @keyframes hm-n0 { 0%,21%{opacity:1}   22%,96%{opacity:0}   97%,100%{opacity:1}
    }
    @keyframes hm-n15 { 0%,21%{opacity:0}   22%,38%{opacity:1}   39%,45%{opacity:0}
                        46%,46.5%{opacity:1} 47.5%,100%{opacity:0}
    }
    @keyframes hm-n40 { 0%,46.5%{opacity:0} 47.5%,52%{opacity:1} 53%,100%{opacity:0}
    }
    @keyframes hm-n43 { 0%,52%{opacity:0}   53%,64%{opacity:1}   65%,100%{opacity:0}
    }
    @keyframes hm-n85 { 0%,64%{opacity:0}   65%,87%{opacity:1}   88%,100%{opacity:0}
    }
    @keyframes hm-n100 { 0%,38%{opacity:0}   39%,45%{opacity:1}   46%,87%{opacity:0}
                        88%,96%{opacity:1}   97%,100%{opacity:0}
    }
    .hm-demo .hm-pn.n0 { animation: hm-n0   30s linear infinite
    }
    .hm-demo .hm-pn.n15 { animation: hm-n15  30s linear infinite
    }
    .hm-demo .hm-pn.n40 { animation: hm-n40  30s linear infinite
    }
    .hm-demo .hm-pn.n43 { animation: hm-n43  30s linear infinite
    }
    .hm-demo .hm-pn.n85 { animation: hm-n85  30s linear infinite
    }
    .hm-demo .hm-pn.n100 { animation: hm-n100 30s linear infinite
    }
    @keyframes hm-stop-en {
        0%,  23%  { background-color: var(--band); border-color: var(--line) }
        25%, 38%  { background-color: rgb(var(--bad-rgb) / .12); border-color: rgb(var(--bad-rgb) / .32) }
        40%, 100% { background-color: var(--band); border-color: var(--line) }
    }
    .hm-demo .hm-stop { animation: hm-stop-en 30s linear infinite;
    }
    @keyframes hm-l1 { 0%, 1%  { opacity: 0 } 3%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l2 { 0%, 21% { opacity: 0 } 23%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l3 { 0%, 24% { opacity: 0 } 26%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l4 { 0%, 27% { opacity: 0 } 29%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l5 { 0%, 30% { opacity: 0 } 32%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l6 { 0%, 32% { opacity: 0 } 34%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l7 { 0%, 34% { opacity: 0 } 36%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l7b { 0%, 44% { opacity: 0 } 46%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l8 { 0%, 47% { opacity: 0 } 49%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l9 { 0%, 53% { opacity: 0 } 55%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l10 { 0%, 59% { opacity: 0 } 61%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l11 { 0%, 65% { opacity: 0 } 67%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l12 { 0%, 72% { opacity: 0 } 74%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l13 { 0%, 80% { opacity: 0 } 82%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l14 { 0%, 86% { opacity: 0 } 88%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l15 { 0%, 88% { opacity: 0 } 90%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    @keyframes hm-l16 { 0%, 90% { opacity: 0 } 92%, 95% { opacity: 1 } 98%, 100% { opacity: 0 }
    }
    .hm-demo .hm-log p { animation: 30s linear infinite;
    }
    .hm-demo .hm-log .l1 {animation-name:hm-l1
    }
    .hm-demo .hm-log .l2 {animation-name:hm-l2
    }
    .hm-demo .hm-log .l3 {animation-name:hm-l3
    }
    .hm-demo .hm-log .l4 {animation-name:hm-l4
    }
    .hm-demo .hm-log .l5 {animation-name:hm-l5
    }
    .hm-demo .hm-log .l6 {animation-name:hm-l6
    }
    .hm-demo .hm-log .l7 {animation-name:hm-l7
    }
    .hm-demo .hm-log .l7b {animation-name:hm-l7b
    }
    .hm-demo .hm-log .l8 {animation-name:hm-l8
    }
    .hm-demo .hm-log .l9 {animation-name:hm-l9
    }
    .hm-demo .hm-log .l10 {animation-name:hm-l10
    }
    .hm-demo .hm-log .l11 {animation-name:hm-l11
    }
    .hm-demo .hm-log .l12 {animation-name:hm-l12
    }
    .hm-demo .hm-log .l13 {animation-name:hm-l13
    }
    .hm-demo .hm-log .l14 {animation-name:hm-l14
    }
    .hm-demo .hm-log .l15 {animation-name:hm-l15
    }
    .hm-demo .hm-log .l16 {animation-name:hm-l16
    }
    @keyframes hm-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) }
    }
    .hm-win { animation: hm-float 7s ease-in-out 1s infinite;
    }
}
@media (max-width: 1180px) {
    .hm-cells { grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1080px) {
    .hm-stage { grid-template-columns: minmax(0, 1fr); gap: 28px;
    }
    .hm-cable { display: none;
    }
}
@media (max-width: 900px) {
    .hm-panes { grid-template-columns: minmax(0, 1fr); min-height: 0;
    }
    .hm-pane + .hm-pane { border-inline-start: 0; border-block-start: 1px solid var(--line);
    }
    .hm-logpane { display: none;
    }
}
@media (max-width: 620px) {
    .hm-phone { display: none;
    }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hm-demo .hm-op-run,
    .hm-demo .hm-op.a { padding-inline-end: 58px;
    }
    .hm-demo .hm-point { inset-inline-end: 4px; width: 46px;
    }
    .hm-demo .hm-cursor { inset-inline-end: 64px;
    }
}
.hm-win { border-color: var(--edge);
}
.hm-bar { border-block-end-color:   var(--rule);
}
.hm-pane + .hm-pane { border-inline-start-color: var(--rule);
                           border-block-start-color:  var(--rule);
}
.hm-foot,
.hm-user,
.hm-cmd { border-block-start-color: var(--rule);
}
.hm-demo .hm-main { background: var(--band);
}
.hm-demo .hm-main-top {
    background: var(--card); margin: -14px -14px 12px; padding: 12px 14px;
    border-block-end: 1px solid var(--rule);
}
.hm-demo .hm-foot {
    background: var(--card); margin: auto -14px -14px; padding: 12px 14px;
}
.hm-demo .hm-bar { background: var(--card);
}
.hm-demo .hm-url { background: var(--field);
}
.hm-demo .hm-cell span { color: var(--ink-2);
}