.visual-lab{--viz-gold:#b3873a;--viz-silver:#60646c;--viz-quiet:#d3d6db;--viz-ink:var(--color-fd-foreground);--viz-muted:var(--color-fd-muted-foreground);--viz-line:var(--color-fd-border);--viz-surface:var(--color-fd-background);gap:clamp(5rem,11vw,9rem);width:min(1040px,100%);margin-inline:auto;padding:clamp(2.5rem,7vw,6rem) clamp(1.1rem,4vw,3rem) 9rem;display:grid}.dark .visual-lab{--viz-gold:#d8b676;--viz-silver:#8a8f98;--viz-quiet:#33363d}.visual-lab code{font-family:var(--font-mono,ui-monospace, monospace);font-size:.86em}.viz-arabic{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:300;line-height:1.5}.lab-intro h1{letter-spacing:-.04em;max-width:16ch;font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:500;line-height:1.12}.lab-intro p{margin-top:1.2rem}.lab-intro p,.viz-head p,.viz-note{max-width:34rem;color:var(--viz-muted);line-height:1.65}.viz{gap:clamp(1.8rem,4vw,2.8rem);min-width:0;display:grid}.viz-head h2{letter-spacing:-.03em;margin-bottom:.5rem;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;line-height:1.25}.viz-stage{border:1px solid var(--viz-line);background:var(--viz-surface);border-radius:1.1rem;min-width:0;padding:clamp(1.1rem,3vw,2.2rem)}.viz-note{max-width:40rem;font-size:.8rem}.viz-scroll{overflow-x:auto}.viz-scroll svg{width:100%;min-width:620px;height:auto;display:block}.viz-pills{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.viz-pills button{border:1px solid var(--viz-line);color:var(--viz-muted);border-radius:999px;padding:.3rem .85rem;font-size:.82rem;transition:color .18s,border-color .18s,background-color .18s}.viz-pills button:hover,.viz-pills button[aria-pressed=true]{color:var(--viz-ink);border-color:color-mix(in srgb, var(--viz-ink) 28%, transparent)}.viz-pills button[aria-pressed=true]{background:var(--marqoom-selected)}.viz-pills span{color:var(--viz-muted);padding-inline-start:.3rem;font-size:.82rem}.spell{gap:1.8rem;display:grid}.spell-stage{position:relative}.spell-scene{animation:.7s both viz-appear}.spell-scene svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.spell-scene path{fill:none;stroke-linecap:round}.spell-far{stop-color:var(--viz-silver);stop-opacity:.28}.spell-near{stop-color:var(--viz-gold)}.spell-pulse path{stroke:var(--viz-gold);stroke-width:2px;stroke-dasharray:9 91;stroke-dashoffset:9px;animation:2.6s linear infinite spell-flow}.spell-trunk{stroke:var(--viz-gold);stroke-width:2.5px}.spell-alias{text-align:end;text-overflow:ellipsis;white-space:nowrap;color:var(--viz-muted);position:absolute;left:0;overflow:hidden;transform:translateY(-50%)}.spell-name{justify-items:start;gap:.2rem;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.spell-name code{font-size:1rem}.spell-name>*{white-space:nowrap}.map{gap:2rem;display:grid}.map svg{cursor:pointer}.map-web line{stroke:var(--viz-ink);stroke-opacity:.06}.map-ties path{fill:none;stroke:var(--viz-gold);stroke-linecap:round;stroke-dasharray:1;animation:viz-draw .52s var(--marqoom-ease) both}.map-mark{fill:none;stroke:var(--viz-gold)}.map-node{fill:var(--viz-silver);opacity:.62;transition:opacity .2s}.map-node[data-state]{fill:var(--viz-gold);opacity:1}.map svg[data-searching] .map-node:not([data-found],[data-state=active]){fill:var(--viz-silver);opacity:.2}.map svg[data-searching] .map-node[data-found]{fill:var(--viz-gold);opacity:1}.map-search{gap:.7rem;display:grid}.map-search input{border:1px solid var(--viz-line);background:var(--color-fd-card);width:100%;color:var(--viz-ink);border-radius:999px;padding:.6rem 1.1rem;font-size:.92rem}.map-search input::placeholder{color:var(--viz-muted)}.map-search p{color:var(--viz-muted);flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.82rem;display:flex}.map-search a{border:1px solid var(--viz-line);color:var(--viz-muted);border-radius:999px;padding:.3rem .85rem;transition:color .18s,border-color .18s}.map-search a:is(:hover,:focus-visible){color:var(--viz-ink);border-color:color-mix(in srgb, var(--viz-ink) 28%, transparent)}.map-search a code{color:var(--viz-gold)}.map-label,.chain text{fill:var(--viz-muted);font-size:12.5px}.map-label,.map-here{text-anchor:middle}.map-here{fill:var(--viz-ink);stroke:var(--viz-surface);stroke-width:4px;paint-order:stroke;pointer-events:none;font-size:13px;font-weight:500}.map a:hover .map-label{fill:var(--viz-ink)}.map-entry{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.6rem clamp(1.5rem,4vw,3.5rem);min-height:10.5rem;display:grid}.map-entry>div{gap:.55rem;max-width:36rem;padding-top:.9rem;display:grid}.map-entry p{color:var(--viz-muted);line-height:1.65}.map-name{flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;display:flex}.map-name strong,.counts-surah strong,.chain-entry strong{color:var(--viz-ink);font-size:1.2rem;font-weight:500}.map-entry a{color:var(--viz-ink);text-decoration:underline;-webkit-text-decoration-color:var(--viz-line);text-decoration-color:var(--viz-line);text-underline-offset:4px;transition:text-decoration-color .16s}.map-entry a:hover{-webkit-text-decoration-color:var(--viz-gold);text-decoration-color:var(--viz-gold)}.map-entry a{justify-self:start;font-size:.9rem}.counts{gap:2rem;display:grid}.counts-bars{cursor:crosshair;touch-action:pan-y;outline-offset:8px;grid-template-columns:repeat(114,minmax(0,1fr));column-gap:clamp(1px,.18vw,2px);height:11rem;padding-top:1.6rem;display:grid}.counts-bars i{font-style:normal;position:relative}.counts-bars i:after{content:"";inset-inline:0;height:calc(var(--share) * 100%);background:var(--viz-gold);border-radius:3px 3px 0 0;position:absolute;bottom:0}.counts-bars i[data-same]:after{background:var(--viz-quiet);border-radius:0;height:2px}.counts-bars i[data-active]:before{content:"";inset-block:-1.6rem 0;background:color-mix(in srgb, var(--viz-ink) 32%, transparent);width:1px;position:absolute;left:50%}.counts-bars i[data-active]:after{background:var(--viz-ink)}.counts-bars b{bottom:calc(var(--share) * 100% + 5px);white-space:nowrap;color:var(--viz-muted);font-size:.72rem;font-weight:400;position:absolute;left:50%;transform:translate(-50%)}.counts-axis{border-top:1px solid var(--viz-line);height:1.6rem;color:var(--viz-muted);font-size:.72rem;position:relative}.counts-axis span{top:.45rem;left:calc((var(--n) - .5) / 114 * 100%);position:absolute;transform:translate(-50%)}.counts-axis span:first-child{left:0;transform:none}.counts-axis span:last-child{left:100%;transform:translate(-100%)}.counts-surah{color:var(--viz-muted);flex-wrap:wrap;align-items:center;gap:.4rem clamp(1.2rem,3vw,2.2rem);display:flex}.counts-surah .viz-arabic{color:var(--viz-ink)}.counts-surah>span:last-child{gap:.15rem;display:grid}.counts-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;display:grid}.counts-tiles>div{border:1px solid var(--viz-line);background:var(--color-fd-card);border-radius:.8rem;gap:.35rem;padding:1rem 1.05rem 1.1rem;display:grid}.counts-tiles span,.counts-tiles small{color:var(--viz-muted);font-size:.78rem}.counts-tiles strong{letter-spacing:-.03em;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:300;line-height:1.15}.counts-tiles i{width:calc(var(--share) * 100%);background:var(--viz-gold);height:2px;transition:width .32s var(--marqoom-ease)}.chain{grid-template-columns:minmax(0,1.75fr) minmax(15rem,1fr);align-items:center;gap:2rem clamp(1.5rem,4vw,3.5rem);display:grid}.chain svg{width:100%;height:auto}.chain path{fill:none;stroke-linecap:round}.chain-ring{fill:none;stroke:var(--viz-line)}.chain-link path{stroke:var(--viz-quiet);stroke-width:1.25px}.chain .chain-hit{fill:#0000;stroke:#0000;stroke-width:16px}.chain .chain-live{pointer-events:none;stroke:var(--viz-gold);stroke-width:2px;stroke-dasharray:1;animation:viz-draw .52s var(--marqoom-ease) both}.chain circle:not(.chain-hit,.chain-ring){fill:var(--viz-silver);stroke:var(--viz-surface);stroke-width:2px;transition:fill .2s}.chain [data-active] circle:not(.chain-hit){fill:var(--viz-gold)}.chain [data-active] text{fill:var(--viz-ink);font-weight:500}.chain-entry{justify-items:start;gap:.5rem;display:grid}.chain-entry .viz-arabic{font-size:clamp(1.8rem,3.6vw,2.6rem)}.chain-entry p{max-width:22rem;color:var(--viz-muted);font-size:.88rem;line-height:1.65}.chain-code{flex-wrap:wrap;gap:.4rem;margin-block:.9rem .5rem;display:flex}.chain-code span{justify-items:center;gap:.35rem;display:grid}.chain-code code{border:1px solid var(--viz-line);background:var(--color-fd-card);border-radius:.5rem;padding:.3rem .7rem;font-size:.95rem}.chain-code small{color:var(--viz-muted);font-size:.72rem}@keyframes viz-appear{0%{opacity:0}}@keyframes viz-draw{0%{stroke-dashoffset:1px}}@keyframes spell-flow{to{stroke-dashoffset:-91px}}.spell-stage[data-narrow] .spell-name .viz-arabic{font-size:1.45rem}.spell-stage[data-narrow] .spell-name code{font-size:.85rem}.spell-stage[data-narrow] .spell-alias{font-size:.72rem}@media (max-width:560px){.chain text{font-size:18px}}@media (pointer:coarse){.chain-reader .chain-hit{r:30px}.chain-rawi .chain-hit{r:26px}}@media (max-width:820px){.chain,.map-entry{grid-template-columns:minmax(0,1fr)}.counts-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}