/* Avlory Engine /engine/sound: the chapter demos. Scoped to main.xp.eg; shared parts are in engine-core.css. */
.eg .demo2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:900px){.eg .demo2{grid-template-columns:1fr}}
.eg .demo-view{padding:20px;display:grid;gap:10px;place-items:center;align-content:center;background:radial-gradient(80% 80% at 50% 40%,#25252c,#121215);min-width:0}
.eg .demo-view > .note{text-align:center;max-width:56ch}
.eg .demo-view.report{place-items:stretch;align-content:start;background:var(--card-2)}
.eg .demo-view.report > .note{text-align:left;max-width:none}
.eg .demo-side{padding:20px;display:grid;gap:12px;align-content:start;border-left:1px solid var(--border);min-width:0}
@media (max-width:900px){.eg .demo-side{border-left:0;border-top:1px solid var(--border)}}
.eg .btnrow{display:flex;gap:8px;flex-wrap:wrap}
.eg .rng{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.eg .rng > span{display:flex;justify-content:space-between;gap:8px}
.eg .rng b{color:var(--text);font-weight:600}
.eg input[type=range]{width:100%;accent-color:var(--acc);min-height:24px}
.eg input[type=checkbox]{accent-color:var(--acc);width:18px;height:18px}
.eg .seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--text)}
.eg .seg.wrapseg{flex-wrap:wrap;border-radius:18px;overflow:visible}
.eg .conv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px}
.eg .conv dt{color:var(--faint)}
.eg .conv dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.eg .rp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.eg .fld{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.eg .fld .opt{color:var(--faint)}
.eg .inp{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--border-strong);border-radius:12px;padding:0 12px}
.eg .inp input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:600 15px var(--f-body);padding:10px 0}
.eg #so-isrc{font:600 15px var(--f-mono);letter-spacing:.02em;text-transform:uppercase}
.eg .inp input:focus-visible{outline:none}
.eg .inp:focus-within{outline:2px solid var(--acc);outline-offset:1px}
.eg .inp:has([aria-invalid="true"]){border-color:var(--danger)}
.eg .hist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.eg .hist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:var(--surface-1);min-height:32px}
.eg .hist li span{font:500 11px var(--f-mono);color:var(--faint)}
.eg .hist li.undone{opacity:.55}
.eg .hist li.empty{background:none;color:var(--faint);padding-left:0}
.eg .hist li .btn.sm{min-height:32px;padding:4px 10px}
.eg .gr{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.eg .gr li{display:grid;grid-template-columns:40px 1fr;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--surface-1)}
.eg .gr li i{font:700 10.5px/1.6 var(--f-body);font-style:normal;text-transform:uppercase;letter-spacing:.06em;grid-row:span 2}
.eg .gr li i.pass{color:var(--ok)}
.eg .gr li i.warn{color:var(--warn)}
.eg .gr li i.fail{color:var(--danger)}
.eg .gr li span{color:var(--text)}
.eg .gr li small{color:var(--muted);font-size:12px}

/* real recordings: native players, one card per clip; [data-ab] groups switch between clips of the same bars */
.eg .clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.eg .clips{grid-template-columns:1fr}}
.eg .clip{margin:0;display:grid;gap:10px;align-content:start;padding:16px;border-radius:18px;border:1px solid var(--border);background:var(--card);min-width:0}
.eg .clip[hidden],.eg .seg[hidden]{display:none}
.eg .clip-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.eg .clip-top b{font:700 16px var(--f-display)}
.eg .clip-top .mono{font-size:12px;color:var(--muted)}
.eg .clip audio{display:block;width:100%;min-height:40px;color-scheme:dark}
.eg .clip figcaption{font-size:13px;line-height:1.55;color:var(--muted)}
.eg .ab{padding:20px;display:grid;gap:12px}
.eg .ab .clip{background:var(--card-2)}
.eg .ab > .note{margin:0}

/* 05 files: the wide table scrolls inside its own box on a phone */
.eg table.t.wide{min-width:1080px}
.eg table.t.wide th:nth-child(2){min-width:260px}
.eg table.t.wide th:first-child{min-width:120px}
.eg table.t tr.grp td{font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:var(--surface-1);padding-top:10px;padding-bottom:10px}
.eg table.t td .chip{white-space:nowrap}

/* 07 release */
.eg .pkg{display:grid;gap:6px;margin-top:4px}
.eg .pk{display:grid;gap:2px;padding:10px 12px;border-radius:10px;border:1px dashed var(--border-strong);font-size:13px}
.eg .pk b{font-weight:600}
.eg .pk span{color:var(--muted);font-size:12.5px}
.eg .pk.ok{border-style:solid;border-color:color-mix(in srgb,var(--ok) 55%,transparent)}

/* 08 samples */
.eg .smp{display:grid;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface-1)}
.eg .smp-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eg .smp-top .chip{color:var(--acc)}
.eg .steps-log,.eg ol.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13px;color:var(--text)}
.eg ol.steps:empty{display:none}
.eg .split{display:grid;gap:8px}
.eg .split .bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06)}
.eg .split .bar i{display:block;flex:1 1 0;transform-origin:left}
.eg .split .bar i:first-child{background:color-mix(in srgb,var(--acc) 45%,transparent)}
.eg .split .bar i:last-child{background:var(--acc)}
.eg .split .bar{position:relative}
.eg .split .bar i{position:absolute;inset:0}
.eg .split .bar i:last-child{transform-origin:right}

/* 09 together */
.eg .who{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.eg .av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 11px var(--f-body);font-style:normal;color:#111}
.eg .av.you{background:var(--acc)}
.eg .av.maya{background:var(--c-blue);margin-left:6px}
.eg .tfader{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.eg .tf-track{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.07)}
.eg .tf-fill{position:absolute;inset:0;border-radius:6px;background:var(--acc);transform-origin:left;transform:scaleX(.6)}
.eg .tf-mark{position:absolute;top:-5px;width:4px;height:22px;margin-left:-2px;border-radius:2px;background:var(--c-blue)}
.eg .clipsv{display:grid;gap:6px}
.eg .clipsv .cl{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--border-strong);font-size:12.5px}
.eg .clipsv .cl span{color:var(--muted)}

/* diagrams in place of screens */
.eg .shot svg.diagram{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--border);background:var(--card-2)}
.eg .dg rect{fill:var(--surface-1);stroke:var(--border-strong);stroke-width:1.2}
.eg .dg rect.hot{stroke:var(--acc);fill:color-mix(in srgb,var(--acc) 10%,transparent)}
.eg .dg text{font:600 15px var(--f-body);fill:var(--text)}
.eg .dg text.s{font:500 12.5px var(--f-body);fill:var(--muted)}
.eg .dg path{fill:none;stroke:var(--muted);stroke-width:1.5}
.eg .dg path.hd{fill:var(--muted);stroke:none}