@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* lyrx-shared.css — tokens + the pieces every option shares (store buttons, live pulses, footer, debug readout) */
:root {
  --bg: #0b0a09; --surface: #191612; --line: #26221c;
  --ink: #f4efe6; --dim: #a79d8d; --faint: #6b6458;
  --amber: #ff9f2e; --ember: #e8641b;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--amber); color: #1a1002; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* map canvas + pulse layer always share a box */
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map.is-grabbing { cursor: grabbing; }
.live { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lv { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; }
.lv i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.lv-core { width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 10px 2px rgba(255, 159, 46, .55); animation: lv-breathe 4s ease-in-out infinite alternate; }
.lv-ping { width: 7px; height: 7px; border: 1px solid var(--amber); animation: lv-ping 2.2s cubic-bezier(.15, .6, .4, 1) 3; }
.lv-out { opacity: 0; transition: opacity 1.4s ease; }
@keyframes lv-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes lv-ping { from { opacity: .7; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
.lv::after { content: attr(title); position: absolute; left: 10px; top: -8px; white-space: nowrap; font: 500 12px/1.2 var(--sans); color: var(--ink);
  background: rgba(11, 10, 9, .82); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.lv:hover::after, .lv:focus-within::after { opacity: 1; transform: none; }

/* store buttons */
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px;
  background: var(--ink); color: #121008; padding: 8px 16px 8px 13px; border-radius: 12px; transition: transform .2s, background .2s; }
.store:hover { transform: translateY(-1px); background: #fff; }
.store svg { width: 22px; height: 22px; flex: none; }
.store .s { display: block; font-size: 10.5px; letter-spacing: .04em; opacity: .7; line-height: 1.1; }
.store .b { display: block; font-size: 16px; font-weight: 600; line-height: 1.15; }
.store.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(244, 239, 230, .28); }
.store.ghost:hover { background: rgba(244, 239, 230, .06); border-color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-style: italic; font-size: 1.35rem; letter-spacing: .01em; }
.brand svg { width: 30px; height: 30px; border-radius: 7px; }

.foot { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

.livechip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.livechip b { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(255, 159, 46, .7); animation: lv-breathe 2.4s ease-in-out infinite alternate; }

#dbg { position: fixed; left: 8px; top: calc(8px + var(--sat)); z-index: 99; font: 11px/1.4 var(--mono); color: #9f9; background: rgba(0, 0, 0, .7); padding: 6px 8px; border-radius: 6px; white-space: pre; display: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lv-core, .lv-ping, .livechip b { animation: none; }
  .lv-ping { display: none; }
  * { transition-duration: .01ms !important; }
}