/* Account Brains demo. A ledger of twenty names, a night clock, signals and a brief. */
.ab-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(1.2rem,2.4vw,2.6rem)}
.ab-grid li {position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;min-width:0;padding:.62rem 0 .58rem;border-top:1px solid var(--rule)}
.ab-grid li::before {content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--oxide);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.ab-grid li.is-current::before {transform:scaleX(1)}
.ab-name {min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 clamp(1.05rem,1.4vw,1.4rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:.004em;color:var(--ink);transition:color .3s,opacity .45s}
button.ab-name {padding:0;background:none;border:0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule);text-underline-offset:.3em}
button.ab-name:hover {color:var(--oxide)}
button.ab-name:focus-visible,.ab-cite:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}
.ab-st {flex:none;font-size:.75rem;line-height:1;color:var(--ink-2);opacity:.75;font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-st.is-new {color:var(--oxide);opacity:1}
.ab-grid li.is-wait .ab-name {opacity:.34}
.ab-grid li.is-scan .ab-name,.ab-grid li.is-current .ab-name {color:var(--oxide);opacity:1}
.ab-grid li.is-current button.ab-name {text-decoration-color:transparent}

.ab-run {display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;padding-top:.95rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-2)}
.ab-clock {font:300 clamp(1.6rem,2.2vw,2.1rem)/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}

.ab-stage {position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr;column-gap:clamp(4rem,8vw,9rem);align-items:start;margin-top:clamp(3rem,5.5vw,5rem);transition:opacity .45s var(--ease)}
.ab-stage.is-resting {opacity:.26}
.ab-stage.is-leaving {opacity:0}
.ab-head {grid-column:1;grid-row:1;margin-bottom:clamp(1.6rem,2.8vw,2.4rem)}
.ab-signals {grid-column:1;grid-row:2}
.ab-brief {grid-column:2;grid-row:1/span 2;padding-top:.35rem}
.ab-acc {min-height:.95em;font:300 clamp(2.8rem,5.2vw,5.4rem)/.95 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.008em;color:var(--ink)}
.ab-about {min-height:1.6em;margin-top:.85rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

.ab-signals {list-style:none;margin:0;padding:0}
.ab-sig {display:grid;grid-template-columns:1.3rem 3.4rem minmax(0,1fr);align-items:baseline;padding:.85rem 0 .95rem;border-top:1px solid var(--rule);outline:none}
.ab-sig .ab-n {font-weight:500;color:var(--oxide);font-variant-numeric:tabular-nums}
.ab-sig time {font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ab-sig-t {font-size:.9375rem;line-height:1.5;color:var(--ink);transition:color .3s}
.ab-src {grid-column:3;margin-top:.3rem;font-size:.8125rem;color:var(--ink-2);transition:color .3s}
.ab-sig.is-focus .ab-sig-t,.ab-sig:target .ab-sig-t {color:var(--oxide)}
.ab-sig.is-focus .ab-src {color:var(--ink)}
.ab-trace {padding:.95rem 0 .95rem 4.7rem;border-top:1px solid var(--rule);font:400 .6875rem/1.5 'Martian Mono',ui-monospace,monospace;color:var(--ink-2);animation:ab-in .35s var(--ease) both}
.ab-trace::after {content:'';display:inline-block;width:.5em;height:1px;margin-left:.5em;vertical-align:.3em;background:var(--oxide);animation:ab-blink .8s steps(1) infinite}
@keyframes ab-blink {50%{opacity:0}}

.ab-wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ab-wires path {fill:none;stroke:var(--oxide);stroke-width:1;opacity:.4;transition:stroke-dashoffset 1s var(--ease),opacity .3s}
.ab-wires circle {fill:var(--oxide);opacity:.6;transition:opacity .3s}
.ab-wires .is-focus {opacity:1}

.ab-brief {position:relative;z-index:1}
.ab-dl {margin:0}
.ab-row {padding:.85rem 0 1.05rem;border-top:1px solid var(--rule)}
.ab-row dt {margin-bottom:.4rem;font-size:.8125rem;color:var(--ink-2)}
.ab-row dd {margin:0;max-width:46ch;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.55;color:var(--ink)}
.ab-gap dd {color:var(--ink-2)}
.ab-open {padding-top:1.2rem}
.ab-open dd {max-width:30ch;font:400 clamp(1.45rem,2.3vw,2.15rem)/1.3 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.012em}
.ab-row sup {line-height:0}
.ab-cite {display:inline-block;padding:0 .12em 0 .1em;font:500 .74em/1 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--oxide);text-decoration:none;vertical-align:.42em;transition:color .3s,transform .3s var(--ease)}
.ab-cite:hover,.ab-cite.is-focus {color:var(--ink);transform:translateY(-1px)}

.ab-w {display:inline-block;animation:ab-word .6s var(--ease) both}
.is-arriving {animation:ab-in .55s var(--ease) both}
@keyframes ab-word {from{opacity:0;filter:blur(5px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}
@keyframes ab-in {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ab-grid .ab-st.is-arriving {animation-duration:.4s}

@media(max-width:900px){
 .ab-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
 .ab-stage {grid-template-columns:1fr}
 .ab-head,.ab-signals,.ab-brief {grid-column:1;grid-row:auto}
 .ab-brief {padding-top:0}
 .ab-wires {display:none}
 .ab-signals {margin-bottom:2.2rem}
}
@media(max-width:620px){
 .ab-grid {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.1rem}
 .ab-grid li {padding:.5rem 0 .48rem}
 .ab-name {font-size:1rem}
 .ab-trace {padding-left:0}
}
@media(max-width:620px){
 .ab-grid {display:flex;flex-wrap:wrap;gap:.2rem 1rem;padding-top:.8rem;border-top:1px solid var(--rule)}
 .ab-grid li {display:inline-flex;gap:.3rem;padding:.15rem 0;border:0}
 .ab-grid li::before {top:auto;bottom:0}
 .ab-st:not(.is-new) {display:none}
 .ab-run {margin-top:.9rem}
}
/* Reserve the tallest brief so the page below does not move while one is written. */
.ab-stage {min-height:46rem}
@media(max-width:900px){.ab-stage {min-height:70rem}}
@media(max-width:620px){.ab-stage {min-height:76rem}}
@media(max-width:420px){.ab-stage {min-height:85rem}}