/* ===== Hero demo: subject tabs ===== */
#demoWrap{position:relative}
.dtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 14px;max-width:560px;position:relative;z-index:8}
.dtab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#e8ecff;font-weight:800;font-size:.76rem;letter-spacing:.02em;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s,color .25s;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dtab i{width:8px;height:8px;border-radius:50%;background:var(--c,#ffc266);flex:none}
.dtab:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.dtab.on{background:linear-gradient(135deg,#ffc266,#f59a1f);color:#241500;border-color:transparent;box-shadow:0 10px 26px rgba(245,154,31,.45)}
.dtab.on i{background:#241500}
.dtabs.lock .dtab:not(.on){opacity:.45;cursor:progress;pointer-events:none}
.dtab:focus-visible{outline:3px solid #ffc266;outline-offset:2px}

/* working area text styles used by the different subjects */
.ddiag text.big{font-size:20px}
.ddiag text.sm{font-size:12px}
.ddiag .rd{stroke:#d63a47;fill:#d63a47}
.ddiag line.rd{fill:none}
.ddiag .tl{stroke:#0a9a8b;fill:#0a9a8b}
.ddiag path.tl{fill:none}
.ddiag text.rd,.ddiag text.tl{stroke:none}

/* a little more room now that the tabs sit above the sheet */
#demo{margin-top:0}
@media(max-width:640px){.dtabs{gap:6px;margin-bottom:10px}.dtab{padding:7px 11px;font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.dtab{transition:none}}