/* viewer.css: styles for alpha-viewer.js (every class starts with "ab-"; colours are variables, light and dark). */
:root,.ab{--ab-bg:#f6f3ee;--ab-card:#fffdf9;--ab-ink:#1e2a38;--ab-muted:#5f6b78;--ab-line:#d9d2c5;--ab-accent:#2457c5;--ab-done:#1f7a5a;--ab-warn:#f3dfb0;
}
.ab{color:var(--ab-ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root,.ab{--ab-bg:#0e1424;--ab-card:#151d33;--ab-ink:#eef0f4;--ab-muted:#a7afbd;--ab-line:#2b3553;--ab-accent:#8fb2ff;--ab-done:#5fc79c;--ab-warn:#5a4a1f}}
.ab-page{max-width:820px;margin:0 auto;padding:20px 16px 60px;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}.ab-page h1{font-size:1.6rem;letter-spacing:-.01em;margin:.2em 0}
body:has(.ab-page){margin:0;background:#f6f3ee}
@media (prefers-color-scheme:dark){body:has(.ab-page){background:#0e1424;color:#eef0f4}}
.ab-info,.ab-help{color:var(--ab-muted);font-size:.9rem;margin:6px 0}
.ab-key{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ab-sw{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--ab-line);border-radius:999px;background:var(--ab-card);color:var(--ab-ink);font:inherit;font-size:.85rem;cursor:pointer}
.ab-sw small{color:var(--ab-muted)}.ab-sw[aria-pressed=true]{border-color:var(--ab-accent);box-shadow:0 0 0 2px var(--ab-accent) inset}
.ab-dot{display:inline-block;width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.3);vertical-align:-2px}
.ab-warn p{margin:6px 0;padding:7px 10px;border-radius:10px;font-size:.88rem}.ab-ok{background:rgba(31,122,90,.13)}.ab-w{background:var(--ab-warn)}
.ab-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.ab-prog{display:flex;align-items:center;gap:10px;flex:1;min-width:220px;font-size:.88rem;color:var(--ab-muted)}
.ab-prog i{flex:1;height:6px;background:var(--ab-line);border-radius:3px;overflow:hidden}.ab-prog b{display:block;height:100%;width:0;background:var(--ab-done);transition:width .3s}
.ab-tools,.ab-simctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ab-btn{padding:6px 14px;border:1px solid var(--ab-accent);border-radius:999px;background:var(--ab-accent);color:#fff;font:inherit;font-size:.9rem;cursor:pointer}
.ab-ghost{background:transparent;color:var(--ab-accent)}.ab-btn[aria-pressed=true]{box-shadow:0 0 0 3px rgba(36,87,197,.3)}
.ab-link{border:0;background:none;color:var(--ab-accent);font:inherit;cursor:pointer;padding:0}
.ab [hidden]{display:none!important}
.ab-sim{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:center;background:var(--ab-card);border:1px solid var(--ab-line);border-radius:14px;padding:10px 12px;margin:8px 0}
@media(max-width:520px){.ab-sim{grid-template-columns:84px minmax(0,1fr)}.ab-keys{display:none}}
@media(min-width:900px){.ab-sim{position:sticky;top:8px;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.08)}}
.ab-hitch{width:100%;height:auto}.ab-hitch .ab-base{stroke:#9aa3ae;stroke-width:7;stroke-linecap:round}
.ab-lead,.ab-lead-o,.ab-front{fill:none;stroke-linecap:round;stroke-linejoin:round}.ab-lead,.ab-front{stroke-width:6}.ab-lead-o{stroke-width:8.5}
.ab-arrow{fill:none;stroke:var(--ab-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ab-bl{font-size:10px;fill:var(--ab-muted);text-anchor:middle}
.ab-hitch.ab-go .ab-lead,.ab-hitch.ab-go .ab-lead-o{stroke-dasharray:1;animation:ab-draw .7s cubic-bezier(.65,0,.35,1) both}
.ab-hitch.ab-go .ab-front{animation:ab-fade .7s steps(1,end) both}
@keyframes ab-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes ab-fade{from{opacity:0}to{opacity:1}}
.ab-simbody p{margin:0 0 4px}.ab-now{font-size:.95rem;line-height:1.45}.ab-next,.ab-keys,.ab-count{color:var(--ab-muted);font-size:.86rem}.ab-keys{font-size:.78rem}
.ab-cue{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#d9a441;color:#1e2a38;font-size:.78rem;font-weight:700}
.ab-rb{min-width:36px;height:34px;border:1px solid var(--ab-line);border-radius:999px;background:var(--ab-card);color:var(--ab-ink);font:inherit;cursor:pointer}
.ab-play{min-width:72px;background:var(--ab-accent);border-color:var(--ab-accent);color:#fff;font-weight:600}
.ab-scrub{flex:1;min-width:120px}.ab-count{min-width:72px}.ab-auto{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--ab-muted)}
.ab-chart{background:var(--ab-card);border-radius:16px;padding:8px;max-height:78vh;overflow:auto}
.ab-svg{width:100%;height:auto;display:block}
.ab-str{stroke:var(--ab-muted);stroke-width:2;stroke-linecap:round;opacity:.35}.ab-sn{font-size:9px;fill:var(--ab-muted)}
.ab-n{font-size:12px;fill:var(--ab-muted)}.ab-hit{fill:transparent;cursor:pointer}
.ab-k{cursor:pointer}.ab-k ellipse{stroke:rgba(0,0,0,.35);stroke-width:1;transition:transform .25s cubic-bezier(.27,.1,.17,1.5),opacity .2s;transform-box:fill-box;transform-origin:center}
.ab-k use{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:.75}
.ab-k:hover ellipse{transform:scale(1.22)}
.ab-focus .ab-k{opacity:.15}.ab-focus .ab-k.ab-on{opacity:1}
.ab-row.ab-done .ab-k{opacity:.35}.ab-row.ab-done .ab-n{fill:var(--ab-done);font-weight:700}
.ab-simmode .ab-k.ab-future{opacity:.12}.ab-simmode .ab-row.ab-done .ab-k:not(.ab-future){opacity:1}.ab-simmode .ab-k.ab-now ellipse{transform:scale(1.15)}
.ab-ring{fill:none;stroke:var(--ab-ink);stroke-width:3;pointer-events:none}
.ab-trail{pointer-events:none}.ab-o{fill:none;stroke:#1e2a38;stroke-width:9;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.ab-c{fill:none;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}.ab-m{stroke:#1e2a38;stroke-width:2}
.ab-lbl{font-size:11px;font-weight:700;fill:var(--ab-ink);text-anchor:middle}
.ab-tip{position:fixed;z-index:50;pointer-events:none;background:#1e2a38;color:#f4f1ea;padding:6px 10px;border-radius:8px;font:13px/1.4 system-ui,sans-serif;opacity:0;transition:opacity .15s}
@media (prefers-reduced-motion:reduce){.ab-k ellipse,.ab-prog b{transition:none}.ab-hitch.ab-go .ab-lead,.ab-hitch.ab-go .ab-lead-o,.ab-hitch.ab-go .ab-front{animation:none}}
@media print{.ab-bar,.ab-sim,.ab-tip{display:none!important}.ab-chart{max-height:none;overflow:visible}}