.echo-stage{width:100%;max-width:420px;margin:0 auto;padding:4px 4px 12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.echo-instrument{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 42%,#1f3346 0,#0b1828 47%,#050b14 71%);box-shadow:0 15px 30px #0008,inset 0 0 0 1px #c6ab6550,inset 0 0 0 7px #040a12,inset 0 0 0 8px #a88d4638}.echo-orbit{position:absolute;inset:14%;border:1px solid #b39e5755;border-radius:50%;box-shadow:0 0 0 12px #0b162055,inset 0 0 0 12px #0b162055}.echo-orbit::before,.echo-orbit::after{content:'';position:absolute;inset:17%;border:1px solid #baa6693c;border-radius:50%;transform:rotate(45deg)}.echo-orbit::after{inset:27%;border-radius:20%}.echo-core{position:absolute;left:50%;top:50%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #c8b16d80;border-radius:50%;background:radial-gradient(circle at 40% 28%,#344350,#0a1522 70%);box-shadow:0 5px 15px #0009,inset 0 0 0 5px #0c1722,inset 0 0 0 6px #a98d5355;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#ddc580;pointer-events:none}.core-star{font-size:21px;line-height:1}#core-number{font-size:23px;font-weight:750;line-height:1.2}.echo-fields{position:absolute;inset:0}.echo-pad{--color:#56ddd4;position:absolute;width:25%;aspect-ratio:1;min-width:56px;min-height:56px;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;isolation:isolate;cursor:pointer;background:radial-gradient(circle,#213b45,#07101a 65%);box-shadow:0 5px 9px #0008}.echo-pad:disabled{cursor:default;opacity:1}.pad-lens{position:absolute;inset:0;border-radius:50%;background-image:var(--crystal-image);background-size:100% 100%;opacity:.88}.pad-halo{position:absolute;inset:3%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff9,transparent 50%),radial-gradient(circle,var(--color),transparent 73%);box-shadow:0 0 14px 4px var(--color);box-shadow:0 0 14px 4px var(--color),0 0 35px 10px color-mix(in srgb,var(--color) 48%,transparent);opacity:0;transition:opacity 100ms ease-out;pointer-events:none}.pad-symbol{position:absolute;inset:0;display:grid;place-items:center;color:#fff5ce;font-size:clamp(24px,7cqw,34px);text-shadow:0 1px 3px #000b;pointer-events:none;opacity:.85}.pad-key{position:absolute;bottom:10%;left:0;right:0;text-align:center;color:#fff7d9;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}.echo-pad.is-lit .pad-halo{opacity:.92}.echo-pad.is-lit .pad-lens{opacity:1}.echo-pad.is-lit .pad-symbol{opacity:1;color:#fff}.echo-pad.is-answer{outline:2px solid #fff0ae;outline-offset:4px}.echo-pad:focus-visible{outline:3px solid #f8e2a2;outline-offset:4px}.echo-instrument[data-effects=false] .pad-halo{box-shadow:none}.echo-instrument[data-reduced=true] .pad-halo{transition:none}.echo-instrument[data-reduced=false] .echo-pad.is-lit .pad-symbol{transform:scale(1.08)}.echo-message{min-height:42px;margin:9px 0 6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.4;color:#d9e5ed}.echo-start{width:100%;min-height:48px;font-size:15px}.demo-finger{position:fixed;z-index:1000;font-size:34px;pointer-events:none}.final-score{display:block;color:#e8cf85;font-size:36px;text-align:center;margin:14px 0}
@container gf-page (max-width:350px){.echo-stage{padding-inline:2px}.echo-message{font-size:12px}.pad-key{font-size:9px}}
@container gf-page (min-width:600px){.echo-stage{max-width:580px;padding:7px}.pad-symbol{font-size:42px}.pad-key{font-size:14px}#core-number{font-size:34px}.core-star{font-size:28px}.echo-message{font-size:16px;min-height:48px}}
@media(max-height:740px){.echo-stage{max-width:340px;padding-block:0 6px}.echo-message{min-height:36px;margin-top:5px}}

/* Prepainted light paths: only opacity and transform change during a signal. */
.echo-ray{position:absolute;left:50%;top:50%;width:34%;height:2px;transform-origin:left center;pointer-events:none;background:linear-gradient(90deg,#ba9e6255,var(--color));opacity:.14}.echo-ray::after{content:'';position:absolute;inset:-1px 0;background:linear-gradient(90deg,#fff5c0,var(--color));box-shadow:0 0 8px var(--color);transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform 200ms ease-out,opacity 120ms ease-out}.echo-ray.is-lit{opacity:1}.echo-ray.is-lit::after{opacity:1;transform:scaleX(1)}.echo-core{z-index:2}.echo-core::after{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,transparent 43%,var(--signal-color,#c7b276) 61%,transparent 73%);opacity:0;transition:opacity 120ms ease-out;z-index:-1}.is-signal .echo-core::after{opacity:.5}.pad-symbol{transition:transform 160ms ease-out}.echo-instrument[data-effects=false] .echo-ray::after,.echo-instrument[data-effects=false] .echo-core::after{display:none}.echo-instrument[data-reduced=true] .echo-ray::after,.echo-instrument[data-reduced=true] .echo-core::after,.echo-instrument[data-reduced=true] .pad-symbol{transition:none}

/* Individually rendered colored crystals. Glow colors affect surrounding light only. */
.echo-pad[data-index="0"]{--crystal-image:url('assets/hex-crystals/turquoise.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="1"]{--crystal-image:url('assets/hex-crystals/amber.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="2"]{--crystal-image:url('assets/hex-crystals/coral.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="3"]{--crystal-image:url('assets/hex-crystals/violet.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="4"]{--crystal-image:url('assets/hex-crystals/emerald.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="5"]{--crystal-image:url('assets/hex-crystals/sapphire.webp?v=20261015-echo-hex-3')}
@container gf-page (min-width:600px){
.echo-pad[data-index="0"]{--crystal-image:url('assets/hex-crystals/turquoise-large.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="1"]{--crystal-image:url('assets/hex-crystals/amber-large.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="2"]{--crystal-image:url('assets/hex-crystals/coral-large.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="3"]{--crystal-image:url('assets/hex-crystals/violet-large.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="4"]{--crystal-image:url('assets/hex-crystals/emerald-large.webp?v=20261015-echo-hex-3')}
.echo-pad[data-index="5"]{--crystal-image:url('assets/hex-crystals/sapphire-large.webp?v=20261015-echo-hex-3')}
}

/* Bare hexagonal crystal: no circular mount, bezel or painted tint. */
.echo-pad{border-radius:16%;background:none;box-shadow:none}.pad-lens{border-radius:0;opacity:1}.pad-halo{inset:12%;background:radial-gradient(circle,var(--color),transparent 72%)}.pad-symbol{font-size:clamp(18px,4.5cqw,24px);opacity:.65}.pad-key{bottom:13%}
@container gf-page (min-width:600px){.pad-symbol{font-size:30px}}
/* A completed melody gets visual feedback only, clearly separate from the pads. */
.round-success .echo-core::after{opacity:.85;background:radial-gradient(circle,transparent 44%,#b4f3db 63%,transparent 74%)}
.round-success .core-star{font-size:0;color:#b4f3db;animation:echo-round-success 700ms ease-out both}
.round-success .core-star::after{content:'✓';font-size:24px}
@keyframes echo-round-success{0%{transform:scale(.85);opacity:.4}35%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.echo-instrument[data-reduced=true] .core-star{animation:none}
.echo-instrument[data-paused=true] .core-star{animation-play-state:paused}
.echo-instrument[data-effects=false] .core-star{animation:none}