/* AI Music — сцена «Матрица». 60/30/10: тёплый белый / графит-бронза / один акцент (янтарь). Префикс .mx- */
.mx-root {
  --mx-ivory: var(--aim-ivory, #f4efe6); --mx-graphite: var(--aim-graphite, #15130f); --mx-bronze: var(--aim-bronze, #8a6a45); --mx-accent: var(--aim-amber, #d9a441);
  --mx-serif: var(--ais-font-serif, "Playfair Display", Georgia, serif); --mx-sans: var(--ais-font-sans, Inter, system-ui, sans-serif); --mx-mono: var(--ais-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  position: relative; height: var(--mx-h, 400vh); background: var(--mx-graphite); color: var(--mx-ivory); font: 400 15px/1.45 var(--mx-sans); min-width: 0; overflow-x: clip;
}
.mx-root *, .mx-root *::before, .mx-root *::after { box-sizing: border-box; }
.mx-root.is-static { height: 100vh; height: 100svh; }
.mx-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #2a241c 0%, var(--mx-graphite) 70%); }
@supports (height: 100dvh) { .mx-stage { height: 100dvh; } .mx-root.is-static { height: 100dvh; } }
.mx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-cap { position: absolute; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); max-width: 560px; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.mx-cap h2 { margin: 0 0 6px; font: 600 clamp(28px, 6vw, 56px)/1.1 var(--mx-serif); color: var(--mx-ivory); }
.mx-cap p { margin: 0; font: 12px/1.4 var(--mx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-accent); }
.mx-load { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--mx-bronze); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.mx-load.is-on { transform: scaleX(.6); }
@media (min-width: 900px) { .mx-cap { left: 48px; bottom: 48px; } }
@media (prefers-reduced-motion: reduce) { .mx-load { transition: none; } }

/* AI Music — векторные анимации (SVG), О50. Префикс .vfx-. Палитра 60/30/10: тёплый белый / графит-бронза / акцент.
   Тема по умолчанию — от фона страницы (prefers-color-scheme); .vfx-dark / .vfx-light — явно. Акцент: --vfx-accent. */
.vfx-root {
  --vfx-ink: var(--aim-fx-ink, #f4ede1);      /* 60 — тёплый белый на тёмном */
  --vfx-bronze: var(--aim-fx-bronze, #a8865c);   /* 30 — бронза */
  --vfx-soft: var(--aim-fx-soft, rgba(168, 134, 92, .28));
  --vfx-accent: var(--aim-fx-accent, #e0a63e);   /* 10 — один акцент */
  display: block; width: 100%; max-width: 100%; color: var(--vfx-ink);
}
@media (prefers-color-scheme: light) {
  .vfx-root:not(.vfx-dark) { --vfx-ink: var(--aim-fx-l-ink, #2b2723); --vfx-bronze: var(--aim-fx-l-bronze, #8a6a43); --vfx-soft: var(--aim-fx-l-soft, rgba(138, 106, 67, .2)); --vfx-accent: var(--aim-fx-l-accent, #b77a14); }
}
.vfx-root.vfx-light { --vfx-ink: var(--aim-fx-l-ink, #2b2723); --vfx-bronze: var(--aim-fx-l-bronze, #8a6a43); --vfx-soft: var(--aim-fx-l-soft, rgba(138, 106, 67, .2)); --vfx-accent: var(--aim-fx-l-accent, #b77a14); }
.vfx-svg { display: block; width: 100%; height: auto; overflow: visible; }

.vfx-draw { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.vfx-ink { stroke: var(--vfx-ink); }
.vfx-bronze { stroke: var(--vfx-bronze); }
.vfx-accent { stroke: var(--vfx-accent); }
.vfx-thick { stroke-width: 3.6; }
.vfx-thin { stroke-width: 1.6; }
.vfx-hair { stroke-width: 1.1; }
.vfx-eng { stroke-width: 1.7; }   /* инструменты-гравюра: одна толщина линии */
.vfx-key { stroke-width: 5.5; stroke-linecap: butt; }
.vfx-dots { stroke-width: 1.4; stroke-dasharray: .012 .03; }

.vfx-fill-ink { fill: var(--vfx-ink); }
.vfx-fill-bronze { fill: var(--vfx-bronze); }
.vfx-fill-accent { fill: var(--vfx-accent); }
.vfx-stem { fill: none; stroke: var(--vfx-ink); stroke-width: 1.8; stroke-linecap: round; }
.vfx-note-accent .vfx-fill-ink { fill: var(--vfx-accent); }
.vfx-note-accent .vfx-stem { stroke: var(--vfx-accent); }

.vfx-ring { fill: none; }
.vfx-ring.vfx-ink { stroke: var(--vfx-ink); }
.vfx-ring.vfx-bronze { stroke: var(--vfx-bronze); }
.vfx-bubble { fill: none; stroke: var(--vfx-ink); stroke-width: 1.4; }
.vfx-fill-soft { fill: var(--vfx-soft); stroke: var(--vfx-bronze); }
.vfx-silhouette { fill: var(--vfx-soft); stroke: none; }

.am-matrix{background:#fff;color:#242a25;min-width:0;--vfx-ink:#d6be80;--vfx-bronze:#a8865c;--vfx-accent:#d6be80;--vfx-soft:rgba(168,134,92,.28)}
.am-matrix .mx-stage{background:#fff center/contain no-repeat}
.am-matrix-overlay{position:absolute;pointer-events:none;overflow:visible;z-index:1}
.am-matrix-overlay .vfx-draw{stroke:#d6be80}.am-matrix-overlay .vfx-fill-ink{fill:#d6be80}
.am-matrix-overlay .vfx-bronze{stroke:#a8865c}.am-matrix-overlay .vfx-fill-bronze{fill:#a8865c}
.am-matrix .mx-cap{top:14%;bottom:auto;color:#242a25;pointer-events:none;text-shadow:none}
.am-matrix .mx-cap h1,.am-matrix .mx-cap h2{color:#242a25;font:500 clamp(38px,5.4vw,72px)/1.03 Georgia,serif}
.am-matrix .mx-cap p{color:#876840}.am-matrix .mx-cap a{pointer-events:auto}
.am-matrix-start{opacity:var(--am-start-opacity,1)}.am-matrix-end{position:absolute;inset:0;opacity:var(--am-end-opacity,0);visibility:hidden}
.am-matrix[data-chapter=middle] .am-matrix-start,.am-matrix[data-chapter=end] .am-matrix-start{visibility:hidden}
.am-matrix[data-chapter=end] .am-matrix-end{visibility:visible}
@media(max-width:759px){.am-matrix,.am-matrix .mx-stage{width:100%;max-width:100%;margin-inline:0}.am-matrix .mx-stage{height:100svh;min-height:0}}
@media(prefers-reduced-motion:reduce){.am-matrix .mx-load{transition:none}.am-matrix-start{display:none}.am-matrix-end{opacity:1;visibility:visible}}

.matrix-owner-host{min-height:100svh;width:100%;overflow:clip;background:#fff}.am-matrix .mx-cap{max-width:48%;left:5%;top:10%}@media(max-width:759px){.am-matrix .mx-cap{max-width:90%;left:6%;top:8%}.am-matrix .mx-cap h1,.am-matrix .mx-cap h2{font-size:40px}.am-matrix-overlay{overflow:hidden}}
@media(min-width:760px){.am-matrix .mx-cap h1,.am-matrix .mx-cap h2{color:#fffaf0}.am-matrix .mx-cap p{color:#e6cfa1}.music-site:has(.matrix-owner-host)>.music-nav{color:#fffaf0}.music-site:has(.matrix-owner-host)>.music-nav .music-nav-cabinet{border-color:#fffaf066}}