/* THE LOUPE (ruled by Ric 2026-09-23). platform/loupe.js lays one layer
   over each flat: breathing dots, one lens, one line. The dot is small
   and the key is a thumb: 44 px, round, transparent around the dot. */
.loupe-hold { position: relative; }
.loupe-layer { position: absolute; inset: 0; pointer-events: none; }
.loupe-dot {
    pointer-events: auto; position: absolute; inline-size: 44px; block-size: 44px;
    margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--text); cursor: zoom-in;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; z-index: 2;
}
.loupe-dot span {
    position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
    inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: rgb(233 230 221 / .92);
    box-shadow: 0 0 0 1px rgb(10 10 12 / .8), 0 0 0 3px rgb(233 230 221 / .12);
    animation: loupe-breathe 5.6s ease-in-out infinite;
    transition: transform 70ms ease-out, background-color 70ms ease-out;
}
/* ONE SLOW BREATH, the knob's own rest: in, hold, out. */
@keyframes loupe-breathe {
    0%, 100% { transform: scale(.78); opacity: .6; }
    45%, 55% { transform: scale(1.15); opacity: 1; }
}
.loupe-dot:hover span { background: #fff; }
.loupe-dot.is-pressed span { animation: none; transform: scale(.62); background: #fff; }
.loupe-dot[aria-expanded="true"] span { animation: none; transform: scale(.5); opacity: .4; }
.loupe-dot:focus-visible { outline: 1px solid currentColor; outline-offset: -8px; }
.loupe-lens {
    pointer-events: auto; position: absolute; z-index: 3; border-radius: 50%; overflow: hidden;
    background: #0a0a0c; cursor: grab; touch-action: none;
    box-shadow: 0 0 0 1px rgb(233 230 221 / .3), 0 0 0 5px rgb(10 10 12 / .55), 0 22px 60px rgb(0 0 0 / .65);
    transform: scale(.06); opacity: 0;
    transition: transform 280ms cubic-bezier(.16, .84, .24, 1), opacity 140ms ease-out;
}
.loupe-lens.is-open { transform: none; opacity: 1; }
.loupe-lens.is-dragging { cursor: grabbing; }
.loupe-lens canvas { display: block; inline-size: 100%; block-size: 100%; }
.loupe-line {
    pointer-events: none; position: absolute; z-index: 3; margin: 0;
    box-sizing: border-box; padding: .5rem .75rem; border-radius: 2px;
    background: rgb(10 10 12 / .86); color: rgb(233 230 221);
    font-family: var(--font-mono); font-size: .66rem; line-height: 1.6; letter-spacing: .08em;
    text-transform: uppercase; text-align: center; text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
    .loupe-dot span { animation: none; transition: none; transform: none; opacity: 1; }
    .loupe-lens { transition: none; }
}