/* Binaural beats (binaural_beats). Свой вид: ночная сцена, два светящихся круга — левое ухо (голубой)
   и правое (сиреневый), в перекрытии — ритм. Круги медленно «дышат» во время звучания, НЕ в такт ритму
   (мигание 3-30 Гц опасно при светочувствительности). Раскладка — container query по ширине самого
   инструмента. Префикс .binb. */

.binb {
    /* --- токены --- */
    --bb-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bb-bg: #11163a;
    --bb-bg-2: #0a0d24;
    --bb-panel: rgba(255, 255, 255, .06);
    --bb-panel-2: rgba(255, 255, 255, .1);
    --bb-border: rgba(255, 255, 255, .14);
    --bb-ink: #eef0ff;
    --bb-muted: #a9aed6;
    --bb-dim: #6e74a6;
    --bb-left: #5fb4ff;
    --bb-left-0: rgba(95, 180, 255, .55);
    --bb-left-1: rgba(95, 180, 255, 0);
    --bb-right: #c69bff;
    --bb-right-0: rgba(198, 155, 255, .55);
    --bb-right-1: rgba(198, 155, 255, 0);
    --bb-accent: #8f9bff;
    --bb-accent-ink: #0b0e2a;
    --bb-track: rgba(255, 255, 255, .16);
    --bb-radius: 16px;
    --bb-btn-radius: 10px;
    --binb-breath: 8s;

    container: binb / inline-size;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px clamp(12px, 3vw, 24px) 20px;
    font-family: var(--bb-font);
    color: var(--bb-ink);
    background: radial-gradient(120% 80% at 50% 0%, var(--bb-bg) 0%, var(--bb-bg-2) 100%);
    border: 1px solid #22285a;
    border-radius: var(--bb-radius);
    -webkit-tap-highlight-color: transparent;
}

.binb__ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.binb__ic .binb__fill { fill: currentColor; stroke: none; }

/* --- Сцена --- */
.binb__stage { position: relative; max-width: 560px; margin: 0 auto; }
.binb__orbs { display: block; width: 100%; height: auto; }
.binb__st-l0 { stop-color: var(--bb-left-0); }
.binb__st-l1 { stop-color: var(--bb-left-1); }
.binb__st-r0 { stop-color: var(--bb-right-0); }
.binb__st-r1 { stop-color: var(--bb-right-1); }
.binb__orb { transform-box: fill-box; transform-origin: center; opacity: .55; transition: opacity .6s; }
.binb[data-playing="1"] .binb__orb { opacity: 1; animation: binb-breath var(--binb-breath) ease-in-out infinite; }
.binb[data-playing="1"] .binb__orb--r { animation-delay: calc(var(--binb-breath) / -2); }
@keyframes binb-breath {
    0%, 100% { transform: scale(.94); }
    50% { transform: scale(1.04); }
}

.binb__ear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24%;
    text-align: center;
}
.binb__ear--l { left: 4%; }
.binb__ear--r { right: 4%; }
.binb__ear-name { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.binb__ear--l .binb__ear-name { color: var(--bb-left); }
.binb__ear--r .binb__ear-name { color: var(--bb-right); }
.binb__ear-hz { font-size: 15px; color: var(--bb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.binb__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.binb__beat { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.binb__unit { margin-left: 4px; font-size: 18px; font-weight: 600; color: var(--bb-muted); }
.binb__band { margin-top: 4px; font-size: 14px; color: var(--bb-muted); white-space: nowrap; }

.binb__phones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--bb-muted);
    text-align: center;
}

/* --- Режимы --- */
.binb__presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.binb__preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 6px;
    border-radius: var(--bb-btn-radius);
    border: 1px solid var(--bb-border);
    background: var(--bb-panel);
    color: var(--bb-ink);
    min-width: 0;
}
.binb__preset-name { font-size: 15px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.binb__preset-hz { font-size: 12.5px; color: var(--bb-muted); font-variant-numeric: tabular-nums; }
.binb__preset.is-on { border-color: var(--bb-accent); background: rgba(143, 155, 255, .2); }
@media (hover: hover) { .binb__preset:hover { border-color: var(--bb-accent); color: var(--bb-ink); } }

/* --- Пуск --- */
.binb__play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    margin: 16px auto 0;
    border-radius: var(--bb-btn-radius);
    border: 0;
    background: linear-gradient(90deg, var(--bb-left), var(--bb-right));
    color: var(--bb-accent-ink);
    font-size: 18px;
    font-weight: 700;
}
.binb__play:hover, .binb__play:focus-visible { color: var(--bb-accent-ink); filter: brightness(1.06); }
.binb__ic-stop { display: none; }
.binb[data-playing="1"] .binb__ic-play { display: none; }
.binb[data-playing="1"] .binb__ic-stop { display: block; }

/* --- Настройки --- */
.binb__card {
    margin-top: 16px;
    padding: 6px 14px;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    background: var(--bb-panel);
}
.binb__row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 84px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0;
}
.binb__row + .binb__row { border-top: 1px solid rgba(255, 255, 255, .08); }
.binb__lbl { margin: 0; font-size: 14.5px; color: var(--bb-muted); }
.binb__val { font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.binb__track { display: flex; min-width: 0; }
.binb__row--seg { grid-template-columns: 130px auto minmax(0, 1fr); }
.binb__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.binb__seg-btn {
    padding: 5px 11px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--bb-border);
    background: transparent;
    color: var(--bb-ink);
}
.binb__seg-btn[aria-pressed="true"] { background: var(--bb-panel-2); border-color: var(--bb-accent); }
@media (hover: hover) { .binb__seg-btn:hover { border-color: var(--bb-accent); color: var(--bb-ink); } }
.binb__left { font-size: 14px; color: var(--bb-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.binb[data-noise="off"] .binb__track--noise { visibility: hidden; }

/* Ползунки: дорожка и заливка по --p */
.binb__range { width: 100%; height: 22px; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.binb__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--bb-accent) calc(var(--p, 0) * 100%), var(--bb-track) calc(var(--p, 0) * 100%));
}
.binb__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bb-track); }
.binb__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--bb-accent); }
.binb__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
    background: var(--bb-ink); border: 0; box-shadow: 0 0 0 4px rgba(143, 155, 255, .25);
}
.binb__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bb-ink); border: 0; }

/* --- Узко --- */
@container binb (max-width: 560px) {
    .binb__beat { font-size: 34px; }
    .binb__unit { font-size: 15px; }
    .binb__band { font-size: 12.5px; }
    .binb__ear-name { font-size: 11.5px; }
    .binb__ear-hz { font-size: 12.5px; }
    .binb__ear--l { left: 0; }
    .binb__ear--r { right: 0; }
    .binb__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .binb__preset-name { font-size: 14px; }
    .binb__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
    .binb__row .binb__track { grid-column: 1 / -1; grid-row: 2; }
    .binb__row--seg { grid-template-columns: minmax(0, 1fr) auto; }
    .binb__row--seg .binb__seg { grid-column: 1 / -1; grid-row: 2; }
    .binb__row--seg .binb__track--noise { grid-column: 1 / -1; grid-row: 3; }
    .binb__row--seg .binb__left { grid-column: 2; grid-row: 1; }
    .binb__card { padding: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .binb[data-playing="1"] .binb__orb { animation: none; }
}