/* ===================================================================
   /multi-touch-test - the multi-touch pad.

   Every ring is positioned by multi-touch-test.js from a live pointer
   event; the lines and the pinch readout are computed from those same
   points. Scoped under .mtt (plus the .mtt-lede under the h1).
   =================================================================== */

.mtt-lede { max-width: 640px; margin: 6px auto 0; color: #5b6275; font-size: 1rem; }

.mtt {
    --mtt-accent: #3d8bff;
    --mtt-cyan: #22d3ee;
    --mtt-ink: #10162b;
    --mtt-muted: #5b6275;
    --mtt-line: #e4e7ef;

    margin: 18px auto 24px;
    padding: 0;
    max-width: 1100px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--mtt-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    color: var(--mtt-ink);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mtt *, .mtt *::before, .mtt *::after { box-sizing: border-box; }
.mtt button { font: inherit; }
.mtt svg { display: block; }
.mtt :where(p, dl, dd) { margin: 0; }

.mtt-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */

.mtt-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 12px 16px 12px 20px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.mtt-detected { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; min-width: 0; }
.mtt-detected svg { flex: none; width: 18px; height: 18px; color: var(--mtt-cyan); }
.mtt.is-no-touch .mtt-detected svg { color: #fbbf24; }

.mtt-topbtn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgb(255 255 255 / 16%); background: rgb(255 255 255 / 8%); color: #fff; font-size: .85rem; font-weight: 600;
    transition: background-color .15s ease;
}
.mtt-topbtn:hover { background: rgb(255 255 255 / 16%); }
.mtt-topbtn svg { width: 16px; height: 16px; }
.mtt-topbtn:focus-visible { outline: 3px solid var(--mtt-cyan); outline-offset: 2px; }

/* ---------- stage + pad ---------- */

.mtt-stage {
    position: relative;
    padding: clamp(12px, 2.4vw, 26px);
    background: linear-gradient(180deg, #10162b 0%, #1a2142 100%);
}

.mtt-pad {
    position: relative;
    height: clamp(340px, 50vw, 540px);
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgb(61 139 255 / 14%), transparent 60%),
        radial-gradient(rgb(255 255 255 / 9%) 1px, transparent 1.5px) 0 0 / 28px 28px,
        #0b1022;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), 0 20px 40px -24px rgb(0 0 0 / 70%);
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
}
.mtt-pad:focus-visible { outline: 3px solid var(--mtt-cyan); outline-offset: 3px; }

.mtt-bigcount {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: rgb(255 255 255 / 6%); pointer-events: none; line-height: 1;
    transition: color .2s ease;
}
.mtt-bigcount b { font-size: clamp(120px, 22vw, 240px); font-weight: 800; font-variant-numeric: tabular-nums; }
.mtt-bigcount span { font-size: clamp(18px, 3vw, 28px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.mtt.is-touching .mtt-bigcount { color: rgb(255 255 255 / 9%); }

.mtt-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mtt-lines line { stroke: rgb(255 255 255 / 55%); stroke-width: 2; stroke-dasharray: 6 6; }
.mtt-lines polygon { fill: rgb(61 139 255 / 12%); stroke: rgb(125 211 252 / 45%); stroke-width: 1.5; }
.mtt-lines .mtt-pinch-line { stroke: #fff; stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgb(255 255 255 / 70%)); }
.mtt-lines text { fill: #fff; font: 700 14px "Poppins", system-ui, sans-serif; paint-order: stroke; stroke: #0b1022; stroke-width: 5px; stroke-linejoin: round; }

.mtt-points { position: absolute; inset: 0; pointer-events: none; }
.mtt-point {
    --c: #22d3ee;
    --size: 92px;
    position: absolute; left: 0; top: 0;
    width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    will-change: transform;
}
.mtt-point-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 4px solid var(--c);
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent) 0%, transparent 70%);
    box-shadow: 0 0 22px 2px var(--c), inset 0 0 18px var(--c);
    animation: mtt-in .28s cubic-bezier(.2, 1.4, .4, 1);
}
.mtt-point-ring::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    border: 2px solid var(--c); opacity: 0;
    animation: mtt-ripple 1.4s ease-out infinite;
}
.mtt-point-num {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.9rem; font-weight: 800; color: #fff; text-shadow: 0 0 10px var(--c);
}
.mtt-point-xy {
    position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    background: rgb(11 16 34 / 80%); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
    color: #e8ecfb; font: 600 .75rem ui-monospace, SFMono-Regular, Consolas, monospace;
}
.mtt-point.is-top .mtt-point-xy { top: auto; bottom: calc(100% + 8px); }
@keyframes mtt-in { from { transform: scale(.3); opacity: 0; } }
@keyframes mtt-ripple { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }

.mtt-idle {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: min(88%, 420px); padding: 20px 22px; border-radius: 20px;
    background: rgb(16 22 43 / 76%); color: #e8ecfb; text-align: center;
    box-shadow: 0 16px 34px -14px rgb(0 0 0 / 70%);
    pointer-events: none; transition: opacity .25s ease;
}
.mtt-idle strong { font-size: 1.05rem; }
.mtt-idle span { font-size: .88rem; color: #aeb8d6; }
.mtt-idle-hand { display: flex; gap: 10px; margin-bottom: 4px; }
.mtt-idle-hand i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--mtt-cyan); box-shadow: 0 0 10px var(--mtt-cyan); animation: mtt-tap 2s ease-in-out infinite; }
.mtt-idle-hand i:nth-child(2) { animation-delay: .15s; border-color: #a78bfa; box-shadow: 0 0 10px #a78bfa; }
.mtt-idle-hand i:nth-child(3) { animation-delay: .3s; border-color: #34f5a6; box-shadow: 0 0 10px #34f5a6; }
.mtt-idle-hand i:nth-child(4) { animation-delay: .45s; border-color: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.mtt-idle-hand i:nth-child(5) { animation-delay: .6s; border-color: #f472b6; box-shadow: 0 0 10px #f472b6; }
@keyframes mtt-tap { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.45); } }
.mtt.is-touching .mtt-idle { opacity: 0; }
.mtt.is-no-touch .mtt-idle strong { color: #fde68a; }

/* ---------- full screen ---------- */

.mtt-exit {
    display: none;
    position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 3;
    place-items: center; width: 48px; height: 48px;
    border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; cursor: pointer;
    background: rgb(16 22 43 / 82%); color: #fff;
}
.mtt-exit svg { width: 20px; height: 20px; }
.mtt-exit:focus-visible { outline: 3px solid var(--mtt-cyan); outline-offset: 2px; }
.mtt.is-full .mtt-stage { position: fixed; inset: 0; z-index: 2147483000; padding: 0; }
.mtt.is-full .mtt-pad { height: 100%; border-radius: 0; }
.mtt.is-full .mtt-exit { display: grid; }

/* ---------- panel ---------- */

.mtt-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "record compare pinch" "actions actions actions";
    gap: 16px 24px; align-items: stretch;
    padding: 22px clamp(16px, 3vw, 32px) 6px;
}

.mtt-record { grid-area: record; display: flex; align-items: center; gap: 14px; }
.mtt-record-num {
    display: grid; place-items: center; flex: none;
    width: 88px; height: 88px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6aa9ff, var(--mtt-accent) 55%, #2254c9);
    box-shadow: 0 14px 30px -10px rgb(61 139 255 / 70%), inset 0 -4px 10px rgb(0 0 0 / 22%);
    color: #fff; font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mtt-record-num.is-pop { animation: mtt-record .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes mtt-record { 30% { transform: scale(1.22); box-shadow: 0 0 0 10px rgb(61 139 255 / 20%), 0 14px 30px -10px rgb(61 139 255 / 70%); } }
.mtt-record-text strong { display: block; font-size: 1rem; }
.mtt-record-text span { display: block; font-size: .85rem; color: var(--mtt-muted); }
.mtt-record-text b { color: var(--mtt-ink); font-variant-numeric: tabular-nums; }

.mtt-compare { grid-area: compare; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: #f6f8fc; border: 1px solid var(--mtt-line); min-width: 0; }
.mtt-compare-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.mtt-compare-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mtt-muted); }
.mtt-compare-row b { text-align: right; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mtt-slots { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; }
.mtt-slots i { height: 12px; border-radius: 4px; background: #e3e7f1; transition: background-color .2s ease, transform .2s ease; }
.mtt-slots i.on { background: #94a3b8; }
#mttMeasuredSlots i.on { background: linear-gradient(90deg, var(--mtt-cyan), var(--mtt-accent)); }
#mttMeasuredSlots i.live { transform: scaleY(1.5); box-shadow: 0 0 8px rgb(34 211 238 / 70%); }
.mtt-compare-note { font-size: .74rem; color: var(--mtt-muted); }
.mtt-compare-note code { font-size: .92em; color: #334155; background: #eef1f7; padding: 0 4px; border-radius: 4px; }

.mtt-pinch { grid-area: pinch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-content: center; padding: 12px 16px; border-radius: 16px; background: #f6f8fc; border: 1px solid var(--mtt-line); min-width: 0; transition: border-color .2s ease, background-color .2s ease; }
.mtt-pinch div { min-width: 0; }
.mtt-pinch dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mtt-muted); }
.mtt-pinch dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtt-pinch .mtt-pinch-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.mtt-pinch .mtt-pinch-head dt { font-size: .85rem; font-weight: 700; color: var(--mtt-ink); letter-spacing: 0; text-transform: none; }
.mtt-pinch .mtt-pinch-head dd { font-size: .78rem; color: var(--mtt-muted); font-family: inherit; font-weight: 500; }
.mtt.is-pinching .mtt-pinch { border-color: #93c5fd; background: #eff6ff; }
.mtt.is-pinching .mtt-pinch .mtt-pinch-head dd { color: #1d4ed8; font-weight: 700; }

.mtt-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; }
.mtt-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--mtt-line); background: #fff; color: var(--mtt-ink); font-weight: 600; font-size: .9rem;
    box-shadow: 0 4px 10px -8px rgb(16 22 43 / 45%);
    transition: background-color .15s ease, transform .1s ease;
}
.mtt-btn:hover { background: #f4f7ff; }
.mtt-btn:active { transform: translateY(1px); }
.mtt-btn:focus-visible { outline: 3px solid var(--mtt-accent); outline-offset: 2px; }
.mtt-btn svg { width: 18px; height: 18px; }

.mtt-status {
    margin: 16px clamp(16px, 3vw, 32px) 0; padding: 12px 16px;
    border-radius: 14px; background: #f4f7ff; border: 1px solid #dce6fb;
    font-weight: 600; color: #1d3a7a;
}
.mtt-status.is-warn { background: #fff8eb; border-color: #fde2b0; color: #8a4b08; }
.mtt-status.is-ok { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.mtt-note { margin: 10px clamp(16px, 3vw, 32px) 22px; font-size: .88rem; color: var(--mtt-muted); }

/* ---------- responsive ---------- */

@media (max-width: 991.98px) {
    .mtt-panel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "record compare" "pinch pinch" "actions actions"; }
}
@media (max-width: 575.98px) {
    .mtt { border-radius: 22px; margin-inline: -4px; }
    .mtt-topbar { padding: 10px 12px 10px 14px; }
    .mtt-stage { padding: 10px; }
    .mtt-pad { height: min(64vh, 480px); border-radius: 16px; }
    .mtt-point { --size: 76px; }
    .mtt-panel { grid-template-columns: 1fr; grid-template-areas: "record" "compare" "pinch" "actions"; gap: 12px; }
    .mtt-record-num { width: 72px; height: 72px; font-size: 1.9rem; }
    .mtt-compare-row { grid-template-columns: 64px minmax(0, 1fr) 24px; }
    .mtt-actions .mtt-btn { flex: 1; justify-content: center; }
}
@media (pointer: coarse) {
    .mtt-topbtn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .mtt *, .mtt *::before, .mtt *::after { animation: none !important; transition: none !important; }
}